.produk-dir-hero { padding-top: 5.8rem; }
.produk-spa-host { margin-top: 1rem; }
.produk-spa-host .produk-dir-empty {
    margin-top: .8rem;
    border: 1px dashed rgba(46,37,32,.18);
    border-radius: 8px;
    background: #fff;
    color: var(--taupe);
    padding: .9rem;
}
@media (max-width: 768px) {
    .produk-dir-hero { padding-top: 4.8rem; }
}

.produk-dir-hero {
    padding-top: 4.9rem;
}
.produk-dir-hero .section-wrap {
    padding-top: clamp(2.4rem, 3.6vw, 3.2rem);
    padding-bottom: clamp(2.1rem, 3.4vw, 2.8rem);
}
.produk-dir-head {
    margin-bottom: .95rem;
}
.produk-dir-head.featured-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.produk-dir-head-copy {
    max-width: min(860px, 100%);
}
.produk-dir-head .section-subtitle {
    max-width: 780px;
}
.produk-dir-brand {
    margin-top: .36rem;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--taupe);
    font-weight: 600;
}
.produk-dir-tools {
    margin-top: .45rem;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 280px) minmax(200px, 240px) auto;
    gap: .8rem;
    align-items: end;
    padding: .88rem;
    border: 1px solid rgba(46,37,32,.1);
    border-radius: 10px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 12px 30px rgba(46,37,32,.08);
}
.produk-dir-tools .wa-input,
.produk-dir-tools .wa-select {
    width: 100%;
    border: 1px solid rgba(46,37,32,.14);
    background: #fff;
    border-radius: 6px;
    padding: .72rem .8rem;
    color: var(--espresso);
}
.produk-dir-tools .wa-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--taupe);
}
.produk-dir-tools .wa-btn-filter {
    height: 42px;
    border: 0;
    border-radius: 6px;
    padding: 0 1rem;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--espresso);
    color: var(--linen);
}
.produk-dir-count {
    margin-top: .95rem;
    color: var(--taupe);
    font-size: .84rem;
}
.produk-dir-meta {
    margin-top: .74rem;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    justify-content: space-between;
}
.produk-dir-filter-status {
    display: inline-flex;
    align-items: center;
    padding: .38rem .68rem;
    border-radius: 999px;
    border: 1px solid rgba(46,37,32,.14);
    background: rgba(255,255,255,.82);
    color: var(--taupe);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.produk-dir-filter-status strong {
    margin-left: .2rem;
    color: var(--espresso);
}
.produk-dir-compare-badge {
    margin-top: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(46,37,32,.16);
    background: rgba(255,255,255,.88);
    color: var(--espresso);
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.produk-dir-compare-badge a {
    color: var(--brass);
    text-decoration: none;
    font-weight: 600;
}
.produk-dir-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.produk-dir-empty {
    margin-top: 1.8rem;
    border: 1px dashed rgba(46,37,32,.18);
    border-radius: 8px;
    background: #fff;
    color: var(--taupe);
    padding: 1rem;
}
.produk-dir-pagination {
    margin-top: 1.8rem;
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
}
.produk-dir-pagination a,
.produk-dir-pagination span {
    min-width: 38px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(46,37,32,.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .65rem;
    font-size: .78rem;
    background: #fff;
}
.produk-dir-pagination .is-current {
    background: var(--espresso);
    border-color: var(--espresso);
    color: var(--linen);
}
.produk-dir-pagination-craft {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    flex-wrap: wrap;
}
.produk-dir-pagination-craft .page-indicator {
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--taupe);
}
.produk-dir-pagination-craft .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .42rem .95rem;
    border-radius: 999px;
    border: 1px solid rgba(46,37,32,.14);
    background: rgba(255,255,255,.9);
    color: var(--espresso);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.produk-dir-pagination-craft .page-link:hover {
    border-color: rgba(166,126,88,.65);
    color: var(--brass);
    transform: translateY(-1px);
}

body.page-produk-directory {
    --dir-panel-bg: rgba(255,255,255,.78);
    --dir-panel-border: rgba(46,37,32,.1);
    --dir-panel-shadow: 0 12px 30px rgba(46,37,32,.08);
    --dir-input-bg: #fff;
    --dir-input-border: rgba(46,37,32,.14);
    --dir-input-focus: color-mix(in srgb, var(--brass, #b8945f) 62%, #73a9dd 38%);
    --dir-text-soft: var(--taupe);
    --dir-badge-bg: rgba(255,255,255,.88);
    --dir-radius-md: 12px;
    --dir-radius-lg: 16px;
}

body.theme-homepage-digital.page-produk-directory,
body.theme-homepage-bold.page-produk-directory,
body.theme-homepage-craft.page-produk-directory {
    --dir-panel-bg: linear-gradient(140deg, rgba(255,255,255,.9), rgba(238,246,255,.84));
    --dir-panel-border: rgba(52, 84, 119, .2);
    --dir-panel-shadow: 0 16px 40px rgba(22, 47, 80, .16);
    --dir-input-bg: rgba(255,255,255,.95);
    --dir-input-border: rgba(58, 94, 134, .24);
    --dir-input-focus: #3f78b8;
    --dir-text-soft: rgba(24, 52, 85, .82);
    --dir-badge-bg: rgba(255,255,255,.92);
}

.produk-dir-head-copy {
    animation: produkDirFadeUp .45s ease both;
}

.produk-dir-head .section-tag {
    margin-bottom: .72rem;
    font-size: .72rem;
    letter-spacing: .12em;
    font-weight: 700;
}

.produk-dir-head .section-title {
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
    max-width: 24ch;
}

.produk-dir-head .section-subtitle {
    margin-top: .56rem;
    font-size: clamp(.9rem, 1.1vw, 1rem);
    line-height: 1.58;
    color: var(--dir-text-soft);
    font-weight: 500;
    max-width: 58ch;
}

.produk-dir-tools {
    border-color: var(--dir-panel-border);
    background: var(--dir-panel-bg);
    box-shadow: var(--dir-panel-shadow);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: produkDirFadeUp .52s ease both;
    animation-delay: .05s;
}

.produk-dir-tools .wa-label {
    color: var(--dir-text-soft);
}

.produk-dir-tools .wa-input,
.produk-dir-tools .wa-select {
    border-color: var(--dir-input-border);
    background: var(--dir-input-bg);
    border-radius: var(--dir-radius-md);
    padding: .82rem .92rem;
    color: color-mix(in srgb, var(--dir-text-soft) 75%, #132f4f 25%);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.produk-dir-tools .wa-input:hover,
.produk-dir-tools .wa-select:hover {
    border-color: color-mix(in srgb, var(--dir-input-focus) 44%, transparent);
}

.produk-dir-tools .wa-input:focus,
.produk-dir-tools .wa-select:focus {
    outline: none;
    border-color: var(--dir-input-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dir-input-focus) 28%, transparent);
}

.produk-dir-tools .wa-btn-filter {
    position: relative;
    overflow: hidden;
    border-radius: var(--dir-radius-md);
    min-width: 120px;
    font-weight: 700;
    background: linear-gradient(135deg, #21446c, #32679f);
    color: #fff;
    box-shadow: 0 12px 24px rgba(36, 76, 120, .2);
    transition: transform .2s ease, box-shadow .2s ease;
}

.produk-dir-tools .wa-btn-filter::after {
    display: none;
}

.produk-dir-tools .wa-btn-filter:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--dir-input-focus) 28%, transparent);
}

.produk-dir-tools .wa-btn-filter:hover::after {
    transform: translateX(560%) rotate(12deg);
}

.produk-mobile-filter-toggle {
    display: none;
}

.produk-dir-count {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    padding: .42rem .72rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--dir-panel-border) 80%, transparent);
    background: color-mix(in srgb, var(--dir-panel-bg) 90%, #ffffff 10%);
    color: color-mix(in srgb, var(--dir-text-soft) 82%, #112a45 18%);
    font-weight: 600;
}

.produk-dir-compare-badge {
    border-color: var(--dir-panel-border);
    background: var(--dir-badge-bg);
}

.produk-dir-empty {
    border-color: color-mix(in srgb, var(--dir-panel-border) 78%, transparent);
    background: color-mix(in srgb, var(--dir-panel-bg) 90%, #ffffff 10%);
    color: var(--dir-text-soft);
    border-radius: var(--dir-radius-lg);
    padding: 1.1rem 1.15rem;
}

.wa-filter-chips {
    margin-top: .68rem;
    gap: .45rem;
}

.wa-filter-chip {
    border-radius: 999px;
    border-color: var(--dir-panel-border);
    background: color-mix(in srgb, var(--dir-panel-bg) 88%, #ffffff 12%);
    color: var(--dir-text-soft);
}

.wa-filter-chip strong {
    color: color-mix(in srgb, var(--dir-text-soft) 60%, #ffffff 40%);
}

.produk-dir-grid .prod-card {
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease;
    min-height: 100%;
}

body.page-produk-directory .produk-dir-grid .prod-img {
    aspect-ratio: 1 / 1;
}

body.page-produk-directory .produk-dir-grid .prod-body {
    padding: .78rem .82rem .86rem;
}

body.page-produk-directory .produk-dir-grid .prod-cat {
    font-size: .63rem;
    letter-spacing: .09em;
}

body.page-produk-directory .produk-dir-grid .prod-name {
    margin-top: .28rem;
    font-size: .98rem;
    line-height: 1.3;
}

body.page-produk-directory .produk-dir-grid .prod-meta {
    margin-top: .56rem;
    padding-top: .5rem;
}

body.page-produk-directory .produk-dir-grid .prod-price {
    font-size: .9rem;
}

body.page-produk-directory .produk-dir-grid .prod-price small {
    font-size: .68rem;
}

@media (hover: hover) {
    .produk-dir-grid .prod-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 24px 44px color-mix(in srgb, var(--dir-input-focus) 18%, rgba(5, 12, 22, .42));
    }
}

@keyframes produkDirFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .produk-dir-head-copy,
    .produk-dir-tools,
    .produk-dir-tools .wa-btn-filter,
    .produk-dir-tools .wa-btn-filter::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}
@media (max-width: 1024px) {
    .produk-dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .produk-dir-tools {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 250px) minmax(170px, 220px) auto;
    }
}
@media (max-width: 768px) {
    .produk-dir-hero {
        padding-top: 4.35rem;
    }
    .produk-dir-hero .section-wrap {
        padding-top: 1.15rem;
        padding-bottom: 1.35rem;
    }
    .produk-dir-head {
        margin-bottom: .7rem;
        align-items: flex-start;
    }
    .produk-dir-tools {
        grid-template-columns: 1fr;
        gap: .7rem;
        padding: .75rem;
    }
    .produk-dir-meta {
        align-items: flex-start;
        flex-direction: column;
    }
    .produk-dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .produk-dir-head .section-title {
        margin-top: .32rem;
        font-size: clamp(1.15rem, 5.9vw, 1.52rem);
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .produk-dir-head .section-subtitle {
        margin-top: .38rem;
        font-size: .78rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .produk-dir-brand {
        margin-top: .24rem;
        font-size: .66rem;
        letter-spacing: .07em;
    }
    .produk-mobile-filter-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        margin-top: .4rem;
        padding: .5rem .82rem;
        min-height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(46,37,32,.16);
        background: rgba(255,255,255,.9);
        color: var(--espresso);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        box-shadow: 0 8px 18px rgba(46,37,32,.08);
    }
    .produk-mobile-filter-toggle::after {
        content: '▾';
        font-size: .72rem;
        line-height: 1;
        transition: transform .2s ease;
    }
    .produk-mobile-filter-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
    .produk-dir-tools {
        margin-top: .55rem;
        transition: max-height .25s ease, opacity .2s ease, transform .22s ease, margin-top .2s ease, padding .2s ease, border-color .2s ease;
    }
    .produk-dir-tools.is-mobile-collapsed {
        margin-top: .32rem;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-4px);
        pointer-events: none;
        padding-top: 0;
        padding-bottom: 0;
        border-color: transparent;
    }
    .produk-dir-meta {
        margin-top: .58rem;
    }
}
@media (max-width: 520px) {
    .produk-dir-grid { grid-template-columns: 1fr; }
}

/* ── Wishlist button — CSS global sudah di wastra.css ────────── */

/* ── Marketplace Desain — gaya chips & card specs ────────────── */
.mkt-hidden { display: none !important; }

.mkt-gaya-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .75rem 0 1.1rem;
    padding: .85rem 1.1rem;
    background: var(--ivory, #FAFCFF);
    border-radius: 12px;
    border: 1px solid rgba(28,54,100,.08);
}
.mkt-gaya-chip {
    display: inline-flex;
    align-items: center;
    padding: .38rem .9rem;
    border-radius: 999px;
    border: 1.5px solid rgba(28,54,100,.15);
    background: #fff;
    color: var(--espresso, #1C3664);
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}
.mkt-gaya-chip:hover {
    border-color: var(--brass, #CC2B35);
    color: var(--brass, #CC2B35);
    background: rgba(204,43,53,.04);
}
.mkt-gaya-chip--active {
    background: var(--espresso, #1C3664);
    border-color: var(--espresso, #1C3664);
    color: #fff !important;
    font-weight: 700;
}
.mkt-gaya-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 .3rem;
    background: rgba(28,54,100,.12);
    color: var(--espresso, #1C3664);
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    margin-left: .1rem;
}
.mkt-gaya-chip--active .mkt-gaya-count {
    background: rgba(255,255,255,.25);
    color: #fff;
}
.mkt-gaya-hint {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    color: var(--taupe, #5A7099);
    font-style: italic;
    margin-left: auto;
}
.mkt-gaya-hint svg { width: 14px; height: 14px; color: var(--brass, #CC2B35); flex-shrink: 0; }

/* Model badge on card image */
.mkt-card-model-badge {
    position: absolute;
    bottom: .55rem;
    left: .55rem;
    background: rgba(15,30,61,.75);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .22rem .6rem;
    border-radius: 999px;
}

/* Specs row */
.mkt-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .4rem;
    margin: .4rem 0 .5rem;
}
.mkt-spec {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--taupe, #5A7099);
    background: rgba(28,54,100,.06);
    padding: .18rem .52rem;
    border-radius: 999px;
    white-space: nowrap;
}
.mkt-spec svg { width: 10px; height: 10px; opacity: .7; }

/* Konsultasi button */
.mkt-inquiry-btn {
    display: inline-flex;
    align-items: center;
    padding: .38rem .8rem;
    background: var(--brass, #CC2B35);
    color: #fff !important;
    border-radius: 7px;
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
    flex-shrink: 0;
}
.mkt-inquiry-btn:hover { background: #A51F27; }

/* Prod-img position for model badge */
.theme-marketplace-architect .prod-img { position: relative; }

.prod-img-fallback { width:100%; height:100%; background: linear-gradient(135deg,#D4B896,#8B6A40); }

.prod-inquiry-link { font-size:.65rem; color:var(--brass); letter-spacing:.08em; text-transform:uppercase; font-weight:500; }