/* ── KATEGORIE SEKTION ───────────────────────────────────────── */
.kategorien-wrapper { padding: 5rem 0 7rem; }
.kat-sektion        { margin-bottom: 10rem; }

@media (max-width: 480px) {
    .kategorien-wrapper { padding: 2.5rem 0 3rem; }
    .kat-sektion        { margin-bottom: 4rem; }
    .kat-header         { margin-bottom: 1.5rem; }
    .kat-titel          { font-size: 1.6rem; }
    .show-all-link      { font-size: 0.75rem; }
    .slider-track       { gap: 16px; }
}

.kat-header {
    max-width:       var(--max);
    margin:          0 auto 2.5rem;
    padding:         0 var(--pad);
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
}

.kat-titel {
    font-size:      2.6rem;
    font-weight:    700;
    letter-spacing: -0.04em;
    white-space:    nowrap;
}

.show-all-link {
    font-size:   0.82rem;
    font-weight: 500;
    color:       var(--blue);
    cursor:      pointer;
    white-space: nowrap;
    transition:  opacity 0.15s;
}
.show-all-link:hover { opacity: 0.7; }

/* ── SLIDER ──────────────────────────────────────────────────── */
.slider-outer {
    overflow-x: hidden;
    overflow-y: visible;
}

.slider-track {
    display:                    flex;
    gap:                        32px;
    overflow-x:                 auto;
    scroll-snap-type:           x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
    padding-left:               var(--offset);
    padding-right:              var(--pad);
    scroll-padding-left:        var(--offset);
}
.slider-track::-webkit-scrollbar { display: none; }

.slider-arrows-row {
    max-width:       var(--max);
    margin:          2rem auto 0;
    padding:         0 var(--pad);
    display:         flex;
    justify-content: flex-end;
    gap:             0.5rem;
}

.arrow-btn {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      rgba(0,0,0,0.06);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--ink);
    transition:      background 0.15s;
    padding:         0;
    flex-shrink:     0;
}
.arrow-btn:hover  { background: rgba(0,0,0,0.12); }
.arrow-btn:active { background: rgba(0,0,0,0.18); }

/* ── PRODUKT KARTE ───────────────────────────────────────────── */
.produkt-karte {
    flex:              0 0 calc((100vw - var(--offset) - var(--pad)) / 3.8);
    width:             calc((100vw - var(--offset) - var(--pad)) / 3.8);
    min-width:         260px;
    max-width:         400px;
    scroll-snap-align: start;
    scroll-snap-stop:  always;
    cursor:            pointer;
    display:           flex;
    flex-direction:    column;
    padding-bottom:    1.5rem;
}

.karte-bild {
    width:         100%;
    aspect-ratio:  3 / 4;
    border-radius: 20px;
    overflow:      hidden;
    margin-bottom: 1.1rem;
    position:      relative;
    background:    #fff;
    box-shadow:    inset 0 2px 12px rgba(0,0,0,0.13),
                   inset 0 1px 3px rgba(0,0,0,0.08);
    transition:    background 0.5s var(--ease);
}

.karte-bild-inner {
    position:        absolute;
    inset:           1%;
    border-radius:   17px;
    background:      #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      inset 0.4s var(--ease), border-radius 0.4s var(--ease);
}
.karte-bild-inner img {
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: inherit;
    display:       block;
}
.karte-placeholder {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--ink-soft);
    text-align:  center;
    padding:     1.5rem;
    line-height: 1.3;
}
.produkt-karte:hover .karte-bild-inner {
    inset:         0;
    border-radius: 20px;
}

.karte-konz {
    display:       flex;
    gap:           6px;
    margin-bottom: 0.85rem;
    flex-wrap:     wrap;
}

.konz-pill {
    display:        inline-block;
    padding:        2px 9px;
    font-size:      0.72rem;
    font-weight:    500;
    border-radius:  10px;
    background:     transparent;
    color:          var(--ink-soft);
    cursor:         pointer;
    transition:     all 0.18s var(--ease);
    border:         1px solid transparent;
    flex-shrink:    0;
    letter-spacing: 0.02em;
}
.konz-pill.active,
.konz-pill:hover {
    background: rgba(0,0,0,0.04);
    box-shadow: var(--shadow-inset);
}
.konz-pill.active {
    color:        var(--ink);
    border-color: rgba(0,0,0,0.1);
}

.karte-marke {
    position:       absolute;
    bottom:         12px;
    left:           14px;
    font-size:      0.68rem;
    color:          var(--ink-soft);
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    z-index:        1;
}

.karte-plus-btn {
    position:        absolute;
    bottom:          10px;
    right:           10px;
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      rgba(255,255,255,0.85);
    backdrop-filter:  blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border:          1px solid var(--border);
    color:           var(--ink);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         2;
    transition:      background 0.15s, transform 0.15s, box-shadow 0.15s;
    padding:         0;
}
.karte-plus-btn:hover  { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.12); transform: scale(1.08); }
.karte-plus-btn:active { transform: scale(0.95); }

.karte-name {
    font-size:      1.5rem;
    font-weight:    600;
    letter-spacing: -0.03em;
    margin-bottom:  0.4rem;
    line-height:    1.15;
}

.karte-desc {
    font-size:     1rem;
    font-weight:   300;
    color:         var(--ink-soft);
    line-height:   1.6;
    margin-bottom: 0.8rem;
}

.karte-spacer { flex: 1; }

.karte-preis {
    font-family:   var(--font-mono);
    font-size:     1.05rem;
    font-weight:   500;
    margin-bottom: 1rem;
}

.karte-actions {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    overflow:    visible;
    height:      44px;
}

/* ── MEHR-KARTE ──────────────────────────────────────────────── */
.more-karte {
    flex:              0 0 180px;
    width:             180px;
    scroll-snap-align: start;
    display:           flex;
    flex-direction:    column;
    align-items:       center;
    justify-content:   center;
    cursor:            pointer;
    gap:               1rem;
}

.more-karte-bild {
    width:           100%;
    aspect-ratio:    3 / 4;
    border-radius:   20px;
    background:      var(--bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.2s;
}
.more-karte:hover .more-karte-bild { background: #EAEAEC; }

.more-dots { display: flex; gap: 9px; }
.more-dot  { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-muted); }

.more-karte-label {
    font-size:   0.85rem;
    font-weight: 500;
    color:       var(--blue);
    text-align:  center;
    line-height: 1.4;
}

/* ── MERGE BUTTON ────────────────────────────────────────────── */
.merge-wrap {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
}

.merge-collapsed {
    flex:       1;
    display:    flex;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.merge-collapsed.hidden { display: none; }

.merge-kaufen-btn {
    font-size:      0.95rem;
    font-weight:    600;
    background:     var(--ink);
    color:          #fff;
    border:         none;
    border-radius:  980px;
    padding:        0 1.5rem;
    height:         44px;
    cursor:         pointer;
    width:          100%;
    transition:     background 0.15s;
    letter-spacing: -0.01em;
}
.merge-kaufen-btn:hover  { background: #2d2d2f; }
.merge-kaufen-btn:active { transform: scale(0.97); }
.merge-kaufen-btn-disabled {
    background:     var(--ink-muted, #999) !important;
    cursor:         not-allowed;
    opacity:        0.6;
}
.merge-kaufen-btn-disabled:hover { background: var(--ink-muted, #999) !important; }

.karte-ausverkauft {
    position:       absolute;
    bottom:         0.7rem;
    left:           0.7rem;
    background:     rgba(0,0,0,0.65);
    color:          #fff;
    font-size:      0.68rem;
    font-weight:    600;
    padding:        0.25rem 0.6rem;
    border-radius:  6px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

.merge-stock-hinweis {
    font-size:    0.68rem;
    color:        #FF3B30;
    font-weight:  500;
    margin-top:   0.25rem;
    white-space:  nowrap;
}
.merge-stock-hinweis.hidden { display: none; }

.merge-expanded {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    flex:        1;
}
.merge-expanded.hidden { display: none; }

.merge-pills {
    display:     flex;
    align-items: center;
    gap:         0.25rem;
    flex:        0 1 auto;
    min-width:   0;
    flex-wrap:   nowrap;
    overflow:    visible;
}

.merge-pill-wrap { position: relative; }

.merge-pill {
    font-size:     0.82rem;
    font-weight:   500;
    background:    transparent;
    color:         var(--ink);
    border:        1.5px solid var(--border);
    border-radius: 980px;
    padding:       0 0.85rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    gap:           5px;
    white-space:   nowrap;
    transition:    background 0.15s, border-color 0.15s, box-shadow 0.15s;
    height:        38px;
}
.merge-pill:hover  { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.15); box-shadow: var(--shadow-inset); }
.merge-pill:active { transform: scale(0.96); background: rgba(0,0,0,0.04); box-shadow: var(--shadow-inset); }

.merge-pill-menge {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0;
    padding:         0 0.25rem;
    border-radius:   980px;
    background:      transparent;
    height:          38px;
}
.merge-pill-menge:hover { background: rgba(0,0,0,0.04); box-shadow: var(--shadow-inset); }

.menge-minus, .menge-plus {
    font-size:       1rem;
    font-weight:     400;
    background:      none;
    border:          none;
    cursor:          pointer;
    color:           var(--ink);
    width:           26px;
    height:          32px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    transition:      background 0.12s;
    padding:         0;
    line-height:     1;
}
.menge-minus:hover, .menge-plus:hover   { background: rgba(0,0,0,0.07); }
.menge-minus:active, .menge-plus:active { transform: scale(0.9); }

.merge-pill-label {
    font-size:   0.82rem;
    font-weight: 500;
    min-width:   12px;
    text-align:  center;
}

.merge-cart-btn {
    width:           40px;
    height:          38px;
    border-radius:   980px;
    border:          1.5px solid var(--border);
    background:      var(--bg);
    color:           var(--ink-muted);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          not-allowed;
    transition:      background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink:     0;
    padding:         0;
}

.merge-cart-btn-disabled { opacity: 0.35; pointer-events: none; }

.merge-cart-btn-aktiv {
    background:   var(--blue);
    color:        #fff;
    border-color: var(--blue);
    cursor:       pointer;
    opacity:      1;
}
.merge-cart-btn-aktiv:hover  { background: var(--blue-hover); }
.merge-cart-btn-aktiv:active { transform: scale(0.94); }

.merge-close-btn {
    font-size:   1.15rem;
    background:  none;
    border:      none;
    color:       var(--ink-muted);
    cursor:      pointer;
    padding:     0;
    line-height: 1;
    flex-shrink: 0;
    transition:  color 0.15s;
    margin-left: 1.5rem;
}
.merge-close-btn:hover { color: var(--ink); }

/* ── MERGE POPUPS ────────────────────────────────────────────── */
.merge-popup {
    position:        absolute;
    bottom:          calc(100% + 8px);
    left:            50%;
    transform:       translateX(-50%);
    background:      var(--white);
    border:          1px solid var(--border);
    border-radius:   14px;
    padding:         0.6rem;
    box-shadow:      0 8px 32px rgba(0,0,0,0.12);
    z-index:         50;
    display:         flex;
    gap:             0.4rem;
    flex-wrap:       wrap;
    min-width:       120px;
    justify-content: center;
    animation:       popupIn 0.18s var(--ease-spring);
}
.merge-popup.hidden { display: none; }

@keyframes popupIn {
    from { opacity: 0; transform: translateX(-50%) scale(0.85) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}

.merge-groesse-opt {
    font-size:     0.72rem;
    font-weight:   600;
    background:    transparent;
    color:         var(--ink);
    border:        1.5px solid var(--border);
    border-radius: 8px;
    padding:       0.3rem 0.5rem;
    cursor:        pointer;
    transition:    background 0.12s, border-color 0.12s, box-shadow 0.12s;
    min-width:     36px;
}
.merge-groesse-opt:hover,
.merge-groesse-opt:active,
.merge-groesse-opt.aktiv  { background: rgba(0,0,0,0.04); box-shadow: var(--shadow-inset); }
.merge-groesse-opt:active { transform: scale(0.94); }
.merge-groesse-opt.aktiv  { color: var(--ink); border-color: rgba(0,0,0,0.18); }

.merge-opt-disabled {
    opacity:            0.35;
    cursor:             not-allowed;
    text-decoration:    line-through;
    pointer-events:     none;
}

/* ── HERZ BUTTON ─────────────────────────────────────────────── */
.herz-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    border:          1px solid var(--border);
    background:      var(--white);
    cursor:          pointer;
    color:           var(--ink-soft);
    transition:      color 0.15s, border-color 0.15s;
    flex-shrink:     0;
    padding:         0;
}
.herz-btn:hover      { color: #FF3B30; border-color: rgba(255,59,48,0.3); }
.herz-btn:active     { transform: scale(0.92); }
.herz-btn.herz-aktiv { color: #FF3B30; border-color: rgba(255,59,48,0.3); }

/* ── PRODUKT MODAL ───────────────────────────────────────────── */
.pm-backdrop {
    position:   fixed;
    inset:      0;
    background: var(--overlay-dark);
    z-index:    700;
}
.pm-backdrop.hidden { display: none; }

.produkt-modal {
    position:        fixed;
    inset:           0;
    z-index:         710;
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    pointer-events:  none;
}
.produkt-modal.hidden { display: none; }

.pm-inner {
    width:           100%;
    max-width:       1200px;
    background:      var(--white);
    border-radius:   20px 20px 0 0;
    pointer-events:  auto;
    box-shadow:      0 -10px 60px rgba(0,0,0,0.15);
    display:         flex;
    flex-direction:  column;
    overflow:        hidden;
    will-change:     transform;
}
.produkt-modal.pm-peek .pm-inner { height: 620px; }
.produkt-modal.pm-full .pm-inner {
    height:        92%;
    border-radius: 20px 20px 0 0;
}

/* drag handle + close now use shared .modal-bar */

.pm-scroll {
    flex:                1;
    overflow-y:          auto;
    overflow-x:          hidden;
    overscroll-behavior: contain;
    scrollbar-width:     none;
}
.pm-scroll::-webkit-scrollbar { display: none; }

/* Hero: expanded product card */
.pm-hero {
    display:               grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows:    1fr auto auto;
    column-gap:            2.5rem;
    padding:               0.5rem 2.5rem 2rem;
}

.pm-hero-img {
    grid-row:       1 / -1;
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}
.pm-hero-img-main {
    width:           100%;
    aspect-ratio:    3 / 4;
    border-radius:   16px;
    overflow:        hidden;
    background:      var(--bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      inset 0 2px 12px rgba(0,0,0,0.1);
}
.pm-hero-img-main img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}
.pm-hero-img-main .pm-placeholder {
    font-size:   1.2rem;
    font-weight: 600;
    color:       var(--ink-muted);
    text-align:  center;
    padding:     2rem;
}

.pm-hero-thumbs {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
}
.pm-thumb {
    width:         52px;
    height:        52px;
    border-radius: 10px;
    overflow:      hidden;
    cursor:        pointer;
    border:        2px solid transparent;
    transition:    border-color 0.15s;
    background:    var(--bg);
}
.pm-thumb:hover  { border-color: var(--ink-muted); }
.pm-thumb.active { border-color: var(--blue); }
.pm-thumb img    { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hero info */
.pm-hero-info {
    min-width:   0;
    padding-top: 0.5rem;
}
.pm-hero-marke {
    font-size:      0.72rem;
    font-weight:    600;
    color:          var(--ink-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom:  0.25rem;
}
.pm-hero-name-row {
    display:     flex;
    align-items: baseline;
    gap:         0.6rem;
    flex-wrap:   wrap;
    margin-bottom: 0.3rem;
}
.pm-hero-name {
    font-size:      2rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    line-height:    1.15;
    margin-bottom:  0;
}
.pm-konz-badge {
    display:        inline-block;
    font-size:      0.65rem;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding:        0.2em 0.55em;
    border-radius:  6px;
    background:     var(--ink);
    color:          #fff;
    white-space:    nowrap;
    vertical-align: middle;
    transition:     opacity 0.2s;
}
.pm-hero-kats {
    font-size:     0.75rem;
    color:         var(--ink-muted);
    margin-bottom: 0.6rem;
}
.pm-hero-desc {
    font-size:     0.92rem;
    font-weight:   300;
    color:         var(--ink-soft);
    line-height:   1.6;
    margin-bottom: 1rem;
}
.pm-hero-details {
    margin-bottom: 1.2rem;
    border-top:    1px solid var(--border);
    padding-top:   0.8rem;
}
.pm-detail-row {
    display:         flex;
    justify-content: space-between;
    padding:         0.3rem 0;
    font-size:       0.82rem;
}
.pm-detail-label { color: var(--ink-soft); font-weight: 500; }
.pm-detail-value { color: var(--ink); font-weight: 500; text-align: right; }

.pm-hero-preis {
    font-family:   var(--font-mono);
    font-size:     1.3rem;
    font-weight:   600;
    margin-bottom: 1rem;
}
.pm-hero-preis-row {
    display: none;
}
.pm-hero-buy {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-wrap:   wrap;
}

/* Grid section */
.pm-grid-section {
    border-top: 1px solid var(--border);
    padding:    1.5rem 2.5rem 2.5rem;
}
.pm-grid-section.hidden { display: none; }

.pm-grid-header h3 {
    font-size:      1.3rem;
    font-weight:    700;
    letter-spacing: -0.02em;
    margin-bottom:  1rem;
}
.pm-grid-cats {
    display:        flex;
    gap:            0.375rem;
    flex-wrap:      wrap;
    margin-bottom:  1.5rem;
    padding-bottom: 1rem;
    border-bottom:  1px solid var(--border);
}
.pm-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
}
.pm-grid .produkt-karte {
    flex:          none;
    width:         100%;
    max-width:     none;
    min-width:     0;
    padding:       1.25rem 1.25rem 1.5rem;
    background:    var(--white);
    border:        1px solid var(--border);
    border-radius: 18px;
}
.pm-grid .karte-bild       { aspect-ratio: 3 / 3.5; }
.pm-grid .karte-desc        { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm-grid .merge-kaufen-btn  { width: 100%; }

/* Modal responsive */
@media (max-width: 900px) {
    .pm-hero         { grid-template-columns: 40% 1fr; column-gap: 1.5rem; padding: 0.5rem 1.5rem 1.5rem; }
    .pm-hero-name    { font-size: 1.5rem; }
    .pm-konz-badge   { font-size: 0.6rem; }
    .pm-hero-desc    { font-size: 0.85rem; }
    .pm-detail-row   { font-size: 0.78rem; }
    .pm-hero-preis   { font-size: 1.1rem; }
    .pm-grid-section { padding: 1.5rem; }
    .pm-grid         { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .pm-grid .produkt-karte { padding: 1rem; }
    .karte-actions:has(.merge-expanded:not(.hidden)) .herz-btn { display: none; }
}
@media (max-width: 650px) {
    .pm-hero         { grid-template-columns: 45% 1fr; column-gap: 1rem; padding: 0.5rem 1rem 1.5rem; }
    .pm-hero-img-main { aspect-ratio: 3 / 4; border-radius: 12px; }
    .pm-hero-thumbs  { display: none; }
    .pm-hero-name    { font-size: 1.25rem; }
    .pm-konz-badge   { font-size: 0.55rem; padding: 0.15em 0.45em; }
    .pm-hero-marke   { font-size: 0.65rem; }
    .pm-hero-desc    { font-size: 0.8rem; margin-bottom: 0.6rem; }
    .pm-hero-details { margin-bottom: 0.8rem; padding-top: 0.5rem; }
    .pm-detail-row   {
        font-size:      0.72rem;
        padding:        0.25rem 0;
        flex-direction: column;
        gap:            0.1rem;
        align-items:    flex-start;
    }
    .pm-detail-value { text-align: left; }
    .pm-hero-preis   { font-size: 1rem; margin-bottom: 0.6rem; }
    .pm-grid         { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .pm-grid .produkt-karte { padding: 0.75rem; }
}
@media (max-width: 400px) {
    .pm-hero         { grid-template-columns: 40% 1fr; }
    .pm-hero-name    { font-size: 1.1rem; }
    .pm-konz-badge   { font-size: 0.5rem; }
    .pm-grid         { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    /* Product modal: full height on mobile with safe areas */
    .produkt-modal.pm-peek .pm-inner {
        height:        100%;
        border-radius: 0;
    }
    .produkt-modal.pm-full .pm-inner {
        height:        100%;
        border-radius: 0;
    }
    .produkt-modal .modal-bar {
        border-radius:       0;
        padding-top:         env(safe-area-inset-top, 0px);
    }

    /* Two-column: image left, info right */
    .pm-hero {
        grid-template-columns: 45% 1fr;
        column-gap:            0.75rem;
        padding:               0.5rem 1rem 0;
        grid-template-rows:    auto auto;
    }
    .pm-hero-img {
        grid-row:    1;
        grid-column: 1;
    }
    .pm-hero-img-main {
        aspect-ratio:  3 / 4;
        border-radius: 12px;
    }
    /* Show konzentration thumbs below main image */
    .pm-hero-thumbs {
        display:    flex;
        gap:        0.4rem;
        flex-wrap:  wrap;
        margin-top: 0.5rem;
    }
    .pm-thumb {
        width:  40px;
        height: 40px;
    }
    .pm-hero-info {
        grid-row:    1;
        grid-column: 2;
        padding-top: 0.25rem;
    }
    /* Hide standalone price in info — keep it visible */
    .pm-hero-info > .pm-hero-preis {
        text-align: left;
    }
    .pm-hero-preis-row {
        display:     none;
    }
    .pm-hero-preis-row .pm-hero-preis {
        font-size:     1.15rem;
        margin-bottom: 0;
    }

    /* Place price and heart together inline */
    .pm-hero-info {
        grid-row:       1;
        grid-column:    2;
        padding-top:    0.25rem;
        display:        flex;
        flex-direction: column;
    }

    /* Buy section: full width across the modal */
    .pm-hero-buy {
        grid-column:    1 / -1;
        grid-row:       2;
        position:       sticky;
        bottom:         0;
        left:           0;
        right:          0;
        padding:        0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        box-sizing:     border-box;
        background:     var(--white);
        border-top:     1px solid var(--border);
        width:          100%;
        gap:            0.5rem;
    }
    .pm-hero-buy .merge-wrap {
        flex: 1;
        min-width: 0;
    }
    .pm-hero-buy .herz-btn {
        flex:    0 0 44px;
        width:   44px;
        height:  44px;
    }
    .pm-hero-buy .merge-kaufen-btn {
        max-width: none;
        width:     100%;
    }
    .pm-hero-buy .merge-expanded {
        width: 100%;
    }
    .pm-hero-buy .merge-pills {
        width:     100%;
        flex-wrap: nowrap;
    }
    .pm-hero-buy .merge-pill {
        flex:    1;
        justify-content: center;
    }
    .pm-hero-buy .merge-cart-btn {
        flex: 0 0 44px;
        width: 44px;
    }
    .pm-hero-buy:has(.merge-expanded:not(.hidden)) .herz-btn { display: none; }

    /* Grid section safe area padding */
    .pm-grid-section {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }
}