/* ============================================
   Product detail page — Phase 3 layout
   ============================================
   Layout-specific CSS for the /p/:productId route. Page-scoped classes
   are prefixed .pd- so they don't collide with the .ui-* component
   primitives in styles.css.

   Density modes:
     pd-hero, pd-marquee   -> editorial (Linear-grade spacious)
     pd-listings, pd-specs -> dense (PCPartPicker-grade)
*/

/* ---- Container + layout ---- */

.pd-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--content-gutter) var(--space-16);
}

.pd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin: var(--space-5) 0 var(--space-6);
}
.pd-breadcrumb a {
    color: var(--accent-primary);
    text-decoration: none;
}
.pd-breadcrumb a:hover { text-decoration: underline; }
.pd-breadcrumb .crumb-sep { color: var(--text-tertiary); }
.pd-breadcrumb .crumb-current {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

/* ============================================
   HERO — editorial mode
   ============================================ */

.pd-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-10);
    align-items: start;
    margin-bottom: var(--space-16);
}
@media (max-width: 900px) {
    .pd-hero { grid-template-columns: 1fr; gap: var(--space-6); }
}

.pd-hero-image {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}
.pd-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
}
.pd-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 120px;
    color: var(--text-tertiary);
}

.pd-hero-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-2);
}
.pd-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin: 0;
    color: var(--text-primary);
}
.pd-subtitle {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
}

.pd-price-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.pd-price-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.pd-buy-cta {
    flex-shrink: 0;
}

/* Hero insights row: sparkline + (lowest-90d, best NEW/USED, updated). */
.pd-price-insights {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-5);
    align-items: center;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}
@media (max-width: 720px) {
    .pd-price-insights { grid-template-columns: 1fr; }
}
.pd-sparkline {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    display: flex;
    align-items: center;
    color: var(--accent-primary);
}
.pd-sparkline svg {
    display: block;
    width: 100%;
    height: auto;
}
.pd-price-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.pd-meta-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
}
.pd-meta-label {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-tertiary);
    min-width: 80px;
}
.pd-meta-value {
    font-weight: var(--font-weight-semi);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.pd-meta-sub {
    color: var(--text-tertiary);
    font-weight: var(--font-weight-regular);
}

.pd-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ============================================
   MARQUEE STATS — between hero and listings
   ============================================ */

.pd-marquee {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-16);
}
.pd-marquee-stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    gap: var(--space-2);
}
.pd-marquee-stat .ui-stat-value {
    font-size: var(--font-size-2xl);
}

/* ============================================
   SECTIONS
   ============================================ */

.pd-section {
    margin-bottom: var(--space-16);
}
.pd-secondary {
    color: var(--text-secondary);
}

/* ============================================
   WHERE TO BUY — dense table
   ============================================ */

.pd-listings {
    padding: 0;
    overflow: hidden;
}
.pd-listings-table {
    width: 100%;
    border-collapse: collapse;
}
.pd-listings-table th,
.pd-listings-table td {
    padding: var(--space-3) var(--space-5);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}
.pd-listings-table thead th {
    background: var(--bg-tertiary);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-tertiary);
}
.pd-listings-table tbody tr:last-child td { border-bottom: none; }
.pd-listings-table .pd-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pd-listing-best {
    background: rgba(74, 124, 255, 0.06);
}
.pd-price-cell {
    font-weight: var(--font-weight-bold);
    color: var(--accent-primary);
    font-size: var(--font-size-md);
}
.pd-updated {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ============================================
   SPEC SHEET — dense, two-column key/value
   ============================================ */

.pd-specs-card {
    padding: var(--space-3) var(--space-5);
}
.pd-specs {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* row gap 0 (rows have their own border separator), column gap big
       so the value of column 1 doesn't run into the label of column 2 */
    column-gap: var(--space-10);
    row-gap: 0;
}
@media (max-width: 720px) {
    .pd-specs { grid-template-columns: 1fr; column-gap: 0; }
}
.pd-spec-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.6fr) 1fr;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-color);
    min-width: 0;
}
/* Strip the bottom border on the visual last row of each column. Grid
   flows row-by-row, so for an even count the last two items are the
   bottom of cols 1 and 2; for an odd count the last item is bottom of
   col 1 only. We always nuke the last child; the penultimate is also
   the bottom of col 2 whenever the count is even — harmless when odd
   because the second-to-last is mid-column on row N-1 and still looks
   fine without its bottom border. */
.pd-spec-row:last-child,
.pd-spec-row:nth-last-child(2) {
    border-bottom: none;
}
.pd-spec-label {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}
.pd-spec-unit {
    color: var(--text-tertiary);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-xs);
}
.pd-spec-value {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin: 0;
    text-align: right;
    word-break: break-word;
}

/* Marquee fields rendered inside the full spec sheet get bolder treatment
   so the spec list isn't visually flat — the buyer's eye lands on the
   specs the schema author thinks matter most. */
.pd-spec-row-featured .pd-spec-label {
    color: var(--text-primary);
    font-weight: var(--font-weight-semi);
}
.pd-spec-row-featured .pd-spec-value {
    color: var(--accent-primary);
    font-weight: var(--font-weight-bold);
}

/* Grouped spec sections — each is a <details> with a collapsible
   summary header. First group is rendered with the `open` attribute. */
.pd-specs-group {
    padding: 0;
    margin-bottom: var(--space-3);
    overflow: hidden;
}
.pd-specs-group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semi);
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background var(--transition-fast);
}
.pd-specs-group-summary::-webkit-details-marker { display: none; }
.pd-specs-group-summary::before {
    content: '▸';
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    transition: transform var(--transition-fast);
    display: inline-block;
    margin-right: var(--space-2);
}
.pd-specs-group[open] .pd-specs-group-summary::before {
    transform: rotate(90deg);
}
.pd-specs-group[open] .pd-specs-group-summary {
    border-bottom: 1px solid var(--border-color);
}
.pd-specs-group-summary:hover {
    background: var(--bg-tertiary);
}
.pd-specs-group-label {
    flex: 1;
}
.pd-specs-group-count {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    padding: 2px var(--space-2);
    border-radius: 999px;
    font-weight: var(--font-weight-regular);
}
.pd-specs-group .pd-specs {
    padding: var(--space-3) var(--space-5);
}

/* ============================================
   PRICE HISTORY chart
   ============================================ */

.pd-chart-card {
    padding: var(--space-5);
    color: var(--text-secondary);
}
.pd-chart-card svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
}

/* ============================================
   RELATED PRODUCTS — horizontal rail
   ============================================ */

.pd-related-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 220px);
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: var(--space-3);
}
.pd-related-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-decoration: none;
}
.pd-related-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}
.pd-related-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-3xl);
    color: var(--text-tertiary);
}
.pd-related-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pd-related-meta {
    font-size: var(--font-size-2xs);
    color: var(--text-tertiary);
}

/* ============================================
   ADMIN: add-listing form (gated)
   ============================================ */

.pd-admin-add {
    border-style: dashed;
}
.pd-admin-add summary {
    cursor: pointer;
    padding: var(--space-3) 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semi);
    color: var(--text-secondary);
    list-style: none;
}
.pd-admin-add summary::-webkit-details-marker { display: none; }
.pd-admin-add[open] summary {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}
.pd-admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.pd-admin-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-3);
}
@media (max-width: 600px) {
    .pd-admin-grid { grid-template-columns: 1fr; }
}
.pd-admin-form .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.pd-admin-form .field-label {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-tertiary);
}
.pd-admin-form input,
.pd-admin-form select {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
}
.pd-admin-form input:focus-visible,
.pd-admin-form select:focus-visible {
    outline: none;
    border-color: var(--accent-primary);
}