/* Product detail page. Shared cards/buttons come from style.css. */

.product-detail-section {
    padding-block: clamp(28px, 4vw, 48px) var(--section-space);
}

.product-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.product-visual-section {
    position: sticky;
    top: calc(var(--header-h) + 20px);
}

.product-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--tile);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.product-stage img {
    position: absolute;
    inset: 10%;
    width: 80%;
    height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 22px 26px rgba(17, 24, 51, 0.16));
}

.product-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    overflow-x: auto;
}

.product-thumb {
    flex: 0 0 76px;
    height: 76px;
    padding: 8px;
    background: var(--tile);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color 0.2s ease;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-thumb.is-active,
.product-thumb:hover {
    border-color: var(--ink);
}

.product-info-section {
    padding-top: clamp(0px, 2vw, 24px);
}

.product-info-section .product-tag {
    font-size: 12.5px;
    white-space: normal;
}

.product-title {
    margin-top: 0.5rem;
    font-size: clamp(32px, 4vw, 52px);
    letter-spacing: -0.03em;
}

.product-description {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--ink-2);
    max-width: 62ch;
}

.product-description > * + * {
    margin-top: 1em;
}

.product-description ul,
.product-description ol {
    padding-left: 1.25em;
}

.product-description li + li {
    margin-top: 0.35em;
}

.product-description strong,
.product-description b {
    color: var(--ink);
    font-weight: 600;
}

.product-description h2,
.product-description h3,
.product-description h4 {
    font-size: 20px;
    margin-top: 1.6em;
}

.product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2.25rem;
}

.related-section {
    padding-bottom: var(--section-space);
}

@media (max-width: 900px) {
    .product-detail-layout {
        grid-template-columns: 1fr;
    }

    .product-visual-section {
        position: static;
    }

    .product-stage {
        aspect-ratio: 4 / 3.4;
    }
}

@media (max-width: 480px) {
    .product-actions > a {
        flex: 1 1 100%;
    }
}

.related-section .section-title {
    font-size: clamp(28px, 3.2vw, 40px);
}