/* vinosoft.shop theme showcase (/themes). Tokens mirror wwwroot/index.html. */
:root {
    --burgundy: #860143;
    --burgundy-dark: #6b0136;
    --cream: #faf7f4;
    --text-primary: #1a1a2e;
    --text-secondary: #555566;
    --text-muted: #8888a0;
    --border: #e8e4e0;
    --shadow-md: 0 4px 16px rgba(134, 1, 67, 0.08);
    --shadow-lg: 0 8px 32px rgba(134, 1, 67, 0.12);
    --bar-height: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--cream);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Shared */

.sc-logo { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--text-primary); }
.sc-logo svg { color: var(--burgundy); }
.sc-logo-text { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.sc-logo-text span { color: var(--text-muted); font-weight: 500; }

.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1.125rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 200ms ease, border-color 200ms ease;
}
.sc-btn--primary { background: var(--burgundy); color: #fff; }
.sc-btn--primary:hover { background: var(--burgundy-dark); }
.sc-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border); }
.sc-btn--ghost:hover, .sc-btn--ghost[aria-expanded="true"] { border-color: var(--burgundy); color: var(--burgundy); }
.sc-btn--block { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; }
.sc-btn:focus-visible, .sc-devices button:focus-visible, .sc-card:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }

/* List */

.sc-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid rgba(134, 1, 67, 0.06);
}

.sc-list { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem 6rem; }
.sc-list-header { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.sc-list-header h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.25rem, 5vw, 3.25rem); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1rem; }
.sc-list-header p, .sc-empty { color: var(--text-secondary); font-size: 1.125rem; }
.sc-empty { text-align: center; }

.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; }

.sc-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.sc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.sc-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--border); }
.sc-card-body { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem 1.5rem; }
.sc-card-body p { color: var(--text-secondary); font-size: 0.9375rem; }
.sc-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sc-card-title h2 { font-size: 1.25rem; font-weight: 700; }
.sc-price { font-weight: 600; color: var(--burgundy); white-space: nowrap; }
.sc-card-cta { margin-top: auto; padding-top: 0.5rem; font-weight: 600; font-size: 0.875rem; color: var(--burgundy); }

/* Preview */

.sc-preview-page { height: 100vh; overflow: hidden; background: #e9e5e1; }

.sc-bar {
    position: relative;
    z-index: 2;
    height: var(--bar-height);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
}
.sc-bar-start, .sc-bar-end { display: flex; align-items: center; gap: 1rem; }
.sc-bar-end { justify-content: flex-end; gap: 0.625rem; }
.sc-bar-back { color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; text-decoration: none; padding-left: 1rem; border-left: 1px solid var(--border); }
.sc-bar-back:hover { color: var(--burgundy); }
.sc-bar-title { display: flex; align-items: baseline; gap: 0.75rem; white-space: nowrap; }
.sc-bar-title strong { font-size: 1rem; }
.sc-bar-title span { color: var(--burgundy); font-weight: 600; font-size: 0.875rem; }

.sc-devices { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sc-devices button { display: inline-flex; padding: 0.4375rem 0.625rem; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; }
.sc-devices button + button { border-left: 1px solid var(--border); }
.sc-devices button[aria-pressed="true"] { background: #fff; color: var(--burgundy); }

.sc-stage { height: calc(100vh - var(--bar-height)); display: flex; justify-content: center; }
.sc-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; transition: width 250ms ease; }
.sc-stage[data-device="mobile"] { padding: 1.5rem 0; }
.sc-stage[data-device="mobile"] .sc-frame { width: 390px; border-radius: 24px; box-shadow: var(--shadow-lg); border: 8px solid #1a1a2e; }

.sc-details {
    position: fixed;
    z-index: 3;
    top: var(--bar-height);
    right: 0;
    bottom: 0;
    width: min(400px, 100vw);
    overflow-y: auto;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: #fff;
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    color: var(--text-secondary);
}
.sc-details[hidden] { display: none; }
.sc-details-head { display: flex; align-items: flex-start; justify-content: space-between; }
.sc-details-head h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 2rem; line-height: 1.2; color: var(--text-primary); }
.sc-details-close { background: none; border: 0; font-size: 1.75rem; line-height: 1; color: var(--text-muted); cursor: pointer; }
.sc-details-tagline { font-size: 1.0625rem; color: var(--text-primary); }
.sc-details-price { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; border-radius: 12px; background: var(--cream); }
.sc-details-price strong { font-size: 1.375rem; color: var(--burgundy); }
.sc-details-price span, .sc-details-note { font-size: 0.8125rem; color: var(--text-muted); }
.sc-details-features { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.sc-details-features li { position: relative; padding-left: 1.5rem; }
.sc-details-features li::before { content: '✓'; position: absolute; left: 0; color: var(--burgundy); font-weight: 700; }
.sc-details-link { font-size: 0.875rem; font-weight: 600; color: var(--burgundy); text-decoration: none; }

@media (max-width: 860px) {
    .sc-bar { grid-template-columns: auto 1fr; }
    .sc-bar-title, .sc-bar-back, .sc-devices { display: none; }
    .sc-stage[data-device="mobile"] .sc-frame { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
    .sc-stage[data-device="mobile"] { padding: 0; }
}