/* ═══════════════════════════════════════════════════════════════════
   OUTLET FR — „PARIS NOIR" Theme
   Dunkel, aber komplett anders als outlet_de (Gold/Anthrazit):
   Mitternachtsblau · Tricolore (Bleu → Creme → Rouge) · moderne
   Topbar statt Sidebar · CSS-Grids · Verläufe · Glassmorphism.
   100 % SSR-only: reines CSS3/HTML5, kein JavaScript.
   Wird NUR auf /outlet_fr/... geladen (conditional <link> in base.html).
   ═══════════════════════════════════════════════════════════════════ */

.outlet-fr {
    color-scheme: dark;

    /* ── Tricolore-Farbwelt ── */
    --gold: #c8b273;                 /* Creme-Gold (Badges/Extras) */
    --gold2: #e0d0a4;
    --gold-dark: #a68f4e;
    --gold-50: rgba(200, 178, 115, .06);
    --gold-100: rgba(200, 178, 115, .12);
    --gold-200: rgba(200, 178, 115, .20);
    --gold-400: rgba(200, 178, 115, .40);

    --bleu:  #2f5da8;                /* Tricolore-Blau (Primär) */
    --bleu2: #3d6fc9;
    --bleu3: #5b8def;
    --rouge: #c4284f;                /* Tricolore-Rot (Akzent/Hover) */
    --rouge2: #e0485f;
    --creme: #ece9e2;                /* Tricolore-Creme (Text) */

    --dark: #0b0f1a;                 /* Mitternachtsblau */
    --panel: #111827;
    --panel2: #172033;
    --panel3: #1f2b44;

    --text: #ece9e2;
    --muted: #8b93a7;
    --text-secondary: #aab2c4;

    --success: #3fae6a;
    --danger: #e0485f;
    --warning: #e0a63d;
    --info: #5b8def;

    --border: rgba(236, 233, 226, .10);
    --border-radius: 16px;
    --border-radius-sm: 10px;

    --accent: var(--bleu2);
    --accent-2: var(--bleu3);
    --accent-50: rgba(61, 111, 201, .08);
    --accent-100: rgba(61, 111, 201, .14);
    --accent-200: rgba(61, 111, 201, .22);
    --accent-400: rgba(61, 111, 201, .45);

    --font-serif: Georgia, 'Times New Roman', Times, serif;
}

/* ── Basis: Nachthimmel mit Tricolore-Aurora ────────────────────── */
.outlet-fr body,
.outlet-fr .app-shell {
    background:
        radial-gradient(1100px 460px at 88% -8%,  rgba(61, 111, 201, .18), transparent 62%),
        radial-gradient(900px 420px at 6%   -4%,  rgba(196, 40, 79, .12),  transparent 58%),
        radial-gradient(700px 300px at 50% 120%, rgba(47, 93, 168, .10),   transparent 60%),
        linear-gradient(180deg, #0b0f1a 0%, #0d1322 48%, #0a0d16 100%);
}

/* ── Headlines: Serif + Creme, Bleu-Akzente ─────────────────────── */
.outlet-fr h1, .outlet-fr h2, .outlet-fr h3,
.outlet-fr .section-title, .outlet-fr .section-subtitle,
.outlet-fr .th-brand-text, .outlet-fr .sb-brand-text {
    font-family: var(--font-serif);
    letter-spacing: .01em;
    color: var(--text);
}
.outlet-fr .section-title { color: var(--creme); }
.outlet-fr .th-brand-text { color: var(--creme); font-weight: 700; }

/* ── TOPBAR: Glas + Tricolore-Linie (statt klassischem Header) ──── */
.outlet-fr .top-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11, 15, 26, .80);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border-bottom: none;
    box-shadow: 0 1px 0 rgba(236, 233, 226, .05), 0 14px 36px rgba(0, 0, 0, .40);
}
.outlet-fr .top-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg,
        var(--bleu) 0 33.3%,
        var(--creme) 33.3% 66.6%,
        var(--rouge) 66.6% 100%);
    opacity: .85;
}

/* Topbar-Navigation: Pill-Chips statt Links */
.outlet-fr .th-nav a {
    padding: 8px 15px;
    border-radius: 999px;
    color: var(--muted);
    border: 1px solid transparent;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.outlet-fr .th-nav a:hover {
    color: var(--text);
    background: rgba(236, 233, 226, .06);
    border-color: rgba(236, 233, 226, .12);
}
.outlet-fr .th-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu2) 100%);
    border-color: rgba(91, 141, 239, .45);
    box-shadow: 0 4px 16px rgba(47, 93, 168, .45);
}

/* ── Hero: elegante Verlaufskarte mit Tricolore-Glow ────────────── */
.outlet-fr .hero-image-wrap {
    border-radius: 22px;
    border: 1px solid rgba(236, 233, 226, .10);
    background: linear-gradient(135deg, #0d1b3a 0%, #1a2547 45%, #3a1030 100%);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .50),
                inset 0 0 0 1px rgba(91, 141, 239, .14),
                0 0 60px rgba(47, 93, 168, .12);
}

/* ── MODERNE CARDS: Glas-Panels mit Hover-Glow ──────────────────── */
.outlet-fr .product-card,
.outlet-fr .dash-panel,
.outlet-fr .dash-card,
.outlet-fr .panel {
    background: linear-gradient(180deg, rgba(31, 43, 68, .55) 0%, rgba(17, 24, 39, .88) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(236, 233, 226, .08);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
    transition: transform 300ms cubic-bezier(.2, .7, .3, 1),
                box-shadow 300ms ease,
                border-color 300ms ease;
}
.outlet-fr .product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 141, 239, .45);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .48),
                0 0 0 1px rgba(61, 111, 201, .18),
                0 0 44px rgba(47, 93, 168, .18);
}

/* Produktbilder: festes Seitenverhältnis + sanfter Zoom */
.outlet-fr .product-card .product-image-wrap,
.outlet-fr .product-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .5s ease;
}
.outlet-fr .product-card:hover .product-image-wrap img { transform: scale(1.05); }

/* ── MODERNE GRIDS: auto-fill statt fester 3-Spalten ────────────── */
.outlet-fr .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: var(--space-lg);
}

/* ── FR-KATEGORIE-CHIP-LEISTE (Tricolore) ───────────────────────── */
.outlet-fr .fr-catbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--space-lg);
    padding: 10px;
    background: rgba(17, 24, 39, .55);
    border: 1px solid rgba(236, 233, 226, .08);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.outlet-fr .fr-catbar a {
    padding: 7px 15px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid rgba(236, 233, 226, .10);
    background: rgba(236, 233, 226, .03);
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.outlet-fr .fr-catbar a:hover {
    color: #fff;
    background: rgba(61, 111, 201, .16);
    border-color: rgba(91, 141, 239, .5);
}
.outlet-fr .fr-catbar a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu2) 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(47, 93, 168, .40);
}

/* ── Buttons: Bleu-Gradient, Rouge auf Hover ────────────────────── */
.outlet-fr .btn,
.outlet-fr .btn-add-cart,
.outlet-fr .sort-apply-btn {
    background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu2) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(47, 93, 168, .35);
    transition: background .25s ease, box-shadow .25s ease, transform .15s ease;
}
.outlet-fr .btn:hover,
.outlet-fr .btn-add-cart:hover,
.outlet-fr .sort-apply-btn:hover {
    background: linear-gradient(135deg, #a01f3c 0%, var(--rouge) 100%);
    box-shadow: 0 6px 18px rgba(196, 40, 79, .40);
}

/* ── Links ──────────────────────────────────────────────────────── */
.outlet-fr a { color: var(--bleu3); }
.outlet-fr a:hover { color: var(--rouge2); }

/* ── Formulare: dunkle Inputs, Bleu-Fokus ───────────────────────── */
.outlet-fr input,
.outlet-fr select,
.outlet-fr textarea {
    background: rgba(17, 24, 39, .75);
    border: 1px solid rgba(236, 233, 226, .14);
    color: var(--text);
    border-radius: var(--border-radius-sm);
}
.outlet-fr input:focus,
.outlet-fr select:focus,
.outlet-fr textarea:focus {
    border-color: var(--bleu3);
    box-shadow: 0 0 0 3px rgba(61, 111, 201, .18);
    outline: none;
}
.outlet-fr input::placeholder,
.outlet-fr textarea::placeholder { color: var(--muted); }

/* ── Footer: Tricolore-Top-Linie ────────────────────────────────── */
.outlet-fr footer.main-footer {
    background: linear-gradient(180deg, rgba(17, 24, 39, .6), rgba(10, 13, 22, .95));
    border-top: none;
    position: relative;
}
.outlet-fr footer.main-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--bleu) 0 33.3%,
        var(--creme) 33.3% 66.6%,
        var(--rouge) 66.6% 100%);
    opacity: .6;
}

/* ── Scrollbar (Firefox) ────────────────────────────────────────── */
.outlet-fr { scrollbar-color: rgba(61, 111, 201, .55) rgba(17, 24, 39, .6); }

/* ── Reduced Motion respektieren ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .outlet-fr .product-card,
    .outlet-fr .product-card:hover,
    .outlet-fr .product-card img,
    .outlet-fr .product-card:hover .product-image-wrap img {
        transition: none;
        transform: none;
    }
}