/*
Pinjin v4.0.4
ONLY TWO CHANGES:
1. smaller product gallery on single product pages
2. true follow-scroll left product category panel
*/

/* ==========================================================
   1) Product single: gallery a little smaller, top still aligned.
   ========================================================== */
.pj403-single-hero,
.pj396-product-top {
    display: grid !important;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr) !important;
    gap: 34px !important;
    align-items: start !important;
}

.pj403-gallery-col,
.pj396-gallery-column,
.pj403-summary-col,
.pj396-summary-column {
    min-width: 0 !important;
    align-self: start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Keep gallery and thumbnails aligned to the same width. */
.pj396-product-gallery,
[data-pj396-gallery] {
    width: 100% !important;
    max-width: 100% !important;
}

.pj396-gallery-main,
[data-pj396-gallery] .pj396-gallery-main {
    width: 100% !important;
    max-width: 100% !important;
}

.pj396-thumbs,
[data-pj396-gallery] .pj396-thumbs {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================
   2) True sticky left category panel.
   These selectors intentionally beat the old v4.0.1/v4.0.3 rules.
   JS also writes inline !important values so older patches cannot override it.
   ========================================================== */
.pj404-sticky-column {
    position: relative !important;
    align-self: start !important;
    overflow: visible !important;
}

.pj404-sticky-panel {
    box-sizing: border-box !important;
    transform: none !important;
    margin-top: 0 !important;
    will-change: top, left, width !important;
}

.pj404-sticky-panel.pj404-is-fixed {
    position: fixed !important;
}

.pj404-sticky-panel.pj404-is-bottom {
    position: absolute !important;
}

.pj396-products-layout,
.pj396-products-wrap,
.pj396-products-page {
    overflow: visible !important;
}

/* Site editor: never force sticky behavior while editing. */
.editor-styles-wrapper .pj404-sticky-panel {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Tablet */
@media (min-width: 701px) and (max-width: 1024px) {
    .pj403-single-hero,
    .pj396-product-top {
        grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr) !important;
        gap: 26px !important;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .pj403-single-hero,
    .pj396-product-top {
        display: block !important;
    }

    .pj404-sticky-panel {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
    }
}