/* Global styles. UI is built with MudBlazor — keep this file minimal.
   Only effects MudBlazor can't express declaratively live here. */

/* Self-hosted Google Fonts (Montserrat, Cormorant Garamond), latin + latin-ext. Bundled locally
   (wwwroot/fonts/*.woff2) so no visitor IP is sent to Google's US servers — DSGVO Art. 44 / §25
   TDDDG (the dynamic-Google-Fonts embedding was the LG München I / Abmahnung-wave defect). OFL-1.1.
   Montserrat (sans/body) is variable; Cormorant Garamond (serif/display) ships static weights —
   only the weights/styles the design uses (400/500/600 normal + 400 italic for the hero accent). */

/* Montserrat — sans / body (variable 300–700). */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond — serif / display (static 400/500/600 + 400 italic). */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-ext-600.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Responsive heading ramp. MudBlazor's serif headings have fixed sizes that are far too large on
   small viewports. clamp() scales them down gracefully while keeping the desktop sizes near
   MudBlazor's defaults. Cormorant Garamond is a delicate, low-contrast garamond with a small
   x-height — it reads lighter/smaller than Playfair at the same px, so headings carry a touch more
   weight (500) and the ramp is nudged up a step so section titles keep their presence. No MudBlazor
   token expresses this. */
.mud-typography-h1 { font-size: clamp(2.75rem, 8.5vw, 6.5rem); font-weight: 500; }
.mud-typography-h2 { font-size: clamp(2.25rem, 6.5vw, 4rem);   font-weight: 500; }
.mud-typography-h3 { font-size: clamp(1.9rem, 5vw, 3.25rem);   font-weight: 500; }
.mud-typography-h4 { font-size: clamp(1.6rem, 4vw, 2.35rem);   font-weight: 500; }
.mud-typography-h5 { font-weight: 600; }
.mud-typography-h6 { font-weight: 600; }

/* Overline = eyebrow label: always uppercase. MudBlazor's overline doesn't uppercase in this setup,
   but every eyebrow (hero, section labels, shop/cart headers, brand tags) is meant to be caps —
   matches the NextJS palette and the already-uppercase product-card brand labels. */
.mud-typography-overline { text-transform: uppercase; }

/* The full-bleed hero (.lp-hero) breaks out to 100vw; vw includes the scrollbar gutter, so on
   classic-scrollbar platforms (Windows/Linux/"always show scrollbars") the breakout overshoots the
   visible width and yields a horizontal scrollbar/jitter. Clip horizontal overflow so it can't —
   vertical scrolling is unaffected, and the sticky header (position:sticky) is not impacted. */
html { overflow-x: hidden; }

/* ── Site header (customer storefront) ───────────────────────────────────────────────────────────
   ONE connected bar (markup in MainLayout.razor): nav links left · feather mark + serif wordmark
   centre · wishlist/cart/account right. position:sticky and TRANSPARENT at the top of every
   customer page so the blush (home hero or .lp-stage) shows through; frost fades in
   over the wash height (scroll-driven, JS fallback) as a clear glass — not blush.
   MudMainContent carries NO appbar top padding
   (see .mud-main-content.lp-main); sticky sidebars offset from --lp-header-h (the MEASURED rendered
   height — keep in sync if padding/font changes). AdminLayout keeps its own fixed MudAppBar. */
:root {
    --lp-header-h: 83px;
    /* Shared stage: homepage hero and the storefront-wide top wash (MainLayout .lp-stage). */
    --lp-blush: radial-gradient(120% 88% at 88% 0%, #F0DDD4 0%, #F6EEE9 42%, #FAFAF8 76%);
    --lp-stage-h: clamp(16rem, 36vh, 22rem);
}

@property --lp-header-frost {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

/* Storefront chrome wrapper. The stage is a short blush wash behind the header AND the
   page content on every customer page. isolation keeps z-index:-1 inside this wrapper so
   the wash doesn't slip behind the body cream. Home already has a taller wash on .lp-hero
   — hide the layout one there so the two radials don't stack. AdminLayout does not use
   this wrapper. */
.lp-storefront {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
}
.lp-stage {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: var(--lp-stage-h);
    background: var(--lp-blush);
    pointer-events: none;
    z-index: -1;
}
.lp-storefront:has(.lp-hero) .lp-stage {
    display: none;
}

.lp-site-header {
    --lp-header-frost: 0;
    position: sticky;
    top: 0;
    z-index: 1100;
    background: rgb(255 255 255 / calc(var(--lp-header-frost) * 0.62));
    -webkit-backdrop-filter: blur(calc(var(--lp-header-frost) * 12px));
    backdrop-filter: blur(calc(var(--lp-header-frost) * 12px));
    border-bottom: 1px solid rgb(26 26 26 / calc(var(--lp-header-frost) * 0.08));
}
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    @keyframes lp-header-frost {
        to { --lp-header-frost: 1; }
    }
    .lp-site-header,
    .shop-toolbar {
        animation: lp-header-frost linear both;
        animation-timeline: scroll(block root);
        animation-range: 0 22rem; /* matches --lp-stage-h max; blush is gone by then */
    }
}
@media (prefers-reduced-motion: reduce) {
    .lp-site-header,
    .shop-toolbar {
        animation: none;
    }
    .lp-site-header.lp-solid,
    .lp-storefront:has(.lp-site-header.lp-solid) .shop-toolbar {
        --lp-header-frost: 1;
    }
}

.lp-bar-inner {
    max-width: 1280px;   /* matches the body's MudContainer MaxWidth.Large so the bar lines up */
    margin: 0 auto;
    width: 100%;
}

/* The bar: a 1fr · auto · 1fr grid keeps the wordmark optically centred. */
.lp-headbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;   /* 24px matches the MudContainer gutter so the nav aligns with page content */
}

/* Left nav */
.lp-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-self: start;
}
.lp-navlink {
    font-family: 'Montserrat', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #1A1A1A;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, color .2s ease;
}
.lp-navlink:hover { color: #A07C45; border-bottom-color: #A07C45; }

/* Centre wordmark — delicate feather mark stacked above the serif name */
.lp-brand {
    justify-self: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    white-space: nowrap;
}
.lp-brand-mark { color: #A07C45; display: inline-flex; line-height: 0; }
.lp-brand-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: .14em;
    color: #1A1A1A;
}

.lp-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 20px;
    color: #1A1A1A;
}
.lp-iconbtn { width: 2.25rem; height: 2.75rem; }

/* Content sits above the stage wash (z-index:-1). Without this, an absolute stage at z-index:0
   paints over in-flow headings and the first product row — hover then “reveals” them via transform. */
.lp-main {
    position: relative;
    z-index: 1;
}

/* The sticky header is in normal flow, so cancel the appbar top padding MudBlazor reserves on
   .mud-main-content. Scoped with the extra .lp-main class (specificity beats the bare selector) so
   AdminLayout's fixed MudAppBar keeps its offset. */
.mud-main-content.lp-main { padding-top: 0; }

/* Phones (xs): drop the nav (no hamburger yet) → conventional logo-left / actions-right header. */
@media (max-width: 599.98px) {
    :root { --lp-header-h: 69px; }
    .lp-headbar { padding: 12px 18px; gap: 10px; }
    .lp-nav { display: none; }
    .lp-brand { grid-column: 1; justify-self: start; flex-direction: row; gap: 8px; }
    .lp-actions { grid-column: 3; gap: 12px; }
    .lp-brand-name { font-size: 1.4rem; }
}

/* Visible keyboard focus — a gold ring on interactive elements (a11y). The unified gold #A07C45 stays
   visible (≥3:1 non-text contrast); an invisible focus ring would break keyboard navigation. Mouse
   clicks keep the ringless look via :focus-visible. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible {
    outline: 2px solid #A07C45;
    outline-offset: 2px;
}

/* <FocusOnNavigate Selector="h1"> (Routes.razor) programmatically focuses the page <h1> after every
   navigation so screen readers announce the new page and Tab resumes at the content. It sets
   tabindex="-1", so the <h1> isn't keyboard-reachable — a focus ring on it is pure visual noise
   (Firefox/Safari draw one on load, making the hero heading look "selected"). Suppress it; the
   focus-management behaviour stays, and real keyboard focus on interactive elements (above) is
   unaffected. */
h1:focus {
    outline: none;
}

/* Respect users who prefer less motion — neutralize transitions/animations. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Static-SSR auth forms still use .lp-input alongside .field. Label spacing lives in
   styles/app.components.css (.lp-field). */
.lp-input {
    width: 100%;
    padding: .7rem;
    font-size: 1rem;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    box-sizing: border-box;
    background: #fff;
}
.lp-input:focus {
    outline: none;
    border-color: #A07C45;
    box-shadow: 0 0 0 1px #A07C45;
}

/* Section eyebrow (product rows, Über uns, etc.): the unified gold #A07C45, tracked, with a short
   leading rule. (~3.5:1 on cream — below AA as small text, accepted for decorative gold; CLAUDE.md.) */
.lp-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #A07C45;
    letter-spacing: 3px;
    font-weight: 500;
    text-transform: uppercase;
}
.lp-eyebrow::before {
    content: "";
    flex: none;
    width: 34px;
    height: 1px;
    background: #A07C45;
}

/* ── Home hero ──────────────────────────────────────────────────────────────────────────────────
   Full-bleed blush that runs UP behind the transparent header (negative top margin), so header +
   hero read as one stage. Serif copy left; a slow product river on the right (real stills). Markup
   in Home.razor + HeroRiver.razor. Type-only when the river is absent (phones / < 4 images). */
.lp-hero {
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: calc(-2rem - var(--lp-header-h));   /* cancel container my-8 AND pull behind the header */
    background: var(--lp-blush);
    overflow: clip;
}
.lp-hero-inner {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(18rem, 1fr);
    align-items: center;
    column-gap: clamp(1.25rem, 3vw, 2.5rem);
    min-height: 0;
    /* both gutters — the river stays inside the 80rem content column */
    padding: calc(var(--lp-header-h) + 2.5rem) var(--spacing-gut, 24px) clamp(2.25rem, 4vw, 3.25rem);
}
.lp-hero-inner:not(:has(.lp-hero-river)) {
    grid-template-columns: minmax(0, 34rem);
}
.lp-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 34rem;
}
.lp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: .66rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: #A07C45;
    margin-bottom: 1.1rem;
    text-box: trim-both cap alphabetic;
}
.lp-hero-eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    background: #A07C45;
}
.lp-hero-headline {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(2.75rem, 5.8vw, 5.15rem);
    line-height: .96;
    letter-spacing: -.01em;
    color: #1A1A1A;
    overflow-wrap: break-word;   /* a very long admin headline word can't force horizontal overflow */
    text-box: trim-start cap alphabetic;
}
.lp-hero-accent {
    display: block;
    font-style: italic;
    font-weight: 500;
    color: #A07C45;
}
.lp-hero-subline {
    margin: 1.35rem 0 2rem;
    max-width: 38ch;
    font-size: .95rem;
    line-height: 1.7;
    color: #6B6B6B;
}
.lp-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #1A1A1A;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 15px 30px;
    border-radius: 2px;
    transition: background-color .25s ease, gap .25s ease;
}
.lp-hero-cta:hover { background: #8A6D1B; gap: 18px; }

/* Right column — three slow rows of stills, fading into the blush on both sides. */
.lp-hero-river {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: clip;
    min-width: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.lp-hero-river-row {
    overflow: clip;
}
.lp-hero-river-track {
    --lp-river-loop: 180s;          /* ~7.5s per tile — same pace as the old 9×68s */
    --lp-river-tiles: 24; /* keep in sync with HeroRiver.Take */
    display: flex;
    width: max-content;
    animation: lp-hero-river var(--lp-river-loop) linear infinite;
}
/* Same tempo. Phase is 1/3, 2/3, 0 of one tile so seams step evenly. */
.lp-hero-river-row:nth-child(1) .lp-hero-river-track {
    animation-delay: calc(var(--lp-river-loop) / var(--lp-river-tiles) / -3);
}
.lp-hero-river-row:nth-child(2) .lp-hero-river-track {
    animation-delay: calc(var(--lp-river-loop) / var(--lp-river-tiles) * -2 / 3);
}
.lp-hero-river-set {
    display: flex;
    gap: 10px;
    padding-inline-end: 10px;
}
.lp-hero-river-tile {
    flex: none;
    width: 8.25rem;
    aspect-ratio: 1;
    border-radius: 2px;
    overflow: clip;
    border: 1px solid rgb(26 26 26 / 0.10);
    background: #F4F2EF;
}
.lp-hero-river-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes lp-hero-river {
    /* One set of three equal copies — remaining two always cover the column. */
    to { transform: translateX(calc(-100% / 3)); }
}

/* Phone: type-only. A ticker under the CTA would re-crowd the hero we just opened up. */
@media (max-width: 899.98px) {
    .lp-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        min-height: 0;
        padding: calc(var(--lp-header-h) + 1.25rem) var(--spacing-gut, 24px) clamp(1.75rem, 5vw, 2.5rem);
    }
    .lp-hero-copy { max-width: none; }
    .lp-hero-river { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-hero-river-track {
        animation: none;
    }
}

/* ── Brand page opening (shop, when ?brand= is a known maison) ─────────────────────────────────
   Homepage beat at catalog scale: type left, one-row still river right. Phone stacks
   the same river under the title (the home hero hides its 3-row ticker; this one stays). */
.lp-brand-hero {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: end;
    gap: 1.5rem 2.5rem;
    margin-bottom: 2.5rem;
}
.lp-brand-hero-copy { min-width: 0; }
.lp-brand-hero-slot {
    max-width: 10rem;
    justify-self: end;
}
.lp-brand-river {
    display: flex;
    min-width: 0;
    overflow: clip;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.lp-brand-river-track {
    display: flex;
    width: max-content;
    animation: lp-hero-river 160s linear infinite;
}
.lp-brand-river-set {
    display: flex;
    gap: 10px;
    padding-inline-end: 10px;
}
.lp-brand-river-tile {
    flex: none;
    width: 10rem;
    aspect-ratio: 1;
    border-radius: 2px;
    overflow: clip;
    border: 1px solid rgb(26 26 26 / 0.10);
    background: #F4F2EF;
}
.lp-brand-river-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 899.98px) {
    .lp-brand-hero {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 1.25rem;
        margin-bottom: 2rem;
    }
    .lp-brand-hero-slot { max-width: none; justify-self: stretch; }
    .lp-brand-hero-slot .aspect-square {
        display: block;
        width: 100%;
        max-width: 8rem;
        aspect-ratio: 1;
        border-radius: 2px;
        background: #F4F2EF;
    }
    /* Same strip, smaller tiles so more of the river reads on a phone. */
    .lp-brand-river-tile { width: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-brand-river-track { animation: none; }
}

/* ── Brand rail (homepage, beneath the hero) ─────────────────────────────────────────────────────
   Same eyebrow + title and scroll-snap carousel as the product rows (5 / 3 / 2 across).
   Markup in Components/Shared/BrandCarousel.razor. */
.lp-maisons {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}
.lp-rail {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 26px;
}
.lp-maison {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1A1A1A;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
.lp-maison:hover { color: #A07C45; }
.lp-feather {
    flex: none;
    display: inline-flex;
    color: #A07C45;
    opacity: .85;
}

/* Five across on desktop (products are four); three on tablet, two on phones — same
   scroll-snap machine as ProductCarousel, so a 6th brand pages instead of wrapping. */
.lp-maisons .lp-carousel-item {
    flex: 0 0 calc((100% - 4 * 16px) / 5);
}
@media (max-width: 959.98px) {
    .lp-maisons .lp-carousel-item { flex: 0 0 calc((100% - 2 * 16px) / 3); }
}
@media (max-width: 599.98px) {
    .lp-maisons .lp-carousel-item { flex: 0 0 calc((100% - 16px) / 2); }
}
.lp-maison-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.lp-maison-still {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0;
    background: #F4F2EF;
}
.lp-maison-still:not(.lp-maison-mosaic) img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1;
    transition: scale .5s ease;
}
.lp-maison-tile:hover .lp-maison-still:not(.lp-maison-mosaic) img,
.lp-maison-tile:focus-visible .lp-maison-still:not(.lp-maison-mosaic) img {
    scale: 1.04;
}

/* 2×2 mosaic: one cell scales from its corner to fill the square (js/lp-maison.js). */
.lp-maison-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    isolation: isolate;
}
.lp-maison-cell {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    scale: 1;
    z-index: 0;
    transform-origin: var(--ox) var(--oy);
    transition: scale .88s cubic-bezier(.22, .61, .36, 1);
}
.lp-maison-cell:nth-child(1) { --ox: 0%;   --oy: 0%; }
.lp-maison-cell:nth-child(2) { --ox: 100%; --oy: 0%; }
.lp-maison-cell:nth-child(3) { --ox: 0%;   --oy: 100%; }
.lp-maison-cell:nth-child(4) { --ox: 100%; --oy: 100%; }
/* z-index lives on .is-focus (not .is-open) so the cell stays on top while it
   scales back into its slot. JS drops .is-open first, then .is-focus after the transition. */
.lp-maison-cell.is-focus { z-index: 1; }
.lp-maison-mosaic.is-open .lp-maison-cell.is-focus {
    scale: 2.12;
}
.lp-maison-name {
    display: block;
    width: 100%;
    min-width: 0;
    padding: .875rem .875rem .65rem;
    text-align: left;
    white-space: normal;
}
/* Same face, size, and ink as .lp-product-name — not the gold brand label. */
.lp-maison-tile .lp-maison-name {
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    color: #1A1A1A;
    min-height: 0;
}
@media (max-width: 599.98px) {
    .lp-maison-tile .lp-maison-name { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-maison-still:not(.lp-maison-mosaic) img,
    .lp-maison-cell { transition: none; }
}

/* ── Product carousel (homepage rows) ────────────────────────────────────────────────────────────
   Header: the eyebrow on its own row, then the serif title (LEFT) and the controls (arrows · page
   dots, RIGHT) sharing the row below — over a CSS scroll-snap row of ProductCards (native swipe on
   touch). Paging/dots are driven by js/lp-carousel.js. Single-page rows get .lp-carousel--static
   (JS) which hides the controls (the title row then collapses to just the title on the left). */
.lp-carousel-head { margin-bottom: 1.5rem; }
.lp-carousel-head .lp-eyebrow {
    margin: 0 0 .2rem;
    text-box: trim-both cap alphabetic;
}
@media (max-width: 599.98px) {
    .lp-carousel-head .lp-eyebrow { margin-bottom: .4rem; }
}
.lp-carousel-titlerow {
    display: flex;
    flex-wrap: wrap;                /* narrow screens: controls drop to their own line under the title */
    align-items: center;
    gap: 8px 16px;
    margin: 0;
}
.lp-carousel-title {
    flex: 1 0 auto;                 /* grow to push controls right; don't shrink */
    margin: 0;
    text-box: trim-start cap alphabetic;
}

.lp-carousel-track {
    display: flex;
    gap: 16px;
    min-width: 0;                   /* don't let item min-content blow the column (brand mosaics) */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* overflow-x:auto also clips Y — leave room for the 4px hover lift + gold border */
    padding-top: 6px;
    padding-bottom: 6px;
    margin-top: -6px;
    scrollbar-width: none;          /* arrows + dots are the affordance; hide the native bar */
}
.lp-carousel-track::-webkit-scrollbar { display: none; }

/* Four across on desktop (matches the old md=3 grid), three on tablet, two on phones (was xs=6). */
.lp-carousel-item {
    flex: 0 0 calc((100% - 3 * 16px) / 4);
    min-width: 0;                   /* nowrap titles must ellipsis, not grow the slide */
    scroll-snap-align: start;
}
@media (max-width: 959.98px) {
    .lp-carousel-item { flex-basis: calc((100% - 2 * 16px) / 3); }
}
@media (max-width: 599.98px) {
    .lp-carousel-item { flex-basis: calc((100% - 16px) / 2); }
    /* 24 cards = 12 phone pages; keep 12 (= 6 pages of 2) so sliding matches desktop's 6 of 4. */
    .lp-carousel:not(.lp-maisons) .lp-carousel-item:nth-child(n+13) { display: none; }
}

.lp-carousel-controls {
    flex: 0 0 auto;                 /* never shrink the arrows/dots */
    margin-left: auto;             /* hug the right edge; on a cramped row this lands on its own line, still right */
    display: flex;
    align-items: center;
    gap: 16px;
}
.lp-carousel--static .lp-carousel-controls { display: none; }   /* ≤1 page: nothing to page through */
/* Brand rail: keep the full control cluster on desktop even on a single page
   (arrows sit disabled). Phone still hides the cluster until there's a second page. */
@media (min-width: 600px) {
    .lp-maisons.lp-carousel--static .lp-carousel-controls { display: flex; }
}

.lp-carousel-arrow {
    width: 40px;
    height: 40px;
    border-radius: 2px;             /* same as cards / fields — not a second pill language */
    border: 1px solid #E7E2D8;
    background: #FFFFFF;
    color: #1A1A1A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.lp-carousel-arrow:hover:not(:disabled) { border-color: #A07C45; color: #A07C45; }
.lp-carousel-arrow:disabled { opacity: .35; cursor: default; }
/* Phones: swipe + dots carry it; the arrows would crowd a 2-up row. */
@media (max-width: 599.98px) {
    .lp-carousel-arrow { display: none; }
}

.lp-carousel-dots { display: inline-flex; align-items: center; gap: 8px; }
.lp-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #DAD3C6;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}
.lp-carousel-dot.on { width: 22px; border-radius: 4px; background: #A07C45; }

/* Product-card sale badge: ink on cream (monochrome semantics — never red), top-left. pointer-events
   off so the image link stays clickable through it. */
.lp-sale-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #1A1A1A;
    color: #FAFAF8;
    font-size: .72rem;
    letter-spacing: 1px;
    line-height: 1.4;
    padding: 2px 8px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 2;
}

/* ── Product card (NextJS-style) ──────────────────────────────────────────────────────────────
   Rounded white card; gold uppercase brand label; Montserrat name + price (serif stays for
   display headings only); price + heart/cart icon buttons in a footer row. */
.product-card {
    border-radius: 2px;
    overflow: hidden;
    min-width: 0;                   /* grid/flex children default to min-content */
}
.lp-product-brand {
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    line-height: 1.4;
    min-height: 1.4em;          /* reserve one line even when a product has no brand → uniform cards */
    color: #A07C45;             /* warm gold */
}
a.lp-product-brand {
    display: inline-block;
    text-decoration: none;
}
a.lp-product-brand:hover {
    color: #1A1A1A;
}
.product-card > * { min-width: 0; }
.lp-product-name {
    margin: .35rem 0 10px;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    color: #1A1A1A;
    display: -webkit-box;
    width: 100%;
    min-width: 0;
    min-height: 2.5em;              /* always two lines so images line up across a row */
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.product-card a:has(> .lp-product-name) {
    display: block;
    min-width: 0;
    overflow: hidden;
}
/* Footer sits on the image now — keep a short pad so the price isn't glued to the still. */
.lp-product-footer {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 14px 12px;
    border-top: 1px solid rgba(26, 26, 26, .06);
}
.lp-card-action { width: 2.25rem; height: 2.75rem; }
.lp-product-priceblock { min-width: 0; }
.lp-product-price {
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}
.lp-product-unit { font-size: .68rem; line-height: 1.3; color: #6B6B6B; }

/* NEU badge (top-left, deep gold so the white text stays AA) + low-stock (top-right, white). */
.lp-badge-new {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #8A6D1B;
    color: #FFFFFF;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 2;
}
.lp-badge-stock {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255, 255, 255, .92);
    color: #1A1A1A;
    font-size: .62rem;
    font-weight: 600;
    padding: 2px 8px;
    border: 1px solid #E7E2D8;
    border-radius: 2px;
    pointer-events: none;
    z-index: 2;
}
.lp-oos-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, .55);
    z-index: 1;
}

/* 2-up product grids on phones (~160px cards): tighten paddings and the icon buttons so the price +
   heart + cart row still fits on one line. */
@media (max-width: 599.98px) {
    .lp-product-footer {
        padding: 8px 12px 10px;
        gap: 0;
    }

    .lp-product-name {
        font-size: .9rem;
    }

    .lp-product-price {
        font-size: .9rem;
        white-space: nowrap;
    }
}

/* Cart-badge "bump": a brief scale pulse when an item is added, so the action registers in the
   chrome. Toggled by a class from CartBadge; neutralized by the reduced-motion guard above. */
.lp-cart-badge { display: inline-flex; }
.lp-cart-badge.lp-bump { animation: lp-bump .45s ease; }

@keyframes lp-bump {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.25); }
    60%  { transform: scale(.92); }
    100% { transform: scale(1); }
}

/* PDP main image: framed 1:1 square (NextJS — 12px rounded, warm border, image clipped to it) that
   doubles as the zoom trigger. */
.lp-zoom-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid #E7E2D8;
    border-radius: 2px;
    overflow: hidden;
    background: #F4F2EF;
    cursor: zoom-in;
}
.lp-zoom-btn.lp-zoomed {
    cursor: zoom-out;
    touch-action: none;   /* while zoomed, pan instead of scrolling the page (touch) */
}
/* "n / N" image counter, bottom-right: warm gold on dark so it stays legible over any image. */
.lp-pdp-counter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 2px 9px;
    font-size: .66rem;
    letter-spacing: .5px;
    color: #A07C45;
    background: rgba(26, 26, 26, .6);
    border-radius: 2px;
    pointer-events: none;
}

/* PDP gallery thumbnail: a real <button> for keyboard/AT, styled flat (the image carries the look). */
.lp-thumb-btn {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Product card: lift + deep-gold border on hover (unified with category tiles —
   flat/outlined, no shadow) + gentle image zoom (needs :hover, hence CSS). */
.product-card {
    transition: border-color .2s ease, transform .2s ease;
    overflow: hidden;
}

.product-card:hover,
.product-card:focus-within {
    transform: translateY(-4px);
    border-color: #A07C45 !important;
}

.product-card .product-media {
    overflow: hidden;
}

.product-card .product-media img {
    transition: transform .5s ease;
}

.product-card:hover .product-media img,
.product-card:focus-within .product-media img {
    transform: scale(1.04);
}

/* PDP variant picker: linked-sibling swatches (image) and chips (label). Plain at rest, deep-gold
   border on hover/selection. (:hover + selection state — needs CSS.) */
.lp-variant-swatch {
    display: inline-block;
    line-height: 0;
    border: 2px solid transparent;
    border-radius: 2px;
    overflow: hidden;
    transition: border-color .15s ease;
}

.lp-variant-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    font-size: .85rem;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.lp-variant-swatch:hover,
.lp-variant-chip:hover {
    border-color: #A07C45;
}

.lp-variant-current.lp-variant-swatch,
.lp-variant-current.lp-variant-chip {
    border-color: #A07C45;
}

.lp-variant-current.lp-variant-chip {
    background: #F4F2EF;
    font-weight: 500;
}

.lp-variant-oos {
    opacity: .5;
}

/* PDP shipping/payment spec rows: gold icon + muted label left, ink value right; no dividers between. */
.lp-pdp-spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .35rem 0;
    font-size: .85rem;
}
.lp-pdp-spec-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    color: #6B6B6B;
}
.lp-pdp-spec-value {
    text-align: right;
    color: #1A1A1A;
}

/* Print: strip the app chrome so the invoice (/rechnung) prints as a clean document. Elements
   marked .lp-no-print (e.g. the Drucken button) are hidden too. */
@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-overlay,
    footer,
    .lp-no-print {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Shop catalog: filter rail + product column. Width lives here (not a Tailwind arbitrary)
   so the compiled sheet does not have to be rebuilt for a column tweak. */
.shop-layout {
    display: grid;
    gap: 2.5rem;
}
@media (min-width: 768px) {
    .shop-layout {
        grid-template-columns: 18rem minmax(0, 1fr);
    }
}

/* Desktop filter card: stay under the header, scroll inside if the facet list outgrows the viewport. */
.shop-filters {
    max-height: calc(100dvh - var(--lp-header-h) - 2rem);
    overflow-y: auto;
}

/* Groups instead of one even stack + <hr>s — field-to-field is tight, groups get one hairline. */
.shop-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.shop-filter-group {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.shop-filter-group + .shop-filter-group {
    padding-top: 1rem;
    border-top: 1px solid rgb(26 26 26 / .08);
}
.shop-filter-field { display: block; }
.shop-filter-field > .eyebrow {
    display: block;
    margin: 0 0 .3rem;
    font-size: .65rem;
}
/* Same face as .lp-product-name (1rem / 500 / 1.25). Slightly shorter box so the type
   does not sit in an oversized control. */
.shop-filters .field,
.shop-filter-drawer .field {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    min-height: 2.375rem;
    padding: .4rem .7rem;
}
.shop-filter-price {
    display: flex;
    align-items: start;
    gap: .5rem;
}
.shop-filter-price label {
    min-width: 0;
    flex: 1;
}
.shop-filter-price span {
    display: block;
    margin-bottom: .25rem;
    font-size: .75rem;
    color: #6B6B6B;
}
.shop-filter-error {
    margin: .35rem 0 0;
    font-size: .75rem;
    color: #8B1A1A;
}
.shop-filter-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
}

/* The mobile filter sheet lives inside .lp-main (z-index:1). Lift that stacking context above
   the sticky header (1100) while the drawer is open, or the header paints over the title. */
.lp-main:has(.shop-filter-drawer) {
    z-index: 1200;
}

/* Invisible footer the IntersectionObserver watches to auto-load the next catalog page. */
.shop-load-more {
    display: flex;
    justify-content: center;
    min-height: 1px;
    width: 100%;
}

/* Back + result count. Desktop: under the heading (brand or shop). Phone: in the toolbar
   so the brand river can sit right under the title. Hidden at the same 768px cut as the rail. */
.shop-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.25rem;
}
.shop-heading-meta { margin-top: .5rem; }
.shop-toolbar-meta {
    justify-content: space-between;
    margin-bottom: .65rem;
}
@media (max-width: 767.98px) {
    .shop-heading-meta { display: none; }
}
@media (min-width: 768px) {
    .shop-toolbar-meta { display: none; }
}

/* Phone Filter button only — Zurück/count scroll away. Pins flush under the header
   and uses the same frost glass (the cream slab left a gap and a second colour).
   Full-bleed so the chrome meets the header edge-to-edge. Same 768px cut as the rail. */
@media (max-width: 767.98px) {
    .shop-toolbar {
        --lp-header-frost: 0;
        position: sticky;
        top: calc(var(--lp-header-h) - 1px);
        z-index: 3;
        margin-inline: calc(-1 * var(--spacing-gut));
        padding: 10px var(--spacing-gut);
        background: rgb(255 255 255 / calc(var(--lp-header-frost) * 0.62));
        -webkit-backdrop-filter: blur(calc(var(--lp-header-frost) * 12px));
        backdrop-filter: blur(calc(var(--lp-header-frost) * 12px));
        border-bottom: 1px solid rgb(26 26 26 / calc(var(--lp-header-frost) * 0.08));
    }
}

/* Footer columns: 2/5 brand + 1/5 per link column (Shop/Konto/Rechtliches). MudGrid only does
   twelfths, so this row is Flexbox — flex-basis in the SAME 2:1 ratio as flex-grow keeps the columns
   at an exact 2:1:1:1 ratio at every width. (Responsive fifths — MudBlazor can't express it.) */
.lp-footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 1.5rem;
}
.lp-footer-brand { flex: 2 1 240px; }
.lp-footer-col   { flex: 1 1 120px; }

/* Phones (xs): three link sections never split evenly into a 2-up grid (one always orphans), so
   stack every section full-width for a symmetric single column. */
@media (max-width: 599.98px) {
    .lp-footer-cols {
        flex-direction: column;
        gap: 2rem;
    }
    .lp-footer-brand,
    .lp-footer-col {
        flex: initial;
    }
}

/* Footer bottom bar: trust badges left, copyright right on desktop (was MudBlazor d-flex utilities;
   moved here so the phone override has nothing to fight). */
.lp-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* The trust-badge group is a plain div (not MudStack) on purpose: MudBlazor's .flex-row utility is
   !important and would block the phone column override below. 20px gap == the old Spacing="5". */
.lp-footer-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

/* Phones (xs): same single-column treatment as the link columns — the three trust badges stack one
   per row (no orphan), then the copyright below, all left-aligned. */
@media (max-width: 599.98px) {
    .lp-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .lp-footer-trust {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* Imported legal texts: readable document rhythm while preserving the generated legal structure. */
.lp-legal-page {
    max-width: 820px;
    color: #1A1A1A;
}

.lp-legal-page h1 {
    margin: 0 0 1.75rem;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.12;
}

.lp-legal-page h2 {
    margin: 2rem 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
}

.lp-legal-page h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.lp-legal-page h4 {
    margin: 1rem 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
}

.lp-legal-page p,
.lp-legal-page li {
    color: #3A3A3A;
    font-size: 0.98rem;
    line-height: 1.75;
}

.lp-legal-page p {
    margin: 0 0 0.9rem;
}

.lp-legal-page ul {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}

.lp-legal-page a {
    color: #A07C45;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}