/* Product detail — layout, specs, downloads, image gallery */

/* ================================================================
   PRODUCT DETAIL LAYOUT
   ================================================================ */
.product-detail {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 2.5rem;
}
@media (max-width: 768px) {
    .product-detail {
        grid-template-columns: 1fr;
    }
}
.product-detail__gallery {
    background: #fff;
    border: none;
    padding: 0;
}
.product-detail__info h1 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}
.product-detail__info .secondary {
    font-family: var(--sku-font);
}
.product-detail__price {
    margin: 1.25rem 0;
}
.product-detail__price strong {
    font-family: var(--heading-font);
    letter-spacing: -0.02em;
    color: var(--price-color);
}
/* User price types block */
.product-detail__user-prices {
    background: #f7f8fa;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 0.6rem 0.85rem;
    margin-top: 0.75rem;
}
.product-detail__user-prices p {
    margin: 0.2rem 0;
}
.product-detail__user-price-name {
    color: var(--color-muted);
    font-size: 0.92em;
}
/* Stock quantity highlight */
.product-detail__stock {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.75rem 0;
}
.product-detail__stock-qty {
    font-family: var(--heading-font);
    font-size: 1.4em;
    font-weight: 700;
    color: var(--price-color);
}
.product-detail__stock-label {
    font-size: 0.9em;
    color: var(--price-color);
}
.product-detail__stock .badge--in-stock,
.product-detail__stock .badge--order {
    font-size: 0.85em;
    padding: 0.35em 0.75em;
}

/* ================================================================
   DESCRIPTION PREVIEW
   ================================================================ */
.product-detail__description {
    padding: 0.5rem 1rem 0.75rem;
}
/* Show clamped content when collapsed */
.product-detail__specs:has(.product-detail__description)::details-content {
    display: block;
    height: auto;
    content-visibility: visible;
}
.product-detail__specs:not([open]) .product-detail__description {
    max-height: 12em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

/* ================================================================
   SPECS ACCORDION
   ================================================================ */
.product-detail__specs {
    grid-column: 1 / -1;
    border: 1px solid var(--border-strong);
    border-radius: var(--card-radius);
    background: #fff;
}
.product-detail__specs:has(.product-detail__description) {
    border-color: var(--border-subtle);
}
.product-detail__specs > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 1rem;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);
}
.product-detail__specs[open] > summary {
    border-bottom-color: var(--border-strong);
}
.product-detail__specs:has(.product-detail__description)[open] > summary {
    border-bottom-color: var(--border-subtle);
}
.product-detail__specs > summary::-webkit-details-marker { display: none; }
.product-detail__specs > summary::after {
    content: "\25BE";
    font-size: 1.1em;
    color: var(--color-muted);
    transition: transform var(--transition-fast);
}
.product-detail__specs:not([open]) > summary::after {
    transform: rotate(-90deg);
}
.specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.specs-table th,
.specs-table td {
    padding: 0.55rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}
.specs-table tr:last-child th,
.specs-table tr:last-child td {
    border-bottom: none;
}
.specs-table th {
    color: var(--color-muted);
    font-weight: 500;
    width: 40%;
}
.specs-table td {
    color: var(--color-text);
    font-weight: 500;
}
.specs-table tr:hover {
    background: #f8f9fa;
}

/* Reduce gap between adjacent accordions */
.product-detail__specs + .product-detail__downloads {
    margin-top: -1.75rem;
}

/* ================================================================
   DOWNLOADS ACCORDION
   ================================================================ */
.product-detail__downloads {
    grid-column: 1 / -1;
    border: 1px solid var(--border-strong);
    border-radius: var(--card-radius);
    background: #fff;
}
.product-detail__downloads > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 1rem;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);
}
.product-detail__downloads[open] > summary {
    border-bottom-color: var(--border-strong);
}
.product-detail__downloads > summary::-webkit-details-marker { display: none; }
.product-detail__downloads > summary::after {
    content: "\25BE";
    font-size: 1.1em;
    color: var(--color-muted);
    transition: transform var(--transition-fast);
}
.product-detail__downloads:not([open]) > summary::after {
    transform: rotate(-90deg);
}
.product-detail__downloads ul {
    list-style: none;
    padding: 0.5rem 1rem;
    margin: 0;
}
.product-detail__downloads li {
    padding: 0.5rem 0;
}
.product-detail__downloads a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
}
.product-detail__downloads a:hover {
    text-decoration: underline;
}

/* ================================================================
   IMAGE GALLERY
   ================================================================ */
.image-gallery__main {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1;
    border-radius: var(--card-radius);
    object-fit: contain;
}
.image-gallery__thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
    overflow-x: auto;
}
.image-gallery__thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--transition-fast);
}
.image-gallery__thumb:hover {
    border-color: var(--sidebar-active-border);
}
.image-gallery__thumb--active {
    border-color: var(--sidebar-active-border);
}