/* ##########  Merch-Vitrine (inc/merch.php)  ########## */

.dtc-merch {--merch-gap: 24px; position: relative;}

.dtc-merch__head {display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px;}
.dtc-merch .dtc-merch__title {font-weight: 300; font-size: 28px; line-height: 1.25; margin: 0;}

.dtc-merch .dtc-merch__list {list-style: none; margin: 0; padding: 0;}
.dtc-merch .dtc-merch__item {list-style: none; margin: 0; padding: 0;}

/* Karte */
.dtc-merch .dtc-merch__card {position: relative; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; background: #fff; border: 0; border-radius: var(--border-radius); box-shadow: 0 2px 12px rgba(0, 0, 0, .10); overflow: hidden; color: var(--text-color); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition);}
.dtc-merch .dtc-merch__card:hover {transform: translateY(-6px); box-shadow: var(--box-shadow); color: var(--text-color);}
.dtc-merch .dtc-merch__card:focus-visible {outline: 3px solid var(--secundary-color) !important; outline-offset: 2px;}

.dtc-merch__img {display: block; aspect-ratio: 1 / 1; background: #f3f4f2; overflow: hidden;}
.dtc-merch .dtc-merch__img img {display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .4s ease;}
.dtc-merch .dtc-merch__card:hover .dtc-merch__img img {transform: scale(1.05);}

.dtc-merch__body {display: flex; flex-direction: column; flex: 1; gap: 2px; padding: 14px 16px 16px;}
.dtc-merch__name {font-weight: 700; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.dtc-merch__type {font-size: 13px; line-height: 1.4; color: #666;}
.dtc-merch__price {margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--primary-color);}
.dtc-merch__sr {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}

/* Raster */
.dtc-merch .dtc-merch__grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--merch-gap);}

/* Slider */
.dtc-merch .dtc-merch__splide {visibility: visible; padding-bottom: 58px;}
.dtc-merch .dtc-merch__splide .splide__track {margin: 0 -12px; padding-top: 12px; padding-bottom: 20px;}

/* Ohne Splide (JS aus/nicht geladen): horizontal scrollen */
.dtc-merch .dtc-merch__splide:not(.is-initialized) {padding-bottom: 0;}
.dtc-merch .dtc-merch__splide:not(.is-initialized) .splide__track {overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 12px; padding-left: 12px; padding-right: 12px;}
.dtc-merch .dtc-merch__splide:not(.is-initialized) .splide__list {gap: var(--merch-gap);}
.dtc-merch .dtc-merch__splide:not(.is-initialized) .splide__slide {flex: 0 0 calc((100% - 3 * var(--merch-gap)) / 4); scroll-snap-align: start;}

/* Pfeile und Punkte unter den Karten */
.dtc-merch .splide__arrow {position: absolute; top: auto; bottom: 0; transform: none; width: 42px; height: 42px; background: var(--primary-color); border-radius: 50%; opacity: 1; transition: background var(--transition), opacity var(--transition);}
.dtc-merch .splide__arrow:hover:not(:disabled) {background: var(--secundary-color); opacity: 1;}
.dtc-merch .splide__arrow:focus-visible {outline: 3px solid var(--secundary-color); outline-offset: 2px;}
.dtc-merch .splide__arrow:disabled {opacity: .3; cursor: default;}
.dtc-merch .splide__arrow svg {fill: #fff; width: 16px; height: 16px;}
.dtc-merch .splide__arrow--prev {left: 0 !important;}
.dtc-merch .splide__arrow--next {right: 0 !important;}

.dtc-merch .splide__pagination {position: absolute; bottom: 0; left: 56px; right: 56px; height: 42px; padding: 0; margin: 0; transform: none;}
.dtc-merch .splide__pagination li {list-style: none; margin: 0; line-height: 0;}
.dtc-merch .splide__pagination__page {width: 9px; height: 9px; margin: 4px; background: #cdd6d1; opacity: 1;}
.dtc-merch .splide__pagination__page.is-active {background: var(--primary-color); transform: scale(1.35);}
.dtc-merch .splide__pagination__page:focus-visible {outline: 2px solid var(--secundary-color); outline-offset: 2px;}

/* Button „Zum Shop“ */
.dtc-merch__foot {display: flex; justify-content: center; margin-top: 28px;}
.dtc-merch .dtc-merch__btn {display: inline-flex; align-items: center; gap: 12px; padding: 12px 30px; background: var(--primary-color); color: #fff; border: 0; border-radius: var(--border-radius); font-weight: 700; line-height: 1.4; text-decoration: none; transition: background var(--transition);}
.dtc-merch .dtc-merch__btn::after {content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);}
.dtc-merch .dtc-merch__btn:hover,
.dtc-merch .dtc-merch__btn:focus-visible {background: var(--secundary-color); color: #fff;}
.dtc-merch .dtc-merch__btn:focus-visible {outline: 3px solid var(--primary-color) !important; outline-offset: 2px;}

/* Fallback: bisheriges Banner */
.dtc-merch .dtc-merch__banner {display: block; border: 0; border-radius: var(--border-radius); overflow: hidden;}
.dtc-merch .dtc-merch__banner img {display: block; width: 100%; max-width: 100%; height: auto;}
.dtc-merch--fallback .dtc-merch__foot {margin-top: 20px;}
.dtc-merch__notice {margin: 16px 0 0; padding: 10px 14px; background: #fff4ec; border-left: 4px solid var(--secundary-color); font-size: 14px; line-height: 1.5;}

@media (max-width: 1024px) {
    .dtc-merch .dtc-merch__grid {grid-template-columns: repeat(3, minmax(0, 1fr));}
    .dtc-merch .dtc-merch__splide:not(.is-initialized) .splide__slide {flex-basis: calc((100% - 2 * var(--merch-gap)) / 3);}
}

@media (max-width: 768px) {
    .dtc-merch {--merch-gap: 16px;}
    .dtc-merch .dtc-merch__grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .dtc-merch .dtc-merch__splide:not(.is-initialized) .splide__slide {flex-basis: calc((100% - var(--merch-gap)) / 2);}
}

@media (max-width: 500px) {
    .dtc-merch .dtc-merch__title {font-size: 24px;}
    .dtc-merch__body {padding: 12px 12px 14px;}
    .dtc-merch__name {font-size: 14px;}
    .dtc-merch__type {font-size: 12px;}
    .dtc-merch .dtc-merch__splide:not(.is-initialized) .splide__slide {flex-basis: 78%;}
    .dtc-merch .dtc-merch__btn {width: 100%; justify-content: center; box-sizing: border-box;}
}

@media (prefers-reduced-motion: reduce) {
    .dtc-merch .dtc-merch__card,
    .dtc-merch .dtc-merch__img img {transition: none;}
    .dtc-merch .dtc-merch__card:hover {transform: none;}
    .dtc-merch .dtc-merch__card:hover .dtc-merch__img img {transform: none;}
}