/* ═══════════════════════════════════════════════════════════════════════════
   Product Section block — frontend styles
   Depends on the theme's .section-wrap, .section-header, .products-grid,
   .section-label, .section-title and .btn-primary rules already in style.css.
════════════════════════════════════════════════════════════════════════════ */

/* ── Custom properties on the section ─────────────────────────────────────
   --ps-accent: set inline per-block (default: brand red)                   */

/* ── Background variants ──────────────────────────────────────────────────
   .ps-bg-dark / light match the existing .content-bg / .section-alt rules.
   .ps-bg-white and .ps-bg-accent are new.                                   */

.ps-block {
    position: relative;
    z-index: 2;
    --bg-opacity: 100%;
}

.ps-block.ps-bg-dark {
    background: var(--color-bg, #0F0F0F);
    background: color-mix(in srgb, var(--color-bg, #0F0F0F) var(--bg-opacity, 100%), transparent);
    color: var(--color-text, #F0F0F0);
}

.ps-block.ps-bg-light {
    background: var(--color-surface, #1A1A1A);
    background: color-mix(in srgb, var(--color-surface, #1A1A1A) var(--bg-opacity, 100%), transparent);
    color: var(--color-text, #F0F0F0);
    border-top: 1px solid var(--color-border, #2A2A2A);
    border-bottom: 1px solid var(--color-border, #2A2A2A);
}

.ps-block.ps-bg-white {
    background: #ffffff;
    background: color-mix(in srgb, #ffffff var(--bg-opacity, 100%), transparent);
    color: #111111;
}

.ps-block.ps-bg-white .section-label {
    color: var(--ps-accent, #E8001D);
}

.ps-block.ps-bg-white .section-title,
.ps-block.ps-bg-white .ps-description,
.ps-block.ps-bg-white .section-link {
    color: #111111;
}

.ps-block.ps-bg-white .product-card {
    background: #f8f8f8;
    border-color: #e0e0e0;
}

.ps-block.ps-bg-accent {
    background: color-mix(in srgb, var(--ps-accent, #E8001D) var(--bg-opacity, 100%), #0f0f0f);
    color: var(--color-text, #F0F0F0);
    border-top: 1px solid color-mix(in srgb, var(--ps-accent, #E8001D) 30%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--ps-accent, #E8001D) 30%, transparent);
}

/* ── Section widths ───────────────────────────────────────────────────────
   .ps-width-contained → 1280px, .ps-width-wide → 1600px, .ps-width-full → 100% */

.ps-block.ps-width-wide .section-wrap {
    max-width: 1600px;
}

.ps-block.ps-width-full .section-wrap {
    max-width: none;
}

/* ── Description text ─────────────────────────────────────────────────────  */

.ps-block .ps-description {
    color: var(--color-muted, #888888);
    font-size: 1rem;
    line-height: 1.6;
    margin: 12px 0 0;
    max-width: 680px;
}

/* ── 5-column grid support (new, theme only has 1–4) ─────────────────────── */

.products-grid.cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* ── Image + content split layouts ───────────────────────────────────────── */

/* Shared split wrapper */
.ps-block.ps-has-image .ps-split {
    display: grid;
    align-items: center;
    gap: 0;
}

/* LEFT: image left, content right (contained) */
.ps-block.ps-layout-left .ps-split {
    grid-template-columns: 1fr 1fr;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

/* RIGHT: content left, image right (contained) */
.ps-block.ps-layout-right .ps-split {
    grid-template-columns: 1fr 1fr;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
.ps-block.ps-layout-right .ps-split__img  { order: 2; }
.ps-block.ps-layout-right .ps-split__content { order: 1; }

/* FULL-LEFT: image from browser left edge to 50%, content right */
.ps-block.ps-layout-full_left .ps-split {
    grid-template-columns: 50% 50%;
    width: 100%;
}

/* FULL-RIGHT: content on left 50%, image from center to browser right edge */
.ps-block.ps-layout-full_right .ps-split {
    grid-template-columns: 50% 50%;
    width: 100%;
}
.ps-block.ps-layout-full_right .ps-split__img     { order: 2; }
.ps-block.ps-layout-full_right .ps-split__content { order: 1; }

/* Image column */
.ps-split__img {
    position: relative;
    min-height: 360px;
    overflow: hidden;
}

.ps-split__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ps-split__img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 360px;
    background: var(--color-surface, #1A1A1A);
    border: 2px dashed var(--color-border, #2A2A2A);
}

/* Content column padding */
.ps-split__content-inner {
    padding: 60px 60px 60px 52px;
    max-width: 620px;
}

.ps-block.ps-layout-right .ps-split__content-inner,
.ps-block.ps-layout-full_right .ps-split__content-inner {
    padding: 60px 52px 60px 60px;
}

.ps-split__content-inner .section-label {
    color: var(--ps-accent, #E8001D);
}

.ps-block .ps-cta {
    display: inline-block;
    margin-top: 24px;
}

/* ── Split content text alignment ─────────────────────────────────────────── */

.ps-split__content-inner.align-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.ps-split__content-inner.align-right {
    text-align: right;
    margin-left: auto;
    margin-right: 0;
}

/* Buttons follow text-align naturally (inline-block); description max-width
   stays but centres/right-aligns within the column on non-left alignments. */
.ps-split__content-inner.align-center .ps-description,
.ps-split__content-inner.align-right  .ps-description {
    max-width: none;
}

/* Products area spacing below the split */
.ps-block.ps-has-image .section-wrap {
    padding-top: 48px;
}

/* ── Filter area ──────────────────────────────────────────────────────────── */

.ps-block .ps-filters {
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--color-surface, #1A1A1A);
    border: 1px solid var(--color-border, #2A2A2A);
    border-radius: var(--radius-lg, 12px);
}

.ps-block.ps-bg-white .ps-filters {
    background: #f8f8f8;
    border-color: #e0e0e0;
}

.ps-filters__notice {
    color: var(--color-muted, #888);
    font-size: 0.875rem;
    margin: 0;
}

/* ── "View all" row ───────────────────────────────────────────────────────── */

.ps-view-all-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
    .products-grid.cols-5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .ps-block.ps-layout-left .ps-split,
    .ps-block.ps-layout-right .ps-split {
        grid-template-columns: 1fr;
    }

    .ps-block.ps-layout-right .ps-split__img     { order: 0; }
    .ps-block.ps-layout-right .ps-split__content { order: 0; }

    .ps-block.ps-layout-full_left .ps-split,
    .ps-block.ps-layout-full_right .ps-split {
        grid-template-columns: 1fr;
    }

    .ps-block.ps-layout-full_right .ps-split__img     { order: 0; }
    .ps-block.ps-layout-full_right .ps-split__content { order: 0; }

    .ps-split__content-inner,
    .ps-block.ps-layout-right .ps-split__content-inner,
    .ps-block.ps-layout-full_right .ps-split__content-inner {
        padding: 36px 32px;
        max-width: none;
    }

    .ps-split__img {
        min-height: 260px;
    }
}

/* Mobile ≤ 640px */
@media (max-width: 640px) {
    .products-grid.cols-5 {
        grid-template-columns: 1fr;
    }

    .ps-split__content-inner,
    .ps-block.ps-layout-right .ps-split__content-inner,
    .ps-block.ps-layout-full_right .ps-split__content-inner {
        padding: 24px 20px;
    }

    .ps-split__img {
        min-height: 200px;
    }
}