/* =========================================================================
   Trittsiegel – Merchandise-Konfigurator mit Live-Vorschau
   ========================================================================= */
.merch { background: var(--ts-bg); border-top: 1px solid var(--ts-line); }
.merch__inner { max-width: 1080px; margin: 0 auto; padding: clamp(2.5rem,5vw,3.5rem) clamp(1.25rem,5vw,3rem); }
.merch__title { font-family: var(--ts-font-head); font-weight: 600; font-size: 1.8rem; margin: 0 0 .3rem; }
.merch__sub { color: var(--ts-muted); margin: 0 0 1.6rem; }
.merch__layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
@media (max-width: 820px) { .merch__layout { grid-template-columns: 1fr; } }

/* ---- Live-Vorschau ---- */
.merch-stage {
    position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 420px; margin: 0 auto;
    --garment: #2b2620; --print: #ffffff;
    background:
        radial-gradient(closest-side at 50% 40%, color-mix(in srgb, var(--ts-accent) 7%, var(--ts-surface)), var(--ts-surface));
    border: 1px solid var(--ts-line); border-radius: var(--ts-radius); overflow: hidden;
}
.merch-product {
    position: absolute; inset: 0; background: var(--garment);
    -webkit-mask: var(--pm) center / 80% no-repeat; mask: var(--pm) center / 80% no-repeat;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.18));
}
.merch-stage[data-product="tshirt"]   .merch-product { --pm: url('/_Resources/Static/Packages/Trittsiegel.Site/Products/tshirt.svg'); }
.merch-stage[data-product="pullover"] .merch-product { --pm: url('/_Resources/Static/Packages/Trittsiegel.Site/Products/pullover.svg'); }
.merch-stage[data-product="tasse"]    .merch-product { --pm: url('/_Resources/Static/Packages/Trittsiegel.Site/Products/tasse.svg'); }
.merch-stage[data-product="mousepad"] .merch-product { --pm: url('/_Resources/Static/Packages/Trittsiegel.Site/Products/mousepad.svg'); }

.merch-print {
    position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%);
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    width: 38%; pointer-events: none; text-align: center;
}
.merch-print .track-glyph { width: 100%; max-height: 90px; background: var(--print); opacity: 1; }
.merch-print__name { color: var(--print); font-family: var(--ts-font-head); font-weight: 700; font-size: clamp(.8rem, 2.4vw, 1.1rem); line-height: 1.1; }

/* produktspezifische Druckposition */
.merch-stage[data-product="tasse"]    .merch-print { left: 43%; top: 52%; width: 26%; }
.merch-stage[data-product="mousepad"] .merch-print { top: 50%; width: 64%; flex-direction: row; gap: .7rem; }
.merch-stage[data-product="mousepad"] .merch-print .track-glyph { width: 70px; flex: none; }

/* ---- Steuerung ---- */
.merch-group { margin-bottom: 1.5rem; }
.merch-group__label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ts-muted); font-weight: 600; margin-bottom: .6rem; }
.merch-products { display: flex; flex-wrap: wrap; gap: .5rem; }
.merch-prod {
    padding: .6rem 1rem; border-radius: 999px; border: 1.5px solid var(--ts-line);
    background: var(--ts-surface); color: var(--ts-ink); font-family: inherit; font-size: .95rem; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.merch-prod:hover { border-color: var(--ts-accent); }
.merch-prod.is-active { background: var(--ts-accent); color: #fff; border-color: var(--ts-accent); }
.merch-colors { display: flex; gap: .6rem; }
.merch-color { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid var(--ts-line); cursor: pointer; padding: 0; }
.merch-color.is-active { box-shadow: 0 0 0 2px var(--ts-surface), 0 0 0 4px var(--ts-accent); }

.merch-foot { margin-top: 1.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.merch-price { font-family: var(--ts-font-head); font-weight: 700; font-size: 2rem; color: var(--ts-ink); }
.merch-price small { display: block; font-family: var(--ts-font-body); font-weight: 500; font-size: .8rem; color: var(--ts-accent); }
.merch-order { display: inline-flex; }