/*
 * EinEdelstein Homepage — Desktop source
 *
 * Shared 1280px visual stage and fluid Desktop composition.
 * Hero/Edelsteine use one bounded artwork system.
 * Rails remain native overflow + CSS Scroll Snap, enhanced by custom.js v6.25.5.
 * Homepage art-direction follows the IQIT/Page Builder shell:
 * Mobile <768px, Tablet 768–1023.98px, Desktop >=1024px.
 * Mobile Homepage is active and frozen. Tablet Hero + Edelsteine + Schmuckzubehör + Schmuck
 * + Kundenstimmen are active; later Tablet chapters stay guarded until their dedicated passes.
 *
 * CCC compatibility: avoid calc() additions directly between custom properties.
 * PrestaShop Smart cache for CSS can strip the whitespace required around `+`,
 * invalidating the affected declaration after aggregation/minification.
 */

:root {
    --ed-home-surface: #fbf7f3;
    --ed-home-text: #202027;
    --ed-home-muted: #4d4c51;
    --ed-home-accent: #6f67a3;

    --ed-home-stage-max: 1280px;
    --ed-home-stage-width:
        min(100% - 6rem, var(--ed-home-stage-max));
}

@media (min-width: 1024px) {
    #index {
        /*
         * Hero stage height lives at page scope because the responsive
         * Hero/Edelsteine artwork uses the same bounded stage geometry.
         * 1600×460 Hero geometry scaled to a 1280px max composition width
         * gives a natural 368px max height. The 360px floor preserves
         * the proven compact-desktop minimum near the 1024px Desktop boundary.
         */
        --ed-hero-stage-height:
            clamp(
                360px,
                min(calc(28.75vw - 1.725rem), 50vh),
                368px
            );

        /* Existing chapter typography roles remain unchanged. */
        --ed-home-title-lg:
            clamp(2.35rem, calc(1.55rem + 1.45vw), 2.85rem);
        --ed-home-title-md:
            clamp(2.05rem, calc(1.45rem + 0.90vw), 2.30rem);
        --ed-home-title-sm:
            clamp(1.65rem, calc(1.20rem + 0.55vw), 1.90rem);

        --ed-home-title-lg-tracking: -0.028em;
        --ed-home-title-md-tracking: -0.030em;
        --ed-home-title-sm-tracking: -0.030em;
    }
}

/* ===== Hero — Desktop contract ========================================== */

.ed-hero {
    position: relative;

    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: visible;

    background: var(--ed-home-surface);
    color: var(--ed-home-text);
}

/*
 * One stage = one coordinate system.
 * The section height comes from this normal-flow stage, not from the outer shell.
 * Decorative artwork is rendered from the adjacent Edelsteine surface so it can
 * span the Hero → Edelsteine handoff without duplicating DOM.
 */
.ed-hero__stage {
    --ed-hero-display-size:
        clamp(3.10rem, calc(2rem + 2vw), 4.50rem);
    --ed-hero-display-tracking: -0.035em;

    position: relative;
    width: var(--ed-home-stage-width);
    height: var(--ed-hero-stage-height);
    margin-inline: auto;
}

/* Message + CTA ------------------------------------------------------- */

.ed-hero__message {
    position: absolute;
    z-index: 2;
    top: 11.5%;
    left: 0;
    pointer-events: auto;
}

.ed-hero__copy {
    position: static;
}

.ed-hero__title {
    margin: 0;
    color: var(--ed-home-text);
    font-size: var(--ed-hero-display-size);
    line-height: 0.98;
    letter-spacing: var(--ed-hero-display-tracking);
}

.ed-hero__title-light,
.ed-hero__title-strong {
    display: block;
}

.ed-hero__title-light {
    font-weight: 300;
}

.ed-hero__title-strong {
    font-weight: 700;
}

.ed-hero__lead {
    margin: clamp(1.05rem, 1.55vw, 1.6rem) 0 0;
    color: var(--ed-home-muted);
    font-size: clamp(0.96rem, 1.05vw, 1.15rem);
    line-height: 1.45;
    font-weight: 400;
}

.ed-hero__link {
    display: inline-block;
    margin-top: clamp(1.05rem, 1.7vw, 1.65rem);
    padding-bottom: 0.18rem;

    color: var(--ed-home-accent);
    border-bottom: 1px solid currentColor;
    font-size: clamp(0.92rem, 0.98vw, 1.02rem);
    line-height: 1.3;
    text-decoration: none;
    pointer-events: auto;
}

.ed-hero__link:hover,
.ed-hero__link:focus {
    color: var(--ed-home-text);
    text-decoration: none;
}

.ed-hero__link:focus-visible {
    outline: 2px solid var(--ed-home-accent);
    outline-offset: 4px;
}

/* Discount tiers ------------------------------------------------------ */

.ed-hero__tiers {
    --ed-progress-dot-size: clamp(14px, 1.05vw, 17px);

    position: absolute;
    inset: 0;
    z-index: 5;

    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ed-hero-display-size);
    pointer-events: none;
}

.ed-hero__tier {
    --ed-dot-size: var(--ed-progress-dot-size);

    position: absolute;
    left: var(--ed-tier-x);
    top: var(--ed-tier-y);
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    color: var(--ed-home-text);
}

.ed-hero__tier::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;

    width: var(--ed-dot-size);
    height: var(--ed-dot-size);
    border-radius: 50%;
    background: rgb(111 103 163 / 0.96);
    transform: translate(-50%, -50%);
}

.ed-hero__tier-copy {
    position: absolute;
    left: var(--ed-copy-gap-x);
    top: calc(0px - var(--ed-copy-shift-y));

    display: block;
    min-width: max-content;
    text-align: left;
    pointer-events: auto;
}

.ed-hero__percent,
.ed-hero__threshold {
    display: block;
    white-space: nowrap;
}

.ed-hero__percent {
    color: var(--ed-home-text);
    line-height: 0.95;
    font-weight: 600;
    letter-spacing: -0.04em;
}

.ed-hero__threshold {
    margin-top: 0.36rem;
    color: var(--ed-home-muted);
    font-size: clamp(0.86rem, 0.95vw, 1.02rem);
    line-height: 1.2;
    font-weight: 400;
}

/* Exact approved Desktop trajectory anchors from the 1600×460 artwork. */
.ed-hero__tier--5 {
    --ed-tier-x: 53.10%;
    --ed-tier-y: 67.0815%;
    --ed-copy-gap-x: clamp(22px, 2.10vw, 34px);
    --ed-copy-shift-y: clamp(15px, 1.18vw, 19px);
}

.ed-hero__tier--5 .ed-hero__percent {
    font-size: 0.53em;
}

.ed-hero__tier--10 {
    --ed-tier-x: 67.21%;
    --ed-tier-y: 48.3415%;
    --ed-copy-gap-x: clamp(19px, 1.79vw, 29px);
    --ed-copy-shift-y: clamp(19px, 1.54vw, 25px);
}

.ed-hero__tier--10 .ed-hero__percent {
    font-size: 0.635em;
}

.ed-hero__tier--15 {
    --ed-tier-x: 80.23%;
    --ed-tier-y: 18.1315%;
    --ed-copy-gap-x: clamp(14px, 1.17vw, 19px);
    --ed-copy-shift-y: clamp(20px, 1.62vw, 26px);
}

.ed-hero__tier--15 .ed-hero__percent {
    font-size: 0.75em;
}

/* Signature ----------------------------------------------------------- */

.ed-hero__signature {
    position: absolute;
    right: 0;
    bottom: clamp(22px, 3.6vw, 34px);
    z-index: 6;

    margin: 0;
    color: var(--ed-home-accent);
    font-size: clamp(7px, 0.46vw, 8.5px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.28em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.ed-hero__signature span {
    display: block;
}

/* Native text interaction. */
.ed-hero__copy,
.ed-hero__title,
.ed-hero__title-light,
.ed-hero__title-strong,
.ed-hero__lead,
.ed-hero__tier-copy,
.ed-hero__percent,
.ed-hero__threshold,
.ed-hero__link,
.ed-hero__signature,
.ed-hero__signature span {
    -webkit-user-select: text;
    user-select: text;
}

/*
 * Desktop remains frozen.
 * The same shared Hero HTML is reused by Mobile and Tablet; only responsive
 * presentation/art direction changes. No duplicated breakpoint markup.
 */

/* ===== Hero — Mobile v1 art-direction contract ======================== */
@media (max-width: 767.98px) {
    #index {
        /*
         * One Mobile artwork coordinate system for Hero + Edelsteine handoff.
         * 375×310 is the visible Hero region; the SVG itself extends to 365
         * so the original rotated lower orb can continue naturally below it.
         */
        --ed-hero-mobile-stage-height:
            min(
                82.6667vw,
                clamp(355px, calc(35vw + 205px), 455px)
            );
        --ed-hero-mobile-master-ratio: 1.1774193548; /* 365 / 310 */
    }


    #index .ed-hero__stage {
        /*
         * 375×310 is the approved Mobile artwork reference, not a fixed box.
         * Natural growth is preserved through the compact Mobile range; from
         * there vertical growth is progressively restrained and capped.
         */
        --ed-hero-display-size:
            clamp(1.8rem, calc(1.15rem + 3.2vw), 2.35rem);

        --ed-mobile-title-size:
            clamp(1.8rem, calc(0.95rem + 3.9vw), 3.15rem);
        --ed-mobile-lead-size:
            clamp(0.72rem, calc(0.54rem + 0.75vw), 1.05rem);
        --ed-mobile-link-size:
            clamp(0.72rem, calc(0.55rem + 0.70vw), 0.98rem);

        height: var(--ed-hero-mobile-stage-height);
        background-image:
            url("/themes/einedelstein/assets/img/home/ed-hero-mobile.svg");
        background-size:
            100% calc(
                var(--ed-hero-mobile-stage-height)
                * var(--ed-hero-mobile-master-ratio)
            );
    }

    /* Message --------------------------------------------------------- */

    #index .ed-hero__message {
        left: clamp(0.85rem, 4vw, 1.1rem);
        width: 56%;
    }

    #index .ed-hero__title {
        font-size: var(--ed-mobile-title-size);
    }

    #index .ed-hero__lead {
        margin-top:
            clamp(0.65rem, calc(0.45rem + 1vw), 0.9rem);
        font-size: var(--ed-mobile-lead-size);
    }

    #index .ed-hero__link {
        margin-top:
            clamp(0.65rem, calc(0.45rem + 1vw), 0.9rem);
        font-size: var(--ed-mobile-link-size);
    }

    /* Discount tiers -------------------------------------------------- */

    #index .ed-hero__tiers {
        --ed-progress-dot-size: clamp(9px, 2.7vw, 13px);
        transform: translateY(clamp(8px, 2.4vw, 12px));
    }

    #index .ed-hero__tier--5 {
        --ed-tier-y: 66%;
        --ed-copy-gap-x: clamp(10px, 3vw, 15px);
        --ed-copy-shift-y: clamp(9px, 2.5vw, 13px);
        --ed-tail-length: calc(9.23vw + 3px);
    }

    #index .ed-hero__tier--10 {
        --ed-tier-y: 58%;
        --ed-copy-gap-x: clamp(10px, 3vw, 15px);
        --ed-copy-shift-y: clamp(11px, 3vw, 15px);
        --ed-tail-length: calc(11.92vw + 3px);
    }

    #index .ed-hero__tier--15 {
        --ed-tier-y: 45%;
        --ed-copy-gap-x: clamp(9px, 2.6vw, 14px);
        --ed-copy-shift-y: clamp(12px, 3.2vw, 17px);
        --ed-tail-length: calc(15.23vw + 3px);
    }

    /*
     * Compact-Mobile hierarchy: percentages stay subordinate to the title.
     * Their shared parent scale remains fluid; only the relative tier weights
     * differ to preserve the 5 / 10 / 15 visual progression.
     */


    #index .ed-hero__threshold {
        margin-top: 0.22rem;
        font-size:
            clamp(0.65rem, calc(0.60rem + 0.3vw), 0.75rem);
    }

    /*
     * Vertical Mobile tails. Each starts at the physical centre of its dot.
     * Lengths are mapped to the approved Mobile SVG curve, with a small +3px
     * continuation below the boundary. The dot itself renders above the tail.
     */


    /* Signature ------------------------------------------------------- */

    #index .ed-hero__signature {
        right: clamp(0.55rem, 2.8vw, 0.9rem);
        bottom: 4.5%;
        font-size: clamp(5.5px, 1.45vw, 7px);
        letter-spacing: 0.24em;
    }
}


/* ===== Shared category system ========================================== */
.ed-home-category {
    --ed-category-surface: #ffffff;
    --ed-category-surface-transparent: rgb(255 255 255 / 0);
    --ed-category-page-gutter: max(3rem, calc((100vw - 1440px) / 2));
    --ed-category-rail-pull: 0rem;
    --ed-category-copy-inset: 0rem;
    --ed-category-left-peek: 0px;
    --ed-category-rail-right-inset: 0px;
    --ed-category-right-fade-width: 0px;
    --ed-category-card-width: clamp(320px, 24vw, 386px);

    --ed-category-eyebrow-size:
        clamp(0.66rem, calc(0.58rem + 0.09vw), 0.70rem);
    --ed-category-title-size:
        clamp(2.55rem, calc(0.50rem + 2.80vw), 3.02rem);
    --ed-category-lead-size:
        clamp(0.94rem, calc(0.84rem + 0.11vw), 0.98rem);
    --ed-category-cta-size:
        clamp(0.90rem, calc(0.83rem + 0.08vw), 0.93rem);
    --ed-category-card-title-size:
        clamp(1.05rem, calc(0.95rem + 0.12vw), 1.10rem);
    --ed-category-card-description-size:
        clamp(0.78rem, calc(0.72rem + 0.07vw), 0.82rem);

    --ed-category-inactive-media-opacity: 0.46;
    --ed-category-inactive-media-shadow: 0 4px 12px rgb(32 32 39 / 0.045);
    --ed-category-inactive-media-transform: scale(0.88);
    --ed-category-active-media-shadow: 0 9px 30px rgb(32 32 39 / 0.13);
    --ed-category-active-media-transform: translateY(-24px) scale(1);
    --ed-category-inactive-title-opacity: 0.32;
    --ed-category-inactive-title-transform: scale(0.9);
    --ed-category-inactive-description-visibility: hidden;
    --ed-category-inactive-description-opacity: 0;
    --ed-category-inactive-description-transform: translateY(-4px);
    --ed-category-active-arrow-opacity: 1;

    --ed-category-active-inset: calc(
        var(--ed-category-copy-inset)
        - (
            var(--ed-category-rail-pull)
            - var(--ed-category-left-peek)
        )
    );

    position: relative;
    z-index: 1;
    isolation: isolate;

    overflow: visible;
    background: var(--ed-category-surface);
}

.ed-home-category__content {
    position: relative;
    z-index: 1;
    width: var(--ed-home-stage-width);
    margin-inline: auto;
}

.ed-home-category__layout {
    display: grid;
    align-items: start;
}

.ed-home-category__visual {
    grid-area: visual;
    align-self: start;
    min-width: 0;
}

/*
 * Shared editorial-media primitive.
 * Section CSS owns only frame ratio / crop / composition.
 */
.ed-home-category__picture,
.ed-home-category__editorial-media,
.ed-home-category__image {
    display: block;
    width: 100%;
}

.ed-home-category__picture,
.ed-home-category__editorial-media {
    line-height: 0;
}

.ed-home-category__editorial-media {
    position: relative;
    box-shadow:
        0 18px 38px rgb(32 32 39 / 0.09),
        0 4px 12px rgb(32 32 39 / 0.035);
}

.ed-home-category__image {
    height: auto;
    object-fit: contain;
}

.ed-home-category__intro {
    grid-area: intro;
}

/*
 * Shared homepage chapter-heading identity.
 * Breakpoints/sections own only role size, wrapping and placement.
 */
.ed-home-category__eyebrow,
.ed-home-testimonials__eyebrow,
.ed-home-zodiac__eyebrow,
.ed-home-instagram__eyebrow {
    color: var(--ed-home-accent);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.28em;
}

.ed-home-category__title,
.ed-home-testimonials__title,
.ed-home-zodiac__title,
.ed-home-instagram__title {
    margin: 0;
    color: var(--ed-home-text);
    font-weight: 300;
}

.ed-home-category__eyebrow {
    margin: 0 0 clamp(0.85rem, 1.1vw, 1.1rem);
    font-size: var(--ed-category-eyebrow-size);
}

.ed-home-category__title {
    max-width: 18ch;
    font-size: var(--ed-category-title-size);
    line-height: 0.99;
    letter-spacing: -0.042em;
}

.ed-home-category__title span {
    display: block;
}

.ed-home-category__lead {
    max-width: 58ch;
    margin: clamp(1.15rem, 1.55vw, 1.6rem) 0 0;

    color: var(--ed-home-muted);
    font-size: var(--ed-category-lead-size);
    font-weight: 400;
    line-height: 1.5;
}

.ed-home-category__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.52rem;

    margin-top: clamp(1.15rem, 1.6vw, 1.7rem);
    padding: 0 0 0.18rem;

    color: var(--ed-home-accent);
    border-bottom: 1px solid currentColor;
    font-size: var(--ed-category-cta-size);
    line-height: 1.3;
    text-decoration: none;

    transition:
        color 160ms ease,
        border-color 160ms ease;
}

.ed-home-category__cta-arrow {
    display: inline-block;
    transition: transform 160ms ease;
}

.ed-home-category__cta:focus-visible,
.ed-home-category__card-link:focus-visible {
    outline: 2px solid var(--ed-home-accent);
    outline-offset: 4px;
}

.ed-home-category__categories {
    grid-area: categories;
    min-width: 0;
}

.ed-home-category__rail-viewport {
    position: relative;
    min-width: 0;
    margin-right: var(--ed-category-rail-right-inset);
}

.ed-home-category__rail-viewport::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: -2px;
    width: 34px;

    pointer-events: none;
    background: linear-gradient(
        to right,
        var(--ed-category-surface) 0,
        var(--ed-category-surface-transparent) 26px,
        var(--ed-category-surface-transparent) 100%
    );

    opacity: 1;
    transition: opacity 140ms ease;
}

.ed-home-category.is-at-start
.ed-home-category__rail-viewport::before {
    opacity: 0;
}

.ed-home-category__rail-viewport::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    right: -2px;
    bottom: 0;
    width: var(--ed-category-right-fade-width);

    pointer-events: none;
    background: linear-gradient(
        to left,
        var(--ed-category-surface) 0,
        var(--ed-category-surface-transparent) 26px,
        var(--ed-category-surface-transparent) 100%
    );

    opacity: 1;
    transition: opacity 140ms ease;
}

.ed-home-category.is-at-end
.ed-home-category__rail-viewport::after {
    opacity: 0;
}

.ed-home-category__rail {
    display: flex;
    gap: clamp(18px, 1.6vw, 28px);

    margin: 0;
    padding:
        clamp(56px, 4vw, 68px)
        max(
            var(--ed-category-page-gutter),
            calc(100% - var(--ed-category-active-inset) - var(--ed-category-card-width))
        )
        clamp(18px, 1.3vw, 24px)
        var(--ed-category-active-inset);
    list-style: none;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: var(--ed-category-active-inset);
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

.ed-home-category__rail::-webkit-scrollbar {
    display: none;
}

.ed-home-category__card {
    flex: 0 0 var(--ed-category-card-width);
    min-width: 0;
    scroll-snap-align: start;
}

.ed-home-category__card-link {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;

    color: inherit;
    background: transparent;
    border: 0;
    text-decoration: none;
}

.ed-home-category__card-title {
    display: block;
    width: 100%;
    min-height: 1.35em;
    margin: clamp(13px, 1.05vw, 17px) 0 0;

    color: var(--ed-home-text);
    font-size: var(--ed-category-card-title-size);
    font-weight: 600;
    line-height: 1.2;

    transform-origin: center center;
    transition:
        opacity 220ms ease,
        transform 220ms ease,
        color 180ms ease;
}

.ed-home-category__card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;

    border: 0;
    border-radius: clamp(16px, 1.35vw, 22px);
    background: #ffffff;
    box-shadow: 0 5px 14px rgb(32 32 39 / 0.055);

    transform-origin: center center;
    transition:
        opacity 240ms ease,
        transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ed-home-category__card-media picture,
.ed-home-category__card-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.ed-home-category__card-media img {
    object-fit: contain;
    object-position: center;
}

.ed-home-category__card-description {
    display: block;
    min-height: 2.8em;
    margin-top: clamp(5px, 0.45vw, 8px);

    color: var(--ed-home-muted);
    font-size: var(--ed-category-card-description-size);
    line-height: 1.42;

    transition:
        opacity 190ms ease,
        transform 190ms ease,
        visibility 0s linear 190ms;
}

.ed-home-category__card-link::before,
.ed-home-category__card-link::after {
    position: absolute;
    z-index: 2;
    top: clamp(-48px, -3.2vw, -40px);

    color: var(--ed-home-accent);
    font-size: 1.05rem;
    line-height: 1;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.ed-home-category__card-link::before {
    content: "←";
    right: 3.35rem;
}

.ed-home-category__card-link::after {
    content: "→";
    right: 1.25rem;
}

.ed-home-category.is-scroll-enhanced
.ed-home-category__card:not(.is-active)
.ed-home-category__card-media {
    opacity: var(--ed-category-inactive-media-opacity);
    box-shadow: var(--ed-category-inactive-media-shadow);
    transform: var(--ed-category-inactive-media-transform);
}

.ed-home-category.is-scroll-enhanced
.ed-home-category__card.is-active
.ed-home-category__card-media {
    opacity: 1;
    box-shadow: var(--ed-category-active-media-shadow);
    transform: var(--ed-category-active-media-transform);
}

.ed-home-category.is-scroll-enhanced
.ed-home-category__card:not(.is-active)
.ed-home-category__card-title {
    opacity: var(--ed-category-inactive-title-opacity);
    transform: var(--ed-category-inactive-title-transform);
}

.ed-home-category.is-scroll-enhanced
.ed-home-category__card.is-active
.ed-home-category__card-title {
    opacity: 1;
    transform: scale(1);
}

.ed-home-category.is-scroll-enhanced
.ed-home-category__card:not(.is-active)
.ed-home-category__card-description {
    visibility: var(--ed-category-inactive-description-visibility);
    opacity: var(--ed-category-inactive-description-opacity);
    transform: var(--ed-category-inactive-description-transform);
}

.ed-home-category.is-scroll-enhanced
.ed-home-category__card.is-active
.ed-home-category__card-description {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 45ms, 45ms, 0s;
}

.ed-home-category.is-scroll-enhanced
.ed-home-category__card.is-active
.ed-home-category__card-link::before,
.ed-home-category.is-scroll-enhanced
.ed-home-category__card.is-active
.ed-home-category__card-link::after {
    opacity: var(--ed-category-active-arrow-opacity);
    transform: translateX(0);
}

.ed-home-category.is-scroll-enhanced
.ed-home-category__card:first-child.is-active
.ed-home-category__card-link::before,
.ed-home-category.is-scroll-enhanced
.ed-home-category__card:last-child.is-active
.ed-home-category__card-link::after {
    opacity: 0;
}

.ed-home-category__rail:focus-visible {
    outline: 2px solid rgb(111 103 163 / 0.72);
    outline-offset: 4px;
    border-radius: 4px;
}

@media (any-hover: hover) and (any-pointer: fine) {
    .ed-home-category__rail {
        cursor: grab;
    }

    .ed-home-category__cta:hover {
        color: var(--ed-home-text);
        border-color: var(--ed-home-text);
    }

    .ed-home-category__cta:hover .ed-home-category__cta-arrow {
        transform: translateX(4px);
    }

    .ed-home-category__card-link:hover .ed-home-category__card-title {
        color: var(--ed-home-accent);
    }

    .ed-home-category.is-scroll-enhanced
    .ed-home-category__card.is-active
    .ed-home-category__card-link:hover::after {
        transform: translateX(4px);
    }

    .ed-home-category.is-scroll-enhanced
    .ed-home-category__card.is-active
    .ed-home-category__card-link:hover::before {
        transform: translateX(-4px);
    }
}

.ed-home-category__rail.is-mouse-dragging {
    cursor: grabbing;
}

.ed-home-category__rail-footer {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 30px);
    width: min(88%, 770px);
    margin-top: clamp(20px, 1.9vw, 30px);
}

.ed-home-category__progress {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 14px;

    overflow: visible;
    background: transparent;
    cursor: pointer;
}

.ed-home-category__progress::before {
    content: "";
    position: absolute;
    inset: 6px 0 auto;
    height: 2px;

    border-radius: 999px;
    background: rgb(111 103 163 / 0.12);
    pointer-events: none;
}

.ed-home-category__progress-thumb {
    position: absolute;
    top: 6px;
    left: 0;
    height: 2px;

    width: var(--ed-category-thumb-width, 22%);
    border-radius: 999px;
    background: rgb(111 103 163 / 0.88);
    pointer-events: none;

    transform: translate3d(
        var(--ed-category-thumb-x, 0px),
        0,
        0
    );
}

.ed-home-category__progress:focus-visible {
    outline: 2px solid rgb(111 103 163 / 0.42);
    outline-offset: 3px;
    border-radius: 6px;
}

.ed-home-category__controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.ed-home-category__controls[hidden] {
    display: none;
}

/*
 * Universal rail measurement contract.
 *
 * When a rail has no overflow, keep its footer/progress/controls in layout so
 * the shared engine can still measure the real progress-track width. The UI is
 * visually hidden with visibility rather than removed with display:none.
 *
 * This rule is section- and breakpoint-agnostic: it follows the universal rail
 * data contract on Desktop, Tablet and Mobile variants that reuse this engine.
 */
[data-ed-category-section]:not(.is-scroll-enhanced)
.ed-home-category__rail-footer {
    visibility: hidden;
    pointer-events: none;
}

[data-ed-category-section]:not(.is-scroll-enhanced)
[data-ed-category-progress][hidden] {
    display: block;
}

[data-ed-category-section]:not(.is-scroll-enhanced)
[data-ed-category-controls][hidden] {
    display: flex;
}

.ed-home-category__control {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;

    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ed-home-text);
    cursor: pointer;

    font: inherit;
    font-size: 1.08rem;
    line-height: 1;

    transition:
        color 150ms ease,
        opacity 150ms ease;
}

.ed-home-category__control:hover {
    color: var(--ed-home-accent);
}

.ed-home-category__control:focus-visible {
    outline: 2px solid var(--ed-home-accent);
    outline-offset: 2px;
    border-radius: 999px;
}

.ed-home-category__control:disabled {
    opacity: 0.28;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .ed-home-category__cta,
    .ed-home-category__cta-arrow,
    .ed-home-category__card-media,
    .ed-home-category__card-title,
    .ed-home-category__card-description,
    .ed-home-category__card-link::before,
    .ed-home-category__card-link::after,
    .ed-home-category__rail-viewport::before,
    .ed-home-category__rail-viewport::after,
    .ed-home-category__control {
        transition: none;
    }

    .ed-home-category.is-scroll-enhanced
    .ed-home-category__card.is-active
    .ed-home-category__card-media,
    .ed-home-category.is-scroll-enhanced
    .ed-home-category__card:not(.is-active)
    .ed-home-category__card-media,
    .ed-home-category.is-scroll-enhanced
    .ed-home-category__card.is-active
    .ed-home-category__card-title,
    .ed-home-category.is-scroll-enhanced
    .ed-home-category__card:not(.is-active)
    .ed-home-category__card-title {
        transform: none;
    }
}

/* ===== Equal-weight hub rail mode ===================================== */
.ed-home-category--hub-rail {
    --ed-category-inactive-media-opacity: 1;
    --ed-category-inactive-media-shadow: 0 5px 14px rgb(32 32 39 / 0.055);
    --ed-category-inactive-media-transform: none;
    --ed-category-active-media-shadow: 0 5px 14px rgb(32 32 39 / 0.055);
    --ed-category-active-media-transform: none;
    --ed-category-inactive-title-opacity: 1;
    --ed-category-inactive-title-transform: none;
    --ed-category-inactive-description-visibility: visible;
    --ed-category-inactive-description-opacity: 1;
    --ed-category-inactive-description-transform: none;
    --ed-category-active-arrow-opacity: 0;
}

.ed-home-category--hub-rail:not(.is-scroll-enhanced)
.ed-home-category__rail {
    justify-content: center;
}

/* ===== Schmuckzubehör — shared component identity ===================== */
.ed-home-category--supplies {
    --ed-category-surface: #ffffff;
    --ed-category-surface-transparent: rgb(255 255 255 / 0);

    display: flow-root;
    background: #ffffff;
}

/*
 * Device-neutral editorial details.
 * Ratio/crop/overflow/shadow remain responsive decisions.
 */
.ed-home-category--supplies
.ed-home-category__editorial-media {
    border: 0;
    border-radius: 0;
}

.ed-home-category--supplies
.ed-home-category__editorial-media
.ed-home-category__image {
    object-position: center;
}

/* ===== Mobile homepage rhythm — shared page-level tokens ================= */
/*
 * From this point onward, non-category homepage chapters can reuse the same
 * Mobile gutter, section rhythm and heading scale without inventing a second
 * fluid system. Existing category output stays numerically unchanged.
 */
@media (max-width: 767.98px) {
    #index {
        --ed-home-mobile-page-gutter:
            clamp(16px, 4.6vw, 28px);
        --ed-home-mobile-section-gap:
            clamp(48px, 12vw, 72px);

        --ed-home-mobile-eyebrow-size:
            clamp(0.64rem, calc(0.59rem + 0.25vw), 0.72rem);
        --ed-home-mobile-eyebrow-lift:
            clamp(5px, 1.55vw, 7px);
        --ed-home-mobile-title-size:
            clamp(1.42rem, calc(0.30rem + 5.65vw), 2.65rem);
    }

    #index .ed-home-category .ed-home-category__eyebrow,
    #index .ed-home-testimonials .ed-home-testimonials__eyebrow,
    #index .ed-home-zodiac .ed-home-zodiac__eyebrow,
    #index .ed-home-instagram .ed-home-instagram__eyebrow {
        font-size: var(--ed-home-mobile-eyebrow-size);
    }

    #index .ed-home-category .ed-home-category__title,
    #index .ed-home-testimonials .ed-home-testimonials__title,
    #index .ed-home-zodiac .ed-home-zodiac__title,
    #index .ed-home-instagram .ed-home-instagram__title {
        font-size: var(--ed-home-mobile-title-size);
        line-height: 1.01;
        letter-spacing: -0.038em;
    }
}

/* ===== Non-Desktop category interaction — Mobile + Tablet ============== */
/*
 * Mobile and Tablet reuse the same category component and rail engine.
 * Only presentation shared by BOTH non-Desktop breakpoints lives here:
 * equal-weight cards, gesture-first native overflow, no edge fades/arrows,
 * and the common non-Desktop heading rhythm.
 *
 * Geometry, typography scale and editorial art direction remain breakpoint-
 * specific below. Desktop >=1024px never enters this contract.
 */
@media (max-width: 1023.98px) {
    #index .ed-home-category {
        --ed-category-inactive-media-opacity: 1;
        --ed-category-inactive-media-shadow:
            0 5px 14px rgb(32 32 39 / 0.055);
        --ed-category-inactive-media-transform: none;
        --ed-category-active-media-shadow:
            0 5px 14px rgb(32 32 39 / 0.055);
        --ed-category-active-media-transform: none;
        --ed-category-inactive-title-opacity: 1;
        --ed-category-inactive-title-transform: none;
        --ed-category-inactive-description-visibility: visible;
        --ed-category-inactive-description-opacity: 1;
        --ed-category-inactive-description-transform: none;
        --ed-category-active-arrow-opacity: 0;
    }

    #index .ed-home-category__title {
        line-height: 1.01;
        letter-spacing: -0.038em;
    }

    #index .ed-home-category__title > span {
        margin-top: 0.10em;
    }

    #index .ed-home-category
    .ed-home-category__rail-viewport::before,
    #index .ed-home-category
    .ed-home-category__rail-viewport::after {
        display: none;
    }

    #index .ed-home-category
    .ed-home-category__rail {
        scroll-snap-type: none;
        scroll-padding-inline-start: 0;
        padding-left: var(--ed-category-page-gutter);
        padding-right: var(--ed-category-page-gutter);
    }

    #index .ed-home-category
    .ed-home-category__card {
        scroll-snap-align: none;
    }

    #index [data-ed-category-section]
    .ed-home-category__controls {
        display: none !important;
    }
}


/* ===== Non-Desktop structural primitives — Mobile + Tablet ============ */
/*
 * Existing component selectors whose structural behavior is identical on
 * Mobile and Tablet. Breakpoint blocks below keep only geometry/art direction
 * that actually changes with viewport width.
 */
@media (max-width: 1023.98px) {
    #index .ed-hero {
        display: block !important;
        position: relative;
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
        overflow: hidden;
        background: var(--ed-home-surface);
        color: var(--ed-home-text);
    }

    #index .ed-hero__stage {
        --ed-hero-display-tracking: -0.035em;

        position: relative;
        width: 100%;
        max-width: none;
        margin-inline: auto;
        background-repeat: no-repeat;
        background-position: center top;
    }

    #index .ed-hero__message {
        top: 8%;
    }

    #index .ed-hero__lead {
        line-height: 1.42;
    }

    #index .ed-hero__tiers {
        font-size: var(--ed-hero-display-size);
    }

    #index .ed-hero__tier--5 {
        --ed-tier-x: 18%;
    }

    #index .ed-hero__tier--10 {
        --ed-tier-x: 47%;
    }

    #index .ed-hero__tier--15 {
        --ed-tier-x: 74%;
    }

    #index .ed-hero__tier--5 .ed-hero__percent {
        font-size: 0.50em;
    }

    #index .ed-hero__tier--10 .ed-hero__percent {
        font-size: 0.58em;
    }

    #index .ed-hero__tier--15 .ed-hero__percent {
        font-size: 0.66em;
    }

    #index .ed-hero__threshold {
        line-height: 1.15;
    }

    #index .ed-hero__tier::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 1.5px;
        height: var(--ed-tail-length);
        transform: translateX(-50%);
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            rgb(111 103 163 / 0.48) 0%,
            rgb(111 103 163 / 0.34) 32%,
            rgb(111 103 163 / 0.18) 68%,
            rgb(111 103 163 / 0) 100%
        );
    }

    #index .ed-hero__tier-copy {
        z-index: 3;
    }

    #index .ed-hero__signature {
        line-height: 1.4;
    }

    #index .ed-home-category--gemstones,
    #index .ed-home-category--supplies,
    #index .ed-home-category--jewelry {
        display: flow-root !important;
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
        overflow: hidden;
    }

    #index .ed-home-category--supplies
    .ed-home-category__content,
    #index .ed-home-category--jewelry
    .ed-home-category__content {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    #index .ed-home-category--supplies
    .ed-home-category__rail {
        justify-content: flex-start;
        gap: clamp(16px, 1.35vw, 23px);
    }

    #index .ed-home-category--gemstones::before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 50%;
        width: 100vw;
        max-width: 100vw;
        transform: translateX(-50%);
        pointer-events: none;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 100%;
    }

    #index .ed-home-category--jewelry__editorial-picture {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
    }
}

/* ===== Mobile category contract — shared art-direction scale (v1.9) ======= */
/*
 * Mobile does not introduce a second component system.
 * It reuses the existing category primitives, rail engine and variables.
 * Only the shared Mobile typography/rail scale and section composition change.
 *
 * These values are intentionally defined on the shared category component so
 * Edelsteine, Schmuckzubehör and Schmuck can inherit the same Mobile language
 * when their art-direction passes are activated.
 */
@media (max-width: 767.98px) {
    #index .ed-home-category {
        --ed-category-page-gutter:
            var(--ed-home-mobile-page-gutter);
        --ed-category-copy-inset:
            var(--ed-category-page-gutter);
        --ed-category-right-fade-width:
            clamp(24px, 7vw, 36px);

        /*
         * Shared editorial → rail tightening for Mobile category chapters.
         * Edelsteine established this rhythm; Schmuckzubehör inherits it.
         */
        --ed-category-mobile-editorial-rail-lift:
            clamp(6px, 2vw, 10px);

        /*
         * Shared Mobile editorial-stage inset.
         * Default is zero; a section may use it to create real background
         * space above its artwork without changing the inter-section gap.
         */
        --ed-category-mobile-editorial-top-inset: 0px;

        /* Same shared card token; only its Mobile scale changes. */
        --ed-category-card-width:
            clamp(168px, 52vw, 280px);

        /* Shared Mobile typography roles. */
        --ed-category-lead-size:
            clamp(0.82rem, calc(0.76rem + 0.30vw), 0.94rem);
        --ed-category-cta-size:
            clamp(0.78rem, calc(0.72rem + 0.30vw), 0.90rem);
        --ed-category-card-title-size:
            clamp(0.90rem, calc(0.84rem + 0.30vw), 1.00rem);
        --ed-category-card-description-size:
            clamp(0.72rem, calc(0.67rem + 0.25vw), 0.80rem);
    }

    /*
     * Keep editorial-stage spacing separate from section-to-section spacing.
     * A zero default leaves Edelsteine and Schmuckzubehör unchanged.
     */
    #index .ed-home-category
    .ed-home-category__visual {
        padding-top:
            var(--ed-category-mobile-editorial-top-inset);
    }

    /*
     * Shared Mobile editorial dissolve.
     *
     * The artwork itself fades to transparency, so every section reveals its
     * real background underneath instead of painting a duplicate colour layer.
     *
     * Section configuration:
     * - Edelsteine: top + bottom dissolve
     * - Schmuck:    top dissolve only
     * - Schmuckzubehör: no dissolve required
     */
    #index .ed-home-category--gemstones
    .ed-home-category__editorial-media,
    #index .ed-home-category--jewelry__editorial-picture {
        -webkit-mask-image:
            linear-gradient(
                to bottom,
                var(--ed-category-mobile-dissolve-start) 0,
                #000 var(--ed-category-mobile-dissolve-top),
                #000 calc(
                    100%
                    - var(--ed-category-mobile-dissolve-bottom)
                ),
                var(--ed-category-mobile-dissolve-end) 100%
            );
        mask-image:
            linear-gradient(
                to bottom,
                var(--ed-category-mobile-dissolve-start) 0,
                #000 var(--ed-category-mobile-dissolve-top),
                #000 calc(
                    100%
                    - var(--ed-category-mobile-dissolve-bottom)
                ),
                var(--ed-category-mobile-dissolve-end) 100%
            );

        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    /*
     * Mobile polish: visually lift every chapter eyebrow without moving the
     * title or changing the document flow / section geometry.
     */
    #index .ed-home-category__eyebrow,
    #index .ed-home-testimonials__eyebrow,
    #index .ed-home-zodiac__eyebrow,
    #index .ed-home-instagram__eyebrow {
        transform:
            translateY(
                calc(var(--ed-home-mobile-eyebrow-lift) * -1)
            );
    }
}

/* ===== Edelsteine — Mobile final architecture ========================= */
/*
 * One semantic HTML tree.
 * Mobile art direction overlays the real intro on the dedicated editorial
 * <picture>; the shared native-scroll category rail remains a separate row.
 * No duplicated responsive markup, negative positioning patches or CSS crop.
 */
@media (max-width: 767.98px) {
    #index .ed-home-category--gemstones {
        --ed-gemstones-mobile-intro-top:
            clamp(42px, calc(7vw + 16px), 56px);

        /* Shared dissolve primitive: Edelsteine uses both edges. */
        --ed-category-mobile-dissolve-start: transparent;
        --ed-category-mobile-dissolve-top:
            clamp(44px, 12vw, 56px);
        --ed-category-mobile-dissolve-bottom:
            clamp(20px, 5.8vw, 24px);
        --ed-category-mobile-dissolve-end: transparent;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__content {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "editorial"
            "categories";

        width: 100%;
        padding:
            0
            0
            calc(var(--ed-category-page-gutter) * 2);
    }

    /* Real HTML intro overlays the quiet upper-right area of the artwork. */
    #index .ed-home-category--gemstones
    .ed-home-category__intro {
        grid-area: editorial;
        justify-self: end;

        width: min(68%, 420px);
        margin:
            var(--ed-gemstones-mobile-intro-top)
            var(--ed-category-page-gutter)
            0
            0;
        padding: 0;
        text-align: right;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__intro hgroup {
        margin: 0 0 0 auto;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__eyebrow,
    #index .ed-home-category--gemstones
    .ed-home-category__title {
        text-align: left;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__title {
        white-space: nowrap;
    }

    /* Desktop long copy remains semantic but is intentionally absent visually. */
    #index .ed-home-category--gemstones
    .ed-home-category__lead {
        display: none;
    }

    /* Full-width production artwork; crop is baked into the Mobile assets. */
    #index .ed-home-category--gemstones
    .ed-home-category__visual {
        grid-area: editorial;
        width: 100%;
    }

    /*
     * Top + bottom handoffs are supplied by the shared editorial mask above.
     * No pseudo-elements or duplicated background colours are needed here.
     */

    /* Override only the shared editorial shadow; all other media primitives stay shared. */


    /*
     * Shared Mobile editorial → rail rhythm.
     * Both category chapters use the exact spacing proven on Edelsteine.
     * This is real flow spacing — no transform and no negative margin.
     */
    #index .ed-home-category--gemstones
    .ed-home-category__categories,
    #index .ed-home-category--supplies
    .ed-home-category__categories {
        width: 100%;
        margin:
            calc(
                var(--ed-category-page-gutter)
                - var(--ed-category-mobile-editorial-rail-lift)
            )
            0
            0;
    }

    #index .ed-home-category--supplies
    .ed-home-category__categories {
        z-index: 2;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__rail,
    #index .ed-home-category--supplies
    .ed-home-category__rail {
        padding-top:
            calc(
                var(--ed-category-page-gutter)
                + 16px
            );
        padding-bottom:
            var(--ed-category-page-gutter);
    }

    /*
     * Existing section outro owns the Edelsteine → Schmuckzubehör fade and
     * stays inside the section's already-reserved bottom breathing room.
     */
    #index .ed-home-category--gemstones
    .ed-gemstones-intro__outro {
        height:
            calc(var(--ed-category-page-gutter) * 2);
    }
}

/* ===== Schmuckzubehör — Mobile editorial art direction =============== */
/*
 * Same semantic HTML tree and shared rail engine.
 * Mobile art direction mirrors the chapter rhythm of Edelsteine:
 * real HTML intro overlays the quiet upper-left area of the dedicated
 * white editorial asset; visual mass remains lower-right; rail stays below.
 */
@media (max-width: 767.98px) {
    #index .ed-home-category--supplies {
        --ed-supplies-mobile-intro-top:
            clamp(28px, 7.4vw, 42px);

        background: var(--ed-category-surface);
        color: var(--ed-home-text);
    }

    /*
     * Edelsteine already owns the previous chapter's fade-to-white handoff.
     * No extra section gap is inserted before the Schmuckzubehör artwork.
     */
    #index .ed-home-category--supplies
    .ed-home-category__content {
        padding-top: 0;
    }

    #index .ed-home-category--supplies
    .ed-home-category__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "editorial"
            "categories";

        width: 100%;
        padding:
            0
            0
            calc(var(--ed-category-page-gutter) * 2);
    }

    /* Real HTML intro occupies the quiet upper-left part of the artwork. */
    #index .ed-home-category--supplies
    .ed-home-category__intro {
        grid-area: editorial;
        z-index: 3;
        align-self: start;
        justify-self: start;

        width: min(72%, 430px);
        margin:
            var(--ed-supplies-mobile-intro-top)
            0
            0
            var(--ed-category-page-gutter);
    }


    #index .ed-home-category--supplies
    .ed-home-category__title {
        text-align: left;
        white-space: nowrap;
    }

    #index .ed-home-category--supplies
    .ed-home-category__lead {
        display: none;
    }

    /*
     * Full-width white editorial.
     * The artwork itself owns the white field and blends directly into the
     * section surface; no synthetic handoff layer or CSS crop is required.
     */
    #index .ed-home-category--supplies
    .ed-home-category__visual {
        grid-area: editorial;
        width: 100%;
        margin: 0;
    }

    /* Shared media primitives stay intact; only the inherited shadow is removed. */


    /* Reuse the proven category progress-track geometry. */
    #index .ed-home-category--supplies
    .ed-home-category__rail-footer {
        width: min(
            calc(
                100%
                - var(--ed-category-active-inset)
                - var(--ed-category-page-gutter)
            ),
            620px
        );
        margin-left: var(--ed-category-active-inset);
        margin-top: clamp(6px, 0.55vw, 9px);
    }
}

/* Neutral semantic copy wrapper: layout-transparent by default. */
.ed-home-category__editorial-copy {
    display: contents;
}

/* ===== Schmuck — Mobile editorial art direction ====================== */
/*
 * Same Mobile editorial principle as Edelsteine and Schmuckzubehör:
 * the real semantic copy stays in normal internal flow and overlays the
 * dedicated artwork as one block. Only the static Damen/Herren destinations
 * differ from the two rail-based category chapters.
 */
@media (max-width: 767.98px) {
    #index .ed-home-category--jewelry {
        /*
         * The white → sage handoff now finishes in the upper part of the
         * section, leaving a real sage field before the artwork begins.
         */
        --ed-jewelry-surface-handoff:
            clamp(24px, 7vw, 36px);

        /*
         * Final Mobile artwork owns the breathing room inside the image itself,
         * so no synthetic layout inset is needed above the editorial asset.
         */
        --ed-category-mobile-editorial-top-inset: 0px;

        /* Only the whole copy block needs a section-specific art-direction anchor. */
        --ed-jewelry-mobile-copy-top:
            clamp(26px, 7vw, 40px);

        /* Shared dissolve primitive: Schmuck uses only the top edge. */
        --ed-category-mobile-dissolve-start: transparent;
        --ed-category-mobile-dissolve-top:
            clamp(28px, 7vw, 40px);
        --ed-category-mobile-dissolve-bottom: 0px;
        --ed-category-mobile-dissolve-end: #000;

        /* Existing destination scale remains unchanged. */
        --ed-jewelry-destination-media-width:
            calc(var(--ed-category-card-width) * 0.56);
        --ed-jewelry-destination-gap:
            calc(var(--ed-category-page-gutter) * 0.75);
        --ed-jewelry-destination-row-pad:
            calc(var(--ed-category-page-gutter) * 0.60);

        color: var(--ed-home-text);
    }

    #index .ed-home-category--jewelry
    .ed-home-category__content {
        padding-top: 0;
    }

    #index .ed-home-category--jewelry
    .ed-home-category__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "editorial"
            "destinations";

        padding:
            0
            0
            calc(var(--ed-category-page-gutter) * 2);
    }

    /*
     * The Desktop intro remains the owner of copy + destinations.
     * On Mobile it becomes layout-transparent so those two children can occupy
     * the editorial and destinations grid rows independently.
     */


    /* Full-width 724:640 Mobile artwork; natural intrinsic ratio, no crop. */
    #index .ed-home-category--jewelry
    .ed-home-category__visual {
        grid-area: editorial;
        z-index: 1;
        width: 100%;
    }


    /*
     * The whole semantic copy overlays as ONE block.
     * Eyebrow → title → CTA keep the same shared flow/margins used by the
     * preceding category chapters; only the block's placement is local.
     */
    #index .ed-home-category--jewelry
    .ed-home-category__editorial-copy {
        grid-area: editorial;
        position: relative;
        z-index: 3;
        align-self: start;
        justify-self: end;

        width: min(78%, 540px);
        margin:
            var(--ed-jewelry-mobile-copy-top)
            var(--ed-category-page-gutter)
            0
            0;

        text-align: right;
    }

    #index .ed-home-category--jewelry
    .ed-home-category__eyebrow,
    #index .ed-home-category--jewelry
    .ed-home-category__title {
        text-align: right;
    }

    #index .ed-home-category--jewelry
    .ed-home-category__title {
        max-width: none;
        white-space: nowrap;
    }

    #index .ed-home-category--jewelry
    .ed-home-category__lead {
        display: none;
    }

    /*
     * Static Damen/Herren navigation is the only structural difference from
     * Edelsteine / Schmuckzubehör and remains the second grid row.
     */
    #index .ed-home-category--jewelry__destinations {
        width:
            calc(
                100%
                - var(--ed-category-page-gutter)
                - var(--ed-category-page-gutter)
            );
        margin:
            var(--ed-category-page-gutter)
            var(--ed-category-page-gutter)
            0;
        gap: 0;
    }


    #index .ed-home-category--jewelry__destination-media {
        border-radius: clamp(10px, 3vw, 14px);
    }

    #index .ed-home-category--jewelry__destination-title {
        font-size: var(--ed-category-card-title-size);
    }

    #index .ed-home-category--jewelry__destination-description {
        margin-top: 0.45rem;
        font-size: var(--ed-category-card-description-size);
        line-height: 1.42;
    }
}

/* ===== Desktop full-width foundation ================================= */
@media (min-width: 1024px) {
    #index #inner-wrapper.container {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #index .ed-hero,
    #index .ed-home-category,
    #index .ed-home-testimonials,
    #index .ed-home-zodiac,
    #index .ed-home-instagram {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ===== Desktop typography roles ======================================= */
@media (min-width: 1024px) {
    #index .ed-home-category {
        --ed-category-title-size: var(--ed-home-title-lg);
    }

    #index .ed-home-category__title {
        line-height: 1.01;
        letter-spacing: var(--ed-home-title-lg-tracking);
    }

    #index .ed-home-testimonials {
        --ed-testimonials-title-size: var(--ed-home-title-md);
    }

    #index .ed-home-testimonials__title {
        line-height: 1.03;
        letter-spacing: var(--ed-home-title-md-tracking);
    }

    #index .ed-home-zodiac {
        --ed-zodiac-title-size: var(--ed-home-title-md);
    }

    #index .ed-home-zodiac__title {
        line-height: 1.03;
        letter-spacing: var(--ed-home-title-md-tracking);
    }

    #index .ed-home-instagram__title {
        font-size: var(--ed-home-title-sm);
        line-height: 1.04;
        letter-spacing: var(--ed-home-title-sm-tracking);
    }
}

/* ===== Edelsteine — shared component identity ========================= */
.ed-home-category--gemstones {
    --ed-category-surface: var(--ed-home-surface);
    --ed-category-surface-transparent: rgb(251 247 243 / 0);
}

/* ===== Edelsteine — frozen Desktop geometry ============================ */
@media (min-width: 1024px) {
    .ed-home-category--gemstones {
        --ed-category-rail-pull: clamp(
            -2rem,
            calc((100vw - 1440px) * -0.08),
            0rem
        );
        --ed-category-copy-inset: clamp(0.5rem, 2vw, 2rem);
        --ed-category-rail-right-inset: var(--ed-category-page-gutter);
        --ed-category-right-fade-width: 34px;
    }

    #index .ed-home-category--gemstones {
        --ed-category-card-width:
            clamp(180px, 17.5vw, 245px);
        --ed-category-left-peek:
            calc(var(--ed-category-card-width) * 0.22);

        --ed-gem-intro-anchor:
            clamp(76px, 6vw, 100px);
        --ed-gem-visual-heading-offset:
            clamp(64px, 5.2vw, 82px);
        --ed-gem-visual-anchor:
            calc(
                var(--ed-gem-intro-anchor)
                - (var(--ed-gem-visual-heading-offset) * -1)
            );
    }
}

/*
 * ONE shared decorative artwork layer for Hero + Edelsteine.
 *
 * Current 1600×690 coordinate contract:
 *   Hero artwork:          y = 0 .. 460
 *   Hero/Edelsteine edge:  y = 460
 *   handoff begins:        y = 402.5
 *   artwork ends:          y = 690
 *
 * The pseudo-element below is intentionally owned by the Edelsteine section
 * because it spans upward across the Hero boundary. It now renders the
 * responsive raster artwork plus the separate trajectory SVG overlay.
 *
 * This is NOT legacy inline-SVG curve markup and must not be removed while the
 * current Hero raster architecture is active.
 */
@media (min-width: 1024px) {
    #index .ed-home-category--gemstones::before {
        content: "";

        position: absolute;
        z-index: 0;
        top: calc(0px - var(--ed-hero-stage-height));
        left: 50%;

        width: var(--ed-home-stage-width);
        height: calc(var(--ed-hero-stage-height) * 1.5);

        transform: translateX(-50%);
        pointer-events: none;

        /*
         * Responsive decorative artwork.
         *
         * PNG is the standards-safe fallback if image-set() is unsupported.
         * Modern browsers choose the WebP candidate that best matches DPR.
         *
         * Narrow Desktop slot (1024–1120 viewport):
         * stage width = 928–1024 CSS px
         * 1024 / 1536 / 2048 = 1x / 1.5x / 2x
         */
        background-image:
            url("/themes/einedelstein/assets/img/home/ed-hero-desktop-trajectory.svg"),
            url("/themes/einedelstein/assets/img/home/ed-hero-desktop-art.png");

        background-image:
            url("/themes/einedelstein/assets/img/home/ed-hero-desktop-trajectory.svg"),
            image-set(
                url("/themes/einedelstein/assets/img/home/ed-hero-desktop-art-1024.webp") 1x,
                url("/themes/einedelstein/assets/img/home/ed-hero-desktop-art-1536.webp") 1.5x,
                url("/themes/einedelstein/assets/img/home/ed-hero-desktop-art-2048.webp") 2x
            );

        background-repeat:
            no-repeat,
            no-repeat;
        background-position:
            0 0,
            0 0;
        background-size:
            100% 100%,
            100% 100%;
    }
}

/*
 * Wider Desktop raster candidates.
 * From 1121px viewport upward the stage is 1025–1280 CSS px.
 * Only asset selection changes here; geometry stays inherited.
 */
@media (min-width: 1121px) {
    #index .ed-home-category--gemstones::before {
        background-image:
            url("/themes/einedelstein/assets/img/home/ed-hero-desktop-trajectory.svg"),
            url("/themes/einedelstein/assets/img/home/ed-hero-desktop-art.png");

        background-image:
            url("/themes/einedelstein/assets/img/home/ed-hero-desktop-trajectory.svg"),
            image-set(
                url("/themes/einedelstein/assets/img/home/ed-hero-desktop-art-1280.webp") 1x,
                url("/themes/einedelstein/assets/img/home/ed-hero-desktop-art-1920.webp") 1.5x,
                url("/themes/einedelstein/assets/img/home/ed-hero-desktop-art-2560.webp") 2x
            );
    }
}

/* Edelsteine rail geometry shared across art directions.
 * These two relationships were already part of the proven component and are
 * not Desktop placement rules: card spacing and progress-track alignment.
 */
.ed-home-category--gemstones .ed-home-category__rail {
    gap: clamp(16px, 1.35vw, 23px);
}

.ed-home-category--gemstones
.ed-home-category__rail-footer {
    width: min(
        calc(
            100%
            - var(--ed-category-active-inset)
            - var(--ed-category-page-gutter)
        ),
        620px
    );
    margin-left: var(--ed-category-active-inset);
    margin-top: clamp(6px, 0.55vw, 9px);
}

/* Desktop-only Edelsteine composition placement.
 * Values are unchanged; Mobile never inherits these placement offsets.
 */
@media (min-width: 1024px) {
    .ed-home-category--gemstones .ed-home-category__layout {
        grid-template-columns:
            minmax(0, 0.8fr)
            minmax(0, 1.2fr);
        grid-template-areas:
            "visual intro"
            "visual categories";
        column-gap: clamp(2.75rem, 4.4vw, 61px);
        padding-top: clamp(44px, 4.2vw, 66px);
        padding-bottom:
            clamp(16px, min(2.2vw, 3vh), 34px);
    }

    .ed-home-category--gemstones .ed-home-category__visual {
        position: relative;
        z-index: 2;

        width: 100%;
        margin-left: 0;
        margin-top: var(--ed-gem-visual-anchor);
    }

    .ed-home-category--gemstones .ed-home-category__intro {
        width: min(100%, 760px);
        margin-left: clamp(0.25rem, 1.4vw, 1.25rem);
        padding-top: var(--ed-gem-intro-anchor);
    }

    .ed-home-category--gemstones .ed-home-category__categories {
        position: relative;
        z-index: 1;

        width: calc(
            100%
            - (
                var(--ed-category-rail-pull)
                - var(--ed-category-page-gutter)
                - var(--ed-category-left-peek)
            )
        );
        margin-top: clamp(1.55rem, 2.1vw, 2.45rem);
        margin-left: calc(
            var(--ed-category-rail-pull)
            - var(--ed-category-left-peek)
        );
    }

    .ed-home-category--gemstones .ed-home-category__rail {
        padding-top: clamp(42px, 3.15vw, 52px);
        padding-bottom: clamp(12px, 0.95vw, 17px);
    }

    .ed-home-category--gemstones.is-scroll-enhanced
    .ed-home-category__card.is-active
    .ed-home-category__card-media {
        transform: translateY(-16px) scale(1);
    }
}

.ed-gemstones-intro__outro {
    position: relative;
    z-index: 1;
    width: 100%;
    height: clamp(120px, 9vw, 160px);
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        var(--ed-home-surface) 0%,
        #ffffff 100%
    );
}

/* ===== Schmuckzubehör — frozen Desktop geometry ======================= */
@media (min-width: 1024px) {
    #index .ed-home-category--supplies {
        --ed-category-right-fade-width: 34px;

        --ed-supplies-handoff-depth:
            clamp(72px, 6vw, 96px);

        --ed-supplies-content-lift:
            clamp(
                71px,
                calc(var(--ed-supplies-handoff-depth) * 0.87),
                84px
            );

        --ed-supplies-heading-return:
            calc(var(--ed-supplies-handoff-depth) * 0.60);

        --ed-supplies-row-start:
            clamp(
                34px,
                calc(var(--ed-supplies-handoff-depth) * 0.50),
                48px
            );

        --ed-supplies-row-nudge:
            clamp(
                4px,
                calc(var(--ed-supplies-handoff-depth) * 0.08),
                8px
            );

        --ed-supplies-rail-start-gap:
            clamp(
                44px,
                calc(var(--ed-supplies-handoff-depth) * 0.63),
                60px
            );

        --ed-supplies-bottom-space:
            clamp(
                44px,
                calc(var(--ed-supplies-handoff-depth) * 0.62),
                60px
            );

        --ed-supplies-column-gap:
            clamp(52px, 4.8vw, 68px);

        --ed-supplies-card-gap:
            clamp(18px, 1.6vw, 24px);

        --ed-supplies-rail-bottom-pad:
            clamp(12px, 1vw, 18px);

        --ed-supplies-rail-footer-gap:
            clamp(6px, 0.55vw, 9px);

        --ed-category-card-width:
            clamp(220px, 18vw, 265px);
    }

    #index .ed-home-category--supplies
    .ed-home-category__content {
        margin-top:
            calc(var(--ed-supplies-content-lift) * -1);
    }

    #index .ed-home-category--supplies
    .ed-home-category__layout {
        grid-template-columns:
            minmax(0, 1.9fr)
            minmax(280px, 0.9fr);
        grid-template-areas:
            "intro visual"
            "categories categories";

        column-gap: var(--ed-supplies-column-gap);
        padding-top: var(--ed-supplies-row-start);
        padding-bottom: var(--ed-supplies-bottom-space);
    }

    #index .ed-home-category--supplies
    .ed-home-category__intro {
        width: min(100%, 820px);
        align-self: center;
        padding-top: var(--ed-supplies-row-nudge);
    }

    #index .ed-home-category--supplies
    .ed-home-category__heading-cluster {
        margin-top:
            calc(var(--ed-supplies-handoff-depth) * -1);
        margin-bottom: var(--ed-supplies-heading-return);
    }

    #index .ed-home-category--supplies
    .ed-home-category__title {
        max-width: 22ch;
    }

    #index .ed-home-category--supplies
    .ed-home-category__lead {
        max-width: 60ch;
    }

    #index .ed-home-category--supplies
    .ed-home-category__visual {
        width: min(100%, 405px);
        justify-self: end;
        align-self: start;
        margin-top: var(--ed-supplies-row-nudge);
    }

    #index .ed-home-category--supplies
    .ed-home-category__editorial-media {
        aspect-ratio: 13 / 8;
        overflow: hidden;
    }

    #index .ed-home-category--supplies
    .ed-home-category__editorial-media
    .ed-home-category__image {
        height: 100%;
        object-fit: cover;
    }

    #index .ed-home-category--supplies
    .ed-home-category__categories {
        position: relative;
        width: 100%;
        margin-top: var(--ed-supplies-rail-start-gap);
    }

    #index .ed-home-category--supplies
    .ed-home-category__rail {
        gap: var(--ed-supplies-card-gap);
        padding:
            clamp(10px, 1vw, 14px)
            0
            var(--ed-supplies-rail-bottom-pad);
        scroll-padding-inline-start: 0;
    }

    #index .ed-home-category--supplies
    .ed-home-category__card {
        flex: 0 0 var(--ed-category-card-width);
    }

    #index .ed-home-category--supplies
    .ed-home-category__card-media {
        background: #fbfafc;
    }

    #index .ed-home-category--supplies
    .ed-home-category__rail-footer {
        position: absolute;
        z-index: 2;
        top:
            calc(
                100%
                - (
                    var(--ed-supplies-rail-bottom-pad)
                    - var(--ed-supplies-rail-footer-gap)
                )
            );
        left: 0;

        width: min(72%, 820px);
        margin-top: 0;
    }

    #index .ed-home-category--supplies:not(.is-scroll-enhanced)
    .ed-home-category__rail-viewport::after {
        opacity: 0;
    }
}

/* ===== Schmuck — shared component identity ============================ */
.ed-home-category--jewelry {
    --ed-jewelry-surface: #eef1ec;
    --ed-jewelry-border: rgb(32 32 39 / 0.075);

    display: flow-root;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0,
            var(--ed-jewelry-surface)
                var(--ed-jewelry-surface-handoff),
            var(--ed-jewelry-surface) 100%
        );
}

/*
 * Shared editorial defaults.
 * Desktop overrides only the frame/crop treatment.
 */
.ed-home-category--jewelry__editorial-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    overflow: visible;

    border: 0;
    border-radius: 0;
    box-shadow: none;

    object-fit: contain;
    object-position: center;
    background: transparent;
}

/*
 * One Desktop Schmuck composition scale:
 * width drives normal growth; viewport height only limits short Desktop screens.
 */

@media (min-width: 1024px) {
    #index .ed-home-category--jewelry {
        --ed-jewelry-surface-handoff:
            clamp(90px, 7vw, 112px);

        --ed-jewelry-image-overlap:
            clamp(38px, 3.4vw, 52px);

        --ed-jewelry-column-gap:
            clamp(3.5rem, 5vw, 4.5rem);

        --ed-jewelry-scale:
            clamp(
                10px,
                min(1vw, 1.45vh),
                16px
            );

        --ed-jewelry-section-top:
            clamp(
                68px,
                calc(var(--ed-jewelry-scale) * 7),
                112px
            );

        --ed-jewelry-section-bottom:
            clamp(
                52px,
                calc(var(--ed-jewelry-scale) * 6),
                96px
            );

        --ed-jewelry-destination-media-width:
            clamp(
                138px,
                calc(var(--ed-jewelry-scale) * 12),
                190px
            );

        --ed-jewelry-destination-gap:
            clamp(
                13px,
                calc(var(--ed-jewelry-scale) * 1.5),
                22px
            );

        --ed-jewelry-destination-row-min:
            clamp(
                120px,
                calc(var(--ed-jewelry-scale) * 11.85),
                168px
            );

        --ed-jewelry-destination-row-pad:
            clamp(
                8px,
                calc(var(--ed-jewelry-scale) * 0.95),
                18px
            );
    }
}

@media (min-width: 1024px) {
    #index .ed-home-category--jewelry .ed-home-category__layout {
        grid-template-columns:
            minmax(0, 1.56fr)
            minmax(360px, 0.96fr);
        grid-template-areas: "visual intro";

        column-gap: var(--ed-jewelry-column-gap);
        padding-top: var(--ed-jewelry-section-top);
        padding-bottom: var(--ed-jewelry-section-bottom);
    }

    #index .ed-home-category--jewelry .ed-home-category__visual {
        width: 100%;
        margin-top:
            calc(var(--ed-jewelry-image-overlap) * -1);
        align-self: start;
    }

    #index .ed-home-category--jewelry__editorial-image {
        display: block;

        width:
            min(
                100%,
                calc(var(--ed-jewelry-scale) * 53.8)
            );

        aspect-ratio: 4 / 3;
        overflow: hidden;

        border-radius: 0;
        border: 1px solid var(--ed-jewelry-border);
        box-shadow: 0 18px 48px rgb(32 32 39 / 0.065);
    }

    #index .ed-home-category--jewelry__editorial-image {
        height: auto;
        object-fit: cover;
        object-position: 44% 50%;
        background: #e9ebe5;
    }
}

@media (min-width: 1024px) {
    #index .ed-home-category--jewelry .ed-home-category__intro {
        align-self: center;
        width: min(100%, 520px);
        padding-block: clamp(8px, 1vw, 16px);
    }

    #index .ed-home-category--jewelry .ed-home-category__title {
        max-width: 18ch;
    }

    #index .ed-home-category--jewelry .ed-home-category__lead {
        max-width: 45ch;
    }
}

@media (min-width: 1024px) {
    #index .ed-home-category--jewelry .ed-home-category__lead {
        margin-top:
            clamp(
                1rem,
                calc(var(--ed-jewelry-scale) * 1.7),
                1.6rem
            );
    }
}

@media (min-width: 1024px) {
    #index .ed-home-category--jewelry .ed-home-category__cta {
        margin-top:
            clamp(
                1rem,
                calc(var(--ed-jewelry-scale) * 1.8),
                1.7rem
            );
    }
}

.ed-home-category--jewelry__destinations {
    position: relative;
    display: grid;
    gap: 0;
}

@media (min-width: 1024px) {
    #index .ed-home-category--jewelry__destinations {
        margin-top:
            clamp(
                1.55rem,
                calc(var(--ed-jewelry-scale) * 2.7),
                2.4rem
            );
    }
}

.ed-home-category--jewelry__destination {
    position: relative;

    display: grid;
    grid-template-columns:
        var(--ed-jewelry-destination-media-width)
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: var(--ed-jewelry-destination-gap);

    min-height: var(--ed-jewelry-destination-row-min);
    padding:
        var(--ed-jewelry-destination-row-pad)
        0;

    color: var(--ed-home-text);
    border: 0;
    border-radius: 0;
    background: transparent;
    text-decoration: none;

    transition:
        background-color 160ms ease,
        transform 160ms ease;
}

.ed-home-category--jewelry__destinations::before,
.ed-home-category--jewelry__destinations::after,
.ed-home-category--jewelry__destination
+ .ed-home-category--jewelry__destination::before {
    content: "";
    position: absolute;
    left: 0;
    right: clamp(18px, 2vw, 30px);
    height: 1px;

    background: var(--ed-jewelry-border);
    pointer-events: none;
}

.ed-home-category--jewelry__destinations::before {
    top: 0;
}

.ed-home-category--jewelry__destinations::after {
    bottom: 0;
}

.ed-home-category--jewelry__destination
+ .ed-home-category--jewelry__destination::before {
    top: 0;
}

.ed-home-category--jewelry__destination-media {
    position: relative;
    display: grid;
    place-items: center;

    width: 100%;
    aspect-ratio: 5 / 4;
    min-width: 0;
    overflow: hidden;

    border-radius: clamp(12px, 0.95vw, 16px);

    background:
        linear-gradient(
            135deg,
            rgb(111 103 163 / 0.045),
            rgb(200 184 214 / 0.1)
        ),
        #f7f4f1;
}

.ed-home-category--jewelry__destination-image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
    background: #f2f2ef;
}

.ed-home-category--jewelry__destination-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    padding: 0;
}

.ed-home-category--jewelry__destination-title {
    color: var(--ed-home-text);
    font-size:
        clamp(
            0.91rem,
            calc(0.83rem + 0.09vw),
            0.94rem
        );
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ed-home-category--jewelry__destination-description {
    max-width: 25ch;
    margin-top: 0.62rem;

    color: var(--ed-home-muted);
    font-size:
        clamp(
            0.82rem,
            calc(0.75rem + 0.08vw),
            0.86rem
        );
    line-height: 1.45;
}

.ed-home-category--jewelry__destination-arrow {
    align-self: center;
    padding-right:
        clamp(0.15rem, 0.4vw, 0.45rem);

    color: var(--ed-home-accent);
    font-size: clamp(1.05rem, 1.1vw, 1.22rem);
    line-height: 1;

    transition: transform 160ms ease;
}

.ed-home-category--jewelry__destination:focus-visible {
    outline: 2px solid var(--ed-home-accent);
    outline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
    .ed-home-category--jewelry__destination:hover {
        background: rgb(255 255 255 / 0.24);
    }

    .ed-home-category--jewelry__destination:hover
    .ed-home-category--jewelry__destination-arrow {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ed-home-category--jewelry__destination,
    .ed-home-category--jewelry__destination-arrow {
        transition: none;
    }
}


/* ===== Category chapters — shared non-Desktop internals =============== */
/*
 * Mobile and Tablet keep the same semantic component internals. Only their
 * width-dependent placement/spacing remains in the breakpoint-specific rules.
 */
@media (max-width: 1023.98px) {
    #index .ed-home-category--gemstones {
        background: var(--ed-home-surface);
        color: var(--ed-home-text);
    }

    #index .ed-home-category--gemstones
    .ed-home-category__content {
        padding-top: 0;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__intro {
        position: relative;
        z-index: 2;
        align-self: start;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__intro hgroup {
        width: fit-content;
        max-width: 100%;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__title,
    #index .ed-home-category--supplies
    .ed-home-category__title {
        max-width: none;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__visual {
        position: relative;
        z-index: 1;
        margin: 0;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__editorial-media {
        box-shadow: none;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__categories {
        position: relative;
        z-index: 2;
    }

    #index .ed-home-category--gemstones
    .ed-gemstones-intro__outro {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
    }

    #index .ed-home-category--supplies
    .ed-home-category__intro {
        position: relative;
        padding: 0;
        text-align: left;
    }

    #index .ed-home-category--supplies
    .ed-home-category__heading-cluster {
        width: fit-content;
        max-width: 100%;
        margin: 0;
    }

    #index .ed-home-category--supplies
    .ed-home-category__visual {
        position: relative;
        z-index: 1;
    }

    #index .ed-home-category--supplies
    .ed-home-category__categories {
        position: relative;
    }

    #index .ed-home-category--supplies
    .ed-home-category__editorial-media {
        box-shadow: none;
    }

    #index .ed-home-category--jewelry {
        --ed-jewelry-destination-row-min: 0px;
    }

    #index .ed-home-category--jewelry
    .ed-home-category__layout {
        width: 100%;
    }

    #index .ed-home-category--jewelry
    .ed-home-category__intro {
        display: contents;
    }

    #index .ed-home-category--jewelry
    .ed-home-category__visual {
        position: relative;
        margin: 0;
        align-self: start;
    }

    #index .ed-home-category--jewelry
    .ed-home-category__editorial-copy {
        display: block;
    }

    #index .ed-home-category--jewelry__destinations {
        grid-area: destinations;
    }
}

/* ===== Kundenstimmen — shared component =============================== */
.ed-home-testimonials {
    --ed-testimonials-surface: #f7f3ed;
    --ed-testimonials-divider: rgb(32 32 39 / 0.060);
    --ed-testimonials-quote-mark-size:
        clamp(3.25rem, calc(2.40rem + 0.95vw), 3.50rem);

    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);

    color: var(--ed-home-text);
    background: var(--ed-testimonials-surface);
}

.ed-home-testimonials__content {
    margin-inline: auto;
}

.ed-home-testimonials__title {
    max-width: none;
    font-size: var(--ed-testimonials-title-size);
}

.ed-home-testimonials__rail-viewport {
    position: relative;
    min-width: 0;
}

.ed-home-testimonials__rail {
    display: flex;
    align-items: flex-start;
    gap: 0;

    margin: 0;
    list-style: none;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline-start: 0;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

.ed-home-testimonials__rail::-webkit-scrollbar {
    display: none;
}

.ed-home-testimonials__item {
    box-sizing: border-box;
    flex: 0 0 var(--ed-testimonials-card-width);
    min-width: 0;
}

.ed-home-testimonials__item + .ed-home-testimonials__item {
    border-inline-start: 1px solid var(--ed-testimonials-divider);
}

.ed-home-testimonials__quote {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;

    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ed-home-testimonials__quote::before {
    content: "“";
    position: absolute;
    top: -2px;
    left: 0;

    color: rgb(111 103 163 / 0.18);
    font-family: Georgia, "Times New Roman", serif;
    font-size: var(--ed-testimonials-quote-mark-size);
    font-weight: 400;
    line-height: 0.82;
    pointer-events: none;
}

.ed-home-testimonials__quote blockquote {
    margin: 0;
    padding: 0;
}

.ed-home-testimonials__quote blockquote p {
    margin: 0;

    color: var(--ed-home-text);
    font-weight: 400;
    letter-spacing: -0.004em;
}

.ed-home-testimonials__author {
    padding: 0;

    color: rgb(49 48 52 / 0.68);
    border: 0;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.ed-home-testimonials .ed-home-category__progress::before {
    background: rgb(111 103 163 / 0.11);
}

.ed-home-testimonials .ed-home-category__progress-thumb {
    background: rgb(111 103 163 / 0.78);
}

.ed-home-testimonials__rail:focus-visible {
    outline: 2px solid rgb(111 103 163 / 0.48);
    outline-offset: 5px;
    border-radius: 6px;
}

/* ===== Kundenstimmen — frozen Desktop differences ===================== */
@media (min-width: 1024px) {
    #index .ed-home-testimonials {
        --ed-testimonials-card-width:
            clamp(330px, 25vw, 370px);
        --ed-testimonials-body-size:
            clamp(0.91rem, calc(0.84rem + 0.08vw), 0.94rem);
        --ed-testimonials-author-size:
            clamp(0.67rem, calc(0.61rem + 0.07vw), 0.70rem);

        /*
         * One section-owned rhythm drives the complete vertical composition.
         * Width remains primary; viewport height only caps short Desktop
         * viewports such as the live-tested ~1520×730 laptop.
         */
        --ed-testimonials-rhythm:
            clamp(12px, min(1.05vw, 1.7vh), 18px);
        --ed-testimonials-space-2:
            calc(var(--ed-testimonials-rhythm) * 2);
        --ed-testimonials-space-3:
            calc(var(--ed-testimonials-rhythm) * 3);
        --ed-testimonials-space-4:
            calc(var(--ed-testimonials-rhythm) * 4);

        background:
            linear-gradient(
                to bottom,
                var(--ed-testimonials-surface) 0,
                var(--ed-testimonials-surface)
                    calc(100% - var(--ed-testimonials-space-4)),
                #ffffff 100%
            );
    }

    #index .ed-home-testimonials__eyebrow {
        margin: 0 0 clamp(0.7rem, 0.75vw, 0.85rem);
        font-size: clamp(0.64rem, 0.55vw, 0.72rem);
    }

    #index .ed-home-testimonials__title {
        white-space: nowrap;
    }

    #index .ed-home-testimonials__content {
        width: var(--ed-home-stage-width);
        padding-top:
            calc(var(--ed-testimonials-space-3) + 4px);
        padding-bottom: var(--ed-testimonials-space-4);
    }

    #index .ed-home-testimonials__rail-viewport {
        margin-top: var(--ed-testimonials-space-2);
    }

    #index .ed-home-testimonials__rail-viewport::before,
    #index .ed-home-testimonials__rail-viewport::after {
        content: "";
        position: absolute;
        z-index: 3;
        top: 0;
        bottom: 0;
        width: 26px;

        pointer-events: none;
        opacity: 1;
        transition: opacity 140ms ease;
    }

    #index .ed-home-testimonials__rail-viewport::before {
        left: -2px;
        background: linear-gradient(
            to right,
            var(--ed-testimonials-surface) 0,
            rgb(247 243 237 / 0) 100%
        );
    }

    #index .ed-home-testimonials__rail-viewport::after {
        right: -2px;
        background: linear-gradient(
            to left,
            var(--ed-testimonials-surface) 0,
            rgb(247 243 237 / 0) 100%
        );
    }

    #index .ed-home-testimonials.is-at-start
    .ed-home-testimonials__rail-viewport::before {
        opacity: 0;
    }

    #index .ed-home-testimonials.is-at-end
    .ed-home-testimonials__rail-viewport::after {
        opacity: 0;
    }

    #index .ed-home-testimonials__rail {
        padding: 0 0 clamp(4px, 0.4vw, 6px);
        scroll-snap-type: x proximity;
    }

    #index .ed-home-testimonials__item {
        padding-inline: clamp(27px, 2.15vw, 34px);
        scroll-snap-align: start;
    }

    #index .ed-home-testimonials__quote {
        padding-top: var(--ed-testimonials-space-2);
    }

    #index .ed-home-testimonials__quote blockquote p {
        max-width: 31ch;
        font-size: var(--ed-testimonials-body-size);
        line-height: 1.58;
    }

    #index .ed-home-testimonials__author {
        margin-top:
            calc(var(--ed-testimonials-rhythm) + 2px);
        font-size: var(--ed-testimonials-author-size);
    }

    #index .ed-home-testimonials .ed-home-category__rail-footer {
        width: min(46%, 520px);
        margin-top: var(--ed-testimonials-rhythm);
    }
}

@media (any-hover: hover) and (any-pointer: fine) {
    .ed-home-testimonials__rail {
        cursor: grab;
    }

    .ed-home-testimonials__rail.is-mouse-dragging {
        cursor: grabbing;
    }
}

@media (prefers-reduced-motion: reduce) {
    #index .ed-home-testimonials__rail-viewport::before,
    #index .ed-home-testimonials__rail-viewport::after {
        transition: none;
    }
}

/* ===== Sternzeichen — shared component ================================ */
.ed-home-zodiac {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);

    color: var(--ed-home-text);
    background: #ffffff;
}

.ed-home-zodiac__content {
    margin-inline: auto;
}

.ed-home-zodiac__header {
    max-width: none;
}

.ed-home-zodiac__title {
    font-size: var(--ed-zodiac-title-size);
}

.ed-home-zodiac__rail-viewport {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.ed-home-zodiac__rail {
    display: flex;
    gap: var(--ed-zodiac-gap);

    margin: 0;
    list-style: none;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

.ed-home-zodiac__rail::-webkit-scrollbar {
    display: none;
}

.ed-home-zodiac__item {
    flex: 0 0 var(--ed-zodiac-item-width);
    min-width: 0;
}

.ed-home-zodiac__link {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 0;

    color: inherit;
    text-decoration: none;
    background: transparent;
    border: 0;
}

.ed-home-zodiac__symbol {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;

    object-fit: contain;

    transform: scale(1);
    transform-origin: center;
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.ed-home-zodiac__link:focus-visible {
    outline: 2px solid rgb(111 103 163 / 0.5);
    outline-offset: 4px;
    border-radius: 4px;
}

.ed-home-zodiac__sr-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ===== Sternzeichen — frozen Desktop differences ====================== */
@media (min-width: 1024px) {
    #index .ed-home-zodiac {
        --ed-zodiac-item-width:
            clamp(132px, calc(104px + 2.65vw), 144px);
        --ed-zodiac-gap:
            clamp(22px, calc(10px + 1.20vw), 28px);
        --ed-zodiac-intro-size:
            clamp(0.96rem, calc(0.86rem + 0.11vw), 0.99rem);
        --ed-zodiac-symbol-max: 140px;

        /* One section-owned rhythm drives the Desktop vertical composition. */
        --ed-zodiac-rhythm:
            clamp(12px, min(1.05vw, 1.7vh), 18px);
        --ed-zodiac-space-2:
            calc(var(--ed-zodiac-rhythm) * 2);
        --ed-zodiac-space-3:
            calc(var(--ed-zodiac-rhythm) * 3);
    }

    #index .ed-home-zodiac__content {
        width: var(--ed-home-stage-width);
        padding-top:
            calc(var(--ed-zodiac-space-3) + 4px);
        padding-bottom:
            calc(var(--ed-zodiac-space-3) + 8px);
    }

    #index .ed-home-zodiac__header {
        width: min(46%, 560px);
        margin-left: auto;
    }

    #index .ed-home-zodiac__eyebrow {
        margin: 0 0 var(--ed-zodiac-rhythm);
        font-size: clamp(0.64rem, 0.55vw, 0.72rem);
    }

    #index .ed-home-zodiac__intro {
        max-width: 58ch;
        margin:
            calc(var(--ed-zodiac-rhythm) + 4px)
            0
            0;

        color: var(--ed-home-muted);
        font-size: var(--ed-zodiac-intro-size);
        font-weight: 400;
        line-height: 1.65;
    }

    #index .ed-home-zodiac__nav {
        margin-top: var(--ed-zodiac-space-2);
    }

    #index .ed-home-zodiac__rail {
        padding: 8px 2px 14px;
        scroll-snap-type: x proximity;
        scroll-padding-inline-start: 2px;
    }

    #index .ed-home-zodiac__item {
        scroll-snap-align: start;
    }

    #index .ed-home-zodiac__link {
        padding: clamp(4px, 0.4vw, 6px);
    }

    #index .ed-home-zodiac__symbol {
        max-width: var(--ed-zodiac-symbol-max);
        opacity: 0.88;
    }

    #index .ed-home-zodiac__rail-footer {
        width: min(76%, 720px);
        margin-top: var(--ed-zodiac-rhythm);
        margin-left: auto;
        margin-right: 0;
    }
}

@media (any-hover: hover) and (any-pointer: fine) {
    .ed-home-zodiac__rail {
        cursor: grab;
    }

    .ed-home-zodiac__rail.is-mouse-dragging {
        cursor: grabbing;
    }

    .ed-home-zodiac__link:hover .ed-home-zodiac__symbol {
        opacity: 1;
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ed-home-zodiac__symbol {
        transition: none;
    }
}

/* ===== Instagram — Desktop contract ===================================== */
/*
 * Polaroid card contract:
 * rail geometry stays on the <li>; transforms/shadows stay on the physical card.
 * Cards 3, 5 and 7 stack above the preceding print.
 */
.ed-home-instagram {
    --ed-instagram-surface: #ffffff;
    --ed-instagram-surface-transparent: rgb(255 255 255 / 0);
    --ed-instagram-frame: 6px;
    --ed-instagram-keyline: 1px;
    --ed-instagram-caption-field: 38px;

    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);

    color: var(--ed-home-text);
    background: var(--ed-instagram-surface);
}

.ed-home-instagram__content {
    margin-inline: auto;
}

.ed-home-instagram__eyebrow {
    margin: 0;
}

.ed-home-instagram__gallery {
    width: 100%;
    margin-inline: 0;
}

.ed-home-instagram__rail-viewport {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.ed-home-instagram__rail {
    display: flex;
    gap: var(--ed-instagram-gap);

    margin: 0;
    list-style: none;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

.ed-home-instagram__rail::-webkit-scrollbar {
    display: none;
}

/*
 * The <li> owns only rail geometry and sibling stacking.
 * It never receives visual translate/rotate values.
 */
.ed-home-instagram__item {
    position: relative;
    z-index: 1;

    flex: 0 0 var(--ed-instagram-item-width);
    min-width: 0;
}

/* Only these prints sit above the print immediately before them. */
.ed-home-instagram__item:nth-child(7n + 3),
.ed-home-instagram__item:nth-child(7n + 5),
.ed-home-instagram__item:nth-child(7n) {
    z-index: 3;
}

/*
 * The link is the physical photo card.
 * The 6px paper frame is real padding/background, not a picture box-shadow.
 * A subtle 1px keyline belongs to the whole physical card.
 * Width/margin account for frame + keyline so the approved image size stays unchanged.
 */
.ed-home-instagram__link {
    position: relative;
    display: block;

    width:
        calc(
            100%
            + (2 * var(--ed-instagram-frame))
            + (2 * var(--ed-instagram-keyline))
        );
    margin-left:
        calc(
            (var(--ed-instagram-frame) * -1)
            - var(--ed-instagram-keyline)
        );
    padding:
        var(--ed-instagram-frame)
        var(--ed-instagram-frame)
        calc(
            var(--ed-instagram-frame)
            - (var(--ed-instagram-caption-field) * -1)
        );
    box-sizing: border-box;

    color: inherit;
    text-decoration: none;
    background: #ffffff;
    border:
        var(--ed-instagram-keyline) solid rgb(32 32 39 / 0.10);
    z-index: 1;
    transform-origin: center;

}

/*
 * Elementor resets anchor shadows globally via `.elementor a { box-shadow: none; }`.
 * Scope only the intentional card shadow strongly enough to override that native reset.
 */
#index .ed-home-instagram__link {
    box-shadow:
        -2px -2px 10px -3px rgb(32 32 39 / 0.12);
}

/* The picture is now only the image window inside the white paper card. */
.ed-home-instagram__picture {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;

    background: #ffffff;
}

/* Caption sits in the lower paper field without affecting rail geometry. */
.ed-home-instagram__caption {
    position: absolute;
    left: calc(var(--ed-instagram-frame) + 6px);
    right: calc(var(--ed-instagram-frame) + 6px);
    bottom: 8px;

    display: block;

    font-family:
        "Bradley Hand",
        "Segoe Print",
        cursive;
    color: rgb(32 32 39 / 0.88);
    font-size: 0.80rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ed-home-instagram__picture::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgb(22 18 26 / 0.015) 0%,
            rgb(22 18 26 / 0.025) 58%,
            rgb(22 18 26 / 0.10) 72%,
            rgb(22 18 26 / 0.32) 100%
        );

    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.ed-home-instagram__image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;

    object-fit: cover;
    transform: scale(1);
    transform-origin: center;
    transition:
        transform 220ms ease,
        opacity 180ms ease;
}

.ed-home-instagram__link:focus-visible {
    outline: 2px solid rgb(111 103 163 / 0.5);
    outline-offset: 4px;
}

/* Overlay controls are positioned from the image edge inside the 6px paper frame. */
.ed-home-instagram__affordance {
    position: absolute;
    top: calc(var(--ed-instagram-frame) + 9px);
    right: calc(var(--ed-instagram-frame) + 9px);
    z-index: 2;

    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;

    color: #fff;
    background: rgb(26 21 29 / 0.30);
    border: 1px solid rgb(255 255 255 / 0.38);
    border-radius: 50%;

    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        background-color 180ms ease;
}

.ed-home-instagram__camera {
    position: relative;
    display: block;
    width: 13px;
    height: 13px;

    border: 1.4px solid currentColor;
    border-radius: 4px;
}

.ed-home-instagram__camera::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 4px;
    height: 4px;

    border: 1.2px solid currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.ed-home-instagram__camera::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;

    width: 2px;
    height: 2px;

    background: currentColor;
    border-radius: 50%;
}

.ed-home-instagram__handle {
    position: absolute;
    left: calc(var(--ed-instagram-frame) + 10px);
    bottom:
        calc(
            9px
            - (var(--ed-instagram-frame) * -1)
            - (var(--ed-instagram-caption-field) * -1)
        );
    z-index: 2;

    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.015em;
    text-shadow: 0 1px 10px rgb(0 0 0 / 0.48);

    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.ed-home-instagram__sr-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*
 * Shared Instagram paper treatment.
 * One source of truth for the approved seven-print shadows AND the exact
 * translate/rotate values across Mobile, future Tablet, and Desktop.
 */
    .ed-home-instagram__item::after {
        content: "";
        position: absolute;
        z-index: 0;
        left: var(--ed-paper-shadow-left, 30%);
        bottom: -2px;

        width: var(--ed-paper-shadow-width, 40%);
        height: 7px;
        border-radius: 50%;
        background: rgb(32 32 39 / var(--ed-paper-shadow-opacity, 0.06));
        filter: blur(4px);
        pointer-events: none;
    }

    .ed-home-instagram__item:nth-child(7n)::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -1px;
        left: -5%;

        width: 45%;
        height: 8px;
        border-radius: 50%;
        background: rgb(32 32 39 / 0.075);
        filter: blur(4px);
        pointer-events: none;
    }

    .ed-home-instagram__item .ed-home-instagram__link {
        transform: var(--ed-paper-transform, none);
    }

    .ed-home-instagram__item:nth-child(7n + 1) {
        --ed-paper-shadow-left: 40%;
        --ed-paper-shadow-width: 45%;
        --ed-paper-shadow-opacity: 0.20;
        --ed-paper-transform: translate(-1px, 2px) rotate(-0.12deg);
    }

    .ed-home-instagram__item:nth-child(7n + 2) {
        --ed-paper-shadow-left: 20%;
        --ed-paper-shadow-width: 65%;
        --ed-paper-shadow-opacity: 0.10;
        --ed-paper-transform: translate(3px, -2px) rotate(0.48deg);
    }

    .ed-home-instagram__item:nth-child(7n + 3) {
        --ed-paper-shadow-left: -10%;
        --ed-paper-shadow-width: 60%;
        --ed-paper-shadow-opacity: 0.15;
        --ed-paper-transform: translate(-2px, 1px) rotate(-0.22deg);
    }

    .ed-home-instagram__item:nth-child(7n + 4) {
        --ed-paper-shadow-left: 30%;
        --ed-paper-shadow-width: 30%;
        --ed-paper-shadow-opacity: 0.06;
        --ed-paper-transform: translate(1px, 3px) rotate(0.06deg);
    }

    .ed-home-instagram__item:nth-child(7n + 5) {
        --ed-paper-shadow-left: -10%;
        --ed-paper-shadow-width: 40%;
        --ed-paper-shadow-opacity: 0.095;
        --ed-paper-transform: translate(-3px, -1px) rotate(-0.58deg);
    }

    .ed-home-instagram__item:nth-child(7n + 6) {
        --ed-paper-shadow-left: 39%;
        --ed-paper-shadow-width: 40%;
        --ed-paper-shadow-opacity: 0.085;
        --ed-paper-transform: translate(2px, 2px) rotate(0.32deg);
    }

    .ed-home-instagram__item:nth-child(7n) {
        --ed-paper-shadow-left: -5%;
        --ed-paper-shadow-width: 46%;
        --ed-paper-shadow-opacity: 0.075;
        --ed-paper-transform: translate(0, 0) rotate(0.02deg);
    }

/*
 * Desktop composition contract:
 * one width-driven rhythm; rail items stay geometrically regular.
 */
@media (min-width: 1024px) {
    #index .ed-home-instagram {
        --ed-instagram-item-width: clamp(156px, 13.2vw, 178px);
        --ed-instagram-gap: clamp(12px, 1vw, 14px);

        --ed-instagram-rhythm:
            clamp(8px, min(0.70vw, 1.25vh), 10px);
        --ed-instagram-space-3:
            calc(var(--ed-instagram-rhythm) * 3);
        --ed-instagram-space-4:
            calc(var(--ed-instagram-rhythm) * 4);
    }

    #index .ed-home-instagram__header {
        max-width: 620px;
    }

    #index .ed-home-instagram__eyebrow {
        font-size: clamp(0.6rem, 0.48vw, 0.66rem);
    }

    #index .ed-home-instagram__rail-viewport::before,
    #index .ed-home-instagram__rail-viewport::after {
        content: "";
        position: absolute;
        z-index: 10;
        top: 0;
        bottom: 0;
        width: 34px;

        pointer-events: none;
        opacity: 1;
        transition: opacity 140ms ease;
    }

    #index .ed-home-instagram__rail-viewport::before {
        left: -4px;
        background: linear-gradient(
            to right,
            var(--ed-instagram-surface) 0%,
            rgb(255 255 255 / 0.96) 16%,
            rgb(255 255 255 / 0.78) 38%,
            rgb(255 255 255 / 0.44) 68%,
            var(--ed-instagram-surface-transparent) 100%
        );
    }

    #index .ed-home-instagram__rail-viewport::after {
        right: -4px;
        background: linear-gradient(
            to left,
            var(--ed-instagram-surface) 0%,
            rgb(255 255 255 / 0.96) 16%,
            rgb(255 255 255 / 0.78) 38%,
            rgb(255 255 255 / 0.44) 68%,
            var(--ed-instagram-surface-transparent) 100%
        );
    }

    #index .ed-home-instagram.is-at-start
    .ed-home-instagram__rail-viewport::before {
        opacity: 0;
    }

    #index .ed-home-instagram.is-at-end
    .ed-home-instagram__rail-viewport::after {
        opacity: 0;
    }


    #index .ed-home-instagram__rail {
        padding: 18px 10px 30px;
        scroll-snap-type: x proximity;
        scroll-padding-inline-start: 10px;
    }

    #index .ed-home-instagram__item {
        scroll-snap-align: start;
    }

    #index .ed-home-instagram__rail-footer {
        width: min(48%, 500px);
    }

    #index .ed-home-instagram__content {
        width: var(--ed-home-stage-width);
        padding-top:
            calc(var(--ed-instagram-space-3) + 4px);
        padding-bottom: var(--ed-instagram-space-4);
    }

    #index .ed-home-instagram__eyebrow {
        margin-bottom:
            calc(var(--ed-instagram-rhythm) - 3px);
    }

    #index .ed-home-instagram__gallery {
        margin-top:
            calc(var(--ed-instagram-rhythm) + 5px);
    }

    #index .ed-home-instagram__rail-footer {
        margin-top:
            calc(var(--ed-instagram-rhythm) - 2px);
    }

}

@media (any-hover: hover) and (any-pointer: fine) {
    .ed-home-instagram__rail {
        cursor: grab;
    }

    .ed-home-instagram__rail.is-mouse-dragging {
        cursor: grabbing;
    }

    .ed-home-instagram__link:hover .ed-home-instagram__image,
    .ed-home-instagram__link:focus-visible .ed-home-instagram__image {
        transform: scale(1.03);
    }

    .ed-home-instagram__link:hover .ed-home-instagram__picture::after,
    .ed-home-instagram__link:focus-visible .ed-home-instagram__picture::after {
        opacity: 1;
    }

    .ed-home-instagram__link:hover .ed-home-instagram__affordance,
    .ed-home-instagram__link:focus-visible .ed-home-instagram__affordance,
    .ed-home-instagram__link:hover .ed-home-instagram__handle,
    .ed-home-instagram__link:focus-visible .ed-home-instagram__handle {
        opacity: 1;
        transform: translateY(0);
    }

    .ed-home-instagram__link:hover .ed-home-instagram__affordance,
    .ed-home-instagram__link:focus-visible .ed-home-instagram__affordance {
        background: rgb(26 21 29 / 0.34);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ed-home-instagram__image,
    .ed-home-instagram__picture::after,
    .ed-home-instagram__affordance,
    .ed-home-instagram__handle,
    #index .ed-home-instagram__rail-viewport::before,
    #index .ed-home-instagram__rail-viewport::after {
        transition: none;
    }
}


/* ===== Kundenstimmen — shared non-Desktop behavior ==================== */
@media (max-width: 1023.98px) {
    #index .ed-home-testimonials {
        display: flow-root !important;
        position: relative;
        overflow: hidden;
    }

    #index .ed-home-testimonials__content {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    #index .ed-home-testimonials__content > header {
        margin-inline: auto;
    }

    #index .ed-home-testimonials__title {
        white-space: normal;
    }

    #index .ed-home-testimonials__rail {
        scroll-snap-type: none;
    }

    #index .ed-home-testimonials__item {
        scroll-snap-align: none;
    }

    #index .ed-home-testimonials__item:first-child {
        padding-left: 0;
    }

    #index .ed-home-testimonials__item:last-child {
        padding-right: 0;
    }

    #index .ed-home-testimonials__quote blockquote p {
        max-width: none;
        font-size: var(--ed-testimonials-body-size);
        line-height: 1.55;
    }

    #index .ed-home-testimonials__author {
        font-size: var(--ed-testimonials-author-size);
    }
}

/* ===== Kundenstimmen — Mobile art direction ============================ */
/*
 * Testimonials reuse the universal category-rail behavioral hooks already
 * present in the live HTML/custom.js. Mobile changes presentation only:
 * one readable quote at a time with a visible next-item cue, native free
 * swipe, no edge fades, no snap and no arrow controls.
 */
@media (max-width: 767.98px) {
    #index .ed-home-testimonials {
        --ed-testimonials-card-width:
            clamp(268px, 84vw, 350px);
        --ed-testimonials-body-size:
            clamp(0.88rem, calc(0.82rem + 0.30vw), 0.98rem);
        --ed-testimonials-author-size:
            clamp(0.66rem, calc(0.62rem + 0.20vw), 0.72rem);

        /*
         * Mirror the frozen Desktop handoff: the testimonial surface fades to
         * white inside its existing bottom breathing room, without adding
         * another physical section gap.
         */
        background:
            linear-gradient(
                to bottom,
                var(--ed-testimonials-surface) 0,
                var(--ed-testimonials-surface)
                    calc(
                        100%
                        - var(--ed-home-mobile-page-gutter)
                        - var(--ed-home-mobile-page-gutter)
                    ),
                #ffffff 100%
            );
    }

    #index .ed-home-testimonials__content {
        padding:
            var(--ed-home-mobile-section-gap)
            0
            calc(var(--ed-home-mobile-page-gutter) * 2);
    }

    #index .ed-home-testimonials__content > header {
        width:
            calc(
                100%
                - var(--ed-home-mobile-page-gutter)
                - var(--ed-home-mobile-page-gutter)
            );
    }

    #index .ed-home-testimonials__eyebrow {
        margin:
            0
            0
            calc(var(--ed-home-mobile-page-gutter) * 0.55);
    }


    #index .ed-home-testimonials__rail-viewport {
        margin-top:
            calc(var(--ed-home-mobile-page-gutter) * 1.35);
    }

    #index .ed-home-testimonials__rail {
        padding:
            0
            var(--ed-home-mobile-page-gutter)
            calc(var(--ed-home-mobile-page-gutter) * 0.35);
    }

    #index .ed-home-testimonials__item {
        padding-inline:
            calc(var(--ed-home-mobile-page-gutter) * 0.90);
    }


    #index .ed-home-testimonials__quote {
        padding-top:
            clamp(
                28px,
                calc(var(--ed-home-mobile-page-gutter) * 1.50),
                38px
            );
    }


    #index .ed-home-testimonials__author {
        margin-top:
            calc(var(--ed-home-mobile-page-gutter) * 0.75);
    }

    #index .ed-home-testimonials .ed-home-category__rail-footer {
        width:
            calc(
                100%
                - var(--ed-home-mobile-page-gutter)
                - var(--ed-home-mobile-page-gutter)
            );
        margin:
            var(--ed-home-mobile-page-gutter)
            auto
            0;
    }

}

/* ===== Sternzeichen — Mobile art direction ============================ */
/*
 * The live HTML already uses the frozen universal rail hooks. Mobile keeps
 * the semantic SVG rail and accessible labels, but switches interaction to
 * the same gesture-first contract used elsewhere: native free scrolling,
 * no edge fade, no snap and no arrow controls.
 */
@media (max-width: 767.98px) {
    #index .ed-home-zodiac {
        --ed-zodiac-item-width:
            clamp(96px, 28vw, 118px);
        --ed-zodiac-gap:
            calc(var(--ed-home-mobile-page-gutter) * 0.65);

        display: flow-root !important;
        position: relative;

        overflow: hidden;
    }

    #index .ed-home-zodiac__content {
        width: 100%;
        max-width: none;
        margin: 0;
        padding:
            var(--ed-home-mobile-section-gap)
            0
            calc(var(--ed-home-mobile-page-gutter) * 2);
    }

    #index .ed-home-zodiac__header {
        width: min(78%, 540px);
        margin:
            0
            var(--ed-home-mobile-page-gutter)
            0
            auto;

        text-align: right;
    }

    #index .ed-home-zodiac__eyebrow {
        margin:
            0
            0
            calc(var(--ed-home-mobile-page-gutter) * 0.55);

        text-align: right;
    }

    #index .ed-home-zodiac__title {
        max-width: none;
        text-align: right;
    }

    #index .ed-home-zodiac__intro {
        display: none;
    }

    #index .ed-home-zodiac__nav {
        margin-top:
            calc(var(--ed-home-mobile-page-gutter) * 1.35);
    }

     #index .ed-home-zodiac__rail {
        padding:
            calc(var(--ed-home-mobile-page-gutter) * 0.20)
            var(--ed-home-mobile-page-gutter)
            calc(var(--ed-home-mobile-page-gutter) * 0.35);

        scroll-snap-type: none;
        scroll-padding-inline-start: 0;
    }

    #index .ed-home-zodiac__item {
        scroll-snap-align: none;
    }

    #index .ed-home-zodiac__link {
        padding:
            calc(var(--ed-home-mobile-page-gutter) * 0.18);
    }

    #index .ed-home-zodiac__symbol {
        max-width: none;
        opacity: 0.90;
    }

    #index .ed-home-zodiac__rail-footer {
        width:
            calc(
                100%
                - var(--ed-home-mobile-page-gutter)
                - var(--ed-home-mobile-page-gutter)
            );
        margin:
            var(--ed-home-mobile-page-gutter)
            auto
            0;
    }

}

/* ===== Instagram — Mobile art direction =============================== */
/*
 * Keep the approved Polaroid card markup and frozen universal rail hooks.
 * Mobile simplifies only the interaction/presentation layer:
 * - left-aligned social chapter heading
 * - one large paper print with a clear next-print peek
 * - native free swipe, no edge fades, no snap, no arrow controls
 * - symmetric physical card edges relative to the shared page gutter
 * - no hover-only overlay chrome on touch layouts
 */
@media (max-width: 767.98px) {
    #index .ed-home-instagram {
        --ed-instagram-item-width:
            clamp(190px, 60vw, 248px);
        --ed-instagram-gap:
            calc(var(--ed-home-mobile-page-gutter) * 0.78);
        --ed-instagram-mobile-paper-overhang:
            calc(
                var(--ed-instagram-frame)
                - (var(--ed-instagram-keyline) * -1)
            );

        display: flow-root !important;
        position: relative;

        overflow: hidden;
    }

    #index .ed-home-instagram__content {
        width: 100%;
        max-width: none;
        margin: 0;
        padding:
            var(--ed-home-mobile-section-gap)
            0
            calc(var(--ed-home-mobile-page-gutter) * 2);
    }

    #index .ed-home-instagram__header {
        width:
            calc(
                100%
                - var(--ed-home-mobile-page-gutter)
                - var(--ed-home-mobile-page-gutter)
            );
        max-width: none;
        margin-inline: auto;
        text-align: left;
    }

    #index .ed-home-instagram__eyebrow {
        margin:
            0
            0
            calc(var(--ed-home-mobile-page-gutter) * 0.55);

        text-align: left;
    }

    #index .ed-home-instagram__title {
        max-width: none;
        text-align: left;
    }

    #index .ed-home-instagram__gallery {
        margin-top:
            calc(var(--ed-home-mobile-page-gutter) * 1.35);
    }

     #index .ed-home-instagram__rail {
        padding:
            calc(var(--ed-home-mobile-page-gutter) * 0.30)
            calc(
                var(--ed-home-mobile-page-gutter)
                - (var(--ed-instagram-mobile-paper-overhang) * -1)
            )
            calc(var(--ed-home-mobile-page-gutter) * 0.65);

        scroll-snap-type: none;
        scroll-padding-inline-start: 0;
    }

    #index .ed-home-instagram__item {
        scroll-snap-align: none;
    }

    /*
     * The physical paper card extends one frame/keyline beyond the <li> on
     * either side. The rail padding above compensates for that overhang so the
     * first and last visible paper edges align with the shared Mobile gutter.
     */
    #index .ed-home-instagram__picture::after,
    #index .ed-home-instagram__affordance,
    #index .ed-home-instagram__handle {
        display: none;
    }

    #index .ed-home-instagram__rail-footer {
        width:
            calc(
                100%
                - var(--ed-home-mobile-page-gutter)
                - var(--ed-home-mobile-page-gutter)
            );
        margin:
            var(--ed-home-mobile-page-gutter)
            auto
            0;
    }

}

/* ===== Newsletter — Homepage presentation ============================ */
/*
 * Shared Desktop/Tablet Newsletter presentation now lives in custom.css.
 * This homepage layer owns only homepage-specific content/art direction
 * and the geometry that differs from the global compact footer contract.
 */

/* Supporting copy is hidden by default; Desktop explicitly restores it. */
#index #footer .ed-newsletter-intro {
  display: none;
}

/* Homepage Tablet — same shared global composition, only more breathing room. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #index #footer .block-newsletter {
    padding-top: clamp(2.6rem, 5vw, 3.2rem);
    padding-bottom: clamp(2.6rem, 5vw, 3.2rem);
  }

  #index #footer .block-newsletter::before {
    top: 24%;
    bottom: 24%;
  }
}

/* Homepage Desktop — frozen geometry and editorial lead preserved. */
@media (min-width: 1024px) {
  #index #footer .block-newsletter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(4.75rem, 6.2vw, 7.25rem);
    align-items: start;
    padding-top: clamp(3.2rem, 4.1vw, 4.5rem);
    padding-bottom: clamp(3.2rem, 4.1vw, 4.5rem);
  }

  #index #footer .block-newsletter::before {
    top: 28%;
    bottom: 28%;
    left: 50%;
  }

  #index #footer .block-newsletter > .h5 {
    max-width: 19ch;
    font-size: clamp(1.85rem, 2.05vw, 2.6rem);
  }

  #index #footer .ed-newsletter-intro {
    display: block;
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: 100%;
    max-width: 31rem;
    margin: clamp(0.7rem, 0.9vw, 0.9rem) 0 0;
    font-size: clamp(0.98rem, 0.88vw, 1.04rem);
    line-height: 1.6;
    font-weight: 430;
    color: rgb(43 42 40 / 0.82);
    text-align: center;
  }

  #index #footer .block-newsletter > .ps-emailsubscription-block {
    grid-row: 1 / span 2;
    max-width: 630px;
  }

  #index #footer .block-newsletter .newsletter-input-group,
  #index #footer .block-newsletter .newsletter-input-group .input-subscription {
    min-height: 52px;
  }

  #index #footer .block-newsletter .newsletter-input-group .input-subscription {
    padding: 0 1.15rem;
    font-size: 0.95rem;
  }

  #index #footer .block-newsletter .newsletter-input-group .input-group-append {
    flex: 0 1 auto;
  }

  #index #footer .block-newsletter .newsletter-input-group .btn-subscribe {
    min-width: 148px;
    min-height: auto;
    padding: 0 1.25rem;
    font-size: 0.9rem;
  }

  #index #footer .block-newsletter
  .ps-emailsubscription-block
  form > .mt-2.text-muted {
    margin-top: 0.9rem !important;
  }

  #index #footer .block-newsletter .psgdpr_consent_message {
    gap: normal;
    font-size: clamp(0.82rem, 0.73vw, 0.86rem);
    line-height: 1.5;
  }
}

/* Homepage newsletter — Mobile v2 / Minimal & Clean — fluid 320–767 pass.
   Geometry follows the named Sketch layers:
   paper / folds-behind-paper-and-body / body / trapezoidal body opening.
   The body opening depth now owns the paper-to-envelope overlap, and the rear fold
   reuses that same depth so its side slopes are a true vertical mirror. */
/* Homepage Newsletter — Mobile-only decorative envelope geometry. */
#index #footer .ed-newsletter-envelope-folds,
#index #footer .ed-newsletter-opening-shadow,
#index #footer .ed-newsletter-envelope-body {
  display: none;
}

/* Homepage Newsletter — Mobile-only content additions. */
#index #footer .ed-newsletter-letter-meta,
#index #footer .ed-newsletter-recipient-label {
  display: none;
}

@media (max-width: 767.98px) {
  /*
   * The native footer-first strip carried the old lavender section colour.
   * On the homepage Mobile composition this strip is white; the envelope below
   * owns its own lavender colour independently.
   */
  #index #footer #footer-container-first {
    background: #fff;
    background-image: none;
  }

  /*
   * Standard Mobile content width: one shared homepage gutter on each side.
   * The Newsletter no longer behaves like a full-width coloured panel.
   */
  #index #footer .block-newsletter {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding:
      calc(
        var(--ed-home-mobile-section-gap)
        - var(--ed-home-mobile-page-gutter)
        - var(--ed-home-mobile-page-gutter)
      )
      var(--ed-home-mobile-page-gutter)
      clamp(32px, 8vw, 58px);
    box-sizing: border-box;
    overflow: visible;
    background: transparent;
  }

  /*
   * Sketch layer: `paper with heading and logo`.
   * The paper itself stays rectangular; the trapezoidal opening belongs to BODY.
   * Relative width follows the Sketch relationship: paper is slightly narrower
   * than the envelope so the single rear fold layer can remain visible at the sides.
   */
  #index #footer .block-newsletter > .h5 {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width:
      min(
        calc(100% - clamp(28px, 7.5vw, 32px)),
        calc(171px + 40vw)
      );
    max-width: none;
    min-height: clamp(128px, calc(73.5px + 14.5vw), 185px);
    margin: 0 auto;
    padding:
      clamp(21px, calc(10px + 3vw), 33px)
      clamp(28px, 8vw, 54px)
      clamp(22px, calc(10px + 4vw), 38px);
    box-sizing: border-box;

    color: var(--ed-home-text);
    background: #fff;
    border: 0;
    border-radius: 6px;
    box-shadow:
      0 20px 42px rgb(32 32 39 / 0.14),
      0 8px 18px rgb(32 32 39 / 0.07),
      0 2px 5px rgb(32 32 39 / 0.035);

    /*
     * The real heading text remains the semantic H5. Mobile v2 needs one exact
     * editorial line break that the current outer footer template cannot expose
     * as a span. Keep the source text in the DOM and mirror only its visual
     * presentation here until that parent template is available for cleanup.
     */
    color: transparent;
    font-size: 0;
    line-height: 1;
    text-align: center;
    white-space: normal;
  }

  #index #footer .block-newsletter > .h5::before {
    content: "";
    display: block;

    width: clamp(38px, calc(23.5px + 4.8vw), 60px);
    aspect-ratio: 64 / 47.91;
    margin-bottom: clamp(10px, calc(5px + 1.65vw), 18px);

    background:
      url("/themes/einedelstein/assets/img/home/logo-newsletter.svg")
      center / contain no-repeat;

    pointer-events: none;
  }

  #index #footer .block-newsletter > .h5::after {
    content: "Schönes &\A ein wenig Funkeln";
    display: block;

    color: var(--ed-home-text);
    white-space: pre-line;
    font-size: clamp(1.24rem, calc(0.93rem + 1.55vw), 1.72rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-align: center;
  }

  #index #footer .block-newsletter > .h5 br {
    display: block;
  }

  /* Native module shell stays layout-transparent on Mobile. */
  #index #footer .block-newsletter > .ps-emailsubscription-block {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  /*
   * Envelope wrapper follows the Sketch `newsletter block` footprint.
   * It is layout-only: the visible body and rear fold are separate layers.
   * Sketch reference at 390px: paper 343px, body/folds 371px,
   * paper overlaps body by ~28px, rear fold starts ~61px above body.
   */
  /*
   * Fluid Mobile contract:
   * - <= ~430px: envelope follows the full available content width.
   * - > ~430px: it keeps growing continuously, but at a moderated 45vw slope,
   *   reaching ~542px at 767px instead of freezing or filling the whole viewport.
   * - paper, opening depth, fold geometry and key internal spacing scale with it.
   */
  #index #footer .block-newsletter .ed-newsletter-envelope {
    --ed-newsletter-opening-depth:
      clamp(31px, calc(17.6px + 4.05vw), 49px);
    --ed-newsletter-fold-edge-rise:
      clamp(13px, calc(6.5px + 2vw), 21px);
    --ed-newsletter-fold-hidden-tail:
      clamp(12px, calc(7px + 1.2vw), 16px);

    position: relative;

    width: min(100%, calc(196.5px + 45vw));
    max-width: none;

    /*
     * The opening's flat base must meet the paper edge exactly.
     * Coupling overlap to the same depth token removes the former 3–5px gap.
     */
    margin:
      calc(-1 * var(--ed-newsletter-opening-depth))
      auto
      0;

    padding:
      clamp(70px, calc(34.4px + 10vw), 111px)
      clamp(18px, calc(5px + 4vw), 36px)
      clamp(24px, calc(8px + 5vw), 46px);
    box-sizing: border-box;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /*
   * Sketch layer: `folds behind paper and body`.
   * One full-width rear layer. The same 25% horizontal run AND the exact same
   * vertical depth as the body opening are reused, so the diagonals are truly parallel.
   */
  #index #footer .block-newsletter .ed-newsletter-envelope-folds {
    position: absolute;
    z-index: 1;

    /*
     * Inner fold peak sits one opening-depth above the outer fold edge.
     * Outer edge remains only ~9–11px above the body, as in the v2 silhouette.
     */
    top:
      calc(
        (var(--ed-newsletter-opening-depth) * -1)
        - var(--ed-newsletter-fold-edge-rise)
      );
    left: 0;

    display: block;
    width: 100%;
    height:
      calc(
        var(--ed-newsletter-opening-depth)
        - (var(--ed-newsletter-fold-edge-rise) * -1)
        - (var(--ed-newsletter-fold-hidden-tail) * -1)
      );

    background: rgb(229 224 246);
    clip-path: polygon(
      0 100%,
      0 var(--ed-newsletter-opening-depth),
      25% 0,
      75% 0,
      100% var(--ed-newsletter-opening-depth),
      100% 100%
    );
    border-radius: 0;
    pointer-events: none;
  }

  /*
   * Opening contact shadow — inline SVG in the homepage TPL.
   * SVG is used only for this vector stroke/blur because it preserves a uniform
   * 3-unit stroke around both diagonals and the flat base of the opening.
   * No JS, no external request, no layout participation.
   */
  #index #footer .block-newsletter .ed-newsletter-opening-shadow {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;

    display: block;
    width: 100%;
    height: var(--ed-newsletter-opening-depth);
    overflow: visible;

    pointer-events: none;
  }

  /*
   * Sketch layers: `body` + `trapecoviden otvor na body`.
   * The body is the FRONT layer. Its outer corners start high, then descend
   * on longer, shallower diagonals to a much shorter flat centre opening
   * (about half the body width), matching the approved v2 proportion.
   */
  #index #footer .block-newsletter .ed-newsletter-envelope-body {
    position: absolute;
    z-index: 4;
    inset: 0;

    display: block;
    background: rgb(241 238 250);
    clip-path: polygon(
      0 0,
      25% var(--ed-newsletter-opening-depth),
      75% var(--ed-newsletter-opening-depth),
      100% 0,
      100% 100%,
      0 100%
    );
    border-radius: 0 0 7px 7px;
    filter:
      drop-shadow(0 10px 24px rgb(32 32 39 / 0.045))
      drop-shadow(0 2px 6px rgb(32 32 39 / 0.02));
    pointer-events: none;
  }

  #index #footer .block-newsletter .ed-newsletter-envelope > form {
    position: relative;
    z-index: 5;
    width: 100%;
    margin: 0;
  }

  #index #footer .block-newsletter .ed-newsletter-letter-meta,
  #index #footer .block-newsletter .ed-newsletter-recipient-label,
  #index #footer .block-newsletter .newsletter-input-group,
  #index #footer .block-newsletter
  .ed-newsletter-envelope
  form > .mt-2.text-muted {
    position: relative;
    z-index: 5;
  }

  #index #footer .block-newsletter .ed-newsletter-letter-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;

    min-height: clamp(44px, 11.5vw, 72px);
    margin: 0 0 clamp(18px, 4.8vw, 31px);
    transform: translateY(-18px);
  }

  #index #footer .block-newsletter .ed-newsletter-letter-sender {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.20rem;
    min-width: 0;
    transform: translateX(10px);
  }

  #index #footer .block-newsletter .ed-newsletter-letter-kicker,
  #index #footer .block-newsletter .ed-newsletter-recipient-label {
    color: rgb(32 32 39 / 0.90);
    font-size: clamp(0.88rem, calc(0.82rem + 0.24vw), 0.95rem);
    font-weight: 650;
    line-height: 1.22;
    letter-spacing: 0;
    text-transform: none;
  }

  #index #footer .block-newsletter .ed-newsletter-letter-value {
    color: rgb(43 42 40 / 0.78);
    font-size: clamp(0.82rem, calc(0.78rem + 0.18vw), 0.89rem);
    font-weight: 430;
    line-height: 1.32;
  }

  /* Temporary placeholder; the user will supply the final stamp asset. */
  #index #footer .block-newsletter .ed-newsletter-letter-postmark {
    display: block;
    width: clamp(91px, calc(55.7px + 11.7vw), 145px);
    aspect-ratio: 96 / 56;

    background:
      url("/themes/einedelstein/assets/img/home/ed-newsletter-postmark.svg")
      center / contain no-repeat;

    opacity: 0.50;
    transform: translateX(-10px);
    pointer-events: none;
  }

  #index #footer .block-newsletter .ed-newsletter-recipient-label {
    display: block;
    width: 100%;
    margin: 0 0 clamp(8px, 2.2vw, 10px);
    padding: 0;
    text-align: right;
    transform: none;
  }

  /* Mobile form / button / GDPR presentation is shared globally in custom.css. */

}


/* ===== Responsive activation status ================================== */
/*
 * Mobile Homepage remains active/frozen.
 * Tablet content chapters through Instagram are now active and reuse the
 * shared semantic HTML / responsive component primitives.
 */

/* ===== Hero — Tablet v1 art-direction contract ======================== */
/*
 * One semantic Hero HTML tree is shared across Desktop / Tablet / Mobile.
 * Tablet changes presentation only.
 *
 * Artwork contract:
 * - CSS owns the beige section surface; the SVG stays transparent.
 * - 1024×620 is one extended Tablet master for Hero + Edelsteine handoff.
 * - The visible Hero height continues smoothly from the frozen Mobile cap:
 *   455px at 768px -> 500px at 1024px.
 * - Hero and Edelsteine paint the same master in the same coordinate system.
 */
@media (min-width: 768px) and (max-width: 1023.98px) {
    #index {
        --ed-hero-tablet-stage-height:
            clamp(
                455px,
                calc(17.578125vw + 320px),
                500px
            );

        --ed-hero-tablet-master-ratio: 1.4519906323; /* 620 / 427 */

        --ed-home-tablet-page-gutter:
            clamp(24px, 3.8vw, 40px);
    }

    /* Hero shell ------------------------------------------------------ */


    #index .ed-hero__stage {
        --ed-hero-display-size:
            clamp(2.35rem, calc(0.4rem + 4vw), 3rem);

        height: var(--ed-hero-tablet-stage-height);
        background-image:
            url("/themes/einedelstein/assets/img/home/ed-hero-tablet.svg");
        background-size:
            100%
            calc(
                var(--ed-hero-tablet-stage-height)
                * var(--ed-hero-tablet-master-ratio)
            );
    }

    /* Message + CTA -------------------------------------------------- */

    #index .ed-hero__message {
        left: 6.25%;
        width: 46%;
    }

    #index .ed-hero__title {
        font-size:
            clamp(2.82rem, 5.2vw, 3.35rem);
        line-height: 0.97;
        letter-spacing: -0.04em;
    }

    #index .ed-hero__lead {
        margin-top: clamp(0.8rem, 1.55vw, 1rem);
        font-size: clamp(0.95rem, 1.65vw, 1.05rem);
    }

    #index .ed-hero__link {
        margin-top: clamp(0.8rem, 1.55vw, 1rem);
        font-size: clamp(0.88rem, 1.55vw, 1rem);
    }

    /* Discount progression ------------------------------------------ */

    #index .ed-hero__tiers {
        --ed-progress-dot-size:
            clamp(
                13px,
                calc(0.390625vw + 10px),
                14px
            );

        transform: none;
    }

    #index .ed-hero__tier--5 {
        --ed-tier-y: 65.645%;
        --ed-copy-gap-x: clamp(11px, 1.65vw, 16px);
        --ed-copy-shift-y: clamp(9px, 1.35vw, 14px);
        --ed-tail-length:
            clamp(
                73.8px,
                calc(2.8513vw + 51.906px),
                81.1px
            );
    }

    #index .ed-hero__tier--10 {
        --ed-tier-y: 58.134%;
        --ed-copy-gap-x: clamp(11px, 1.65vw, 16px);
        --ed-copy-shift-y: clamp(11px, 1.55vw, 16px);
        --ed-tail-length:
            clamp(
                94.4px,
                calc(3.648vw + 66.410px),
                103.8px
            );
    }

    #index .ed-hero__tier--15 {
        --ed-tier-y: 44.331%;
        --ed-copy-gap-x: clamp(10px, 1.55vw, 15px);
        --ed-copy-shift-y: clamp(12px, 1.7vw, 18px);
        --ed-tail-length:
            clamp(
                119.8px,
                calc(4.6288vw + 84.265px),
                131.7px
            );
    }


    #index .ed-hero__threshold {
        margin-top: 0.24rem;
        font-size: clamp(0.72rem, 1.2vw, 0.84rem);
    }

    #index .ed-hero__tier::after {
        z-index: 1;
    }


    /* Signature ------------------------------------------------------ */

    #index .ed-hero__signature {
        right: 4.6%;
        bottom: 6.5%;
        font-size: clamp(6.5px, 0.88vw, 8px);
        letter-spacing: 0.26em;
    }

    /* Shared Tablet category contract ------------------------------- */
    #index .ed-home-category--gemstones,
    #index .ed-home-category--supplies {
        --ed-category-page-gutter:
            var(--ed-home-tablet-page-gutter);
        --ed-category-copy-inset:
            var(--ed-category-page-gutter);
        --ed-category-rail-pull: 0px;
        --ed-category-left-peek: 0px;
        --ed-category-rail-right-inset: 0px;

        --ed-category-card-width:
            clamp(190px, 25vw, 240px);
        --ed-category-card-title-size:
            clamp(0.92rem, 1.30vw, 1rem);
        --ed-category-card-description-size:
            clamp(0.74rem, 1.05vw, 0.82rem);
    }

    #index .ed-home-category .ed-home-category__eyebrow,
    #index .ed-home-category .ed-home-category__title {
        text-align: left;
    }

    #index .ed-home-category .ed-home-category__title {
        font-size: clamp(2.05rem, 3.55vw, 2.7rem);
        white-space: normal;
    }

    #index .ed-home-category .ed-home-category__lead {
        font-size: clamp(0.88rem, 1.15vw, 0.98rem);
        line-height: 1.48;
    }


    /* Shared Tablet editorial geometry — Edelsteine + Schmuck -------- */
    #index .ed-home-category--gemstones
    .ed-home-category__layout,
    #index .ed-home-category--jewelry
    .ed-home-category__layout {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(0, 0.92fr);
        column-gap: clamp(30px, 4.2vw, 48px);
    }

    #index .ed-home-category--gemstones
    .ed-home-category__visual,
    #index .ed-home-category--jewelry
    .ed-home-category__visual {
        position: relative;
        width: 92%;
        max-width: none;
        margin: 0;
        justify-self: start;
        align-self: start;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__editorial-media,
    #index .ed-home-category--jewelry__editorial-image {
        -webkit-mask-image:
            linear-gradient(
                to bottom,
                transparent 0,
                #000 clamp(34px, 5vw, 48px),
                #000 calc(100% - clamp(12px, 1.6vw, 16px)),
                transparent 100%
            ),
            linear-gradient(
                to right,
                #000 0,
                #000 calc(100% - clamp(8px, 1.1vw, 12px)),
                transparent 100%
            );
        mask-image:
            linear-gradient(
                to bottom,
                transparent 0,
                #000 clamp(34px, 5vw, 48px),
                #000 calc(100% - clamp(12px, 1.6vw, 16px)),
                transparent 100%
            ),
            linear-gradient(
                to right,
                #000 0,
                #000 calc(100% - clamp(8px, 1.1vw, 12px)),
                transparent 100%
            );
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__intro,
    #index .ed-home-category--jewelry
    .ed-home-category__editorial-copy {
        justify-self: center;
        width: min(100%, 390px);
        margin-inline: auto;
        text-align: left;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__lead,
    #index .ed-home-category--jewelry
    .ed-home-category__lead {
        max-width: 30ch;
        margin-top: clamp(2.15rem, 3.6vw, 2.5rem);
    }

    #index .ed-home-category--gemstones
    .ed-home-category__cta,
    #index .ed-home-category--jewelry
    .ed-home-category__cta {
        margin-top: clamp(0.9rem, 1.4vw, 1.1rem);
    }

    /* Hero -> Edelsteine single-master continuation ----------------- */

    #index .ed-home-category--gemstones {
        position: relative;
    }

    #index .ed-home-category--gemstones::before {
        top: calc(var(--ed-hero-tablet-stage-height) * -1);
        height: calc(
            var(--ed-hero-tablet-stage-height)
            * var(--ed-hero-tablet-master-ratio)
        );

        background-image:
            url("/themes/einedelstein/assets/img/home/ed-hero-tablet.svg");

        /*
         * Tablet Hero → Edelsteine continuation. The external SVG owns the
         * pale-wash and right-orb art direction; this mask only softens the
         * remaining lower continuation into the real section surface.
         */
        -webkit-mask-image: linear-gradient(
            to bottom,
            #000 0%,
            #000 79%,
            rgb(0 0 0 / 0.72) 88%,
            rgb(0 0 0 / 0.34) 94%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            #000 0%,
            #000 79%,
            rgb(0 0 0 / 0.72) 88%,
            rgb(0 0 0 / 0.34) 94%,
            transparent 100%
        );
    }

    /* Edelsteine — Tablet v1 geometry/art direction ------------------- */

    #index .ed-home-category--gemstones
    .ed-home-category__content {
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
    }

    #index .ed-home-category--gemstones
    .ed-home-category__layout {
        grid-template-areas:
            "visual intro"
            "categories categories";
        padding:
            0
            var(--ed-category-page-gutter)
            clamp(30px, 4.8vw, 48px)
            0;
    }


    #index .ed-home-category--gemstones
    .ed-home-category__editorial-media {
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__image {
        max-width: none;
        object-position: center;
    }

    /* Copy stays left-aligned; the whole block centers in its grid column. */
    #index .ed-home-category--gemstones
    .ed-home-category__intro {
        max-width: none;
        padding-top: clamp(18px, 3.2vw, 30px);
    }

    #index .ed-home-category--gemstones
    .ed-home-category__intro hgroup {
        margin: 0;
    }


    /* Tablet geometry only; interaction comes from the shared non-Desktop rail. */
    #index .ed-home-category--gemstones
    .ed-home-category__categories {
        width: calc(100% + var(--ed-category-page-gutter));
        margin:
            clamp(10px, 1.8vw, 18px)
            calc(0px - var(--ed-category-page-gutter))
            0
            0;
    }

    #index .ed-home-category--gemstones
    .ed-home-category__rail {
        padding-top: clamp(28px, 4vw, 38px);
        padding-bottom: clamp(18px, 2.7vw, 28px);
    }

    /* Edelsteine → Schmuckzubehör handoff ---------------------------- */

    #index .ed-home-category--gemstones
    .ed-gemstones-intro__outro {
        height: clamp(30px, 4.8vw, 48px);
        pointer-events: none;
    }

    /* Schmuckzubehör — Tablet v1 geometry/art direction -------------- */

    #index .ed-home-category--supplies {
        background: #ffffff;
    }

    /*
     * Same normal-flow chapter handoff as frozen Mobile.
     * No inter-section lift/overlap: Schmuckzubehör starts after Edelsteine
     * and the beige-to-white fade remains owned entirely by Edelsteine.
     */
    #index .ed-home-category--supplies
    .ed-home-category__content {
        padding: 0;
    }

    #index .ed-home-category--supplies
    .ed-home-category__layout {
        grid-template-columns:
            minmax(0, 1.02fr)
            minmax(0, 0.98fr);
        grid-template-areas:
            "intro visual"
            "categories categories";

        column-gap:
            clamp(32px, 4.6vw, 48px);

        align-items: center;

        /*
         * Normal-flow start, matching the frozen Mobile architecture.
         * The previous -20px content lift + positive top padding is removed.
         */
        padding:
            0
            var(--ed-category-page-gutter)
            clamp(38px, 5vw, 52px);
    }

    #index .ed-home-category--supplies
    .ed-home-category__intro {
        grid-area: intro;
        z-index: 2;

        align-self: center;
        justify-self: center;

        width: min(100%, 520px);
        max-width: none;

        margin: 0;
    }


    #index .ed-home-category--supplies
    .ed-home-category__lead {
        display: block;
        max-width: 48ch;
        margin-top: clamp(2rem, 3.3vw, 2.4rem);
    }

    #index .ed-home-category--supplies
    .ed-home-category__cta {
        margin-top: clamp(0.95rem, 1.5vw, 1.15rem);
    }

    /*
     * Portrait Mobile artwork becomes the Tablet supporting visual.
     * The grid box keeps its approved position; only image pixels receive the
     * final -20px visual lift so copy/rail geometry cannot reflow.
     */
    #index .ed-home-category--supplies
    .ed-home-category__visual {
        grid-area: visual;

        align-self: start;
        justify-self: end;

        width: clamp(480px, 60vw, 580px);
        max-width: none;

        margin-top: clamp(-76px, -6.8vw, -54px);
        margin-right:
            calc(var(--ed-category-page-gutter) * -0.65);
        padding: 0;
    }

    #index .ed-home-category--supplies
    .ed-home-category__editorial-media {
        display: block;
        width: 100%;
        border: 0;
        border-radius: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    #index .ed-home-category--supplies
    .ed-home-category__image {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        object-fit: contain;
        transform: translateY(-20px);
    }

    #index .ed-home-category--supplies
    .ed-home-category__categories {
        grid-area: categories;
        z-index: 3;

        width:
            calc(
                100%
                + var(--ed-category-page-gutter)
                + var(--ed-category-page-gutter)
            );

        margin:
            clamp(26px, 3.8vw, 38px)
            calc(0px - var(--ed-category-page-gutter))
            0;
    }

    #index .ed-home-category--supplies
    .ed-home-category__rail {
        padding-top:
            clamp(26px, 3.5vw, 36px);
        padding-right:
            var(--ed-category-page-gutter);
        padding-bottom:
            clamp(18px, 2.7vw, 28px);
        padding-left:
            var(--ed-category-page-gutter);
    }

    /* Kundenstimmen — Tablet v1 geometry/rhythm ----------------------- */
    /*
     * Reuses the frozen Mobile rail interaction and Desktop visual language.
     * Height stays content-driven; one section-owned rhythm scales only the
     * real vertical breathing room. No fixed heights and no new JavaScript.
     */
    #index .ed-home-testimonials {
        --ed-testimonials-card-width:
            clamp(292px, 34vw, 330px);
        --ed-testimonials-title-size:
            clamp(1.90rem, calc(1.45rem + 0.95vw), 2.10rem);
        --ed-testimonials-quote-mark-size:
            clamp(3rem, calc(2.25rem + 1.55vw), 3.40rem);
        --ed-testimonials-body-size:
            clamp(0.90rem, calc(0.82rem + 0.18vw), 0.96rem);
        --ed-testimonials-author-size:
            clamp(0.66rem, calc(0.60rem + 0.14vw), 0.70rem);

        --ed-testimonials-rhythm:
            clamp(10px, 1.35vw, 14px);
        --ed-testimonials-space-2:
            calc(var(--ed-testimonials-rhythm) * 2);
        --ed-testimonials-space-3:
            calc(var(--ed-testimonials-rhythm) * 3);
        --ed-testimonials-space-4:
            calc(var(--ed-testimonials-rhythm) * 4);

        background:
            linear-gradient(
                to bottom,
                var(--ed-testimonials-surface) 0,
                var(--ed-testimonials-surface)
                    calc(100% - var(--ed-testimonials-space-4)),
                #ffffff 100%
            );
    }

    #index .ed-home-testimonials__content {
        padding:
            calc(var(--ed-testimonials-space-3) + 4px)
            0
            var(--ed-testimonials-space-4);
    }

    #index .ed-home-testimonials__content > header {
        width:
            calc(
                100%
                - var(--ed-home-tablet-page-gutter)
                - var(--ed-home-tablet-page-gutter)
            );
    }

    #index .ed-home-testimonials__eyebrow {
        margin: 0 0 clamp(0.7rem, 1.1vw, 0.85rem);
        font-size: clamp(0.64rem, 0.85vw, 0.70rem);
    }

    #index .ed-home-testimonials__title {
        font-size: var(--ed-testimonials-title-size);
        font-weight: 300;
        line-height: 1.03;
        letter-spacing: -0.035em;
    }

    #index .ed-home-testimonials__rail-viewport {
        margin-top: var(--ed-testimonials-space-2);
    }

    #index .ed-home-testimonials__rail {
        min-height: 0;
        padding:
            0
            var(--ed-home-tablet-page-gutter)
            calc(var(--ed-testimonials-rhythm) * 0.35);
    }

    #index .ed-home-testimonials__item {
        flex: 0 0 var(--ed-testimonials-card-width);
        padding-inline: clamp(20px, 2.6vw, 27px);
    }


    #index .ed-home-testimonials__quote {
        padding-top: var(--ed-testimonials-space-2);
    }


    #index .ed-home-testimonials__author {
        margin-top: calc(var(--ed-testimonials-rhythm) + 2px);
    }

    /* Sternzeichen — Tablet v1 geometry/art direction ---------------- */
    /*
     * Reuses the frozen shared heading/rail contracts. Tablet adds only
     * the responsive Zodiac geometry; no section-specific JS or progress
     * logic is introduced. The semantic intro remains in the DOM but follows
     * the frozen Mobile art direction and stays visually hidden on Tablet.
     */
    #index {
        --ed-home-tablet-title-md:
            clamp(1.90rem, calc(1.45rem + 0.95vw), 2.10rem);

        --ed-home-tablet-eyebrow-size:
            clamp(0.64rem, 0.85vw, 0.70rem);
    }

    /* Existing Kundenstimmen output remains numerically unchanged. */
    #index .ed-home-testimonials {
        --ed-testimonials-title-size:
            var(--ed-home-tablet-title-md);
    }

    #index .ed-home-zodiac {
        --ed-zodiac-title-size:
            var(--ed-home-tablet-title-md);

        --ed-zodiac-item-width:
            clamp(118px, calc(76px + 5.46875vw), 132px);

        --ed-zodiac-gap:
            clamp(18px, calc(6.8px + 1.484375vw), 22px);

        display: flow-root !important;
        position: relative;
        overflow: hidden;
    }

    /* Shared medium chapter typography — Kundenstimmen + Sternzeichen. */
    #index .ed-home-testimonials__eyebrow,
    #index .ed-home-zodiac__eyebrow {
        font-size:
            var(--ed-home-tablet-eyebrow-size);
    }

    #index .ed-home-testimonials__title,
    #index .ed-home-zodiac__title {
        font-size:
            var(--ed-home-tablet-title-md);
        line-height: 1.03;
        letter-spacing: -0.035em;
    }

    /* Zodiac geometry only. */
    #index .ed-home-zodiac__content {
        width: 100%;
        max-width: none;
        margin: 0;
        padding:
            clamp(40px, 5.6vw, 58px)
            0
            clamp(44px, 6vw, 62px);
    }

    #index .ed-home-zodiac__header {
        width: min(46%, 560px);
        margin:
            0
            var(--ed-home-tablet-page-gutter)
            0
            auto;
        text-align: right;
    }

    #index .ed-home-zodiac__eyebrow {
        margin:
            0
            0
            clamp(0.7rem, 1.1vw, 0.85rem);
        text-align: right;
    }

    #index .ed-home-zodiac__title {
        max-width: none;
        text-align: right;
    }

    #index .ed-home-zodiac__intro {
        display: none;
    }

    #index .ed-home-zodiac__nav {
        margin-top:
            clamp(24px, 3.4vw, 34px);
    }

    #index .ed-home-zodiac__rail {
        padding:
            clamp(6px, 0.78vw, 8px)
            var(--ed-home-tablet-page-gutter)
            clamp(10px, 1.35vw, 14px);
        scroll-snap-type: none;
        scroll-padding-inline-start: 0;
    }

    #index .ed-home-zodiac__item {
        scroll-snap-align: none;
    }

    #index .ed-home-zodiac__link {
        padding:
            clamp(4px, 0.5vw, 5px);
    }

    #index .ed-home-zodiac__symbol {
        max-width: none;
        opacity: 0.90;
    }

    /* Instagram — Tablet v1 geometry/art direction ------------------- */
    /*
     * Reuses the frozen shared Polaroid treatment, heading primitives and
     * universal rail/footer controls. Tablet adds only responsive gallery
     * geometry; no section-specific JavaScript or new interaction contract.
     */
    #index .ed-home-instagram {
        --ed-instagram-item-width:
            clamp(178px, calc(458px - 27.34375vw), 248px);

        --ed-instagram-gap:
            clamp(12px, calc(52px - 3.90625vw), 22px);

        display: flow-root !important;
        position: relative;
        overflow: hidden;
    }

    #index .ed-home-instagram__content {
        width: 100%;
        max-width: none;
        margin: 0;
        padding:
            clamp(40px, 5.6vw, 58px)
            0
            clamp(44px, 6vw, 62px);
    }

    #index .ed-home-instagram__header {
        width:
            min(
                calc(
                    100%
                    - var(--ed-home-tablet-page-gutter)
                    - var(--ed-home-tablet-page-gutter)
                ),
                620px
            );

        margin:
            0
            auto
            0
            var(--ed-home-tablet-page-gutter);

        text-align: left;
    }

    #index .ed-home-instagram__eyebrow {
        margin:
            0
            0
            clamp(0.7rem, 1.1vw, 0.85rem);

        font-size:
            var(--ed-home-tablet-eyebrow-size);

        text-align: left;
    }

    #index .ed-home-instagram__title {
        max-width: none;

        font-size:
            var(--ed-home-tablet-title-md);

        line-height: 1.03;
        letter-spacing: -0.035em;
        text-align: left;
    }

    #index .ed-home-instagram__gallery {
        margin-top:
            clamp(24px, 3.4vw, 34px);
    }

    #index .ed-home-instagram__rail {
        padding:
            clamp(10px, 1.35vw, 14px)
            calc(
                var(--ed-home-tablet-page-gutter)
                + var(--ed-instagram-frame)
                + var(--ed-instagram-keyline)
            )
            clamp(18px, 2.4vw, 26px);

        scroll-snap-type: none;
        scroll-padding-inline-start: 0;
    }

    #index .ed-home-instagram__item {
        scroll-snap-align: none;
    }

    /* Shared Tablet rail-footer geometry ------------------------------ */

    #index .ed-home-category--gemstones
    .ed-home-category__categories,
    #index .ed-home-category--supplies
    .ed-home-category__categories {
        z-index: 3;
    }

    #index [data-ed-category-section]
    .ed-home-category__rail-footer {
        position: relative;
        z-index: 5;

        width:
            min(
                calc(
                    100%
                    - var(--ed-home-tablet-page-gutter)
                    - var(--ed-home-tablet-page-gutter)
                ),
                620px
            );

        margin-left: auto;
        margin-right: auto;
        margin-top: clamp(8px, 1.2vw, 12px);
        opacity: 1;
    }

    #index [data-ed-category-section].is-scroll-enhanced
    .ed-home-category__rail-footer {
        visibility: visible;
        pointer-events: auto;
    }

    #index [data-ed-category-section]
    .ed-home-category__progress {
        position: relative;
        z-index: 1;
        display: block;
        min-height: 14px;
        opacity: 1;
    }

    #index [data-ed-category-section]
    .ed-home-category__progress::before {
        z-index: 1;
    }

    #index [data-ed-category-section]
    .ed-home-category__progress-thumb {
        z-index: 2;
    }
}

/* ===== Schmuck — Tablet v1 geometry/art direction ===================== */
/*
 * Reuses the approved Tablet Edelsteine visual/copy language and the frozen
 * Mobile structural primitive where .ed-home-category__intro becomes layout-
 * transparent. No new DOM or JavaScript: visual + semantic copy form the first
 * row, while the two static Damen/Herren destinations form a centered second
 * row in normal document flow.
 */
@media (min-width: 768px) and (max-width: 1023.98px) {
    #index .ed-home-category--jewelry {
        --ed-jewelry-surface-handoff:
            clamp(44px, 6vw, 60px);

        --ed-jewelry-destination-media-width:
            clamp(112px, 15vw, 145px);
        --ed-jewelry-destination-gap:
            clamp(12px, 1.8vw, 18px);
        --ed-jewelry-destination-row-pad:
            clamp(8px, 1.1vw, 12px);
    }

    /* Normal-flow chapter start; no inter-section overlap. */
    #index .ed-home-category--jewelry
    .ed-home-category__content {
        padding: 0;
    }

    /* Same Tablet upper composition balance as approved Edelsteine. */
    #index .ed-home-category--jewelry
    .ed-home-category__layout {
        grid-template-areas:
            "visual copy"
            "destinations destinations";
        row-gap: 0;
        padding:
            0
            var(--ed-category-page-gutter)
            clamp(30px, 4.8vw, 48px)
            0;
    }

    /* Frozen Mobile structural primitive: children become grid participants. */


    /* Editorial — left ------------------------------------------------ */
    #index .ed-home-category--jewelry
    .ed-home-category__visual {
        grid-area: visual;
    }


    /* Copy — right ---------------------------------------------------- */
    #index .ed-home-category--jewelry
    .ed-home-category__editorial-copy {
        grid-area: copy;
        align-self: center;
    }

    #index .ed-home-category--jewelry
    .ed-home-category__title {
        max-width: 18ch;
    }

    #index .ed-home-category--jewelry
    .ed-home-category__lead {
        display: block;
    }


    /* Static destinations — centered second row ---------------------- */
    #index .ed-home-category--jewelry__destinations {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(22px, 3.2vw, 34px);
        justify-self: center;
        width:
            min(
                calc(
                    100%
                    - var(--ed-category-page-gutter)
                    - var(--ed-category-page-gutter)
                ),
                720px
            );
        margin:
            clamp(28px, 4vw, 40px)
            auto
            0;
    }


    #index .ed-home-category--jewelry__destination-media {
        border-radius: clamp(10px, 1.4vw, 14px);
    }

    #index .ed-home-category--jewelry__destination-title {
        font-size: clamp(0.93rem, 1.3vw, 1.05rem);
    }

    #index .ed-home-category--jewelry__destination-description {
        margin-top: 0.38rem;
        font-size: clamp(0.76rem, 1vw, 0.86rem);
        line-height: 1.4;
    }
}

/* Narrow Tablet: text height must not push the eyebrow above the fade. */
@media (min-width: 768px) and (max-width: 879.98px) {
    #index .ed-home-category--jewelry
    .ed-home-category__editorial-copy {
        align-self: start;
        margin:
            clamp(28px, 3.4vw, 34px)
            auto
            0;
    }
}

/*
 * Tablet composition is width-driven, while controls follow the actual input
 * capability. Touch stays gesture-first; mouse/trackpad restores the existing
 * shared previous/next controls whenever the rail really overflows.
 */
@media
    (min-width: 768px)
    and (max-width: 1023.98px)
    and (hover: hover)
    and (pointer: fine) {

    #index [data-ed-category-section].is-scroll-enhanced
    .ed-home-category__controls {
        display: flex !important;
    }
}

/* ===== Hero → Edelsteine — Mobile single-master viewport clip =========== */
/*
 * One SVG, one coordinate system, one ellipse.
 *
 * Hero paints the 375×365 master from y=0 and clips it at the visible
 * 310-unit Hero boundary. Edelsteine paints that SAME full master element,
 * positioned exactly one Hero-height upward; the section's own overflow clips
 * everything above its boundary. No background-position slicing is used.
 *
 * The pseudo-element itself is exactly 100vw wide, therefore x=375 maps to the
 * physical viewport-right edge in both sections. Rotation never participates
 * in clipping; rotate(-17 333.5 294) remains artwork geometry only.
 *
 * The SVG ellipse is completely unmasked. The soft dissolve belongs only to
 * the visible continuation layer here, so the original Hero orb stays intact.
 */
@media (max-width: 767.98px) {
    #index .ed-home-category--gemstones::before {
        top: calc(var(--ed-hero-mobile-stage-height) * -1);
        height: calc(
            var(--ed-hero-mobile-stage-height)
            * var(--ed-hero-mobile-master-ratio)
        );

        background-image:
            url("/themes/einedelstein/assets/img/home/ed-hero-mobile.svg");

        /* Fade only the natural lower continuation, never the Hero portion. */
        -webkit-mask-image: linear-gradient(
            to bottom,
            #000 0%,
            #000 90%,
            rgb(0 0 0 / 0.72) 94%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            #000 0%,
            #000 90%,
            rgb(0 0 0 / 0.72) 94%,
            transparent 100%
        );
    }


}


/* v5.50 note: Hero artwork uses ed-hero-mobile.svg.
   No extra continuation fade tuning beyond the proven v5.48 single-master clip. */

/* ===== Schmuck — responsive destination picture wrapper ================== */
/*
 * The Damen/Herren destination images use <picture> for Mobile/Tablet
 * width-based srcset candidates while preserving the existing Desktop 200/400
 * fallback. Keep the wrapper layout-neutral and let the existing 5:4 media
 * frame own clipping/radius.
 */
.ed-home-category--jewelry__destination-picture {
    display: block;
    width: 100%;
    height: 100%;
}

/*
 * <320px physical viewport only — Hero → Edelsteine fractional seam fix.
 *
 * Keep the frozen Mobile artwork geometry untouched. The correctly registered
 * Edelsteine continuation is allowed to paint 1 CSS px above its natural clip,
 * covering the Chromium fractional raster seam without moving or resizing SVG.
 *
 * Scope is owned by html.ed-sub320, synchronized in head.tpl from the physical
 * visual viewport width. At 320px and wider the class is absent, so the frozen
 * Mobile/Desktop layout receives no override.
 */
html.ed-sub320 #index .ed-home-category--gemstones {
    overflow: visible !important;

    -webkit-clip-path:
        inset(-1px 0 0 0);

    clip-path:
        inset(-1px 0 0 0);
}