/* ==========================================================================
   SPACEPLANET Shop System Styling - Refined Galaxus-Inspired Design
   Ultra-clean, 4-column grid, razor-sharp typography, precise Swiss Francs
   ========================================================================== */

:root {
    --shop-bg: #ffffff;
    --shop-surface: #ffffff;
    --shop-border: transparent;
    --shop-border-subtle: transparent;
    --shop-text-primary: #000000;
    --shop-text-secondary: #000000;
    --shop-text-muted: #000000;
    --shop-orange: #ff6b00;
    --shop-orange-hover: #ea580c;
    --shop-cyan: #ff6b00;
    --shop-green: #000000;
}

/* Category Filter Chips - Sleek & Compact (Galaxus style) */
.shop-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.shop-filter-btn {
    background: #ffffff;
    border: 1px solid var(--shop-border);
    color: #000000;
    padding: 0.45rem 1rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.shop-filter-btn:hover {
    border-color: #000000;
    color: #000000;
}

.shop-filter-btn.active {
    background: var(--shop-orange);
    color: #ffffff !important;
    border-color: var(--shop-orange);
    box-shadow: 0 2px 8px rgba(255, 107, 0, 0.25);
}

/* Product Grid - Galaxus-Raster
   Weisse Kacheln, 1px Trennlinien (transparent), kein Schatten.
/* Galaxus-Stil Produkt-Raster: komplett rahmenlos mit dezentem Abstand */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 3.5rem;
    background: transparent;
    border: none !important;
}

@media (min-width: 900px) {
    .shop-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .shop-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.75rem;
    }
}

/* Product Card - komplett rahmenlos im Galaxus-Stil */
.shop-card {
    background: #ffffff;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    outline: none !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    padding: 0.75rem 0.5rem;
}

@media (max-width: 599px) {
    .shop-card {
        padding: 0.5rem 0.25rem;
    }
}

.shop-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0.85rem;
}

.shop-card-media a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.shop-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.25s ease;
}

@media (hover: hover) {
    .shop-card:hover .shop-card-media img {
        transform: scale(1.03);
    }
}

.shop-card.is-soldout .shop-card-media img {
    opacity: 0.55;
}

/* Refined Small Badges */
.shop-card-badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    z-index: 2;
    max-width: calc(100% - 0.5rem);
}

.badge-digital {
    background: #ff6b00;
    color: #ffffff;
}

.badge-merch {
    background: #ff6b00;
    color: #ffffff;
}

.badge-vinyl {
    background: #000000;
    color: #ffffff;
    border: 1px solid #000000;
}

.badge-cd {
    background: #000000;
    color: #ffffff;
}

/* Card Body (Padding liegt auf der Kachel) */
.shop-card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    background: #ffffff;
}

.shop-card-cat {
    font-size: 11px;
    font-weight: 600;
    color: #000000;
    letter-spacing: 0.02em;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--shop-text-primary) !important;
    line-height: 1.35;
    margin: 0 0 0.35rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
}

.shop-card-title a {
    color: var(--shop-text-primary) !important;
    text-decoration: none;
    transition: color 0.15s;
}

.shop-card-title a:hover {
    color: var(--shop-orange) !important;
}

.shop-card-desc {
    font-size: 0.8rem;
    color: #000000;
    line-height: 1.45;
    margin: 0 0 0.5rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 599px) {
    .shop-card-title {
        font-size: 0.86rem;
    }

    .shop-card-desc {
        display: none;
    }
}

.shop-card-availability {
    font-size: 11px;
    font-weight: 600;
    color: #155675;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.shop-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--shop-border-subtle);
}

.shop-card-price {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--shop-text-primary);
}

.shop-card-price small {
    font-size: 11px;
    font-weight: 700;
    color: var(--shop-text-muted);
    margin-right: 2px;
}

.btn-card-add {
    background: #ffffff;
    border: 1px solid var(--shop-orange);
    color: var(--shop-orange);
    font-size: 12px;
    font-weight: 800;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-card-add:hover {
    background: var(--shop-orange);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 107, 0, 0.35);
}

/* ==========================================================================
   Header Cart Icon Button (Galaxus / Minimalist Standard)
   ========================================================================== */
.header-cart-btn {
    background: transparent;
    border: none;
    color: #000000;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.18s ease;
    text-decoration: none;
    padding: 0;
}

.header-cart-btn:hover {
    color: var(--shop-orange);
    background: #ffffff;
    border-color: var(--shop-orange);
}

.cart-badge-count {
    position: absolute;
    top: 1px;
    right: 1px;
    background: var(--shop-orange);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    border-radius: 999px;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(255, 107, 0, 0.35);
}

/* ==========================================================================
   Product Detail Page
   ========================================================================== */
.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin: 1.5rem 0 3.5rem;
    align-items: start;
}

@media (max-width: 868px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.detail-gallery {
    background: #ffffff;
    border: 1px solid var(--shop-border);
    border-radius: 12px;
    overflow: hidden;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-gallery img {
    max-width: 100%;
    max-height: 480px;
    object-fit: contain;
}

.detail-info {
    display: flex;
    flex-direction: column;
}

.detail-title {
    font-size: 1.85rem;
    font-weight: 900;
    color: var(--shop-text-primary) !important;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

.detail-price-box {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.detail-price {
    font-size: 1.85rem;
    font-weight: 900;
    color: var(--shop-text-primary);
}

.detail-shipping-note {
    font-size: 0.85rem;
    color: #000000;
    background: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--shop-border);
    border-left: 3px solid var(--shop-orange);
    margin-bottom: 1.5rem;
    line-height: 1.55;
}

.detail-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.option-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--shop-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.option-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.option-pill {
    padding: 0.5rem 1rem;
    background: #ffffff;
    border: 1px solid #000000;
    color: var(--shop-text-primary);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.option-pill:hover {
    border-color: var(--shop-orange);
    color: var(--shop-orange);
}

.option-pill.active {
    border-color: var(--shop-orange);
    color: #ffffff;
    background: var(--shop-orange);
}

.detail-action-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.75rem;
}

.qty-control {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: 6px;
    overflow: hidden;
}

.qty-btn {
    background: none;
    border: none;
    color: var(--shop-text-primary);
    width: 38px;
    height: 44px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
}

.qty-btn:hover {
    background: #ffffff;
    color: var(--shop-orange);
}

.qty-input {
    width: 40px;
    height: 44px;
    background: none;
    border: none;
    color: var(--shop-text-primary);
    text-align: center;
    font-size: 0.95rem;
    font-weight: 800;
}

.btn-add-cart {
    flex-grow: 1;
    height: 44px;
    background: var(--shop-orange);
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.18s;
}

.btn-add-cart:hover {
    background: var(--shop-orange-hover);
    box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
}

/* ==========================================================================
   Bespoke Audio Player & Minimalist Tracklist UI
   Strictly Pure White (#ffffff), Deep Black (#000000), Solar-Orange (#ff6b00)
   NO browser controls, NO grey boxes.
   ========================================================================== */

/* ==========================================================================
   Beatport Sticky Footer Audio Player Bar
   Fixed to bottom of viewport, full-width seekable timeline, zero grey.
   Deep Black (#000000), Solar-Orange (#ff6b00), Pure White (#ffffff).
   ========================================================================== */

.beatport-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #000000;
    color: #ffffff;
    z-index: 9995;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-top: 1px solid #ffffff;
}

.beatport-player-bar.active {
    transform: translateY(0);
}

.bp-player-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0.25rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 52px;
    box-sizing: border-box;
}

/* 1. Left: Compact Time, BPM & Track Info */
.bp-meta-col {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 240px;
    max-width: 300px;
    flex-shrink: 0;
}

.bp-cover-thumb {
    width: 38px;
    height: 38px;
    border-radius: 3px;
    object-fit: cover;
    background: #000000;
    border: 1px solid #ffffff;
    flex-shrink: 0;
}

.bp-track-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.bp-track-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.bp-track-artist {
    font-size: 0.68rem;
    font-weight: 600;
    color: #ff6b00;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.bp-track-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.72rem;
    flex-shrink: 0;
    min-width: 76px;
    text-align: right;
    line-height: 1.25;
}

.bp-time-display strong {
    font-weight: 800;
    color: #ffffff;
}

.bp-time-display span {
    color: #ffffff;
    opacity: 0.7;
    font-weight: normal;
}

.bp-bpm-display {
    font-size: 0.68rem;
    color: #ff6b00;
    font-weight: 700;
}

/* 2. Center: Audio Waveform Canvas */
.bp-waveform-wrap {
    flex: 1;
    height: 36px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#bp-waveform-canvas {
    width: 100%;
    height: 36px;
    display: block;
}

.bp-waveform-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
    pointer-events: none;
    left: 0%;
    transition: left 0.08s linear;
}

/* 3. Right: Buy Split-Button & Audio Controls */
.bp-actions-col {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.bp-buy-dropdown-wrap {
    position: relative;
}

.bp-buy-split-btn {
    display: inline-flex;
    align-items: center;
    background: #ff6b00;
    border-radius: 4px;
    overflow: hidden;
    height: 32px;
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.35);
    transition: background 0.15s ease, transform 0.12s ease;
}

.bp-buy-split-btn:hover {
    background: #ff6b00;
}

.bp-btn-buy-main {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0 0.65rem;
    cursor: pointer;
    white-space: nowrap;
    height: 100%;
    display: flex;
    align-items: center;
}

.bp-btn-buy-toggle {
    background: #000000;
    border: none;
    border-left: 1px solid #ffffff;
    color: #ffffff;
    font-size: 0.8rem;
    padding: 0 0.5rem;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bp-btn-buy-toggle:hover {
    background: #000000;
}

.bp-format-dropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: #000000;
    border: 1px solid #ffffff;
    border-radius: 6px;
    padding: 0.3rem 0;
    min-width: 210px;
    display: none;
    z-index: 9999;
}

.bp-format-dropdown.open {
    display: block;
}

.bp-format-opt {
    width: 100%;
    background: none;
    border: none;
    color: #ffffff;
    padding: 0.45rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    box-sizing: border-box;
}

.bp-format-opt:hover {
    background: #ff6b00;
    color: #ffffff;
}

.bp-format-opt.active {
    color: #ff6b00;
    font-weight: 700;
}

.bp-format-opt.active:hover {
    color: #ffffff;
}

.bp-ctrl-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Volume Control */
.bp-volume-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bp-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 55px;
    height: 4px;
    background: #000000;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    transition: background 0.15s;
    margin: 0;
    padding: 0;
}

.bp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6b00;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 107, 0, 0.5);
    transition: transform 0.12s;
}

.bp-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

.bp-volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6b00;
    border: none;
    cursor: pointer;
}

.bp-ctrl-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, transform 0.12s;
    line-height: 0;
}

.bp-ctrl-btn svg {
    display: block;
}

.bp-ctrl-btn:hover {
    color: #ff6b00;
    transform: scale(1.08);
}

.bp-ctrl-play {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    line-height: 0;
}

.bp-ctrl-play svg {
    display: block;
}

.bp-ctrl-play:hover {
    background: #ff6b00;
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(255, 107, 0, 0.5);
}

.bp-btn-close {
    color: #ffffff;
    opacity: 0.7;
    font-size: 0.9rem;
    margin-left: 0.2rem;
}

.bp-btn-close:hover {
    color: #ffffff;
}

/* Volume Control in Player Bar */
.bp-volume-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bp-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 55px;
    height: 4px;
    background: #000000;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.bp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff6b00;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 107, 0, 0.6);
    transition: transform 0.1s ease;
}

.bp-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.bp-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff6b00;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 107, 0, 0.6);
}

@media (max-width: 900px) {
    .bp-waveform-wrap {
        display: none;
    }
    .bp-player-container {
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 600px) {
    .bp-track-stats, .bp-btn-prev, .bp-btn-next, .bp-volume-slider {
        display: none;
    }
    .bp-meta-col {
        min-width: auto;
        max-width: 140px;
    }
}

/* Beatport Compact Tracklist Table */
.tracklist-wrap {
    border-top: 1px solid transparent;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.tracklist-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tracklist-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: #000000;
    letter-spacing: -0.01em;
    margin: 0;
}

.tracklist-sub {
    font-size: 0.78rem;
    color: #000000;
    font-weight: 600;
}

.tracklist-table-box {
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 6px;
}

.tracklist-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    background: #ffffff;
}

.tracklist-table thead tr {
    background: #ffffff;
    border-bottom: 1px solid #000000;
}

.tracklist-table th {
    padding: 0.5rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #000000;
    letter-spacing: 0.05em;
}

.tracklist-table tbody tr {
    background: #ffffff;
    border-bottom: 1px solid transparent;
    transition: background 0.15s;
}

.tracklist-table tbody tr:last-child {
    border-bottom: none;
}

.tracklist-table tbody tr:hover {
    background: #ffffff;
}

.tracklist-table td {
    padding: 0.45rem 0.5rem;
    vertical-align: middle;
}

.track-play-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    line-height: 0;
    transition: background 0.15s ease, transform 0.12s ease;
}

.track-play-btn:hover {
    background: #ff6b00;
    transform: scale(1.08);
}

.track-play-btn.playing {
    background: #ff6b00;
    box-shadow: 0 0 8px rgba(255, 107, 0, 0.4);
}

.track-num {
    font-weight: 700;
    color: #000000;
    font-size: 0.78rem;
    text-align: center;
}

.track-title-cell {
    font-weight: 700;
    color: #000000;
    font-size: 0.85rem;
    line-height: 1.25;
}

.track-artist-sub {
    font-size: 0.7rem;
    color: #000000;
    font-weight: normal;
    margin-top: 1px;
}

.track-time {
    font-size: 0.78rem;
    color: #000000;
    font-weight: 600;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.track-bpm-badge {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #000000;
    white-space: nowrap;
}

.track-row-buy-wrap {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
}

.btn-track-buy-split {
    display: inline-flex;
    align-items: center;
    background: #000000;
    color: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    height: 28px;
    transition: background 0.15s ease;
}

.btn-track-buy-split:hover {
    background: #ff6b00;
}

.btn-track-buy-main {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 0.6rem;
    cursor: pointer;
    white-space: nowrap;
    height: 100%;
}

.btn-track-buy-toggle {
    background: #000000;
    border: none;
    border-left: 1px solid #ffffff;
    color: #ffffff;
    font-size: 0.75rem;
    padding: 0 0.45rem;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-track-buy-toggle:hover {
    background: #000000;
}

.row-format-dropdown {
    position: fixed;
    background: #000000;
    border: 1px solid #ffffff;
    border-radius: 6px;
    padding: 0.25rem 0;
    min-width: 200px;
    display: none;
    z-index: 99999;
}

.row-format-dropdown.open {
    display: block;
}

.row-format-opt {
    width: 100%;
    background: none;
    border: none;
    color: #ffffff;
    padding: 0.45rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    box-sizing: border-box;
}

.row-format-opt:hover {
    background: #ff6b00;
    color: #ffffff;
}

.row-format-opt strong {
    font-weight: 800;
}


/* ==========================================================================
   Cart Drawer
   ========================================================================== */
.cart-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cart-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: -460px;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: #ffffff;
    border-left: 1px solid var(--shop-border);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer.active {
    right: 0;
}

.cart-drawer-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--shop-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-drawer-header h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--shop-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cart-close-btn {
    background: none;
    border: none;
    color: var(--shop-text-muted);
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem;
}

.cart-close-btn:hover {
    color: var(--shop-text-primary);
}

.cart-shipping-banner {
    padding: 0.85rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid var(--shop-border);
}

.shipping-progress-text {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--shop-text-primary);
    margin-bottom: 0.35rem;
    display: flex;
    justify-content: space-between;
}

.shipping-progress-bar {
    width: 100%;
    height: 6px;
    background: transparent;
    border-radius: 999px;
    overflow: hidden;
}

.shipping-progress-fill {
    height: 100%;
    background: var(--shop-orange);
    width: 0%;
    transition: width 0.3s ease;
}

.cart-drawer-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #ffffff;
}

.cart-empty-state {
    text-align: center;
    margin: auto;
    color: var(--shop-text-muted);
}

.cart-empty-state svg {
    width: 48px;
    height: 48px;
    stroke: #000000;
    margin-bottom: 0.75rem;
}

.cart-item {
    display: flex;
    gap: 0.85rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--shop-border-subtle);
}

.cart-item-img {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid var(--shop-border);
    object-fit: cover;
}

.cart-item-info {
    flex-grow: 1;
}

.cart-item-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--shop-text-primary);
    line-height: 1.3;
    margin-bottom: 0.15rem;
}

.cart-item-meta {
    font-size: 0.75rem;
    color: var(--shop-text-muted);
    margin-bottom: 0.4rem;
}

.cart-item-del-btn {
    background: none;
    border: none;
    color: #000000;
    padding: 0.2rem;
    cursor: pointer;
    line-height: 0;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease;
    flex-shrink: 0;
}

.cart-item-del-btn:hover {
    color: #ff3b30;
    background: rgba(255, 59, 48, 0.12);
    transform: scale(1.1);
}

.cart-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-item-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--shop-border);
    border-radius: 4px;
    overflow: hidden;
}

.cart-item-qty button {
    background: none;
    border: none;
    color: var(--shop-text-primary);
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 0.85rem;
}

.cart-item-qty span {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0 0.4rem;
}

.cart-item-price {
    font-weight: 800;
    color: var(--shop-text-primary);
    font-size: 0.95rem;
}

.cart-drawer-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--shop-border);
    background: #ffffff;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--shop-text-secondary);
    margin-bottom: 0.4rem;
}

.cart-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--shop-text-primary);
    padding-top: 0.6rem;
    margin-top: 0.6rem;
    border-top: 1px solid var(--shop-border);
    margin-bottom: 1rem;
}

.btn-checkout {
    width: 100%;
    padding: 0.85rem;
    background: var(--shop-orange);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.18s;
}

.btn-checkout:hover {
    background: var(--shop-orange-hover);
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.35);
}

/* Cart Item Delete Button */
.cart-item-del-btn {
    background: none;
    border: none;
    color: #000000;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}

.cart-item-del-btn:hover {
    color: #ff3b30;
    background: rgba(255, 59, 48, 0.1);
}

/* Compact Digital Product Header (Beatport-Style) */
.product-detail-grid.compact-digital {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

.compact-digital .detail-gallery {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 210px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
}

.compact-digital .detail-gallery #gx-main-product-img {
    width: 210px !important;
    height: 210px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 6px !important;
    object-fit: cover !important;
    display: block !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

.compact-digital .compact-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 2px !important;
    object-fit: cover !important;
    display: block !important;
    box-shadow: none !important;
}

.compact-digital .detail-info {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.compact-digital .detail-title {
    font-size: 1.4rem;
    font-weight: 900;
    margin: 0;
    line-height: 1.2;
    color: #000000;
}

.compact-digital .detail-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.compact-digital .detail-price-val {
    font-size: 1.3rem;
    font-weight: 900;
    color: #000000;
}

.compact-digital .detail-price-vat {
    font-size: 0.8rem;
    font-weight: 600;
    color: #000000;
}

.compact-digital .detail-desc-compact {
    font-size: 0.88rem;
    color: #000000;
    line-height: 1.5;
    margin: 0.2rem 0;
}

.compact-digital .specs-inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    list-style: none;
    padding: 0.45rem 0;
    margin: 0;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    font-size: 0.8rem;
}

.compact-digital .specs-inline-list li {
    display: inline-flex;
    gap: 0.35rem;
}

/* Album Buy Bar (Above & Below Tracklist) */
.album-buy-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #000000;
    color: #ffffff;
    padding: 0.7rem 1.15rem;
    border-radius: 6px;
    margin: 1rem 0;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.album-buy-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.album-buy-badge {
    background: #ff6b00;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

.album-buy-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffffff;
    display: block;
}

.album-buy-sub {
    font-size: 0.75rem;
    color: #ffffff;
    opacity: 0.8;
}

.album-buy-actions {
    position: relative;
    display: inline-flex;
}

.btn-album-buy-split {
    display: inline-flex;
    align-items: center;
    background: #ff6b00;
    color: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    height: 32px;
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.35);
    transition: background 0.15s ease;
}

.btn-album-buy-split:hover {
    background: #ff7e1a;
}

.btn-album-buy-main {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Warenkorb-SVG-Icon fuer Kauf-Buttons und Format-Optionen */
.cart-btn-svg {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.cart-btn-svg-lg,
#main-buy-btn .cart-btn-svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 0;
}

.btn-album-buy-toggle {
    background: #000000;
    border: none;
    border-left: 1px solid #ffffff;
    color: #ffffff;
    font-size: 0.8rem;
    padding: 0 0.55rem;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-album-buy-toggle:hover {
    background: #000000;
}

.album-format-dropdown {
    position: fixed;
    background: #000000;
    border: 1px solid #ffffff;
    border-radius: 6px;
    padding: 0.3rem 0;
    min-width: 220px;
    display: none;
    z-index: 99999;
}

.album-format-dropdown.open {
    display: block;
}

.album-format-opt {
    width: 100%;
    background: none;
    border: none;
    color: #ffffff;
    padding: 0.5rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    box-sizing: border-box;
}

.album-format-opt:hover {
    background: #ff6b00;
    color: #ffffff;
}

/* Track Meta Mobile Inline (hidden on desktop) */
.track-meta-mobile-inline {
    display: none;
}

@media (max-width: 768px) {
    .product-detail-grid.compact-digital {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .compact-digital .detail-gallery {
        width: 180px !important;
        height: auto !important;
        margin: 0 auto;
    }
    .compact-digital .detail-gallery #gx-main-product-img {
        width: 180px !important;
        height: 180px !important;
        margin: 0 auto;
    }

    /* Tracklist Table Mobile Optimization */
    .tracklist-table .col-num,
    .tracklist-table .col-time,
    .tracklist-table .col-bpm {
        display: none !important;
    }

    .tracklist-table th.col-play,
    .tracklist-table td.col-play {
        width: 36px !important;
        padding: 0.45rem 0.25rem 0.45rem 0.5rem !important;
        text-align: center !important;
    }

    .tracklist-table th.col-title,
    .tracklist-table td.col-title {
        padding: 0.45rem 0.4rem !important;
    }

    .track-title-text {
        display: block;
        font-size: 0.85rem;
        font-weight: 700;
        color: #000000;
        line-height: 1.28;
    }

    .track-artist-sub {
    font-size: 0.7rem;
    color: #000000;
    opacity: 0.75;
        margin-top: 2px;
        line-height: 1.25;
    }

    .track-meta-mobile-inline {
        display: inline !important;
        color: #ff6b00 !important;
        font-weight: 700;
    }

    .tracklist-table th.col-buy,
    .tracklist-table td.col-buy {
        width: auto !important;
        padding: 0.45rem 0.5rem 0.45rem 0.25rem !important;
        text-align: right !important;
    }

    .btn-track-buy-main {
        padding: 0 0.5rem !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }

    .btn-track-buy-toggle {
        padding: 0 0.35rem !important;
        font-size: 0.72rem !important;
    }

    /* Album Buy Bar Mobile Optimization */
    .album-buy-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        padding: 0.85rem !important;
        gap: 0.65rem !important;
    }

    .album-buy-info {
        flex-direction: column !important;
        gap: 0.35rem !important;
        justify-content: center !important;
    }

    .album-buy-actions {
        width: 100% !important;
    }

    .btn-album-buy-split {
        width: 100% !important;
        height: 38px !important;
    }

    .btn-album-buy-main {
        flex: 1 !important;
        justify-content: center !important;
        font-size: 0.84rem !important;
    }

    /* Bottom Player Bar Mobile Optimization */
    .beatport-player-bar {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .bp-player-container {
        padding: 0.25rem 0.6rem !important;
        gap: 0.5rem !important;
        height: 54px !important;
    }

    .bp-meta-col {
        min-width: 0 !important;
        max-width: 140px !important;
        flex: 1 1 auto !important;
        gap: 0.4rem !important;
    }

    .bp-cover-thumb {
        width: 32px !important;
        height: 32px !important;
    }

    .bp-track-title {
        font-size: 0.72rem !important;
    }

    .bp-track-artist {
        font-size: 0.62rem !important;
    }

    .bp-track-stats {
        display: none !important;
    }

    .bp-waveform-wrap {
        display: none !important;
    }

    .bp-actions-col {
        gap: 0.4rem !important;
        flex-shrink: 0 !important;
    }

    .bp-buy-split-btn {
        height: 28px !important;
    }

    .bp-btn-buy-main {
        padding: 0 0.45rem !important;
        font-size: 0.7rem !important;
    }

    .bp-btn-buy-toggle {
        padding: 0 0.35rem !important;
        font-size: 0.7rem !important;
    }

    .bp-ctrl-play {
        width: 28px !important;
        height: 28px !important;
    }

    .bp-ctrl-play svg {
        width: 11px !important;
        height: 11px !important;
    }

    .bp-volume-group {
        display: none !important;
    }

    .bp-ctrl-btn {
        display: none !important;
    }

    .bp-btn-close {
        display: flex !important;
        font-size: 0.85rem !important;
        margin-left: 0 !important;
    }
}

/* Strictly 1:1 Aspect Ratio on All Covers */
.cart-item-img,
.bp-cover-thumb,
.shop-card-img-wrap img,
.detail-gallery img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

/* Custom Delete Confirmation Modal */
.sp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    padding: 1rem;
    box-sizing: border-box;
}

.sp-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sp-modal-card {
    background: #000000;
    border: 1px solid #ffffff;
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 420px;
    width: 100%;
    transform: scale(0.96);
    transition: transform 0.18s ease;
    color: #ffffff;
    box-sizing: border-box;
}

.sp-modal-overlay.active .sp-modal-card {
    transform: scale(1);
}

.sp-modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.sp-modal-icon {
    font-size: 1.25rem;
    background: #ff6b00;
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-modal-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.sp-modal-body {
    font-size: 0.88rem;
    color: #ffffff;
    opacity: 0.85;
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
}

.sp-modal-body strong {
    color: #ff6b00;
}

.sp-modal-body em {
    color: #ffffff;
    font-style: normal;
    font-weight: 600;
}

.sp-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.sp-modal-btn {
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sp-btn-cancel {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}

.sp-btn-cancel:hover {
    background: #000000;
    border-color: #ffffff;
}

.sp-btn-confirm {
    background: #ff6b00;
    border: 1px solid #ff6b00;
    color: #ffffff;
}

.sp-btn-confirm:hover {
    background: #ff6b00;
    border-color: #ff6b00;
}

/* ==========================================================================
   GALAXUS-INSPIRED DESIGN SYSTEM: Header Flyouts, Product Detail & Lightbox
   ========================================================================== */

/* 1. Header-Buttons & Flyouts: siehe style.css (Abschnitt GLOBALER HEADER) */

/* ==========================================================================
   2. Galaxus Product Detail Page Architecture
   ========================================================================== */

.gx-product-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem 1.5rem 2.5rem 1.5rem;
    font-family: inherit;
    color: #000000;
}

/* Breadcrumbs */
.gx-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #000000;
    margin-bottom: 1rem;
}

.gx-breadcrumbs a {
    color: #000000;
    text-decoration: none;
    transition: color 0.15s ease;
}

.gx-breadcrumbs a:hover {
    color: #ff6b00;
}

.gx-breadcrumbs-sep {
    color: #000000;
}

/* Hero: 2-Column Grid (Gallery Left, Buybox Right) */
.gx-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.5rem;
    margin-bottom: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .gx-hero-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 1.25rem;
    }
}

/* Gallery Component (Matching Galaxus Mobile Screenshot 2) */
.gx-gallery-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.gx-gallery-main-card {
    position: relative;
    background: #ffffff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    overflow: hidden;
}

@media (min-width: 901px) {
    .gx-gallery-main-card {
        background: #ffffff;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        max-width: 500px;
    }
}

.gx-gallery-main-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Galaxus Dots & '4 Bilder' Link (Under Image, exactly like Screenshot 2) */
.gx-dots-nav-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
    margin-bottom: 0.85rem;
    width: 100%;
}

.gx-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.gx-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #000000;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gx-dot.active {
    background: #000000;
    border-color: #000000;
}

.gx-images-link {
    color: #000000;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    display: inline-block;
    transition: color 0.15s ease;
}

.gx-images-link:hover {
    color: #ff6b00;
}

/* Desktop Only Thumbnails */
.gx-gallery-thumbs {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
}

@media (min-width: 901px) {
    .gx-gallery-thumbs {
        display: grid;
    }
}

.gx-thumb-btn {
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 4px;
    aspect-ratio: 1/1;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gx-thumb-btn:hover {
    border-color: #000000;
}

.gx-thumb-btn.active {
    border-color: #ff6b00;
}

.gx-thumb-btn img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Buybox Component (Matching Galaxus Mobile Screenshot 2) */
.gx-buybox {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 1. Price at Top (Galaxus 217.92 / 30.– style) */
.gx-price-hero {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #000000;
    line-height: 1.1;
    margin-bottom: 0.35rem;
}

/* 2. Title (Bold Brand + Product Name) */
.gx-product-title-row {
    font-size: 1.45rem;
    font-weight: 400;
    color: #000000;
    line-height: 1.25;
    margin: 0 0 0.85rem 0;
}

.gx-title-main {
    font-size: 1.45rem;
    font-weight: 900;
    color: #000000;
    display: inline;
}

.gx-title-sub {
    font-size: 1.15rem;
    font-weight: 500;
    color: #000000;
    display: inline;
}

.gx-brand-bold {
    font-weight: 900;
    color: #000000;
}

/* 3. Promo Card (Like Galaxus '16.11 sparen' box) */
.gx-promo-card {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
}

.gx-promo-highlight {
    color: #ff6b00;
    font-weight: 800;
    font-size: 0.88rem;
}

.gx-promo-text {
    font-size: 0.82rem;
    color: #000000;
    margin-top: 0.1rem;
    font-weight: 500;
}

/* 4. Two-Column Meta Row (Bewertungen | Marke) */
.gx-meta-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    padding: 0.5rem 0;
    margin-bottom: 0.85rem;
}

.gx-meta-col-left {
    border-right: 1px solid transparent;
    padding-right: 1rem;
}

.gx-meta-col-right {
    padding-left: 1rem;
}

.gx-meta-label {
    font-size: 0.75rem;
    color: #000000;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.gx-meta-stars {
    font-size: 0.85rem;
    color: transparent;
    letter-spacing: 0.1em;
}

.gx-meta-stars .active {
    color: #ff6b00;
}

.gx-brand-link {
    color: #000000;
    text-decoration: underline;
    font-size: 0.88rem;
    font-weight: 700;
    transition: color 0.15s ease;
}

.gx-brand-link:hover {
    color: #ff6b00;
}

/* 5. Stock & Shipping Info */
.gx-availability-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 0.25rem;
}

.gx-availability-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000000;
}

.gx-delivery-lead {
    font-size: 0.84rem;
    color: #000000;
    margin-bottom: 0.85rem;
}

/* 6. Big Buy Button */
.gx-btn-buy-main {
    flex: 1;
    width: auto;
    height: 48px;
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.15s ease, transform 0.1s ease;
    margin-bottom: 0;
}

.gx-btn-buy-main:hover {
    background: #ff6b00;
    transform: translateY(-1px);
}

/* 7. Galaxus Delivery Calendar Pill Strip (Directly below Buy Button) */
.gx-delivery-schedule {
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    overflow-x: auto;
}

.gx-delivery-day {
    text-align: center;
    font-size: 0.75rem;
    color: #000000;
    flex: 1;
}

.gx-delivery-day strong {
    display: block;
    color: #000000;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

.gx-delivery-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #000000;
    border-radius: 50%;
    margin-top: 0.2rem;
}

/* Action Row (Quantity + Buy Button) */
.gx-action-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.gx-qty-picker {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    height: 48px;
    flex-shrink: 0;
}

.gx-qty-btn {
    background: transparent;
    border: none;
    width: 38px;
    height: 100%;
    font-size: 1.15rem;
    font-weight: 700;
    color: #000000;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gx-qty-btn:hover {
    background: #ffffff;
}

.gx-qty-val {
    width: 44px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 800;
    color: #000000;
}

.gx-btn-cart-main {
    flex: 1;
    height: 48px;
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: background 0.15s ease, transform 0.1s ease;
}

.gx-btn-cart-main:hover {
    background: #ff6b00;
    transform: translateY(-1px);
}

/* ==========================================================================
   3. Sektion «Auf einen Blick»
   ========================================================================== */

.gx-section-wrap {
    margin-bottom: 1.25rem;
    border-top: 1px solid transparent;
    padding-top: 1rem;
}

.gx-section-heading {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #000000;
    margin-bottom: 0.75rem;
}

.gx-glance-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.25rem;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

@media (max-width: 800px) {
    .gx-glance-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.gx-glance-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gx-glance-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.35rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #000000;
}

.gx-glance-list li:last-child {
    margin-bottom: 0;
}

.gx-glance-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #ff6b00;
    font-size: 1.2rem;
    line-height: 1;
}

.gx-seller-card {
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

.gx-seller-title {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000000;
    margin-bottom: 0.25rem;
}

.gx-seller-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #000000;
    margin-bottom: 0.4rem;
}

.gx-seller-meta {
    font-size: 0.8rem;
    color: #000000;
    line-height: 1.4;
}

/* ==========================================================================
   4. Sektion «Im Detail» (Akkordeons)
   ========================================================================== */

.gx-accordion-group {
    border: 1px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.gx-accordion-item {
    border-bottom: 1px solid transparent;
}

.gx-accordion-item:last-child {
    border-bottom: none;
}

.gx-accordion-trigger {
    width: 100%;
    text-align: left;
    background: #ffffff;
    border: none;
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gx-accordion-trigger:hover {
    background: #ffffff;
}

.gx-accordion-icon {
    font-size: 0.9rem;
    color: #000000;
    transition: transform 0.25s ease;
}

.gx-accordion-item.open .gx-accordion-icon {
    transform: rotate(180deg);
}

.gx-accordion-content {
    display: none;
    padding: 0.75rem 0.9rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #000000;
    border-top: 1px solid #ffffff;
    background: #ffffff;
}

.gx-accordion-item.open .gx-accordion-content {
    display: block;
}

/* Galaxus Specs Table */
.gx-specs-table {
    width: 100%;
    border-collapse: collapse;
}

.gx-specs-table tr {
    border-bottom: 1px solid #ffffff;
}

.gx-specs-table tr:nth-child(even) {
    background: #ffffff;
}

.gx-specs-table td {
    padding: 0.35rem 0.65rem;
    font-size: 0.84rem;
    line-height: 1.35;
}

.gx-specs-label {
    font-weight: 700;
    color: #000000;
    width: 38%;
}

.gx-specs-val {
    color: #000000;
}

/* Tracklist Table - Galaxus Compact */
.gx-track-cd-header {
    padding: 0.35rem 0.65rem;
    background: #000000;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.gx-track-cd-header:not(:first-child) {
    margin-top: 0.85rem;
}

.gx-track-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.65rem;
    min-height: 28px;
    border-bottom: 1px solid #ffffff;
    box-sizing: border-box;
    transition: background 0.1s ease;
}

.gx-track-row:hover {
    background: #ffffff;
}

.gx-track-num {
    font-weight: 700;
    font-size: 0.78rem;
    color: #000000;
    width: 26px;
    flex-shrink: 0;
}

.gx-track-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gx-track-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.gx-track-artist {
    font-size: 0.78rem;
    font-weight: 400;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.gx-track-artist::before {
    content: "·";
    margin-right: 0.35rem;
    font-weight: 700;
}

.gx-track-time {
    font-size: 0.78rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #000000;
    margin-left: 0.75rem;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .gx-track-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.05rem;
    }
    .gx-track-artist::before {
        display: none;
    }
    .gx-track-row {
        min-height: 34px;
        padding: 0.3rem 0.5rem;
    }
}

/* ==========================================================================
   5. Sektion «Passend dazu» (Related Products)
   ========================================================================== */

.gx-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 850px) {
    .gx-related-grid {
        grid-template-columns: 1fr;
    }
}

.gx-related-card {
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 1.25rem;
    text-decoration: none;
    color: #000000;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.gx-related-card:hover {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.gx-related-img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    background: #000000;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.gx-related-title {
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
}

.gx-related-meta {
    font-size: 0.8rem;
    color: #000000;
    margin-bottom: 0.75rem;
}

.gx-related-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ff6b00;
    margin-top: auto;
}

/* ==========================================================================
   6. Fullscreen Galaxus Lightbox Component
   ========================================================================== */

.gx-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 10, 12, 0.94);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gx-lightbox.active {
    display: flex;
    opacity: 1;
}

.gx-lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 1.8rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gx-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.gx-lightbox-counter {
    position: absolute;
    top: 30px;
    left: 32px;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.gx-lightbox-content {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gx-lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transition: transform 0.2s ease;
}

.gx-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 1.6rem;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    user-select: none;
}

.gx-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.08);
}

.gx-lightbox-prev {
    left: 28px;
}

.gx-lightbox-next {
    right: 28px;
}

.gx-lightbox-caption {
    margin-top: 1rem;
    color: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}


/* ==========================================================================
   SHOP-LISTE: Page-Header, CTA & Verfügbarkeit (grün / rot)
   ========================================================================== */

.shop-page-header {
    margin-bottom: 2rem;
}

.shop-page-kicker {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--shop-orange);
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.shop-page-header .section-title {
    margin-bottom: 0.6rem;
}

.shop-page-intro {
    color: var(--color-text-secondary, #000000);
    max-width: none;
    font-size: 1.02rem;
    line-height: 1.55;
}

.shop-card-body .shop-card-price {
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}

/* Verfügbarkeit: Punkt + Text */
.sp-avail {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: #155675;
    margin: 0.35rem 0 0.75rem 0;
}

.sp-avail-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.sp-avail.is-available {
    color: #155675;
}

.sp-avail.is-unavailable {
    color: #dc2626;
}

/* Produktseite: bestehende Verfügbarkeitszeile einfärben */
.gx-availability-row.is-available {
    color: #155675;
}

.gx-availability-row.is-available .gx-availability-dot {
    background: #155675;
}

.sp-avail.is-low-stock,
.gx-availability-row.is-low-stock {
    color: #ff6b00;
}

.sp-avail.is-low-stock .sp-avail-dot,
.gx-availability-row.is-low-stock .gx-availability-dot {
    background: #ff6b00;
}

.gx-availability-row.is-unavailable {
    color: #dc2626;
}

.gx-availability-row.is-unavailable .gx-availability-dot {
    background: #dc2626;
}

/* CTA in der Kachel: volle Breite */
.shop-card-cta {
    display: flex;
}

.shop-card-cta .btn-card-add {
    width: 100%;
    min-height: 40px;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
}

/* Deaktiviert (nicht lieferbar) */
.btn-card-add.is-disabled,
.btn-card-add[aria-disabled="true"] {
    background: #ffffff;
    border-color: transparent;
    color: #000000;
    opacity: 0.35;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.gx-btn-buy-main:disabled,
.gx-btn-buy-main[aria-disabled="true"] {
    background: transparent;
    color: #000000;
    cursor: not-allowed;
    transform: none;
}

.gx-btn-buy-main:disabled:hover {
    background: transparent;
    transform: none;
}

/* ==========================================================================
   KASSE (Checkout) – Galaxus-Stil, mobile-first
   1 Spalte mobil, ab 900px: Formular links, Bestellübersicht rechts (sticky)
   ========================================================================== */

.ck-page {
    padding: 1.5rem 0 4rem 0;
}

.ck-container {
    max-width: var(--max-width);
    width: 100%;
    box-sizing: border-box;
}

.ck-head {
    margin-bottom: 1.5rem;
}

.ck-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #000000;
    text-decoration: none;
}

.ck-back:hover {
    color: var(--shop-orange);
}

.ck-title {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.15;
    color: #000000;
    margin: 0.5rem 0 0.25rem 0;
}

.ck-subtitle {
    color: #000000;
    font-size: 0.9rem;
    margin: 0;
}

@media (min-width: 900px) {
    .ck-title {
        font-size: 2.2rem;
    }
}

/* Leerer Warenkorb */
.ck-empty {
    text-align: center;
    padding: 3rem 1.25rem;
    background: #ffffff;
    border: 1px dashed transparent;
    border-radius: 8px;
}

.ck-empty-icon {
    font-size: 2.5rem;
}

.ck-empty h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #000000;
    margin: 1rem 0 0.5rem 0;
}

.ck-empty p {
    color: #000000;
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
}

/* Layout-Raster */
.ck-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 900px) {
    .ck-grid {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 2rem;
    }
}

.ck-form-col,
.ck-summary-col {
    min-width: 0;
}

/* Angemeldet-Banner */
.ck-auth-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #000000 !important;
    padding: 0.85rem 0 !important;
    margin-bottom: 1.5rem !important;
}

.ck-auth-name {
    color: #000000;
    font-size: 0.9rem;
    font-weight: 800;
}

.ck-auth-email {
    display: block;
    color: #000000;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.ck-auth-logout {
    flex: 0 0 auto;
    background: #000000;
    border: none;
    border-radius: 4px;
    min-height: 34px;
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ck-auth-logout:hover {
    background: var(--shop-orange);
    color: #ffffff;
}

/* Template-Sektionstitel & Kicker */
.ck-section-head {
    margin-bottom: 1.25rem;
}

.ck-section-kicker {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--accent-orange);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    display: block;
}

.ck-section-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #000000;
    margin: 0;
}

/* Bestelloption Auswahl (Registrierung / Login / Gast) */
.ck-account-choice {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #000000 !important;
    padding: 0 0 1.75rem 0 !important;
    margin-bottom: 2rem !important;
}

.ck-mode-options {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ck-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.4rem 0;
    user-select: none;
}

.ck-mode-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent-orange);
    cursor: pointer;
    flex-shrink: 0;
}

.ck-mode-option-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #000000;
    display: block;
}

.ck-mode-option-desc {
    font-size: 0.82rem;
    font-weight: 400;
    color: #000000;
    margin-top: 0.15rem;
    display: block;
}

/* Inline-Login Box (Schlicht & rahmenlos) */
.ck-login-box {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #000000 !important;
    padding: 1.25rem 0 0 0 !important;
    margin-top: 1rem !important;
}

.ck-login-box h3 {
    margin: 0 0 0.4rem 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #000000;
}

.ck-inline-error {
    color: var(--shop-orange);
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}

/* Fieldsets (Rahmenlos mit Einzel-Trennlinie am Ende) */
.ck-fieldset {
    margin: 0 0 2rem 0 !important;
    padding: 0 0 2rem 0 !important;
    border: none !important;
    border-bottom: 1px solid #000000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    min-width: 0;
}

/* Felder */
.ck-field {
    margin-bottom: 1.1rem;
    min-width: 0;
}

.ck-field:last-child {
    margin-bottom: 0;
}

.ck-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.ck-optional {
    font-weight: 500;
    color: #000000;
    text-transform: none;
    letter-spacing: normal;
}

.ck-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0.75rem 0.95rem;
    border: 1px solid #000000;
    border-radius: 6px;
    background-color: #ffffff;
    color: #000000;
    font-family: inherit;
    font-size: 16px; /* verhindert iOS-Zoom */
    line-height: 1.4;
    transition: border-color 0.15s ease;
}

.ck-input::placeholder {
    color: #000000;
    opacity: 0.5;
}

.ck-input:hover {
    border-color: var(--accent-orange);
}

.ck-input:focus {
    outline: none;
    border-color: var(--accent-orange);
}

textarea.ck-input {
    min-height: 88px;
    resize: vertical;
}

select.ck-input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 12px 8px;
}

/* Reihen */
.ck-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.ck-row:last-child {
    margin-bottom: 0;
}

.ck-row > .ck-field {
    margin-bottom: 0;
}

@media (min-width: 600px) {
    .ck-row-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 480px) {
    .ck-row-zip {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
    .ck-row-street-nr {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }
}

/* Zahlung (Schlicht ohne Kasten) */
.ck-payment-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: none !important;
    background: transparent !important;
    padding: 0.25rem 0 !important;
}

.ck-payment-radio {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    border: 5px solid #000000;
    box-sizing: border-box;
}

.ck-payment-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: #000000;
}

.ck-payment-text {
    font-size: 0.85rem;
    color: #000000;
    line-height: 1.5;
    margin-top: 0.25rem;
}

/* Bestellübersicht (Rechte Spalte: Rahmenlos im Galaxus-Stil) */
.ck-summary {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

@media (min-width: 900px) {
    .ck-summary {
        position: sticky;
        top: calc(var(--header-total-height, 108px) + 1.5rem);
    }
}

.ck-items {
    margin-bottom: 1.25rem;
    max-height: 320px;
    overflow-y: auto;
}

.ck-ship-banner {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #000000 !important;
    border-radius: 0 !important;
    padding: 0.65rem 0 !important;
    margin-bottom: 1rem !important;
    font-size: 0.85rem;
    line-height: 1.45;
}

.ck-totals {
    border-top: 1px solid #000000 !important;
    padding-top: 1rem;
    margin-bottom: 1.25rem;
}

.ck-total-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    color: #000000;
    margin-bottom: 0.5rem;
}

.ck-total-row strong {
    color: #000000;
    white-space: nowrap;
}

.ck-grand-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.25rem;
    font-weight: 900;
    color: #000000;
    border-top: 1px solid #000000;
    padding-top: 0.85rem;
    margin-top: 0.85rem;
}

.ck-grand-total span:last-child {
    color: var(--accent-orange);
    white-space: nowrap;
}

.ck-vat {
    font-size: 0.75rem;
    color: #000000;
    text-align: right;
    margin-top: 0.25rem;
}

.ck-legal-notice {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #000000 !important;
    border-bottom: 1px solid #000000 !important;
    border-radius: 0 !important;
    padding: 0.75rem 0 !important;
    font-size: 0.8rem;
    color: #000000;
    line-height: 1.45;
    margin-bottom: 1.25rem;
}

.ck-error,
.ck-inline-error {
    background: transparent;
    border-left: 3px solid var(--accent-orange);
    color: #000000;
    padding: 0.75rem 1rem;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.ck-btn-primary {
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 1rem;
    background: #000000;
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.15s ease;
}

.ck-btn-primary:hover {
    background: var(--accent-orange);
    color: #ffffff !important;
}

.ck-btn-primary:disabled {
    background: #000000;
    opacity: 0.6;
    cursor: wait;
}

.ck-btn-secondary {
    min-height: 40px;
    padding: 0.55rem 1.1rem;
    background: #000000;
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ck-btn-secondary:hover {
    background: var(--accent-orange);
    color: #ffffff !important;
}

.ck-trust {
    text-align: center;
    margin-top: 0.85rem;
    font-size: 0.78rem;
    color: #000000;
}

.ck-empty {
    border: none !important;
    background: transparent !important;
    text-align: center;
    padding: 4rem 1rem;
}

/* Global: Weisser Text auf allen orangen Boxen, Badges & Buttons */
[style*="background: var(--accent-orange)"],
[style*="background: #ff6b00"],
[style*="background-color: var(--accent-orange)"],
[style*="background-color: #ff6b00"],
[style*="background:var(--accent-orange)"],
[style*="background:#ff6b00"],
[style*="background-color:var(--accent-orange)"],
[style*="background-color:#ff6b00"],
.badge-release,
.feed-filter-btn.active,
.btn-primary {
    color: #ffffff !important;
}

[style*="background: var(--accent-orange)"] *,
[style*="background: #ff6b00"] *,
[style*="background-color: var(--accent-orange)"] *,
[style*="background-color: #ff6b00"] *,
[style*="background:var(--accent-orange)"] *,
[style*="background:#ff6b00"] *,
[style*="background-color:var(--accent-orange)"] *,
[style*="background-color:#ff6b00"] * {
    color: #ffffff !important;
}


/* ==========================================================================
   N1 – Mobile Touch-Ziele mindestens 32 × 32 px (Play, Format-Pfeil ▾, Player)
   ========================================================================== */
@media (max-width: 768px) {
    .track-play-btn {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0;
    }
    .btn-track-buy-split,
    .bp-buy-split-btn {
        height: 32px !important;
    }
    .btn-track-buy-toggle,
    .bp-btn-buy-toggle,
    .btn-album-buy-toggle {
        min-width: 32px !important;
    }
    .bp-ctrl-play {
        width: 32px !important;
        height: 32px !important;
    }
    .bp-btn-close {
        min-width: 32px !important;
        min-height: 32px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
}


/* ==========================================================================
   Deluxe Double CD Showcase (WE PARADE 2K26)
   ========================================================================== */
.product-detail-grid.we-parade-deluxe {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 2.25rem;
    align-items: start;
    margin-bottom: 2rem;
}

.we-parade-deluxe .detail-gallery {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 340px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
}

.we-parade-deluxe .detail-gallery #gx-main-product-img {
    width: 340px !important;
    height: 340px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    display: block !important;
    border: 1px solid #000000 !important;
    box-shadow: none !important;
}

.we-parade-deluxe .compact-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    display: block !important;
}

.purchase-opt-card {
    transition: all 0.18s ease;
}
.purchase-opt-card:hover {
    border-color: #ff6b00 !important;
    background: #ffffff !important;
}
.purchase-opt-card.active {
    border-color: #000000 !important;
    border-width: 1px !important;
    background: #ffffff !important;
    box-shadow: none;
}

@media (max-width: 868px) {
    .product-detail-grid.we-parade-deluxe {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .we-parade-deluxe .detail-gallery {
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto;
    }
    .we-parade-deluxe .detail-gallery #gx-main-product-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
}

/* ==========================================================================
   WE PARADE 2K26 - 2-Spalten Trackliste Desktop (CD1 links, CD2 rechts)
   Gilt ausschliesslich fuer diese Seite ab 1024px; darunter 1-spaltig gestapelt
   ========================================================================== */
.we-parade-discs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.we-parade-disc-col {
    min-width: 0;
}

@media (min-width: 1024px) {
    .we-parade-discs-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2rem;
        align-items: start;
    }

    .we-parade-disc-col .album-buy-bar {
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
    }

    .we-parade-disc-col .tracklist-table-box {
        margin-bottom: 0 !important;
    }

    .we-parade-disc-col .tracklist-table th.col-bpm,
    .we-parade-disc-col .tracklist-table td.col-bpm {
        width: 76px !important;
        min-width: 0 !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .we-parade-disc-col .tracklist-table th.col-time,
    .we-parade-disc-col .tracklist-table td.col-time {
        width: 52px !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .we-parade-disc-col .tracklist-table th.col-buy,
    .we-parade-disc-col .tracklist-table td.col-buy {
        width: 125px !important;
        padding-right: 0.25rem !important;
    }
}

/* ==========================================================================
   Player-Leiste Handy/Tablet (bis 900px): zwei Zeilen, Wellenform sichtbar
   Zeile 1: Cover + Titel/Artist | Play | Kaufen | Schliessen
   Zeile 2: Zeit | Wellenform (antippen = springen) | Dauer
   Gilt fuer beide Player-Varianten (Alben 1996/1997/1998 und WE PARADE 2K26)
   ========================================================================== */

/* Grundlayout WE-PARADE-Variante (fehlte bisher komplett) */
.bp-track-info-side { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 0 1 300px; }
.bp-title-wrap { display: flex; flex-direction: column; min-width: 0; }
.bp-title { font-size: 0.78rem; font-weight: 800; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.bp-artist { font-size: 0.68rem; font-weight: 600; color: #ff6b00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.bp-controls-side { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.bp-waveform-side { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; }
.bp-time, .bp-time-dur { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.72rem; color: #ffffff; white-space: nowrap; flex-shrink: 0; }
.bp-time-dur { opacity: 0.7; }
.bp-actions-side { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.bp-volume-wrap { display: inline-flex; align-items: center; gap: 0.35rem; }
.bp-btn-vol { background: none; border: none; color: #ffffff; cursor: pointer; font-size: 0.9rem; padding: 0.2rem; }
.bp-buy-split-wrap .bp-buy-split-btn { border: none; color: #ffffff; font-size: 0.76rem; font-weight: 800; padding: 0 0.75rem; cursor: pointer; white-space: nowrap; }
.beatport-player-bar .bp-btn-close { background: none; border: none; cursor: pointer; }

/* Ladeanzeige auf dem Play-Button */
.bp-ctrl-play { position: relative; }
.bp-ctrl-play.is-loading svg { opacity: 0; }
.bp-ctrl-play.is-loading::after {
    content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
    border: 2px solid #ff6b00; border-top-color: transparent; border-radius: 50%;
    animation: bp-spin 0.7s linear infinite;
}
@keyframes bp-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .bp-player-container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "info ctrl act" "wave wave wave";
        align-items: center;
        column-gap: 0.5rem !important;
        row-gap: 0.3rem !important;
        height: auto !important;
        padding: 0.45rem 0.7rem calc(0.45rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Variante Alben (bp-meta-col / bp-waveform-wrap / bp-actions-col) */
    .bp-player-container:has(.bp-meta-col) {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "cover info act" "wave wave wave";
    }
    .bp-meta-col { display: contents !important; }
    .bp-meta-col .bp-cover-thumb { grid-area: cover; }
    .bp-meta-col .bp-track-info { grid-area: info; min-width: 0; }
    .bp-actions-col { grid-area: act; justify-self: end; }
    .bp-meta-col + .bp-waveform-wrap { grid-area: wave; margin-left: 92px; }
    .bp-track-stats { grid-row: 2; grid-column: 1 / -1; justify-self: start; display: flex !important; width: 86px; min-width: 0 !important; text-align: left !important; }
    .bp-bpm-display { display: none !important; }
    .bp-time-display { white-space: nowrap; font-size: 0.7rem; }

    /* Variante WE PARADE */
    .bp-track-info-side { grid-area: info; }
    .bp-controls-side { grid-area: ctrl; }
    .bp-actions-side { grid-area: act; gap: 0.4rem; }
    .bp-waveform-side { grid-area: wave; gap: 0.5rem; }
    .bp-controls-side .bp-ctrl-btn, .bp-volume-wrap { display: none !important; }

    /* Wellenform immer sichtbar */
    .bp-waveform-wrap { display: flex !important; height: 34px !important; min-width: 0; }
    #bp-waveform-canvas { height: 34px !important; }

    .bp-cover-thumb { width: 34px !important; height: 34px !important; }
    .bp-title, .bp-track-title { font-size: 0.78rem !important; }
    .bp-artist, .bp-track-artist { font-size: 0.66rem !important; }
    .bp-ctrl-play { width: 34px !important; height: 34px !important; }
    .bp-ctrl-play svg { width: 13px !important; height: 13px !important; }
    .bp-buy-split-btn { height: 32px !important; white-space: nowrap !important; }
    .bp-buy-split-wrap .bp-buy-split-btn { padding: 0 0.5rem !important; font-size: 0.68rem !important; }

    /* Inhalt am Seitenende nicht von der Leiste verdecken */
    body:has(.beatport-player-bar.active) { padding-bottom: 96px; }
}

/* ==========================================================================
   Tracklist Active Row Progress Indicator (.is-playing-row)
   ========================================================================== */
.tracklist-table tbody tr.is-playing-row {
    background-image: linear-gradient(90deg, rgba(255, 107, 0, 0.16) 0%, rgba(255, 107, 0, 0.16) var(--row-progress, 0%), rgba(255, 247, 237, 0.65) var(--row-progress, 0%), rgba(255, 247, 237, 0.65) 100%) !important;
}

/* ==========================================================================
   Warenkorb-Seite (warenkorb.html) & 3-Schritte-Kasse (kasse.html)
   ========================================================================== */
.gx-cart-page { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem 4rem; color: #000000; }
.gx-cart-page-title { font-size: 2rem; font-weight: 800; margin: 0 0 1.5rem 0; color: #000000; letter-spacing: -0.02em; }
.gx-cart-page-list { border-top: 1px solid #000000; }
.gx-cart-page-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid #000000; align-items: start; }
.gx-cart-page-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid #000000; background: #000000; }
.gx-cart-page-info { min-width: 0; }
.gx-cart-page-item-title { font-size: 1rem; font-weight: 600; color: #000000; text-decoration: none; display: block; margin-bottom: 0.25rem; line-height: 1.35; }
.gx-cart-page-item-title strong { font-weight: 800; }
.gx-cart-page-item-variant { font-size: 0.85rem; color: #000000; margin-bottom: 0.35rem; }
.gx-cart-page-stock { font-size: 0.84rem; color: #155675; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }
.gx-cart-page-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 1rem; min-width: 190px; }
.gx-cart-page-qty-price { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1.25rem; }
.gx-cart-page-qty { min-width: 68px; height: 38px; padding: 0 1.75rem 0 0.65rem; border: 1px solid #000000; border-radius: 6px; font-size: 0.9rem; font-weight: 600; background-color: #ffffff; color: #000000; cursor: pointer; }
.gx-cart-page-price { font-size: 1rem; font-weight: 800; color: #000000; white-space: nowrap; }
.gx-cart-page-actions { display: flex; align-items: center; gap: 0.75rem; }
.gx-cart-page-remove { background: none; border: none; color: #000000; font-size: 0.84rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0; }
.gx-cart-page-remove:hover { color: #ff6b00; text-decoration: underline; }
.gx-cart-page-totals { padding: 1rem 0 0.5rem; }
.gx-cart-page-total-line { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0; font-size: 0.95rem; color: #000000; }
.gx-cart-page-grand-line { display: flex; justify-content: space-between; align-items: baseline; padding: 0.9rem 0; border-top: 1px solid #000000; border-bottom: 1px solid #000000; font-size: 1.12rem; font-weight: 800; color: #000000; }
.gx-cart-page-footer { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.gx-btn-dark-cta { background: #000000; color: #ffffff !important; border: none; border-radius: 6px; padding: 0.85rem 2.25rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-width: 190px; transition: background 0.15s ease; }
.gx-btn-dark-cta:hover { background: #ff6b00; color: #ffffff !important; }

.gx-ck-wrap { max-width: 820px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; color: #000000; }
.gx-ck-main-title { font-size: 1.85rem; font-weight: 800; color: #000000; margin: 0.5rem 0 1.5rem 0; letter-spacing: -0.02em; }
.gx-ck-step { border-bottom: 1px solid #000000; padding: 1.5rem 0; }
.gx-ck-step-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.gx-ck-step-title { font-size: 1.22rem; font-weight: 800; color: #000000; margin: 0; }
.gx-ck-step-check { color: #155675; font-size: 1.1rem; font-weight: 800; }
.gx-ck-block { margin-bottom: 0.9rem; font-size: 0.9rem; line-height: 1.5; color: #000000; }
.gx-ck-block-label { font-weight: 700; display: block; margin-bottom: 0.15rem; color: #000000; }
.gx-ck-edit-row { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.gx-ck-edit-btn { background: #ffffff; color: #000000; border: 1px solid #000000; border-radius: 6px; padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; }
.gx-ck-edit-btn:hover { background: #000000; color: #ffffff; border-color: #000000; }
.gx-ck-voucher-link { color: #000000; font-size: 0.88rem; font-weight: 600; text-decoration: underline; cursor: pointer; display: inline-block; margin-top: 0.35rem; background: none; border: none; padding: 0; font-family: inherit; }
.gx-ck-voucher-link:hover { color: #ff6b00; text-decoration: underline; }
.gx-ck-item-row { display: grid; grid-template-columns: 52px 34px 1fr auto; gap: 0.85rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid #000000; font-size: 0.9rem; }
.gx-ck-item-thumb { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; border: 1px solid #000000; background: #000000; }
.gx-ck-vat-table { margin-top: 1rem; padding-top: 0.5rem; }
.gx-ck-vat-row { display: flex; justify-content: space-between; padding: 0.3rem 0; font-size: 0.9rem; color: #000000; }
.gx-ck-vat-total { display: flex; justify-content: space-between; padding: 0.75rem 0; margin-top: 0.35rem; border-top: 1px solid #000000; font-size: 1.05rem; font-weight: 800; color: #000000; }
.gx-ck-ref-wrap { margin-top: 1.35rem; max-width: 340px; }
.gx-ck-legal-line { margin-top: 1.35rem; font-size: 0.85rem; color: #000000; line-height: 1.5; }
.gx-ck-legal-line a { color: #000000; text-decoration: underline; font-weight: 600; }
.gx-ck-legal-line a:hover { color: #ff6b00; text-decoration: underline; }
.gx-ck-buy-row { display: flex; justify-content: flex-end; margin-top: 1.5rem; }

@media (max-width: 640px) {
    .gx-cart-page-row { grid-template-columns: 72px 1fr; }
    .gx-cart-page-thumb { width: 72px; height: 72px; }
    .gx-cart-page-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; }
    .gx-cart-page-qty-price { width: auto; }
    .gx-btn-dark-cta { width: 100%; }
}

/* ==========================================================================
   Bestellbestätigung & Bestellansicht (danke.html – DE / EN / FR / IT)
   Minimalistisches Layout (0 % Grau, 1px solid #000000)
   ========================================================================== */
.ty-page {
    background: #ffffff;
    color: #000000;
}
.ty-container {
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
}
.ty-header {
    border-bottom: 1px solid #000000;
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
}
.ty-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #000000;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 0.85rem;
}
.ty-back-link:hover {
    color: #ff6b00;
}
.ty-kicker {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: #ff6b00;
    letter-spacing: 0.02em;
    margin-bottom: 0.35rem;
    text-transform: none;
}
.ty-title {
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 600;
    color: #000000;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
}
.ty-intro {
    font-size: 0.96rem;
    font-weight: 400;
    color: #000000;
    line-height: 1.55;
    margin: 0;
}
.ty-card {
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: 12px;
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: none;
}
.ty-card-accent {
    border-color: #155675;
}
.ty-order-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.ty-order-label {
    display: block;
    font-size: 0.84rem;
    font-weight: 500;
    color: #000000;
    margin-bottom: 0.25rem;
}
.ty-order-num {
    font-size: 1.55rem;
    font-weight: 600;
    color: #ff6b00;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.02em;
}
.ty-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    border: 1px solid #000000;
    background: #ffffff;
    color: #000000;
}
.ty-status-badge.is-paid {
    background: #155675;
    border-color: #155675;
    color: #ffffff;
}
.ty-status-badge.is-cancelled {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}
.ty-notice {
    border: 1px solid #000000;
    border-left: 3px solid #ff6b00;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.25rem;
    background: #ffffff;
    color: #000000;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.55;
}
.ty-notice.is-paid {
    border-color: #155675;
    border-left-width: 3px;
}
.ty-notice.is-cancelled {
    border-color: #dc2626;
    border-left-width: 3px;
    color: #dc2626;
}
.ty-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000000;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ty-dl-item {
    border: 1px solid #000000;
    border-radius: 8px;
    padding: 1rem 1.15rem;
    margin-top: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    background: #ffffff;
}
.ty-dl-title {
    font-size: 0.96rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 0.2rem;
}
.ty-dl-meta {
    font-size: 0.82rem;
    font-weight: 400;
    color: #000000;
}
.ty-dl-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.78rem 1.25rem;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    border: 1px solid #000000;
    background: #ffffff;
    color: #000000;
    font-family: inherit;
}
.ty-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.ty-btn-orange {
    background: #ff6b00;
    border-color: #ff6b00;
    color: #ffffff !important;
}
.ty-btn-orange:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff !important;
}
.ty-btn-emerald {
    background: #155675;
    border-color: #155675;
    color: #ffffff !important;
}
.ty-btn-emerald:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff !important;
}
.ty-btn-black {
    background: #000000;
    border-color: #000000;
    color: #ffffff !important;
}
.ty-btn-black:hover {
    background: #ff6b00;
    border-color: #ff6b00;
    color: #ffffff !important;
}
.ty-btn-outline {
    background: #ffffff;
    border: 1px solid #000000;
    color: #000000;
}
.ty-btn-outline:hover {
    border-color: #ff6b00;
    color: #ff6b00;
}
.ty-btn-sm {
    padding: 0.5rem 0.9rem;
    font-size: 0.84rem;
    border-radius: 8px;
}
.ty-btn-orange svg,
.ty-btn-emerald svg,
.ty-btn-black svg,
.ty-status-badge.is-paid svg,
.ty-status-badge.is-cancelled svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
.ty-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.ty-actions-row .ty-btn {
    flex: 1 1 210px;
}
.ty-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.75rem;
    font-size: 0.92rem;
}
.ty-table th {
    text-align: left;
    font-weight: 500;
    color: #000000;
    border-bottom: 1px solid #000000;
    padding: 0.65rem 0.5rem;
    background: #ffffff;
}
.ty-table td {
    font-weight: 400;
    color: #000000;
    border-bottom: 1px solid #000000;
    padding: 0.75rem 0.5rem;
    vertical-align: top;
}
.ty-table th.num,
.ty-table td.num {
    text-align: right;
    white-space: nowrap;
}
.ty-totals {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.92rem;
}
.ty-totals-row {
    display: flex;
    justify-content: space-between;
    font-weight: 400;
    color: #000000;
}
.ty-totals-row.is-grand {
    font-size: 1.08rem;
    font-weight: 600;
    border-top: 1px solid #000000;
    padding-top: 0.65rem;
    margin-top: 0.25rem;
}
.ty-addr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
@media (max-width: 640px) {
    .ty-addr-grid {
        grid-template-columns: 1fr;
    }
}
.ty-addr-box {
    border: 1px solid #000000;
    border-radius: 8px;
    padding: 0.95rem 1.1rem;
    font-size: 0.88rem;
    line-height: 1.55;
    background: #ffffff;
    color: #000000;
}
.ty-addr-box strong {
    display: block;
    font-weight: 500;
    margin-bottom: 0.35rem;
    font-size: 0.84rem;
}
.ty-link-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.6rem;
}
.ty-link-input {
    flex: 1 1 240px;
    padding: 0.55rem 0.75rem;
    border: 1px solid #000000;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #000000;
    background: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}