/* =====================================================================
   SHIM-ME Hub — Product Detail Page (Part.html design) — v0.5.6
   Scope: body.single-product   (enqueued via is_product() condition)

   Ported directly from Claude-Design/styles/part.css.
   Uses --shim-* tokens from shim-global-tokens.css.
   Class prefix: .shim-pdp__*

   Sections:
     1. Hide native WooCommerce variation dropdown
     2. Part ID badge
     3. Price-by-size grid
     4. Compatible-with chips
     5. Spec table
     6. Assembly position diagram
     7. Bundle upsell banner
     8. Shipping / returns meta rows
     9. Responsive
   ===================================================================== */

/* === 1. HIDE NATIVE VARIATION DROPDOWN ============================== */
/*
   We render our own price grid (class-shim-hub-product-page.php).
   The native <table.variations> is kept in the DOM so WooCommerce's
   variation_form.js can still update price / stock / add-to-cart state
   — but we make it visually invisible and collapse it to zero height.
*/
body.single-product .summary .variations_form table.variations {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/*
   WooCommerce displays a "Variation price" line inside single_variation_wrap
   before the qty/button row. We already show prices in the grid, so hide it.
*/
body.single-product .summary .single_variation_wrap .woocommerce-variation.single-variation {
    display: none !important;
}

/* === 1b. BUY BOX SYSTEM CRUMB ("SHIM-ME SYSTEM / PT-01 · BASE") ==== */

.shim-pdp__sys-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.shim-pdp__sys-crumb a {
    color: var(--shim-text-dim) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.shim-pdp__sys-crumb a:hover {
    color: var(--shim-text) !important;
}

.shim-pdp__sys-crumb__sep {
    font-family: var(--shim-mono) !important;
    font-size: 10px !important;
    color: var(--shim-text-mute) !important;
    letter-spacing: 0.16em;
}

.shim-pdp__sys-crumb__current {
    font-family: var(--shim-mono) !important;
    font-size: 10px !important;
    color: var(--shim-red) !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* === 2. PART ID BADGE =============================================== */

.shim-pdp__badge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}

.shim-pdp__part-id {
    display: inline-block;
    font-family: var(--shim-mono) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--shim-red) !important;
    background: rgba(227, 29, 30, 0.1);
    border: 1px solid rgba(227, 29, 30, 0.4);
    padding: 4px 9px;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

/* === 3. PRICE-BY-SIZE GRID ========================================== */

.shim-pdp__price-grid {
    border: 1px solid var(--shim-line);
    background: var(--shim-bg-3);
    margin-bottom: 24px;
}

.shim-pdp__price-grid-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--shim-line);
    background: var(--shim-bg-2);
}

.shim-pdp__mono {
    font-family: var(--shim-mono) !important;
    font-size: 10px !important;
    color: var(--shim-text-mute) !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.shim-pdp__price-selected {
    color: var(--shim-red) !important;
    font-size: 11px !important;
}

.shim-pdp__price-cells {
    display: grid;
    /* Columns set dynamically from data-cols attr via JS;
       default 5 works for SHIM-ME (2"–6"). */
    grid-template-columns: repeat(5, 1fr);
}

/* Override column count for products with fewer/more sizes */
.shim-pdp__price-grid[data-cols="2"] .shim-pdp__price-cells { grid-template-columns: repeat(2,1fr); }
.shim-pdp__price-grid[data-cols="3"] .shim-pdp__price-cells { grid-template-columns: repeat(3,1fr); }
.shim-pdp__price-grid[data-cols="4"] .shim-pdp__price-cells { grid-template-columns: repeat(4,1fr); }
.shim-pdp__price-grid[data-cols="6"] .shim-pdp__price-cells { grid-template-columns: repeat(6,1fr); }

.shim-pdp__price-cell {
    padding: 18px 14px;
    border-right: 1px solid var(--shim-line);
    border-top: none;
    border-bottom: none;
    border-left: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: var(--shim-body) !important;
    color: var(--shim-text) !important;
}

.shim-pdp__price-cell:last-child {
    border-right: none;
}

.shim-pdp__price-cell:hover {
    background: var(--shim-bg-2);
}

.shim-pdp__price-cell.is-on {
    background: var(--shim-red) !important;
}

.shim-pdp__price-cell:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.shim-pdp__price-cell.is-on .shim-pdp__price-cell-sz,
.shim-pdp__price-cell.is-on .shim-pdp__price-cell-pr,
.shim-pdp__price-cell.is-on .shim-pdp__price-cell-wt {
    color: #fff !important;
}

.shim-pdp__price-cell-sz {
    font-family: var(--shim-mono) !important;
    font-weight: 600;
    font-size: 15px !important;
    color: var(--shim-text) !important;
    letter-spacing: 0.06em;
}

.shim-pdp__price-cell-pr {
    font-family: var(--shim-display) !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    color: var(--shim-text) !important;
    line-height: 1;
}

/* Hides WooCommerce's default currency symbol styling inside the grid */
.shim-pdp__price-cell-pr .woocommerce-Price-currencySymbol,
.shim-pdp__price-cell-pr bdi {
    font-family: var(--shim-display) !important;
    font-weight: 700 !important;
    font-size: inherit !important;
    color: inherit !important;
}

.shim-pdp__price-cell.is-on .shim-pdp__price-cell-pr .woocommerce-Price-currencySymbol,
.shim-pdp__price-cell.is-on .shim-pdp__price-cell-pr bdi {
    color: #fff !important;
}

.shim-pdp__price-cell-wt {
    font-family: var(--shim-mono) !important;
    font-size: 10px !important;
    color: var(--shim-text-mute) !important;
    letter-spacing: 0.1em;
    line-height: 1.2;
}

.shim-pdp__price-cell-oos {
    font-family: var(--shim-mono) !important;
    font-size: 9px !important;
    color: var(--shim-red) !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* === 4. COMPATIBLE-WITH CHIPS ======================================= */

.shim-pdp__compat {
    margin-top: 0;
    margin-bottom: 24px;
    border: 1px solid var(--shim-line);
    background: var(--shim-bg-3);
    padding: 14px 18px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.shim-pdp__compat-lbl {
    font-family: var(--shim-mono) !important;
    font-size: 10px !important;
    color: var(--shim-red) !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}

.shim-pdp__compat-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.shim-pdp__compat-chips span {
    font-family: var(--shim-mono) !important;
    font-size: 11px !important;
    padding: 4px 9px;
    border: 1px solid var(--shim-line-2);
    color: var(--shim-text) !important;
    letter-spacing: 0.06em;
}

/* === 5. SPEC TABLE ================================================== */

.shim-pdp__specs {
    border-top: 1px solid var(--shim-line);
    margin: 24px 0;
}

.shim-pdp__spec-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 12px 16px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--shim-line);
    font-size: 13px;
}

.shim-pdp__spec-row .shim-pdp__mono {
    font-size: 10px !important;
    color: var(--shim-text-mute) !important;
}

.shim-pdp__spec-row b {
    font-family: var(--shim-display) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--shim-text) !important;
    text-transform: uppercase;
}

.shim-pdp__spec-row em {
    font-style: normal;
    font-family: var(--shim-mono) !important;
    font-size: 10px !important;
    color: var(--shim-text-mute) !important;
    letter-spacing: 0.1em;
    text-align: right;
}

/* Monospace SKU value */
.shim-pdp__spec-val-mono {
    font-family: var(--shim-mono) !important;
    font-size: 13px !important;
    letter-spacing: 0.06em;
}

/* === 6. ASSEMBLY POSITION DIAGRAM =================================== */
/*
   The user pastes HTML into the _shim_assembly_html meta field.
   These classes match what's described in Part.html's .position section.
   Add them to the pasted HTML to get the styled layer stack.
*/

.shim-pdp__assembly {
    margin: 0 0 24px;
}

/* Convenience: expose the .position* classes from Part.html so copy/paste works */
.shim-pdp__assembly .position__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.shim-pdp__assembly .position__head h4 {
    font-family: var(--shim-display) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-transform: uppercase;
    color: var(--shim-text) !important;
    margin: 0;
}

.shim-pdp__assembly .position__head .shim-pdp__mono,
.shim-pdp__assembly .position__head span {
    font-family: var(--shim-mono) !important;
    font-size: 10px !important;
    color: var(--shim-red) !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.shim-pdp__assembly .position__diagram {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shim-pdp__assembly .position__layer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid var(--shim-line);
    background: var(--shim-bg-3);
    font-family: var(--shim-mono) !important;
    font-size: 11px !important;
    color: var(--shim-text-mute) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.shim-pdp__assembly .position__layer span:last-child {
    font-size: 9px !important;
    color: var(--shim-text-mute) !important;
    letter-spacing: 0.14em;
}

/* Active layer (the part being purchased) */
.shim-pdp__assembly .position__layer.is-this {
    border-color: var(--shim-red);
    background: rgba(227, 29, 30, 0.08);
    opacity: 1;
    color: var(--shim-text) !important;
}

.shim-pdp__assembly .position__layer.is-this span:last-child {
    color: var(--shim-red) !important;
}

/* Layer-type accent colors on the left edge */
.shim-pdp__assembly .position__layer--cap   { border-left: 3px solid #4a5568; }
.shim-pdp__assembly .position__layer--ext   { border-left: 3px solid #718096; }
.shim-pdp__assembly .position__layer--tb    { border-left: 3px solid #68d391; }
.shim-pdp__assembly .position__layer--base  { border-left: 3px solid var(--shim-red); }
.shim-pdp__assembly .position__layer--wdg   { border-left: 3px solid #f6ad55; }

/* === 7. BUNDLE UPSELL BANNER ======================================== */

.shim-pdp__bundle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border: 1px solid var(--shim-line-2);
    background: var(--shim-bg-2);
    margin: 0 0 20px;
}

.shim-pdp__bundle-l {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shim-pdp__bundle-l .shim-pdp__mono {
    font-size: 10px !important;
    color: var(--shim-red) !important;
    letter-spacing: 0.18em;
    display: block;
    margin-bottom: 2px;
}

.shim-pdp__bundle-l span {
    font-size: 14px;
    color: var(--shim-text-dim);
    font-family: var(--shim-body) !important;
}

.shim-pdp__btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid var(--shim-line-2);
    background: transparent;
    color: var(--shim-text) !important;
    font-family: var(--shim-body) !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.shim-pdp__btn-ghost:hover {
    border-color: var(--shim-red);
    color: var(--shim-red) !important;
}

/* === 8. SHIPPING / RETURNS META ROWS ================================ */

.shim-pdp__meta-rows {
    border-top: 1px solid var(--shim-line);
    margin-top: 4px;
}

.shim-pdp__meta-row {
    display: flex;
    gap: 20px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--shim-line);
    font-size: 13px;
}

.shim-pdp__meta-row .shim-pdp__mono {
    font-size: 10px !important;
    color: var(--shim-text-mute) !important;
    letter-spacing: 0.18em;
    width: 88px;
    flex-shrink: 0;
}

.shim-pdp__meta-row > span:last-child {
    color: var(--shim-text-dim);
    font-family: var(--shim-body) !important;
    font-size: 13px !important;
}

/* === 9. RESPONSIVE ================================================== */

@media (max-width: 680px) {
    .shim-pdp__price-cells {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .shim-pdp__price-cell {
        padding: 14px 10px;
    }

    .shim-pdp__price-cell-pr {
        font-size: 17px !important;
    }

    .shim-pdp__spec-row {
        grid-template-columns: 90px 1fr;
    }

    .shim-pdp__spec-row em {
        grid-column: 2;
        text-align: left;
    }

    .shim-pdp__bundle {
        flex-direction: column;
        align-items: flex-start;
    }

    .shim-pdp__compat {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 400px) {
    .shim-pdp__price-cells {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}