/* ==========================================================================
   HomePezzo Section Color System
   Enqueued by homepezzo-core plugin.
   Cards stay white. Colors appear only as controlled accents.
   ========================================================================== */

/* ── Global Brand Variables ──────────────────────────────────────────────── */

:root {
    --hp-blue:          #2563EB;
    --hp-brown:         #8B5E3C;
    --hp-navy:          #0F172A;
    --hp-gray-border:   #E2E8F0;
    --hp-gray-text:     #64748B;
    --hp-bg:            #FFFFFF;
    --hp-radius-card:   10px;
    --hp-radius-badge:  999px;
    --hp-shadow-card:   0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ── Section Accent Variables ────────────────────────────────────────────── */

.hp-section-interior {
    --hp-accent:        #2563EB;
    --hp-accent-soft:   #EFF6FF;
    --hp-accent-border: #BFDBFE;
}

.hp-section-exterior {
    --hp-accent:        #8B5E3C;
    --hp-accent-soft:   #FDF6EE;
    --hp-accent-border: #D4B896;
}

.hp-section-green-power {
    --hp-accent:        #22C55E;
    --hp-accent-soft:   #F0FDF4;
    --hp-accent-border: #86EFAC;
}

.hp-section-plumbing-fixtures {
    --hp-accent:        #F59E0B;
    --hp-accent-soft:   #FFFBEB;
    --hp-accent-border: #FCD34D;
}

/* ── Base Card ───────────────────────────────────────────────────────────── */

.hp-card {
    background:    var(--hp-bg);
    border:        1px solid var(--hp-gray-border);
    border-radius: var(--hp-radius-card);
    box-shadow:    var(--hp-shadow-card);
    overflow:      hidden;
    transition:    box-shadow 0.2s ease, border-color 0.2s ease;
}

.hp-card:hover {
    box-shadow:   0 4px 12px rgba(0, 0, 0, 0.10);
    border-color: var(--hp-accent, var(--hp-gray-border));
}

/* ── Product Card ────────────────────────────────────────────────────────── */

.hp-card-product {
    display:        flex;
    flex-direction: column;
}

.hp-card-product .hp-card-image {
    width:       100%;
    aspect-ratio: 4 / 3;
    object-fit:  cover;
    display:     block;
}

.hp-card-product .hp-card-body {
    padding: 14px 16px 16px;
    flex:    1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Vendor Card ─────────────────────────────────────────────────────────── */

.hp-card-vendor {
    display:        flex;
    flex-direction: column;
}

.hp-card-vendor .hp-card-image {
    width:        100%;
    aspect-ratio: 16 / 9;
    object-fit:   cover;
    display:      block;
}

.hp-card-vendor .hp-card-body {
    padding: 14px 16px 16px;
    flex:    1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ── Accent Top Border ───────────────────────────────────────────────────── */

.hp-card--accent-top {
    border-top: 3px solid var(--hp-accent, var(--hp-gray-border));
}

/* ── Badge ───────────────────────────────────────────────────────────────── */

.hp-badge {
    display:        inline-block;
    padding:        3px 10px;
    border-radius:  var(--hp-radius-badge);
    font-size:      0.72rem;
    font-weight:    600;
    line-height:    1.4;
    letter-spacing: 0.01em;
    white-space:    nowrap;
}

/* Solid fill — used on product cards and listing archive */
.hp-badge--accent {
    background-color: var(--hp-accent);
    color:            #ffffff;
}

/* Soft tint — used on category chips and filter tabs */
.hp-badge--accent-soft {
    background-color: var(--hp-accent-soft);
    color:            var(--hp-accent);
    border:           1px solid var(--hp-accent-border);
}

/* ── Section Label ───────────────────────────────────────────────────────── */

.hp-section-label {
    font-size:      0.75rem;
    font-weight:    600;
    color:          var(--hp-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height:    1;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

/* Primary — always brand blue, not section-driven */
.hp-btn-primary {
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
    padding:          10px 20px;
    background-color: var(--hp-blue);
    color:            #ffffff;
    border:           none;
    border-radius:    8px;
    font-size:        0.9rem;
    font-weight:      600;
    cursor:           pointer;
    text-decoration:  none;
    transition:       background-color 0.15s ease;
}

.hp-btn-primary:hover {
    background-color: #1D4ED8;
}

/* Outline — always brand brown, not section-driven */
.hp-btn-outline {
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
    padding:          9px 20px;
    background-color: transparent;
    color:            var(--hp-brown);
    border:           1.5px solid var(--hp-brown);
    border-radius:    8px;
    font-size:        0.9rem;
    font-weight:      600;
    cursor:           pointer;
    text-decoration:  none;
    transition:       background-color 0.15s ease, color 0.15s ease;
}

.hp-btn-outline:hover {
    background-color: var(--hp-brown);
    color:            #ffffff;
}

/* ── Filter / Archive Tab ────────────────────────────────────────────────── */

.hp-filter-tab.is-active {
    color:         var(--hp-accent);
    border-bottom: 2px solid var(--hp-accent);
    font-weight:   600;
}