/* Niesen Shop – Karten-Styling kommt aus dem Child-Theme (Panels wie „Cards-Vorlagen“); hier nur Ergänzungen */

/* Foto komplett sichtbar: unter dem 20 px hohen gelben Streifen (::before des Panels) beginnen.
   Als padding-top am Link, nicht als margin am Bild – sonst kollabiert der Margin nach außen und die Hover-Fläche ragt unten heraus */
.niesen-shop .uk-panel-arrow-link > a.uk-panel { padding-top: 20px; }
.niesen-shop .ns-bild { overflow: hidden; }
.niesen-shop .el-image { display: block; width: 100%; height: auto; transition: transform .4s ease; }

/* Hover: Bild leicht größer, Karte ganz leicht grau (Theme-Grau uk-background-muted mit 20 % Deckkraft) */
.niesen-shop .uk-panel-arrow-link > a { transition: background-color .3s ease; }
.niesen-shop .uk-panel-arrow-link > a:hover,
.niesen-shop .uk-panel-arrow-link > a:focus-visible { background-color: rgba(182, 186, 189, .2); }
.niesen-shop .uk-panel-arrow-link > a:hover .el-image,
.niesen-shop .uk-panel-arrow-link > a:focus-visible .el-image { transform: scale(1.05); }

/* gleiche Kartenhöhe je Reihe; roter Pfeil näher am Text (Theme: padding-bottom 130px, Pfeil bottom 50px) */
.niesen-shop .uk-panel-arrow-link { margin-top: 0 !important; }
.niesen-shop .uk-panel-arrow-link > a.uk-panel { height: 100%; box-sizing: border-box; padding-bottom: 70px; }
.niesen-shop .uk-panel-arrow-link > a.uk-panel::after { bottom: 30px; }

/* Artikelnamen ca. 70 % der Theme-h4 (1.5rem / 2rem / 1.8rem je Breakpoint); Smartphone etwas größer, Karte ist dort voll breit.
   Lange Namen trennen statt über den Rahmen zu laufen */
.niesen-shop .el-title { font-size: 1.15rem; line-height: 1.1; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
@media (min-width: 640px) { .niesen-shop .el-title { font-size: 1.05rem; } }
@media (min-width: 960px) { .niesen-shop .el-title { font-size: 1.4rem; } }
@media (min-width: 1440px) { .niesen-shop .el-title { font-size: 1.26rem; } }

.niesen-shop .ns-footer { margin: 40px 0 0; text-align: center; }
.niesen-shop .ns-footer + .ns-footer { margin-top: 20px; }