/* 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: 101px; /* measured with the 40 px wing mark (2026-10-13) */
    /* 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; }
.lp-navlink.is-active { border-bottom-color: #A07C45; }

/* Centre wordmark — her wing 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 { display: inline-flex; line-height: 0; }
.lp-brand-wing { height: 40px; width: auto; }
.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; }
/* Header icons that only one layout shows — same 600 px switch as the text nav (not Tailwind's 640). */
.lp-actions .lp-phone-only { display: none; }
.lp-iconcap { display: none; }

/* 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; }
    .lp-brand-wing { height: 34px; }
    /* Icon + caption stacked; the caption is part of the tap target. */
    .lp-actions .lp-iconbtn {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: auto;
        min-width: 2.75rem;
        height: auto;
        min-height: 2.75rem;
    }
    .lp-actions .lp-iconcap { display: block; font-size: .75rem; line-height: 1; color: #1A1A1A; }
    .lp-actions .lp-phone-only { display: inline-flex; }
    .lp-actions .lp-desktop-only { display: none; }
}
/* Small phones (360 px class): the captioned icons + wordmark need a tighter bar to fit. */
@media (max-width: 379.98px) {
    .lp-headbar { padding: 12px 12px; gap: 6px; }
    .lp-brand { gap: 6px; }
    .lp-brand-name { font-size: 1.2rem; letter-spacing: .08em; }
    .lp-actions { gap: 4px; }
    .lp-actions .lp-iconcap { font-size: .72rem; }
}

/* 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: .875rem;             /* ≥ 14 px: the one button everyone needs to read */
    font-weight: 500;
    letter-spacing: .16em;
    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;
    display: block;
    width: 8.25rem;
    aspect-ratio: 1;
    border-radius: 2px;
    overflow: clip;
    border: 1px solid rgb(26 26 26 / 0.10);
    background: #F4F2EF;
    transition: border-color .2s ease;
}
.lp-hero-river-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale .5s ease;
}
/* Stills are links: the pointer anywhere over the river pauses all rows (easy to aim), the tile
   under it gets the brand tile's gold border + gentle zoom. Same for the brand-page river. */
.lp-hero-river:hover .lp-hero-river-track,
.lp-brand-river:hover .lp-brand-river-track {
    animation-play-state: paused;
}
.lp-hero-river-tile:hover,
.lp-brand-river-tile:hover {
    border-color: #A07C45;
}
.lp-hero-river-tile:hover img,
.lp-brand-river-tile:hover img {
    scale: 1.04;
}
@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;
    }
    .lp-hero-river-tile,
    .lp-hero-river-tile img,
    .lp-brand-river-tile,
    .lp-brand-river-tile img { transition: 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;
    display: block;
    width: 10rem;
    aspect-ratio: 1;
    border-radius: 2px;
    overflow: clip;
    border: 1px solid rgb(26 26 26 / 0.10);
    background: #F4F2EF;
    transition: border-color .2s ease;
}
.lp-brand-river-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale .5s ease;
}
@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;
}

/* Brand and tile rows use the shared .lp-carousel-item widths (5 / 3 / 2), so a 6th brand pages
   instead of wrapping; tiles fill their slide. */
.lp-tilerow .lp-tile { height: 100%; }
.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 {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0;
    background: #F4F2EF;
}
.lp-maison-still > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1;
    transition: scale .5s ease;
}
.lp-maison-tile:hover .lp-maison-still > img,
.lp-maison-tile:focus-within .lp-maison-still > img {
    scale: 1.04;
}

/* Card photos (CardPhotos.razor, js/lp-photos.js): a sliding track of up to four photos (plus an
   end card when more lies behind the card) above the card's stretched link (z-index 2). Desktop:
   chevrons fade in on card hover; phones: swipe (touch-action pan-y keeps vertical scrolling native).
   Dots in the row-dot language (gold pill = current) — on hover with a mouse, always on touch. */
.lp-photos { position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; }
.lp-photos-link { position: absolute; inset: 0; display: block; touch-action: pan-y; -webkit-user-drag: none; color: inherit; text-decoration: none; }
.lp-photos-track {
    display: flex;
    width: calc(var(--n) * 100%);
    height: 100%;
    transform: translateX(calc(var(--i, 0) * -100% / var(--n)));
    transition: transform .3s ease;
}
.lp-photos-track.is-dragging { transition: none; }
.lp-photos-slide {
    flex: 0 0 calc(100% / var(--n));
    width: calc(100% / var(--n));
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}
/* "+60 Produkte" / "Alle ansehen": cream like the empty photo well, plain text. */
.lp-photos-end {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: #F4F2EF;
    color: #1A1A1A;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}
.lp-photos-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
/* The row dots (.lp-carousel-dot): grey, the current one a gold pill — plus a white ring and a soft
   dark shadow: light on colourful photos, still visible on white product shots. */
.lp-photos-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #DAD3C6;
    box-shadow: 0 0 0 1px #FFFFFF, 0 0 3px 1px rgba(26, 26, 26, .28);
    transition: width .2s ease, background-color .2s ease;
}
.lp-photos-dot.is-active { width: 22px; border-radius: 4px; background: #A07C45; }
/* The section arrows (.lp-carousel-arrow), a size smaller, at the bottom around the dots — one
   control like the section heads (arrows + dots), the photo's centre stays free. Shown on card
   hover (.lp-photos prefix: .lp-carousel-arrow's 40 px comes later in the file). */
.lp-photos .lp-photos-arrow {
    position: absolute;
    bottom: 8px;
    width: 32px;
    height: 32px;
    opacity: 0;
}
.lp-photos-prev { left: 8px; }
.lp-photos-next { right: 8px; }
.lp-photos-dots { bottom: 20px; }   /* centred on the arrows (8 px + 32 px / 2 − 8 px / 2) */
:is(.product-card, .lp-tile):hover .lp-photos-arrow,
:is(.product-card, .lp-tile):hover .lp-photos-dots { opacity: 1; }
@media (hover: none) {
    .lp-photos .lp-photos-arrow { display: none; }   /* beats .lp-carousel-arrow's display (defined later) */
    .lp-photos-dots { opacity: 1; gap: 5px; bottom: 10px; }
    .lp-photos-dot { width: 6px; height: 6px; }       /* always visible on touch — a size smaller */
    .lp-photos-dot.is-active { width: 16px; border-radius: 3px; }
}
/* Photos change by click or swipe — no hover zoom on top. Badges and the sold-out veil stay above
   the photos and let taps/swipes through to them. */
.product-card:is(:hover, :focus-within) .product-media img.lp-photos-slide,
.product-card .product-media img.lp-photos-slide { transform: none; }
.product-media > :is(.lp-sale-badge, .lp-badge-new, .lp-badge-stock, .lp-oos-overlay) { z-index: 3; pointer-events: none; }
/* Brand tile text: the Sortiment tiles' body (.lp-tile-body / -name / -desc). */
@media (prefers-reduced-motion: reduce) {
    .lp-maison-still > img,
    .lp-photos-track,
    .lp-photos-dots,
    .lp-photos-dot,
    .lp-photos-arrow { 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): the controls stay on desktop (disabled) and hide on phones. */
.lp-carousel-head { margin-bottom: 1.25rem; }  /* title baseline → cards */
.lp-carousel-head .lp-eyebrow {
    margin: 0 0 .625rem;            /* eyebrow → title cap height */
    text-box: trim-both cap alphabetic;
}
.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;
}
/* Desktop: the 40–44 px controls must not set the row's height — the row is the title's cap box, so
   eyebrow → title and title → cards are the margins above, not "whatever the buttons add". The
   controls stay centred on the title and overhang it by ~12 px each way. (Phones wrap them to their
   own line, where the overhang would overlap the title → full height there.) */
@media (min-width: 600px) {
    .lp-carousel-titlerow > :not(.lp-carousel-title) { margin-block: -12px; }
}
.lp-carousel-title {
    flex: 1 0 auto;                 /* grow to push controls right; don't shrink */
    margin: 0;
    text-box: trim-both cap alphabetic;   /* box = cap height → baseline; no descender gap above the cards */
}
/* Clickable section title ("Neuheiten ›", SectionTitle.razor): black at rest, gold + the chevron
   nudging right on hover (like the hero button). The tap area reaches past the trimmed text box
   via ::before, so the 44 px target doesn't change the head's spacing. */
.lp-title-link {
    position: relative;
    display: inline-flex;
    align-items: baseline;          /* the icon's bottom edge sits on the text baseline … */
    gap: 0;                         /* the chevron's own box already leaves ~8 px left of the glyph */
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}
.lp-title-link::before {
    content: "";
    position: absolute;
    inset: -14px -8px;
}
/* … and the chevron glyph (middle half of its box) drops by its bottom padding, so it spans
   baseline → x-height like the lowercase letters, instead of centring on the capital. */
.lp-title-arrow { flex: none; position: relative; top: .18em; margin-inline-start: .03em; transition: translate .2s ease; }
.lp-title-link:hover { color: #A07C45; }
.lp-title-link:hover .lp-title-arrow { translate: 4px 0; }
@media (prefers-reduced-motion: reduce) {
    .lp-title-link:hover .lp-title-arrow { translate: none; }
}

.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 — nothing may draw outside a card: hover is border + zoom (no
       lift), and focus rings sit inside (.lp-product-link, .lp-tile-link). */
    scrollbar-width: none;          /* arrows + dots are the affordance; hide the native bar */
}
.lp-carousel-track::-webkit-scrollbar { display: none; }

/* Every homepage row (products, brands, Sortiment, Kollektionen): five across on desktop, three on
   tablet, two on phones — one grid, so cards line up from row to row. */
.lp-carousel-item {
    flex: 0 0 calc((100% - 4 * 16px) / 5);
    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):not(.lp-tilerow) .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;
}
/* ≤1 page: desktop keeps the full control cluster in every row (arrows sit disabled, one dot), so
   every section head has the same shape; phones hide it until there's a second page. */
@media (max-width: 599.98px) {
    .lp-carousel--static .lp-carousel-controls { display: none; }
}

.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 ──────────────────────────────────────────────────────────────────────────────
   Photo first, then gold uppercase brand, Montserrat name + price (serif stays for display
   headings only) — like the Sortiment tiles. The name link is stretched over the whole card; the
   brand link and the Merkliste button sit above it. No cart/heart (they live on the product page). */
.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;          /* one line even for a brandless product ("–") → uniform cards */
    color: #A07C45;             /* warm gold */
}
a.lp-product-brand {
    display: block;             /* inline-block sat in a full-height line box → 11 px taller than the empty one */
    width: fit-content;
    text-decoration: none;
    position: relative;         /* above the stretched product link */
    z-index: 2;
}
a.lp-product-brand:hover {
    color: #1A1A1A;
}
.product-card > * { min-width: 0; }
.lp-product-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px 14px 14px;
}
.lp-product-name {
    margin: .3rem 0 .5rem;
    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;
    overflow: hidden;               /* up to three lines — two cut "Diamantfräse „Flamme“ blau,
                                       Durchmesser …" before the part that tells neighbours apart.
                                       No reserved height: the photo on top keeps rows aligned. */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.lp-product-link {
    color: inherit;
    text-decoration: none;
}
.lp-product-link::after {           /* whole card = one link (photo, name, price) */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.lp-product-link:focus-visible { outline: none; }
.lp-product-link:focus-visible::after { outline: 2px solid #A07C45; outline-offset: -2px; }
.lp-product-remove {
    position: relative;             /* above the stretched product link */
    z-index: 2;
    padding: 0 14px 14px;
}
.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; }

/* Line cards (one card per shade line): "8 Farben" under the price. */
.lp-product-shades { margin-top: 2px; font-size: .875rem; 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: .875rem;
    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): tighter paddings, a notch smaller name + price. */
@media (max-width: 599.98px) {
    .lp-product-body { padding: 10px 12px 12px; }
    .lp-product-remove { padding: 0 12px 12px; }

    .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: deep-gold border + gentle image zoom on hover, no lift — same as the hero river
   stills and the category tiles (flat/outlined, no shadow; needs :hover, hence CSS). */
.product-card {
    transition: border-color .2s ease;
    overflow: hidden;
}

.product-card:hover,
.product-card:focus-within {
    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-swatch,
.lp-variant-current.lp-variant-chip {
    border-color: #A07C45;
}

/* Swatch + its visible label (shade number/name) as one tap target. */
.lp-variant-option {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 96px;
    color: inherit;
    text-decoration: none;
}
.lp-variant-option:hover .lp-variant-swatch { border-color: #A07C45; }
.lp-variant-label {
    font-size: .875rem;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: break-word;
}
.lp-variant-current .lp-variant-label { font-weight: 600; }

.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%;
}

/* Count above the grid (like the Sortiment lists' bar). Phones: count left, Filter button right,
   pinned flush under the header with 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. */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
}
@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;
}

/* ---- Sortiment / Kollektionen card navigation ---------------------------------------------
   Built for customers who aren't at home in online shops: big image cards that are one tap target
   each, the name in large type, a plain purpose line, and the breadcrumb from Start as the way up
   on every level (no separate back button). */
.lp-sortiment-head { margin-bottom: 2rem; }
.lp-sortiment-head h1 { margin-top: .25rem; }

/* Trail: one line; on a narrow screen it swipes sideways instead of wrapping (Baymard). Links get a
   44px-tall tap area (NN/g: no cramped crumbs on phones); the chevron is the section titles' one. */
.lp-crumbs ol {
    display: flex;
    align-items: center;
    margin: 0 0 0 -6px;
    padding: 0 24px 0 0;
    list-style: none;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    font-size: .875rem;
    color: #6B6B6B;
}
.lp-crumbs ol::-webkit-scrollbar { display: none; }
.lp-crumbs li { display: flex; flex: 0 0 auto; align-items: center; }
.lp-crumbs li svg { color: #A9A39A; }
.lp-crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 6px;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(26, 26, 26, .25);
    text-underline-offset: 3px;
}
.lp-crumbs a:hover { color: #1A1A1A; text-decoration-color: currentColor; }
/* The current page may shrink to one line with "…" (long product names); below 8em the trail
   swipes instead. */
.lp-crumbs [aria-current] {
    display: block;
    flex: 0 1 auto;
    min-width: 8em;
    padding-inline: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1A1A1A;
}
.lp-pdp-crumbs { margin-bottom: .5rem; }
@media (max-width: 599.98px) {
    /* Fade the cut edge so the trail reads as "more to swipe". */
    .lp-crumbs ol { mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
    .lp-sortiment-head { margin-bottom: 1.5rem; }
}

/* Ways sideways (Kollektionen, Alle Produkte & Filter) right under the purpose line. */
.lp-sortiment-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1rem;
}
@media (max-width: 599.98px) {
    /* Both fit side by side at 390px (wrap below that). */
    .lp-sortiment-links .btn { padding-inline: 12px; letter-spacing: .03em; }
}

/* Count + sort above a product list: one row, also on phones (the "Sortieren" word goes visually). */
.lp-list-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
}
@media (max-width: 599.98px) {
    .lp-list-sort-label {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}

/* Product lists at the homepage density (the .lp-carousel-item widths: 5 / 3 / 2). */
.lp-product-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 959.98px) { .lp-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .lp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lp-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (min-width: 768px) { .lp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) { .lp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lp-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(26, 26, 26, .12);
    border-radius: 2px;
    background: #FFFFFF;
    color: #1A1A1A;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .15s ease;
}
.lp-tile { position: relative; }
.lp-tile:hover, .lp-tile:focus-within { border-color: #A07C45; }
/* The name is the card's link, stretched over the whole tile (::after) — like .lp-product-link, so
   the photo arrows (CardPhotos) can sit above it as their own buttons. Brand tiles use it too. */
.lp-tile-link { color: inherit; text-decoration: none; }
.lp-tile-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lp-tile-link:focus-visible { outline: none; }
.lp-tile-link:focus-visible::after { outline: 2px solid #A07C45; outline-offset: -2px; }
/* Absolute image: a flex item's content would otherwise override aspect-ratio (portrait photos). */
.lp-tile-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #F4F2EF; }
.lp-tile-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .5s ease; }
/* Same hover as the product cards and brand tiles: gold border + gentle zoom (single photo; several
   photos switch instead, CardPhotos). */
.lp-tile:hover .lp-tile-media > img, .lp-tile:focus-within .lp-tile-media > img { scale: 1.04; }
/* Name + short line in the product card's type (Montserrat, like the brand tiles), not the serif. */
.lp-tile-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.lp-tile-name { font-family: Montserrat, Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.25; }
.lp-tile-desc { font-size: .875rem; line-height: 1.35; color: #6B6B6B; }
@media (max-width: 599.98px) {
    .lp-tile-body { padding: 10px 12px 12px; }
    .lp-tile-name { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-tile-media > img { transition: none; }
}

/* ── Aktionsleiste (AnnouncementBar.razor) ────────────────────────────────────────────────────────
   Slim ink strip above the header, in normal flow: it scrolls away and the sticky header takes the
   top. No close button (nothing stored on the device). Desktop: one centred line. Phones: the sentence
   on its own line(s), code + link on the next; link and copy button keep 44 px tap height. White on
   ink (≈17:1); the gold focus ring stays ≥3:1 against ink. */
.lp-announce {
    background: var(--color-ink, #1a1a1a);
    color: #fff;
    font-size: .8125rem;
    line-height: 1.35;
    position: relative;
    z-index: 1101; /* above the sticky header's backdrop at the very top */
}
.lp-announce-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2px 16px;
    min-height: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 20px;
    row-gap: 0;
    text-align: center;
}
.lp-announce-text {
    margin: 0;
    padding: 8px 0;
    text-wrap: balance; /* no lone "31.10." on its own line */
}
.lp-announce-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 16px;
}
.lp-announce-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lp-announce-codevalue {
    border: 1px dashed rgb(255 255 255 / .75);
    border-radius: 2px;
    padding: 2px 8px;
    font-weight: 600;
    letter-spacing: .08em;
    white-space: nowrap;
}
.lp-announce-copy,
.lp-announce-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 0 4px;
    color: #fff;
    background: none;
    border: 0;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    cursor: pointer;
}
.lp-announce-copy:hover,
.lp-announce-link:hover {
    text-decoration-thickness: 2px;
}
@media (max-width: 639.98px) {
    .lp-announce-inner {
        padding: 4px 12px 0;
    }
    .lp-announce-text {
        flex: 1 1 100%;
        padding: 6px 0 0;
    }
}

/* Staging-only "Testshop" strip (MainLayout, IWebHostEnvironment.IsStaging) — above everything, on every
   storefront page incl. checkout. Bordeaux = the caution colour; white on #8B1A1A ≈ 9:1. */
.lp-testshop {
    background: var(--color-bordeaux, #8b1a1a);
    color: #fff;
    font-size: .8125rem;
    line-height: 1.35;
    text-align: center;
    padding: 6px 16px;
    position: relative;
    z-index: 1102;
    text-wrap: balance;
}