/* ============================================
   L&K ELECTRICAL - BLOCK THEME LAYOUT
   Only the bits specific to block templates. Shared component styling
   stays in catalogue.css / landing.css, which are byte-identical to
   the Astra child's copies.
   ============================================ */

/* ---- Catalogue two-column layout ---------------------------- */

.lk-catalogue-col-side .lk-catalogue-sidebar-part {
    position: sticky;
    top: var(--lk-space-lg);
}

/* Columns block does not stack until 781px by default; the sidebar
   is more useful above the grid on tablet than squeezed beside it. */
@media (max-width: 900px) {
    .wp-block-columns.lk-catalogue-layout {
        flex-wrap: wrap !important;
    }

    .lk-catalogue-col-side,
    .lk-catalogue-col-main {
        flex-basis: 100% !important;
    }

    .lk-catalogue-col-side .lk-catalogue-sidebar-part {
        position: static;
    }
}


/* ---- Product Collection block cards ------------------------- */

.wp-block-woocommerce-product-template li.wc-block-product {
    background: var(--lk-bg-panel);
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius-md);
    padding: var(--lk-space-md);
    transition: border-color var(--lk-transition), transform var(--lk-transition);
}

.wp-block-woocommerce-product-template li.wc-block-product:hover {
    border-color: var(--lk-primary);
    transform: translateY(-2px);
}

.wp-block-woocommerce-product-template li.wc-block-product img {
    background: #fff;               /* product shots are cut-outs on white */
    border-radius: var(--lk-radius-sm);
}

.wp-block-woocommerce-product-template .wp-block-post-title a {
    color: var(--lk-text-light);
    text-decoration: none;
}

.wp-block-woocommerce-product-template .wp-block-post-title a:hover {
    color: var(--lk-accent-bright);
}

/* SKU is useful for trade customers - keep it visible but quiet */
.wc-block-components-product-sku {
    font-size: 0.75rem;
    color: var(--lk-text-dim);
}


/* ---- Archive heading ---------------------------------------- */

.wp-block-query-title {
    font-family: var(--lk-font-heading);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--lk-text-light);
    text-transform: uppercase;
    line-height: 1.1;
    padding-bottom: var(--lk-space-sm);
    border-bottom: 2px solid var(--lk-primary);
}

.wp-block-term-description {
    color: var(--lk-text-dim);
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 70ch;
}

/* Result count / sorting bar */
.woocommerce-result-count,
.wc-block-product-sort-select,
.woocommerce-ordering select {
    color: var(--lk-text-dim);
    font-size: 0.85rem;
}


/* ---- Product grid ------------------------------------------
   The Product Collection block sets its own column count; these just make
   sure the cards breathe and drop to fewer columns on narrow screens. */

.wc-block-product-template {
    gap: var(--lk-space-lg) !important;
}

@media (max-width: 1200px) {
    .wc-block-product-template.is-flex-container.is-flex-container.columns-4 > li {
        flex-basis: calc(33.33% - var(--lk-space-lg)) !important;
        max-width: calc(33.33% - var(--lk-space-lg)) !important;
    }
}

@media (max-width: 782px) {
    .wc-block-product-template.is-flex-container.is-flex-container.columns-4 > li {
        flex-basis: calc(50% - var(--lk-space-lg)) !important;
        max-width: calc(50% - var(--lk-space-lg)) !important;
    }
}


/* ---- Pagination --------------------------------------------- */

.wp-block-query-pagination {
    margin-top: var(--lk-space-xl);
    gap: var(--lk-space-sm);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius-sm);
    text-decoration: none;
}

.wp-block-query-pagination .current {
    background: var(--lk-primary);
    color: var(--lk-text-light);
    border-color: var(--lk-primary);
}