.product-page { padding-bottom: 80px; }

.product-breadcrumb { padding: 24px 0 16px; }

.breadcrumb-trail,
.woocommerce-breadcrumb {
    font-size: 13px;
    color:     #8B8B9E;
}

.woocommerce-breadcrumb a,
.breadcrumb-trail a {
    color:           #8B8B9E;
    text-decoration: none;
    transition:      color var(--transition);
}

.woocommerce-breadcrumb a:hover,
.breadcrumb-trail a:hover { color: var(--color-primary); }

.product-single {
    display:       flex;
    gap:           0;
    background:    var(--glass-bg);
    border:        1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow:    var(--glass-shadow), var(--glass-highlight);
    -webkit-backdrop-filter: blur(var(--glass-blur));
            backdrop-filter: blur(var(--glass-blur));
    overflow:      hidden;
}

.product-single__left {
    flex:           0 0 280px;
    display:        flex;
    flex-direction: column;
    padding:        20px;
    gap:            16px;
}

.product-single__image {
    border-radius: var(--radius);
    overflow:      hidden;
    aspect-ratio:  1;
}

.product-single__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.product-single__buy .quantity { display: none; }

.product-single__buy .single_add_to_cart_button,
.product-single__buy button[type="submit"] {
    width:         100%;
    padding:       13px 20px;
    background:    var(--gradient-accent);
    color:         #fff;
    font-size:     14px;
    font-weight:   700;
    border-radius: 40px;
    border:        none;
    cursor:        pointer;
    font-family:   inherit;
    transition:    all var(--transition);
    box-shadow:    0 4px 20px rgba(230,57,82,.28);
}

.product-single__buy .single_add_to_cart_button:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 28px rgba(230,57,82,.4);
}

.product-single__right {
    flex:           1;
    padding:        28px 32px;
    display:        flex;
    flex-direction: column;
    gap:            16px;
    min-width:      0;
}

.product-single__title {
    font-family:    var(--font-heading);
    font-size:      34px;
    font-weight:    600;
    line-height:    1.1;
    letter-spacing: -0.02em;
    color:          var(--color-text);
}

.product-single__meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
}

.product-single__price {
    font-size:   20px;
    font-weight: 800;
    color:       var(--color-primary);
}

.product-single__price .woocommerce-Price-amount { font-size: inherit; }
.product-single__price .woocommerce-Price-currencySymbol { font-size: inherit; }

.product-single__duration {
    font-size:   14px;
    font-weight: 500;
    color:       var(--color-muted);
}

.product-single__short-desc {
    font-size:   14px;
    line-height: 1.7;
    color:       var(--color-muted);
}

.product-single__short-desc p { margin-bottom: 8px; }
.product-single__short-desc p:last-child { margin-bottom: 0; }

.product-single__short-desc strong,
.product-single__short-desc b {
    font-weight: 700;
    color:       var(--color-text);
}

.product-single__player {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       12px 16px;
    background:    rgba(255, 255, 255, 0.04);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
}

.product-single__player .player__btn {
    flex-shrink:     0;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--gradient-accent);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    transition:      transform var(--transition), box-shadow var(--transition);
}

.product-single__player .player__btn:hover {
    transform:  scale(1.06);
    box-shadow: 0 4px 16px rgba(230,57,82,.35);
}

.product-single__player .player__btn svg { width: 14px; height: 14px; }
.product-single__player .player__btn .icon-play { margin-left: 2px; }

.product-single__player .player__current,
.product-single__player .player__total {
    font-size:            13px;
    color:                var(--color-muted);
    flex-shrink:          0;
    font-variant-numeric: tabular-nums;
    min-width:            34px;
}

.product-single__player .player__total { text-align: right; }

.product-single__player .player__track {
    flex:          1;
    height:        4px;
    background:    rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    cursor:        pointer;
    overflow:      hidden;
}

.product-single__player .player__progress {
    width:         100%;
    height:        100%;
    border-radius: 2px;
    overflow:      hidden;
}

.product-single__player .player__fill {
    height:         100%;
    width:          0%;
    background:     var(--gradient-accent);
    border-radius:  2px;
    transition:     width .1s linear;
    pointer-events: none;
}

.product-single__category {
    font-size: 14px;
    color:     var(--color-muted);
}

.product-single__category a {
    color:           var(--color-primary);
    font-weight:     600;
    text-decoration: none;
    transition:      color var(--transition);
}

.product-single__category a:hover { color: var(--color-secondary); }

.product-single__attrs {
    width:           100%;
    border-collapse: collapse;
    font-size:       14px;
}

.product-single__attrs th,
.product-single__attrs td {
    padding:      10px 12px;
    border-top:   1px solid var(--color-border);
    text-align:   left;
    vertical-align: top;
}

.product-single__attrs th {
    font-weight: 600;
    color:       var(--color-muted);
    white-space: nowrap;
    width:       140px;
}

.product-single__attrs td {
    color: var(--color-text);
}

.product-description {
    margin-top:    24px;
    background:    var(--glass-bg);
    border:        1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow:    var(--glass-shadow), var(--glass-highlight);
    -webkit-backdrop-filter: blur(var(--glass-blur));
            backdrop-filter: blur(var(--glass-blur));
    padding:       32px;
}

.product-description__title {
    font-size:      30px;
    font-weight:    600;
    letter-spacing: -0.02em;
    color:          var(--color-text);
    margin-bottom:  20px;
}

.product-description__content {
    font-size:   15px;
    line-height: 1.75;
    color:       var(--color-muted);
}

.product-description__content p { margin-bottom: 14px; }
.product-description__content p:last-child { margin-bottom: 0; }

.product-description__content strong,
.product-description__content b {
    font-weight: 700;
    color:       var(--color-text);
}

.product-related { margin-top: 48px; }

.product-related__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   24px;
}

.product-related__title {
    font-size:      32px;
    font-weight:    600;
    letter-spacing: -0.02em;
    color:          var(--color-text);
}

.related-slider__nav {
    display: flex;
    gap:     8px;
}

.related-slider__arrow {
    width:           38px;
    height:          38px;
    border-radius:   50%;
    border:          1px solid var(--color-border);
    background:      var(--color-card);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-muted);
    transition:      all var(--transition);
}

.related-slider__arrow:hover {
    border-color: var(--color-primary);
    color:        var(--color-text);
    box-shadow:   0 0 20px rgba(255, 59, 99, 0.25);
}

.related-slider__arrow:disabled {
    opacity:        0.35;
    cursor:         default;
    pointer-events: none;
}

.related-slider__track {
    display:              flex;
    gap:                  16px;
    overflow-x:           auto;
    scroll-snap-type:     x mandatory;
    scroll-behavior:      smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:      none;
    padding-top:          18px;
    padding-bottom:       18px;
    margin-top:           -18px;
    margin-bottom:        -14px;
}

.related-slider__track::-webkit-scrollbar { display: none; }

.related-card {
    flex:            0 0 calc(25% - 12px);
    scroll-snap-align: start;
    background:      var(--color-card);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-lg);
    box-shadow:      var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow:        hidden;
    display:         flex;
    flex-direction:  column;
    transition:      transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.related-card:hover {
    border-color: var(--color-border-hover);
    transform:    translateY(-4px);
    box-shadow:   var(--shadow), var(--shadow-glow);
}

.related-card__image {
    display:      block;
    aspect-ratio: 1;
    overflow:     hidden;
}

.related-card__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.4s ease;
}

.related-card:hover .related-card__img { transform: scale(1.03); }

.related-card__no-img {
    width:           100%;
    aspect-ratio:    1;
    background:      rgba(255, 255, 255, 0.04);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.related-card__no-img svg { width: 40px; height: 40px; color: var(--color-muted); }

.related-card__body {
    padding:        14px 16px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    flex:           1;
}

.related-card__title {
    font-family:          var(--font-body);
    font-size:            15px;
    font-weight:          600;
    line-height:          1.3;
    color:                var(--color-text);
    min-height:           calc(2 * 15px * 1.3);
    display:              -webkit-box;
    -webkit-line-clamp:   2;
    -webkit-box-orient:   vertical;
    overflow:             hidden;
}

.related-card__title a {
    color:           inherit;
    text-decoration: none;
}

.related-card__title a:hover { color: var(--color-primary); }

.related-card__duration {
    font-size:   13px;
    font-weight: 500;
    color:       var(--color-muted);
}

.related-card__buy {
    border-radius:   40px;
    padding:         10px 20px;
    font-size:       13px;
    width:           100%;
    justify-content: center;
    margin-top:      auto;
}

.related-card__player {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       10px 12px;
    background:    rgba(255, 255, 255, 0.04);
    border-top:    1px solid var(--color-border);
    margin-top:    auto;
}

.related-card__player .player__btn {
    flex-shrink:     0;
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      var(--gradient-accent);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    transition:      transform var(--transition);
}

.related-card__player .player__btn:hover { transform: scale(1.08); }
.related-card__player .player__btn svg { width: 11px; height: 11px; }
.related-card__player .player__btn .icon-play { margin-left: 2px; }

.related-card__player .player__current,
.related-card__player .player__total {
    font-size:            12px;
    color:                var(--color-muted);
    flex-shrink:          0;
    font-variant-numeric: tabular-nums;
    min-width:            28px;
}

.related-card__player .player__total { text-align: right; }

.related-card__player .player__track {
    flex:          1;
    height:        3px;
    background:    rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    cursor:        pointer;
    overflow:      hidden;
}

.related-card__player .player__progress {
    width:         100%;
    height:        100%;
    border-radius: 2px;
    overflow:      hidden;
}

.related-card__player .player__fill {
    height:         100%;
    width:          0%;
    background:     var(--gradient-accent);
    border-radius:  2px;
    transition:     width .1s linear;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .product-single__left  { flex: 0 0 220px; }
    .product-single__title { font-size: 22px; }
    .related-card          { flex: 0 0 calc(50% - 8px); }
}

@media (max-width: 768px) {
    .product-single {
        flex-direction: column;
    }

    .product-single__left {
        flex:           0 0 auto;
        flex-direction: row;
        align-items:    center;
        gap:            12px;
    }

    .product-single__image {
        width:  140px;
        flex-shrink: 0;
    }

    .product-single__buy { flex: 1; }

    .product-single__right { padding: 0 20px 24px; }

    .product-single__title { font-size: 20px; }

    .product-description { padding: 24px 20px; }

    .related-card { flex: 0 0 75%; }
}

@media (max-width: 560px) {
    .product-single__left   { flex-direction: column; align-items: stretch; }
    .product-single__image  { width: 100%; }
    .product-breadcrumb     { font-size: 12px; }
    .product-single__title  { font-size: 18px; }
    .product-description    { padding: 20px 16px; }
    .product-description__title { font-size: 20px; }
    .related-card           { flex: 0 0 85%; }
    .product-related__title { font-size: 20px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .product-single,
    .product-description { background: var(--color-card); }
}
