:root {
    --wos-surface: #ffffff;
    --wos-ink: #172033;
    --wos-muted: #64748b;
    --wos-line: rgba(30, 30, 70, .14);
    --wos-primary: #1e1e46;
    --wos-accent: #4f76df;
    --wos-radius: 22px;
}

body.wos-modal-open { overflow: hidden !important; }

.wos-public-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
}

.wos-public-identity p,
.wos-public-identity strong,
.wos-public-identity small { display: block; margin: 0; }
.wos-public-identity p { color: rgba(255, 255, 255, .58); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wos-public-identity strong { margin-top: .18rem; color: #fff; }
.wos-public-identity small { margin-top: .2rem; color: rgba(255, 255, 255, .68); }
.wos-public-identity button {
    min-height: 42px;
    padding: .65rem .9rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 11px;
    color: #fff;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.wos-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(4, 8, 24, .76);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.wos-dialog {
    width: min(840px, 100%);
    max-height: min(900px, 92vh);
    max-height: min(900px, 92dvh);
    overflow: auto;
    color: var(--wos-ink);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--wos-radius);
    background: var(--wos-surface);
    box-shadow: 0 32px 100px rgba(0, 0, 0, .35);
}

.wos-dialog-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, #151532, #273b77);
}
.wos-dialog-header h2,
.wos-dialog-header p { margin: 0; }
.wos-dialog-header h2 { font-size: clamp(1.3rem, 4vw, 2rem); }
.wos-dialog-header > div > p:last-child { margin-top: .15rem; color: rgba(255, 255, 255, .72); }
.wos-eyebrow { color: #aecaee !important; font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.wos-product-mark { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 16px; background: rgba(255,255,255,.1); }
.wos-product-mark span { font-weight: 900; line-height: 1; }
.wos-product-mark small { font-size: .55rem; letter-spacing: .12em; }
.wos-dialog-close { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; color: #fff; background: rgba(255,255,255,.08); font-size: 1.6rem; cursor: pointer; }

.wos-dialog-body { display: grid; gap: 1.25rem; padding: 1.25rem; }
.wos-intro { margin: 0; color: var(--wos-muted); line-height: 1.7; }
.wos-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 0; }
.wos-spec-grid > div { padding: .85rem; border: 1px solid var(--wos-line); border-radius: 14px; background: #f8fafc; }
.wos-spec-grid dt { color: var(--wos-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wos-spec-grid dd { margin: .3rem 0 0; font-weight: 750; overflow-wrap: anywhere; }
.wos-dialog-section { padding: 1rem; border: 1px solid var(--wos-line); border-radius: 16px; }
.wos-dialog-section h3 { margin: 0 0 .55rem; font-size: 1rem; }
.wos-dialog-section p,
.wos-dialog-section ul { margin: 0; color: var(--wos-muted); line-height: 1.65; }
.wos-dialog-section ul { padding-left: 1.2rem; }
.wos-dialog-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.wos-dialog-actions a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: .7rem 1rem; border-radius: 12px; color: #fff; background: var(--wos-primary); font-size: .78rem; font-weight: 850; text-decoration: none; }
.wos-dialog-footer { display: grid; gap: .25rem; padding: 1rem 1.25rem 1.25rem; color: var(--wos-muted); border-top: 1px solid var(--wos-line); font-size: .8rem; }
.wos-dialog-footer strong { color: var(--wos-ink); }

.wos-system-card { display: grid; gap: 1rem; }
.wos-system-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.wos-system-card-grid div { padding: .75rem; border: 1px solid var(--admin-border, #e2e8f0); border-radius: 10px; }
.wos-system-card-grid small,
.wos-system-card-grid strong { display: block; }
.wos-system-card-grid small { color: var(--admin-text-muted, #64748b); }

body[data-admin-theme="dark"] .wos-dialog,
body[data-admin-theme="blue-solar"] .wos-dialog { --wos-surface: #10182b; --wos-ink: #eef4ff; --wos-muted: #aab9d0; --wos-line: rgba(190, 211, 245, .18); }
body[data-admin-theme="dark"] .wos-spec-grid > div,
body[data-admin-theme="blue-solar"] .wos-spec-grid > div { background: rgba(255, 255, 255, .04); }

@media (max-width: 640px) {
    .wos-modal-backdrop { align-items: end; padding: 0; }
    .wos-dialog { width: 100%; max-height: 96vh; max-height: 96dvh; border-radius: 22px 22px 0 0; }
    .wos-dialog-header { grid-template-columns: auto 1fr auto; padding: 1rem; }
    .wos-product-mark { width: 48px; height: 48px; border-radius: 13px; }
    .wos-spec-grid { grid-template-columns: 1fr; }
    .wos-public-identity { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .wos-dialog, .wos-modal-backdrop { animation: none !important; transition: none !important; }
}

/* Public storefront stabilization: compact cards, reliable embeds and quote dialogs. */
body.quote-modal-open { overflow: hidden; }

.featured-magazine {
    align-self: start !important;
    justify-self: stretch;
    height: auto !important;
    min-height: 0 !important;
}
.featured-magazine .cover-shell {
    display: grid !important;
    grid-template-columns: minmax(190px, .78fr) minmax(220px, 1fr) !important;
    width: min(100%, 780px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: center;
    gap: clamp(.9rem, 2vw, 1.35rem) !important;
    padding: clamp(.8rem, 2vw, 1.25rem) !important;
    border-radius: 24px !important;
    overflow: hidden;
}
.featured-magazine .magazine-product-media,
.featured-magazine .magazine-product-info { min-width: 0; min-height: 0; }
.featured-magazine .cover-click,
.featured-magazine .cover-click img {
    width: 100% !important;
    height: auto !important;
    max-height: 390px !important;
    object-fit: contain !important;
}
.featured-magazine .magazine-product-info p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
.featured-magazine .magazine-product-actions { grid-template-columns: minmax(150px, 1fr) !important; }
.featured-magazine .magazine-product-actions .btn { max-width: 260px; }

.quote-toolbar,
.quote-request-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    padding: .8rem;
    border: 1px solid color-mix(in srgb, var(--navy) 12%, transparent);
    border-radius: 16px;
    background: rgba(255,255,255,.62);
}
.quote-toolbar { margin-block: .85rem; }
.quote-request-bar { margin-top: .85rem; }
.quote-toolbar .microcopy,
.quote-request-bar .microcopy { margin: 0; }
.quote-services-button { display: inline-flex; align-items: center; gap: .5rem; letter-spacing: .08em; }
.quote-request-bar .btn:disabled { opacity: .48; cursor: not-allowed; filter: grayscale(.5); }

.quote-modal[hidden] { display: none !important; }
.quote-modal.is-open {
    display: grid !important;
    place-items: center;
    padding: clamp(.75rem, 3vw, 2rem);
}
.quote-modal .share-sheet {
    width: min(940px, 100%);
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    padding: clamp(1rem, 3vw, 1.6rem);
    overflow: auto;
    border-radius: 24px;
    background: color-mix(in srgb, var(--bone) 94%, white);
}
.quote-request-sheet { width: min(680px, 100%) !important; }
.quote-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1rem;
}
.quote-service-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: .8rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--navy) 12%, transparent);
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 12px 34px rgba(30,30,70,.07);
}
.quote-service-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(145deg, var(--navy), var(--sky-dark));
    font-size: 1.55rem;
    line-height: 1;
}
.quote-service-card h3 { margin: .25rem 0 .55rem; font-size: 1rem; }
.quote-service-card ul { display: grid; gap: .3rem; margin: 0; padding-left: 1.05rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.quote-service-tag { color: var(--sky-dark); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.quote-request-recap { padding: .75rem .9rem; border-radius: 12px; color: var(--navy); background: rgba(47,134,173,.11); font-weight: 750; }

.reader-embed-host {
    width: 100%;
    min-height: 300px !important;
    background: #080812 !important;
}
.reader-embed-host iframe,
.reader-embed-host video {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 340px !important;
    max-width: 100% !important;
    border: 0;
    background: #080812;
}
.reader-embed-host video { height: auto; object-fit: contain; }
.reader-embed-unavailable {
    display: grid;
    place-items: center;
    align-content: center;
    gap: .45rem;
    min-height: 300px;
    padding: 1.25rem;
    color: #fff;
    text-align: center;
}
.reader-embed-unavailable > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 999px; background: var(--sky-dark); font-size: 1.35rem; }
.reader-embed-unavailable p { margin: 0; color: rgba(255,255,255,.7); font-size: .8rem; }
.reader-embed-fallback {
    position: relative;
    z-index: 3;
    display: grid;
    gap: .45rem;
    width: 100%;
    padding: .8rem;
    color: #f8fafc;
    background: #101027;
    font-size: .72rem;
    line-height: 1.4;
}
.reader-embed-fallback strong { font-size: .82rem; }
.reader-embed-fallback span { color: rgba(255,255,255,.7); }
.reader-embed-fallback .btn { width: 100%; min-height: 40px; color: var(--navy); background: #fff; }
.phone-video-frame.embed-needs-fallback .reader-embed-host { opacity: .55; }
.phone-video-frame.embed-needs-fallback .reader-embed-fallback { box-shadow: 0 -12px 30px rgba(0,0,0,.22); }

.news-article-sheet,
.reader-dialog {
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 30px 90px rgba(10,18,38,.3);
}

@media (max-width: 760px) {
    .featured-magazine .cover-shell { grid-template-columns: minmax(0, 1fr) !important; width: min(100%, 430px) !important; }
    .featured-magazine .cover-click,
    .featured-magazine .cover-click img { max-height: min(52vh, 430px) !important; }
    .featured-magazine .magazine-product-actions .btn { max-width: none; }
    .quote-services-grid { grid-template-columns: minmax(0, 1fr); }
    .quote-service-card { grid-template-columns: 44px minmax(0, 1fr); padding: .85rem; }
    .quote-service-icon { width: 44px; height: 44px; font-size: 1.25rem; }
    .quote-request-bar .btn { width: 100%; }
}