/*
Theme Name: Logam Muliaku
Theme URI: https://logammuliaku.id
Author: Logam Muliaku
Description: Custom theme untuk Logam Muliaku - toko emas online
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: logammuliaku
*/

/* ============================================================
   GLOBAL HEADER OVERRIDES — match logammulia.com
   ============================================================ */
.lang-desktop .lang-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #5F5F5F;
    font-size: 12px;
}
.lang-desktop .lang-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
}
.user-desktop > a {
    color: #5F5F5F;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.user-desktop > a:hover {
    color: #C79626;
}
.th-left .th-menu > li:first-child a {
    font-size: 14px;
}

/* ============================================================
   HERO BOTTOM - Ticker harga & CTA bar (v2 - sesuai referensi)
   ============================================================ */
.index-hero-bottom {
    width: 100%;
    overflow: visible;
    position: relative;
    z-index: 5;
}
.hero-bottom-wrap {
    display: flex;
    align-items: stretch;
    min-height: 130px;
}

/* Area 1 : CTA Buttons */
.hero-bottom-cta {
    background: #23427E;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 25%;
    flex-shrink: 0;
}
.btn-hero-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #C79626;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 11px 16px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s;
}
.btn-hero-cta:hover { background: #B08520; color: #fff; }
.btn-hero-cta .icon { font-size: 13px; }
.hero-last-update {
    font-size: 10.5px;
    color: rgba(255,255,255,0.65);
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Area 2 & 3 : Price Items */
.hero-bottom-price {
    display: flex;
    flex: 1;
    overflow: visible;
}
.price-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 28px;
    flex: 1;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
/* Overlay samar — warna mendominasi, foto sebagai texture halus */
.price-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}
.price-item > * { position: relative; z-index: 1; }
.price-item.gold {
    background-color: #C79626;
}
.price-item.gold::before {
    background: rgba(199, 150, 38, 0.72);
}
.price-item.silver {
    background-color: #8a9ab5;
}
.price-item.silver::before {
    background: rgba(90, 105, 135, 0.70);
}

/* Floating product image — z-index harus lebih tinggi dari overlay */
.price-float-img {
    position: absolute;
    top: 12px;
    right: 16px;
    left: auto;
    height: 80px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
    pointer-events: none;
    z-index: 2;
    opacity: 0.92;
}

.price-item-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
}
.price-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.price-values {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.price-values .price-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.price-values .price-amount {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.price-change-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 0;
}
.price-change-badge.up   { color: #00d97e; }
.price-change-badge.down { color: #ff6b6b; }
.price-last {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin: 0 0 6px;
}
.price-more-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    margin-top: 4px;
    transition: color 0.15s;
}
.price-more-link:hover { color: #fff; text-decoration: underline; }

/* Area 4 : Location */
.hero-bottom-location {
    background: #23427E;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    width: 25%;
    flex-shrink: 0;
}
.location-label {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.location-label .icon { color: #C79626; }
.location-btns {
    display: flex;
    gap: 10px;
}
.btn-location {
    padding: 7px 18px;
    border: 1.5px solid rgba(255,255,255,0.6);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: background 0.15s;
}
.btn-location:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* ============================================================
   RESPONSIVE HERO BOTTOM
   - Emas & Perak SELALU berdampingan (side by side) di semua layar
   - Hanya CTA buttons & Lokasi yang stack vertikal di mobile
   ============================================================ */

/* Tablet landscape 993px–1199px: sedikit lebih compact */
@media (max-width: 1199px) {
    .hero-bottom-cta,
    .hero-bottom-location { width: 22%; padding: 20px 18px; }
    .hero-bottom-price { flex: 1; }
    .price-item { padding: 20px 18px; }
    .price-values .price-amount { font-size: 17px; }
}

/* Tablet portrait ≤768px: CTA & Lokasi jadi 100%, harga tetap berdampingan */
@media (max-width: 768px) {
    .hero-bottom-wrap {
        flex-wrap: wrap;
    }
    /* CTA: full width, tombol berdampingan */
    .hero-bottom-cta {
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: 18px 20px;
        gap: 10px;
        order: 1;
    }
    .btn-hero-cta {
        width: 85%;
        max-width: 340px;
        justify-content: center;
        border-radius: 50px;
        padding: 13px 24px;
        font-size: 12px;
        gap: 10px;
    }
    .hero-last-update {
        justify-content: center;
        text-align: center;
    }
    /* Harga: selalu berdampingan, 50% masing-masing */
    .hero-bottom-price {
        width: 100%;
        flex-direction: row;   /* TETAP ROW — tidak boleh column */
        order: 2;
        flex-basis: 100%;
        flex-shrink: 0;
    }
    .price-item {
        flex: 1;
        min-width: 0;
        padding: 18px 16px;
    }
    .price-float-img {
        height: 55px;
        right: 10px;
        top: 10px;
    }
    .price-item-title { font-size: 18px; }
    .price-values .price-label { font-size: 12px; }
    .price-values .price-amount { font-size: 16px; }
    /* Lokasi: full width di bawah */
    .hero-bottom-location {
        width: 100%;
        padding: 16px 20px;
        flex-direction: column;
        order: 3;
    }
}

/* Mobile kecil ≤480px: font & padding lebih kecil tapi TETAP berdampingan */
@media (max-width: 480px) {
    .price-item { padding: 14px 12px; }
    .price-float-img { height: 42px; right: 6px; top: 8px; }
    .price-item-title { font-size: 15px; margin-bottom: 4px; }
    .price-values { flex-direction: column; gap: 0; }
    .price-values .price-label { font-size: 10px; }
    .price-values .price-amount { font-size: 14px; }
    .price-change-badge { font-size: 10px; }
    .price-last { font-size: 10px; }
    .price-more-link { font-size: 10px; }
    .btn-hero-cta { width: 90%; font-size: 11px; padding: 12px 18px; }
}

/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */

/* Korporasi Section */
.index-korporasi {
    padding: 60px 0;
    background: #F6F9FF;
}
.korporasi-text {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.korporasi-text .ngc-maintitle {
    margin-bottom: 16px;
    color: #23427E;
}
.korporasi-text p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 24px;
}
.korporasi-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
.korporasi-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

/* Feature Boxes */
.feature-box {
    padding: 30px 20px;
}
.feature-box .fa-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: rgba(199,150,38,0.08);
    border-radius: 50%;
    margin-bottom: 16px;
}
.feature-box .ngc-title {
    font-size: 16px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 8px;
}
.feature-box p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* Harga Table */
.table-harga {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 14px;
}
.table-harga th {
    background: #23427E;
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
}
.table-harga td {
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    color: #333;
}
.table-harga tr:nth-child(even) td {
    background: #f8f9fb;
}
.table-harga tr:hover td {
    background: #fff8e6;
}

/* Card Promo / Cara Beli */
.card-promo {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.card-promo .ngc-title {
    color: #23427E;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}
.step-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.step-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #444;
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #C79626;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

/* Article Box (Berita) */
.article-box {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    margin-bottom: 20px;
    transition: transform 0.2s;
}
.article-box:hover {
    transform: translateY(-3px);
}
.article-box .ngc-media img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.article-box .ngc-text {
    padding: 20px;
}
.article-box .date {
    font-size: 12px;
    color: #999;
    display: block;
    margin-bottom: 6px;
}
.article-box .ngc-title {
    font-size: 16px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 8px;
    line-height: 1.4;
}
.article-box .ngc-title a {
    color: inherit;
    text-decoration: none;
}
.article-box p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
}
.article-box .read-more {
    font-size: 13px;
    font-weight: 700;
    color: #C79626;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Static Banner (page headers) */
.static-banner {
    width: 100%;
    overflow: hidden;
    max-height: 300px;
}
.static-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Breadcrumbs */
.breadcrumbs {
    background: #f5f5f5;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.breadcrumbs ul {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #666;
}
.breadcrumbs li:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: #ccc;
}
.breadcrumbs a {
    color: #C79626;
    text-decoration: none;
}

/* Box White (container with white bg) */
.box-white {
    background: #fff;
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Footer */
#web-footer {
    background-color: transparent;
    padding: 30px 0 0;
    color: rgb(95,95,95);
}
#web-footer .footer-child {
    padding: 0 0 20px;
}
#web-footer .ngc-title {
    color: #C79626;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}
#web-footer .footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
#web-footer .footer-nav li {
    margin-bottom: 8px;
}
#web-footer .footer-nav li a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s;
}
#web-footer .footer-nav li a:hover {
    color: #C79626;
}
#web-footer .footer-icon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
#web-footer .footer-icon li img {
    height: 40px;
    width: auto;
    opacity: 0.85;
}
.footer-bottom {
    border-top: none;
    padding-top: 0;
    margin-top: 20px;
}
.general-lm-logo-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.lm-logo img { height: 36px; width: auto; }
.antam-logo img { height: 40px; width: auto; }
.copyright {
    text-align: center;
    font-size: 12px;
    color: #fff;
    padding: 16px 0 0;
}

/* Overlay classes */
.has-overlay {
    position: relative;
}
.has-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}
.has-overlay > * { position: relative; z-index: 1; }
.overlay-darkblue::before { background: rgba(35,66,126,0.91); }
.overlay-brown::before { background: rgba(80,50,20,0.88); }

/* Section has-overlay */
.section.has-overlay {
    position: relative;
    padding: 50px 0;
    background-size: cover;
}
.section.has-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}
.section.has-overlay > .main-container { position: relative; z-index: 1; }
.overlay-brown::before { background: rgba(80,50,20,0.88); }

/* Contact Wrap (footer top) */
.contact-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.contact-wrap .fa-wrapper {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-wrap .fa-wrapper .icon { color: #C79626; font-size: 18px; }
.contact-wrap .text-wrap .small-text { font-size: 12px; color: rgba(255,255,255,0.65); margin: 0; }
.contact-wrap .text-wrap .big-text { font-size: 16px; font-weight: 700; color: #fff; margin: 0; }
.contact-wrap .text-wrap .big-text a { color: inherit; text-decoration: none; }

/* Newsletter Form */
.newsletter-wrap .ngc-title { color: #fff; margin-bottom: 14px; }
.newsletter-form { display: flex; gap: 0; }
.newsletter-form .input-text {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.newsletter-form .input-text::placeholder { color: rgba(255,255,255,0.55); }
.newsletter-form .btn-submit {
    background: #C79626;
    border: none;
    padding: 12px 18px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s;
}
.newsletter-form .btn-submit:hover { background: #B08520; }

/* ============================================================
   PRODUCT TABS
   ============================================================ */
.prod-tab-wrap .ngc-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.prod-tab-wrap .ngc-tabs a {
    padding: 8px 20px;
    border: 2px solid #ddd;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    text-decoration: none;
    transition: all 0.2s;
}
.prod-tab-wrap .ngc-tabs a.active,
.prod-tab-wrap .ngc-tabs a:hover {
    background: #23427E;
    border-color: #23427E;
    color: #fff;
}
.ngc-tab-container { display: none; }
.ngc-tab-container.active { display: block; }

/* Product Box */
.product-box {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: transform 0.2s;
}
.product-box:hover { transform: translateY(-3px); }
.product-box .ngc-media img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    display: block;
    padding: 12px;
    background: #f9f9f9;
}
.product-box .ngc-text {
    padding: 16px;
}
.product-box .ngc-title {
    font-size: 15px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 6px;
}
.product-box .ngc-title a { color: inherit; text-decoration: none; }
.product-box .price {
    font-size: 14px;
    font-weight: 700;
    color: #C79626;
    margin-bottom: 10px;
}
.product-box .link-animated {
    font-size: 13px;
    font-weight: 700;
    color: #23427E;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Labels (sale badge) */
.label {
    position: absolute;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}
.label.green { background: #00b09b; }
.label.left { top: 12px; left: 12px; }
.product-box .ngc-media { position: relative; }

/* ============================================================
   FEATURED CAROUSEL
   ============================================================ */
.featured-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #C79626 #f0f0f0;
}
.featured-carousel::-webkit-scrollbar { height: 4px; }
.featured-carousel::-webkit-scrollbar-track { background: #f0f0f0; }
.featured-carousel::-webkit-scrollbar-thumb { background: #C79626; border-radius: 2px; }
.featured-carousel .item {
    min-width: 220px;
    flex-shrink: 0;
}

/* ============================================================
   BTN VIEW ALL (mega dropdown)
   ============================================================ */
.btn-view-all {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 50px;
}

/* ============================================================
   LOKASI BUTIK
   ============================================================ */
.butik-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 24px;
}
.butik-item {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 22px 24px;
    border-left: 4px solid #C79626;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
}
.butik-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
.butik-name {
    font-size: 16px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 12px;
}
.butik-item p {
    font-size: 13px;
    color: #555;
    margin: 0 0 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}
.butik-item p .fas,
.butik-item p .far {
    color: #C79626;
    width: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* WooCommerce Overrides */
.woocommerce-notices-wrapper { padding: 0 20px; }
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
    background: #fff;
    border-top: 3px solid #C79626;
    list-style: none;
    padding: 1em 2em;
    margin: 0 0 2em;
}

/* ============================================================
   PRE-FOOTER (Alamat Butik + Kantor + Newsletter)
   ============================================================ */
.prefooter-section {
    display: none;
}
.prefooter-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.prefooter-icon-wrap {
    width: 42px;
    height: 42px;
    background: #C79626;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 18px;
}
.prefooter-content p {
    font-size: 13px;
    color: #444;
    margin: 0 0 5px;
    line-height: 1.5;
}
.prefooter-content .fas,
.prefooter-content .far {
    color: #C79626;
    margin-right: 5px;
}
.prefooter-label {
    font-size: 11px !important;
    color: #999 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600 !important;
}
.prefooter-name {
    font-size: 14px !important;
    color: #23427E !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}
.prefooter-address {
    font-size: 13px !important;
    color: #555 !important;
}
.prefooter-section .newsletter-wrap {
    padding-top: 10px;
}
.prefooter-section .ngc-title {
    color: #23427E;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
}

/* ============================================================
   SUPPORT SIDEBAR (Cara Beli page)
   ============================================================ */
.support-sidebar {
    padding: 24px !important;
    position: sticky;
    top: 100px;
}
.support-sidebar-title {
    font-size: 16px;
    font-weight: 700;
    color: #C79626;
    border-bottom: 2px solid #C79626;
    padding-bottom: 10px;
    margin-bottom: 14px;
}
.support-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.support-nav li {
    border-bottom: 1px solid #f0f0f0;
}
.support-nav li a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: #444;
    text-decoration: none;
    transition: color 0.2s;
}
.support-nav li a:hover,
.support-nav li.active a {
    color: #C79626;
    font-weight: 700;
}

/* ============================================================
   HUBUNGI KAMI
   ============================================================ */
.hubkami-info-box {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}
.hubkami-info-header {
    background: #23427E;
    color: #C79626;
    font-weight: 700;
    font-size: 15px;
    padding: 16px 24px;
    text-align: center;
}
.hubkami-info-body {
    background: #fff;
    padding: 20px 24px;
}
.hubkami-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #444;
}
.hubkami-icon {
    color: #C79626;
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    margin-top: 2px;
}

/* City Tabs */
.city-tabs-wrap { margin-bottom: 30px; }
.city-tabs,
.city-tabs-row2 {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}
.city-tab {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid #ddd;
    background: #fff;
    color: #555;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}
.city-tab:hover {
    border-color: #23427E;
    color: #23427E;
}
.city-tab.active {
    background: #23427E;
    border-color: #23427E;
    color: #fff;
}

/* City Panels */
.city-panel { display: none; }
.city-panel.active { display: block; }

/* Butik Contact Cards */
.butik-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.butik-contact-card {
    background: #fff;
    border-radius: 8px;
    padding: 22px 24px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.butik-contact-name {
    font-size: 16px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 14px;
    border-bottom: 2px solid #C79626;
    padding-bottom: 10px;
}
.butik-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
    line-height: 1.5;
}
.butik-contact-row .fas,
.butik-contact-row .far,
.butik-contact-row .fab {
    color: #C79626;
    width: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}
.butik-hours {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}
.butik-hours p { margin: 0 0 6px; }

/* ============================================================
   LOKASI BAR
   ============================================================ */
.lokasi-bar {
    background: #23427E;
    padding: 12px 0;
    margin-bottom: 0;
}
.lokasi-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.lokasi-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lokasi-bar-link {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.lokasi-bar-link:hover { color: #C79626; }
.lokasi-bar-sep { color: rgba(255,255,255,0.4); }
.lokasi-bar-name {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
}
.lokasi-bar-btn {
    background: transparent;
    border: 1px solid #C79626;
    color: #C79626;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
}
.lokasi-bar-btn:hover { background: #C79626; color: #fff; }

/* ============================================================
   HARGA TABLE - IMPROVED
   ============================================================ */
.harga-date-title {
    font-size: 18px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 4px;
}
.harga-date-sub {
    font-size: 13px;
    color: #777;
    margin-bottom: 16px;
}
.harga-category-row td {
    background: #23427E !important;
    color: #fff !important;
    font-weight: 700;
    text-align: center;
    font-size: 13px;
    padding: 7px 10px !important;
}
.harga-category-perak td {
    background: #555 !important;
}
.text-right { text-align: right !important; }

/* ============================================================
   HARGA PROMO CARD (right sidebar)
   ============================================================ */
.harga-promo-card {
    background: linear-gradient(135deg, #e8f4fd 0%, #dbeeff 100%);
    border-radius: 12px;
    overflow: hidden;
    padding: 24px;
    height: 100%;
    box-sizing: border-box;
    min-height: 200px;
}
.harga-promo-tag {
    font-size: 16px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 4px;
    font-style: italic;
}
.harga-promo-title {
    font-size: 24px;
    font-weight: 900;
    color: #23427E;
    margin-bottom: 12px;
    line-height: 1.1;
}
.harga-promo-sub {
    font-size: 13px;
    color: #444;
    margin-bottom: 10px;
}
.harga-promo-cta {
    font-size: 14px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 16px;
}
.harga-promo-img img {
    width: 100%;
    border-radius: 8px;
    max-height: 180px;
    object-fit: cover;
}

/* ============================================================
   SIMULASI BAR
   ============================================================ */
.simulasi-bar {
    background: #23427E;
    padding: 24px;
    border-radius: 8px;
    margin-top: 20px;
    color: #fff;
}
.simulasi-title {
    font-size: 16px;
    font-weight: 700;
    color: #C79626;
    margin-bottom: 8px;
}
.simulasi-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
}
.simulasi-label {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 8px;
}
.simulasi-form {
    display: flex;
    gap: 10px;
}
.simulasi-input {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}
.simulasi-btn {
    padding: 10px 20px;
    background: #C79626;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.simulasi-btn:hover { background: #a97d1e; }
.simulasi-result {
    font-size: 13px;
    color: #C79626;
    margin-top: 8px;
    min-height: 20px;
}

/* ============================================================
   CERTIEYE ACCORDION
   ============================================================ */
.certieye-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.certieye-header {
    background: #23427E;
    color: #fff;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.certieye-header:hover { background: #1e3366; }
.certieye-arrow { font-size: 12px; }
.certieye-body {
    padding: 16px 18px;
    background: #fff;
}

/* ============================================================
   HOMEPAGE: LOKASI + BRANKAS PROMO BANNERS
   ============================================================ */
.index-promo-banners { margin: 0; padding: 0; }
.promo-banner-item {
    display: flex;
    align-items: center;
    height: 180px;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    transition: opacity 0.2s;
}
.promo-banner-item:hover { opacity: 0.93; }
.promo-banner-lokasi {
    background: #1a2744;
    background-image: linear-gradient(135deg, #1a2744 60%, #23427E);
}
.promo-banner-brankas {
    background: #1a6eb0;
    background-image: linear-gradient(135deg, #1a6eb0 60%, #1496cc);
}
.promo-banner-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 40px;
    width: 100%;
}
.promo-banner-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    flex-shrink: 0;
}
.promo-banner-icon-text {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    background: rgba(255,255,255,0.2);
    padding: 6px 16px;
    border-radius: 6px;
    letter-spacing: 2px;
    flex-shrink: 0;
}
.promo-banner-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.promo-banner-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.promo-banner-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin-top: 4px;
}

/* ============================================================
   HOMEPAGE: LAYANAN SECTION
   ============================================================ */
.index-layanan {
    padding: 60px 0;
    background: #fff;
}
.layanan-text h2 { margin-bottom: 16px; }
.layanan-text p { font-size: 14px; color: #555; line-height: 1.7; }
.layanan-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.layanan-img-item img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* ============================================================
   BELI EMAS PAGE
   ============================================================ */
.beli-emas-title {
    font-size: 22px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 4px;
}
.beli-emas-sub {
    font-size: 13px;
    color: #888;
    margin-bottom: 18px;
}
.beli-product-list { border: 1px solid #e8e0d0; border-radius: 6px; overflow: hidden; }
.beli-product-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #f0ebe0;
    background: #fff;
    transition: background 0.15s;
}
.beli-product-row:last-child { border-bottom: none; }
.beli-product-row:hover { background: #fffdf7; }
.beli-product-img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #e8e0d0;
}
.beli-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.beli-product-info { flex: 1; min-width: 0; }
.beli-product-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0;
}
.beli-product-cert {
    font-size: 11px;
    color: #999;
    margin: 2px 0 0;
}
.beli-product-qty { width: 70px; flex-shrink: 0; text-align: center; }
.beli-product-qty label { font-size: 11px; color: #888; display: block; margin-bottom: 3px; }
.beli-qty-input {
    width: 56px;
    padding: 4px 6px;
    border: 1px solid #d0c8b0;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
}
.beli-product-price { width: 130px; flex-shrink: 0; text-align: right; }
.beli-product-total { width: 130px; flex-shrink: 0; text-align: right; }
.beli-price-label { font-size: 11px; color: #888; margin: 0; }
.beli-price-val { font-size: 13px; font-weight: 600; color: #333; margin: 2px 0 0; }
.beli-subtotal-val { font-size: 13px; font-weight: 700; color: #C79626; margin: 2px 0 0; }
.beli-product-action { flex-shrink: 0; }
.beli-btn {
    padding: 6px 14px;
    font-size: 12px;
    white-space: nowrap;
}
.beli-emas-note {
    font-size: 12px;
    color: #999;
    margin-top: 14px;
    line-height: 1.6;
}

/* Qty Spinner */
.beli-qty-spinner {
    display: flex;
    align-items: center;
    border: 1px solid #d0c8b0;
    border-radius: 4px;
    overflow: hidden;
    width: 90px;
}
.beli-qty-btn {
    width: 26px;
    height: 30px;
    background: #f5f0e8;
    border: none;
    font-size: 16px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}
.beli-qty-btn:hover { background: #e8e0cc; color: #23427E; }
.beli-qty-spinner .beli-qty-input {
    width: 38px;
    border: none;
    border-left: 1px solid #d0c8b0;
    border-right: 1px solid #d0c8b0;
    border-radius: 0;
    text-align: center;
    font-size: 13px;
    padding: 4px 2px;
    height: 30px;
}
.beli-qty-spinner .beli-qty-input:focus { outline: none; }

/* Harga Total card */
.beli-total-card {
    padding: 20px !important;
}
.beli-total-item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #f0ebe0;
    font-size: 12px;
    color: #555;
}
.beli-total-item-name { flex: 1; line-height: 1.4; }
.beli-total-item-val { font-weight: 600; color: #333; white-space: nowrap; }
.beli-total-footer {
    padding-top: 8px;
    margin-top: 4px;
}
.beli-total-row-sum {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    color: #23427E;
    padding: 6px 0 0;
}
.beli-grand-val { color: #C79626; }
.beli-total-tax { padding: 2px 0 0; }

/* Beli emas sidebar */
.beli-sidebar-title {
    font-size: 15px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid #C79626;
}
.beli-sidebar-date { font-size: 12px; color: #888; margin-bottom: 10px; }
.beli-harga-mini-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.beli-harga-mini-table tr { border-bottom: 1px solid #f0ebe0; }
.beli-harga-mini-table td { padding: 5px 2px; color: #555; }
.beli-harga-mini-table td.text-right { text-align: right; font-weight: 600; color: #333; }
.beli-sidebar-more {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: #C79626;
    text-decoration: none;
    font-weight: 600;
}
.beli-sidebar-more:hover { text-decoration: underline; }
.beli-catatan-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.beli-catatan-list li {
    font-size: 12px;
    color: #555;
    padding: 4px 0 4px 16px;
    position: relative;
    border-bottom: 1px dotted #eee;
}
.beli-catatan-list li::before {
    content: '\2022';
    color: #C79626;
    position: absolute;
    left: 0;
}
.beli-brankas-mini {
    background: #1a2744;
    border-radius: 8px;
    padding: 18px;
}
.beli-brankas-tag {
    font-size: 18px;
    font-weight: 900;
    color: #C79626;
    letter-spacing: 2px;
    margin: 0 0 6px;
}
.beli-brankas-text {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    margin: 0;
}

/* Beli emas bottom BRANKAS bar */
.beli-brankas-bar {
    background: #23427E;
    padding: 18px 0;
}
.beli-brankas-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.beli-brankas-logo {
    font-size: 20px;
    font-weight: 900;
    color: #C79626;
    letter-spacing: 2px;
    margin-right: 14px;
}
.beli-brankas-bar-text {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}

/* ============================================================
   JUAL EMAS / BUYBACK PAGE
   ============================================================ */
.sellgold-chart-wrap {
    border: 1px solid #e8e0d0;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
}
.simulasi-jual-box {
    background: #f9f6ef;
    border-radius: 8px;
    padding: 20px;
}
.simulasi-jual-title {
    font-size: 16px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 8px;
}
.simulasi-jual-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.simulasi-jual-input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #d0c8b0;
    border-radius: 4px;
    font-size: 14px;
}
.simulasi-jual-btn {
    padding: 9px 20px;
    background: #C79626;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.simulasi-jual-btn:hover { background: #b5841f; }
.simulasi-jual-result { margin-top: 12px; }
.simulasi-jual-output {
    background: #fff;
    border: 1px solid #e8e0d0;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13px;
    color: #333;
    line-height: 1.7;
}
.simulasi-jual-output strong { color: #C79626; }
.sellgold-overlay-card {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #23427E;
    color: #fff;
    border-radius: 8px;
    padding: 14px 18px;
    min-width: 160px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 10;
}
.sellgold-overlay-label {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 2px;
}
.sellgold-overlay-weight {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 4px;
}
.sellgold-overlay-price {
    font-size: 20px;
    font-weight: 900;
    color: #C79626;
    margin: 0 0 4px;
    line-height: 1.2;
}
.sellgold-overlay-note {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}
.sellgold-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 8px;
}
.sellgold-tax-panel {
    background: #f9f6ef;
    border: 1px solid #e8e0d0;
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 10px;
}
.sellgold-tax-title {
    font-size: 14px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 10px;
}
.sellgold-tax-title .fas { color: #C79626; margin-right: 6px; }
.sellgold-cta-box {
    margin-top: 16px;
    border-top: 1px solid #e8e0d0;
    padding-top: 14px;
}

/* ============================================================
   CARA BAYAR / METODE PEMBAYARAN PAGE
   ============================================================ */
.cara-bayar-bank {
    border: 1px solid #e8e0d0;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 28px;
    background: #fff;
}
.cara-bayar-bank-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0ebe0;
}
.bank-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.cara-bayar-bank-title {
    font-size: 18px;
    font-weight: 700;
    color: #23427E;
    margin: 0;
}
.cara-bayar-note {
    font-size: 13px;
    color: #555;
    margin-bottom: 14px;
}
.va-code {
    display: inline-block;
    background: #23427E;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 2px 9px;
    border-radius: 4px;
    letter-spacing: 1px;
}
.cara-bayar-steps {
    list-style: decimal;
    padding-left: 20px;
    margin: 6px 0 10px;
}
.cara-bayar-steps li {
    font-size: 13px;
    color: #444;
    padding: 3px 0;
    line-height: 1.55;
}
.cara-bayar-note-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff8e6;
    border: 1px solid #f0d080;
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 8px;
}
.cara-bayar-note-box .fa-info-circle {
    color: #C79626;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
.cara-bayar-note-box p {
    font-size: 13px;
    color: #555;
    margin: 0;
    line-height: 1.6;
}
/* Bank Badges */
.bank-badge {
    display: inline-block;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.5px;
    border-radius: 5px;
    color: #fff;
    flex-shrink: 0;
}
.bank-badge-mandiri { background: #003D7C; }
.bank-badge-bca { background: #005BAB; }
.bank-badge-bri { background: #00529B; }
.bank-badge-permata { background: #58267E; }

/* ============================================================
   VERIFIKASI PRODUK PAGE
   ============================================================ */
.verif-hero {
    position: relative;
    background: #23427E;
    padding: 60px 0;
    overflow: hidden;
}
.verif-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
}
.verif-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,35,111,0.75);
}
.verif-hero-content {
    position: relative;
    z-index: 10;
}
.verif-hero-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 14px;
}
.verif-hero-sub {
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    margin: 0 0 24px;
}
.verif-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.btn-primary-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #C79626;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-primary-gold:hover { background: #a07a1a; color: #fff; }
.verif-hero-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}
.verif-hero-btn-outline:hover { background: rgba(255,255,255,0.1); color: #fff; }
.verif-hero-card {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 14px;
    padding: 28px;
    backdrop-filter: blur(4px);
}
.verif-certieye-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 24px;
}
.verif-certieye-icon {
    font-size: 32px;
    color: #C79626;
    flex-shrink: 0;
}
.verif-certieye-brand {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 2px;
    letter-spacing: 1px;
}
.verif-certieye-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin: 0;
}
.verif-card-visual {
    text-align: center;
    padding: 10px 0;
}
.verif-card-shield {
    font-size: 56px;
    color: #C79626;
    opacity: 0.9;
    display: block;
    margin-bottom: 10px;
}
.verif-card-label {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}
.verif-card-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}
/* Bento */
.verif-bento-wrap {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: stretch;
}
.verif-bento-main {
    background: #f3f4f5;
    padding: 32px;
    border-radius: 12px;
}
.verif-bento-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #C79626;
    margin-bottom: 10px;
}
.verif-bento-title {
    font-size: 22px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 12px;
}
.verif-bento-text {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}
.verif-bento-badge {
    background: #1a3568;
    padding: 28px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.verif-bento-shield {
    font-size: 44px;
    color: #C79626;
    margin-bottom: 12px;
}
.verif-bento-badge-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}
.verif-bento-badge-text {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin: 0;
    line-height: 1.5;
}
/* Steps Grid */
.verif-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.verif-step-card {
    background: #fff;
    border: 1px solid #e4e8f0;
    border-radius: 12px;
    padding: 24px 20px;
    position: relative;
    transition: box-shadow 0.2s;
}
.verif-step-card:hover {
    box-shadow: 0 4px 16px rgba(42,69,128,0.1);
}
.verif-step-num {
    position: absolute;
    top: -14px;
    right: -10px;
    width: 34px;
    height: 34px;
    background: #23427E;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(42,69,128,0.3);
}
.verif-step-icon-wrap {
    width: 100%;
    aspect-ratio: 1;
    background: #f0f3fb;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 1px solid #dce0ec;
}
.verif-step-icon {
    font-size: 36px;
    color: #23427E;
}
.verif-step-icon-green {
    color: #27c38a;
}
.verif-step-title {
    font-size: 16px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 8px;
}
.verif-step-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}
/* Download Section */
.verif-download-section {
    background: #f0f3fb;
}
.verif-download-wrap {
    display: flex;
    align-items: center;
    gap: 48px;
}
.verif-download-text {
    flex: 1;
}
.verif-dl-title {
    font-size: 22px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 12px;
}
.verif-dl-sub {
    font-size: 15px;
    color: #555;
    line-height: 1.65;
    margin: 0 0 24px;
}
.verif-dl-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.verif-store-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1a1a1a;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
    min-width: 150px;
}
.verif-store-btn:hover { background: #333; color: #fff; }
.verif-store-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.verif-store-text {
    display: flex;
    flex-direction: column;
}
.verif-store-small {
    font-size: 10px;
    opacity: 0.75;
}
.verif-store-big {
    font-size: 14px;
    font-weight: 700;
}
.verif-download-visual {
    flex-shrink: 0;
}
.verif-phone-mock {
    width: 160px;
    background: #23427E;
    border-radius: 24px;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(42,69,128,0.25);
}
.verif-phone-icon {
    font-size: 48px;
    color: rgba(255,255,255,0.2);
}
.verif-phone-screen {
    background: #fff;
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
    width: 100%;
}
.verif-success-icon {
    font-size: 36px;
    color: #27c38a;
    display: block;
    margin-bottom: 8px;
}
.verif-success-text {
    font-size: 13px;
    font-weight: 800;
    color: #23427E;
    letter-spacing: 2px;
    margin: 0;
}

/* ============================================================
   TENTANG KAMI PAGE
   ============================================================ */
/* Hero Banner */
.tk-banner {
    margin-top: 130px;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.tk-banner-img {
    width: 100%;
    height: auto;
    display: block;
}
/* Breadcrumb */
.tk-breadcrumb {
    background: #f1f1f1;
    padding: 14px 0;
}
.tk-bc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
}
.tk-bc-link { color: #23427E; text-decoration: none; }
.tk-bc-link:hover { color: #C79626; }
.tk-bc-sep { color: #999; font-size: 12px; }
.tk-bc-current { color: #C79626; font-weight: 600; }

/* Profil Tab Section */
.tk-profil-section {
    padding: 40px 0 60px;
    background: #fff;
}
.tk-tabs {
    list-style: none;
    margin: 0 auto 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 40px;
    border-bottom: 1px solid #ddd;
}
.tk-tab {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    padding: 12px 4px;
    cursor: pointer;
    position: relative;
}
.tk-tab-active {
    color: #23427E;
}
.tk-tab-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: #23427E;
}

/* 3-Image Collage */
.tk-collage {
    display: flex;
    gap: 0;
    margin: 0 auto 30px;
    max-width: 900px;
}
.tk-collage-img {
    flex: 1;
    height: 200px;
    object-fit: cover;
}
.tk-collage-wide {
    flex: 1.5;
}

/* Profile Description */
.tk-profil-desc {
    max-width: 900px;
    margin: 0 auto 40px;
}
.tk-desc-short {
    font-size: 14px;
    color: #5F5F5F;
    line-height: 1.6;
    margin: 0 0 16px;
    font-style: italic;
}
.tk-desc-long {
    font-size: 15px;
    color: #333;
    line-height: 1.7;
    margin: 0;
}

/* Visi */
.tk-visi {
    background-size: cover;
    background-position: center;
    padding: 40px;
    margin: 0 auto 0;
    max-width: 900px;
}
.tk-visi-title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px;
    text-align: center;
}
.tk-visi-text {
    font-size: 15px;
    color: rgba(255,255,255,0.9);
    line-height: 1.7;
    text-align: center;
    margin: 0;
}

/* Misi */
.tk-misi {
    background-size: cover;
    background-position: center;
    padding: 30px 40px;
    margin: 0 auto;
    max-width: 900px;
}
.tk-misi-title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    text-align: center;
}

/* Misi Grid */
.tk-misi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 30px auto 0;
}
.tk-misi-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 28px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.tk-misi-num {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #C79626;
    line-height: 1;
    flex-shrink: 0;
}
.tk-misi-text {
    font-size: 14px;
    color: #5F5F5F;
    line-height: 1.7;
    margin: 0;
}

/* About LM - #1 Ritel */
.tk-about-lm {
    padding: 60px 0;
    background: #23427E;
    color: #fff;
}
.tk-about-title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin: 0 0 40px;
}
.tk-about-cards {
    display: flex;
    gap: 24px;
    justify-content: center;
}
.tk-about-card {
    flex: 1;
    max-width: 340px;
    text-align: center;
    padding: 24px;
}
.tk-about-icon {
    width: 100px;
    height: auto;
    margin: 0 auto 20px;
    display: block;
}
.tk-about-text {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    margin: 0;
}

/* Kenapa Belanja */
.tk-why {
    padding: 60px 0;
    background: #fff;
}
.tk-why-title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #C79626;
    margin: 0 0 20px;
}
.tk-why-desc {
    font-size: 15px;
    color: #5F5F5F;
    line-height: 1.7;
    margin: 0 0 40px;
    max-width: 900px;
}
.tk-features {
    display: flex;
    gap: 20px;
}
.tk-feat-card {
    flex: 1;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 24px 20px;
    text-align: left;
}
.tk-feat-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
}
.tk-feat-title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #C79626;
    margin: 0 0 8px;
}
.tk-feat-text {
    font-size: 13px;
    color: #5F5F5F;
    line-height: 1.6;
    margin: 0;
}

/* Tentang Kami Responsive */
@media (max-width: 768px) {
    .tk-collage { flex-direction: column; }
    .tk-collage-img { height: 150px; }
    .tk-misi-grid { grid-template-columns: 1fr; }
    .tk-about-cards { flex-direction: column; align-items: center; }
    .tk-features { flex-direction: column; }
    .tk-tabs { gap: 20px; }
    .tk-tab { font-size: 14px; }
    .tk-visi, .tk-misi { padding: 24px 20px; }
}

/* ============================================================
   LACAK PESANAN PAGE
   ============================================================ */
.lp-page-header {
    background: #fff;
    border-bottom: 1px solid #e1e3e4;
    padding: 168px 0 40px; /* top padding accounts for fixed nav (~144px) */
}
.lp-page-title {
    font-size: 32px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.lp-page-sub {
    font-size: 16px;
    color: #666;
    line-height: 1.65;
    max-width: 640px;
    margin: 0;
}
.lp-main-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 32px;
    align-items: start;
}
/* --- Form Wrap --- */
.lp-form-wrap {
    background: #fff;
    border: 1px solid #e1e3e4;
    padding: 36px 36px 40px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.lp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.lp-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-label {
    font-size: 12px;
    font-weight: 700;
    color: #191c1d;
    letter-spacing: 0.03em;
}
.lp-input {
    border: 1px solid #757682;
    padding: 12px 16px;
    font-size: 14px;
    color: #191c1d;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
.lp-input:focus {
    border-color: #23427E;
    box-shadow: 0 0 0 2px rgba(42,69,128,0.15);
}
.lp-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #17B248;
    color: #fff;
    border: none;
    padding: 14px 48px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, transform 0.15s;
    box-shadow: 0 1px 4px rgba(16,185,129,0.18);
}
.lp-btn-submit:hover {
    background: #0f8a37;
}
/* --- Tracking Result --- */
.lp-result {
    display: none;
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid #e1e3e4;
}
.lp-result-visible {
    display: block !important;
}
.lp-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.lp-result-order {
    font-size: 20px;
    font-weight: 600;
    color: #23427E;
    margin: 0 0 4px;
    line-height: 1.3;
}
.lp-result-eta {
    font-size: 12px;
    color: #666;
    margin: 0;
}
.lp-status-badge {
    padding: 4px 12px;
    background: #fdc659;
    color: #735200;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 4px;
}
/* --- Stepper --- */
.lp-stepper {
    display: flex;
    flex-direction: column;
}
.lp-step {
    display: flex;
    gap: 24px;
    padding-bottom: 28px;
}
.lp-step:last-child {
    padding-bottom: 0;
}
.lp-step-track {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 16px;
}
.lp-step-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c5c5d3;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.lp-step-dot-done {
    background: #17B248;
}
.lp-step-line {
    position: absolute;
    top: 16px;
    bottom: -28px;
    width: 1px;
    background: repeating-linear-gradient(
        to bottom,
        #c5c5d3 0%,
        #c5c5d3 50%,
        transparent 50%,
        transparent 100%
    );
    background-size: 1px 8px;
}
.lp-step-content {
    padding-top: 0;
}
.lp-step-pending .lp-step-content {
    opacity: 0.6;
}
.lp-step-title {
    font-size: 13px;
    font-weight: 700;
    color: #191c1d;
    margin: 0 0 3px;
}
.lp-step-detail {
    font-size: 12px;
    color: #666;
    margin: 0;
}
/* --- Sidebar --- */
.lp-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Partners Card (navy) */
.lp-partners-card {
    background: #23427E;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.lp-partners-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
}
.lp-partners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.lp-partner-item {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.18s;
}
.lp-partner-item:hover {
    background: rgba(255,255,255,0.2);
}
.lp-partner-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.12em;
}
.lp-partner-type {
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    margin: 4px 0 0;
    text-align: center;
}
/* Info Card */
.lp-info-card {
    background: #e7e8e9;
    border: 1px solid #e1e3e4;
    padding: 24px;
}
.lp-info-title {
    font-size: 12px;
    font-weight: 700;
    color: #23427E;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.lp-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lp-info-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.lp-info-icon {
    font-size: 16px;
    color: #23427E;
    flex-shrink: 0;
    margin-top: 2px;
}
.lp-info-item p {
    font-size: 13px;
    color: #444;
    line-height: 1.55;
    margin: 0;
}
/* Image Card */
.lp-image-card {
    position: relative;
    height: 160px;
    overflow: hidden;
}
.lp-image-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.lp-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(42,69,128,0.7) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 16px;
}
.lp-image-caption {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin: 0;
}
/* FAQ Section */
.lp-faq-section {
    background: #fff;
    border-top: 1px solid #e1e3e4;
}
.lp-faq-heading {
    text-align: center;
    color: #23427E;
    margin-bottom: 40px !important;
}
.lp-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}
.lp-faq-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-faq-q {
    font-size: 16px;
    font-weight: 600;
    color: #191c1d;
    margin: 0;
    line-height: 1.35;
}
.lp-faq-a {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 767px) {
    .beli-product-price,
    .beli-product-total { display: none; }
    .beli-product-row { flex-wrap: wrap; }
    .beli-brankas-bar-inner { flex-direction: column; text-align: center; }
    /* Tentang Kami mobile */
    .tk-hero { height: 320px; }
    .tk-hero-title { font-size: 22px; }
    .tk-bento-grid { grid-template-columns: 1fr; }
    .tk-vision-card { grid-column: 1; grid-row: 1; }
    .tk-akred-card { grid-column: 1; grid-row: 2; min-height: 140px; }
    .tk-mission-card:nth-child(3) { grid-column: 1; grid-row: 3; }
    .tk-mission-card:nth-child(4) { grid-column: 1; grid-row: 4; }
    .tk-mission-card:nth-child(5) { grid-column: 1; grid-row: 5; }
    .tk-lbma-card { flex-direction: column; }
    .tk-lbma-right { width: 100%; }
    .tk-timeline-line { display: none; }
    .tk-tl-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .tk-tl-content-left, .tk-tl-content-right { text-align: left; padding: 0; }
    .tk-tl-spacer { display: none; }
    .tk-tl-dot { margin-left: 8px; }
    /* Verifikasi Produk mobile - handled in vp- section */
    /* Lacak Pesanan mobile */
    .lp-main-grid { grid-template-columns: 1fr; }
    .lp-form-row { grid-template-columns: 1fr; }
    .lp-btn-submit { width: 100%; justify-content: center; }
    .lp-faq-grid { grid-template-columns: 1fr; }
    .lp-page-title { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   AKUN SAYA  (prefix: as-)
═══════════════════════════════════════════════════════════ */

/* Page wrapper */
.as-page {
    background: #f3f4f6;
    padding: 178px 0 64px;
    min-height: 100vh;
}

/* 3 + 9 grid (sidebar 280px, main flex) */
.as-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}

/* ── Sidebar ── */
.as-sidebar {
    position: sticky;
    top: 158px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* User info card */
.as-user-card {
    background: #fff;
    border: 1px solid #e1e3e8;
    border-radius: 12px;
    padding: 20px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Avatar circle with initials */
.as-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #23427E 0%, #3d60b0 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.as-user-meta { min-width: 0; }

.as-user-name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-user-email {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav card */
.as-nav-card {
    background: #fff;
    border: 1px solid #e1e3e8;
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.as-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
    cursor: pointer;
    position: relative;
}

.as-nav-link:hover {
    background: #f0f4ff;
    color: #23427E;
    text-decoration: none !important;
}

.as-nav-link.active {
    background: #eef2ff;
    color: #23427E;
    font-weight: 600;
    border-left-color: #23427E;
}

.as-nav-icon {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: #6b7280;
    flex-shrink: 0;
}

.as-nav-link.active .as-nav-icon,
.as-nav-link:hover .as-nav-icon {
    color: #23427E;
}

.as-nav-badge {
    margin-left: auto;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.04em;
}

.as-nav-divider {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 4px 0;
}

.as-nav-logout {
    color: #dc2626 !important;
}

.as-nav-logout .as-nav-icon {
    color: #dc2626 !important;
}

.as-nav-logout:hover {
    background: #fef2f2 !important;
}

/* CTA button (login page) */
.as-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #23427E;
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.18s;
}

.as-cta-btn:hover {
    background: #1e3466;
    color: #fff;
    text-decoration: none !important;
}

/* ── Main card ── */
.as-main { min-width: 0; }

.as-main-card {
    background: #fff;
    border: 1px solid #e1e3e8;
    border-radius: 12px;
    padding: 32px;
}

/* Card heading */
.as-ep-head { margin-bottom: 24px; }

.as-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 6px;
}

.as-card-sub {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.55;
}

/* Notice */
.as-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
}

.as-notice-success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

/* Form grid — 2 cols */
.as-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
    margin-bottom: 28px;
}

.as-col-full {
    grid-column: 1 / -1;
}

/* Field group */
.as-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.as-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.as-label-note {
    font-weight: 400;
    color: #9ca3af;
    font-size: 12px;
}

/* Input / select / textarea */
.as-input,
.as-select,
.as-textarea {
    width: 100%;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: #1f2937;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.as-input:focus,
.as-select:focus,
.as-textarea:focus {
    border-color: #23427E;
    box-shadow: 0 0 0 3px rgba(42,69,128,0.1);
}

.as-input-verified {
    background: #f9fafb !important;
    color: #9ca3af !important;
    cursor: not-allowed;
}

.as-textarea { resize: vertical; min-height: 64px; }

.as-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

/* Phone input with prefix */
.as-phone-wrap {
    display: flex;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.as-phone-wrap:focus-within {
    border-color: #23427E;
    box-shadow: 0 0 0 3px rgba(42,69,128,0.1);
}

.as-phone-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #f3f4f6;
    border-right: 1px solid #d1d5db;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    flex-shrink: 0;
}

.as-phone-input {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Input with right icon */
.as-icon-input-wrap { position: relative; }

.as-input-icon-right {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
}

.as-icon-green { color: #17B248; }

/* Section head (Alamat KTP) */
.as-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.as-section-title {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.as-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f3f4f6;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.as-copy-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.as-copy-btn-done {
    background: #ecfdf5 !important;
    border-color: #17B248 !important;
    color: #17B248 !important;
}

/* Form footer / submit */
.as-form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.as-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #C79626;
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s;
    font-family: inherit;
}

.as-submit-btn:hover {
    background: #a87d1e;
    transform: translateY(-1px);
}

.as-submit-btn:active {
    transform: translateY(0);
}

/* WC endpoint content — basic cleanup */
.as-wc-content .woocommerce-MyAccount-content { all: unset; }
.as-wc-content .woocommerce { padding: 0 !important; }

/* Coming soon card */
.as-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: #9ca3af;
    font-size: 14px;
    text-align: center;
    gap: 8px;
}

/* ── Akun Saya — Responsive ── */
@media (max-width: 900px) {
    .as-grid {
        grid-template-columns: 1fr;
    }
    .as-sidebar {
        position: static;
    }
    .as-user-card {
        flex-direction: row;
    }
}

@media (max-width: 600px) {
    .as-page { padding-top: 168px; padding-bottom: 40px; }
    .as-main-card { padding: 20px 16px; }
    .as-form-grid { grid-template-columns: 1fr; }
    .as-col-full { grid-column: 1; }
    .as-section-head { flex-direction: column; align-items: flex-start; }
    .as-form-footer { justify-content: stretch; }
    .as-submit-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   KERANJANG BELANJA  (prefix: kb-)
   WC body class: woocommerce-cart
═══════════════════════════════════════════════════════════ */

/* Page wrapper — inside main-container > woo-content from WC hooks */
body.woocommerce-cart .woo-content {
    padding: 0 !important;
    background: #f3f4f6;
}

/* Page header (title + stepper) */
.kb-page-header {
    padding: 168px 0 32px;
    background: #f3f4f6;
}

.kb-page-title {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 28px;
}

/* Checkout stepper */
.kb-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 440px;
}

.kb-step {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kb-step-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid;
    flex-shrink: 0;
}

.kb-step-on .kb-step-num {
    background: #C79626;
    border-color: #C79626;
    color: #fff;
}

.kb-step-off .kb-step-num {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #9ca3af;
}

.kb-step-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.kb-step-off .kb-step-label {
    color: #9ca3af;
}

.kb-step-line {
    flex: 1;
    height: 2px;
    background: #d1d5db;
    min-width: 40px;
    max-width: 80px;
    margin: 0 8px;
}

/* Two-column layout */
.kb-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
    padding-bottom: 64px;
}

/* ── Left column ── */
.kb-col-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Butik selector card */
.kb-butik-card {
    background: #fff;
    border: 1px solid #e1e3e8;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.kb-butik-icon-wrap {
    width: 44px;
    height: 44px;
    background: #eef2ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #23427E;
    flex-shrink: 0;
}

.kb-butik-info { flex: 1; min-width: 0; }

.kb-butik-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}

.kb-butik-sub {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.kb-butik-btn {
    background: transparent;
    border: 2px solid #23427E;
    color: #23427E;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    font-family: inherit;
}

.kb-butik-btn:hover {
    background: #23427E;
    color: #fff;
}

/* Cart table wrapper */
.kb-cart-wrap {
    background: #fff;
    border: 1px solid #e1e3e8;
    border-radius: 12px;
    overflow: hidden;
}

/* Table header */
.kb-thead {
    display: grid;
    grid-template-columns: 1fr 160px 140px 140px;
    padding: 12px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e1e3e8;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kb-th-price,
.kb-th-total { text-align: right; }

.kb-th-qty { text-align: center; }

/* Cart row */
.kb-cart-row {
    display: grid;
    grid-template-columns: 1fr 160px 140px 140px;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
}

.kb-cart-row:last-child { border-bottom: none; }

/* Product cell */
.kb-col-product {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.kb-thumb {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    border: 1px solid #e1e3e8;
    border-radius: 8px;
    overflow: hidden;
}

.kb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kb-item-info { min-width: 0; }

.kb-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px;
    line-height: 1.4;
}

.kb-item-name a {
    color: inherit;
    text-decoration: none;
}

.kb-item-name a:hover { color: #23427E; }

.woocommerce-cart .dl.variation {
    font-size: 12px;
    color: #6b7280;
    margin: 4px 0;
}

.kb-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #dc2626 !important;
    text-decoration: none !important;
    margin-top: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.kb-remove:hover { opacity: 0.7; }

/* Price / qty / total cells */
.kb-col-price,
.kb-col-total {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.kb-col-total {
    font-size: 15px;
    color: #23427E;
    font-weight: 700;
}

.kb-col-qty { text-align: center; }

/* WC qty input overrides */
.woocommerce-cart .quantity .qty {
    width: 60px !important;
    text-align: center;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 8px 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.woocommerce-cart .quantity { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Cart actions (update button — hidden, auto-update handled by JS) */
.kb-cart-actions {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
}

.kb-cart-actions button[name="update_cart"] {
    background: #f3f4f6;
    border: 1.5px solid #d1d5db;
    color: #374151;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.kb-cart-actions button[name="update_cart"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Add more link */
.kb-add-more {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    font-size: 14px;
    color: #23427E;
    font-weight: 600;
    text-decoration: none !important;
    border-top: 1px solid #f0f0f0;
    transition: color 0.15s;
}

.kb-add-more:hover { color: #C79626; text-decoration: none !important; }

/* ── Right column / sidebar ── */
.kb-col-side {
    position: sticky;
    top: 158px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kb-card {
    background: #fff;
    border: 1px solid #e1e3e8;
    border-radius: 12px;
    padding: 20px;
}

/* Voucher */
.kb-voucher-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.kb-voucher-icon { color: #C79626; font-size: 16px; }

.kb-voucher-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.kb-voucher-row {
    display: flex;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
}

.kb-voucher-input {
    flex: 1;
    border: none !important;
    padding: 10px 14px;
    font-size: 13px;
    outline: none;
    font-family: inherit;
    background: #fff;
    color: #1f2937;
}

.kb-voucher-btn {
    background: #eef2ff;
    border: none;
    border-left: 1.5px solid #d1d5db;
    color: #23427E;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: background 0.15s;
}

.kb-voucher-btn:hover { background: #dde6ff; }

/* Summary card */
.kb-summary-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.kb-summary-head-icon { color: #6b7280; font-size: 16px; }

.kb-summary-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.kb-summary-lines { display: flex; flex-direction: column; gap: 10px; }

.kb-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.kb-summary-label {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.kb-summary-count { color: #9ca3af; font-size: 12px; }

.kb-summary-val {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.kb-summary-row-discount .kb-summary-val,
.kb-discount-val { color: #17B248 !important; }

.kb-coupon-code {
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    margin-left: 4px;
}

.kb-summary-info-icon { font-size: 11px; color: #9ca3af; cursor: help; }

.kb-summary-divider {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 14px 0;
}

/* Grand total row */
.kb-summary-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.kb-summary-total-label {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.kb-summary-total-val {
    font-size: 20px;
    font-weight: 800;
    color: #C79626;
}

/* PMK note */
.kb-pmk-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.kb-pmk-icon { color: #d97706; font-size: 14px; margin-top: 2px; flex-shrink: 0; }

.kb-pmk-text {
    font-size: 12px;
    color: #92400e;
    line-height: 1.5;
    margin: 0;
}

/* Checkout CTA button */
.kb-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #23427E;
    color: #fff !important;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.18s;
    cursor: pointer;
}

.kb-checkout-btn:hover {
    background: #C79626;
    color: #fff !important;
    text-decoration: none !important;
}

/* Empty cart state */
.kb-empty-state {
    text-align: center;
    padding: 100px 20px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.kb-empty-icon {
    font-size: 72px;
    color: #d1d5db;
    line-height: 1;
}

.kb-empty-title {
    font-size: 24px;
    font-weight: 700;
    color: #374151;
    margin: 0;
}

.kb-empty-sub {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
}

.kb-btn-shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #23427E;
    color: #fff !important;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.18s;
    margin-top: 8px;
}

.kb-btn-shop:hover { background: #C79626; color: #fff !important; }

/* WooCommerce page outer (cart/checkout) — replaces index.php default wrapper */
.wc-page-outer {
    background: #f3f4f6;
    min-height: 100vh;
}

.wc-page-outer .woocommerce {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    background: transparent;
}

.wc-page-outer .woocommerce > .woocommerce-notices-wrapper {
    max-width: 1280px;
    margin: 0 auto;
}

/* ── Keranjang Belanja Responsive ── */
@media (max-width: 1024px) {
    .kb-layout { grid-template-columns: 1fr 300px; }
}

@media (max-width: 900px) {
    .kb-layout {
        grid-template-columns: 1fr;
    }
    .kb-col-side {
        position: static;
    }
}

@media (max-width: 640px) {
    .kb-page-header { padding-top: 168px; }
    .kb-page-title { font-size: 22px; }
    .kb-stepper { max-width: 100%; }
    .kb-thead { display: none; }
    .kb-cart-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .kb-col-price,
    .kb-col-qty,
    .kb-col-total {
        text-align: left;
        font-size: 13px;
    }
    .kb-col-price::before { content: attr(data-label) ": "; font-weight: 400; color: #9ca3af; }
    .kb-col-qty::before { content: attr(data-label) ": "; font-weight: 400; color: #9ca3af; }
    .kb-col-total::before { content: attr(data-label) ": "; font-weight: 400; color: #9ca3af; }
    .kb-cart-row { padding: 16px; }
}

/* ============================================================
   KONFIRMASI PESANAN (cp-) — Stitch "Selesai | Logam Mulia"
   ============================================================ */

.cp-page {
    background: #f3f4f6;
    min-height: 100vh;
    padding: 168px 0 80px;
}

.cp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 13px;
    color: #6b7280;
}
.cp-bc-link { color: #23427E; text-decoration: none; }
.cp-bc-link:hover { color: #C79626; }
.cp-bc-sep { font-size: 10px; color: #d1d5db; }
.cp-bc-current { color: #374151; font-weight: 600; }

/* Stepper */
.cp-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 4px;
}
.cp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
}
.cp-step-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: #9ca3af;
    font-size: 16px;
    transition: background .2s, color .2s;
}
.cp-step-done .cp-step-circle {
    background: #dbeafe;
    color: #23427E;
}
.cp-circle-active {
    background: #C79626 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(199,150,38,.35);
}
.cp-step-label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
}
.cp-label-active {
    color: #C79626 !important;
    font-weight: 700;
}
.cp-step-line {
    width: 60px;
    height: 2px;
    background: #e5e7eb;
    flex-shrink: 0;
    margin-bottom: 18px;
}
.cp-line-done  { background: #23427E; }
.cp-line-active { background: #C79626; }

/* Main card */
.cp-main-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    max-width: 860px;
    margin: 0 auto;
    overflow: hidden;
}

/* Card header */
.cp-card-header {
    text-align: center;
    padding: 40px 48px 32px;
    border-bottom: 1px solid #e5e7eb;
}
.cp-success-icon, .cp-pending-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.cp-success-icon { color: #17B248; }
.cp-pending-icon { color: #C79626; }
.cp-card-title {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 6px;
}
.cp-title-success { color: #17B248; }
.cp-card-sub {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Sections */
.cp-section {
    padding: 28px 40px;
    border-bottom: 1px solid #f0f0f0;
}
.cp-section:last-child { border-bottom: none; }
.cp-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cp-section-icon { font-size: 14px; }

/* Info grid */
.cp-info-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px 16px;
    font-size: 14px;
}
.cp-info-key {
    color: #6b7280;
    font-weight: 500;
    align-self: center;
}
.cp-info-val {
    color: #111827;
    font-weight: 600;
}
.cp-val-navy  { color: #23427E; }
.cp-val-gold  { color: #C79626; }
.cp-link { color: #23427E; text-decoration: none; }
.cp-link:hover { color: #C79626; text-decoration: underline; }

/* Status badges */
.cp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
}
.cp-status-paid    { background: #d1fae5; color: #065f46; }
.cp-status-pending { background: #fef3c7; color: #92400e; }

/* Product table */
.cp-table-wrap { overflow-x: auto; }
.cp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.cp-th {
    padding: 10px 12px;
    background: #f9fafb;
    color: #6b7280;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}
.cp-th-center { text-align: center; }
.cp-th-right  { text-align: right; }
.cp-tr { border-bottom: 1px solid #f3f4f6; }
.cp-tr:last-child { border-bottom: none; }
.cp-td {
    padding: 12px;
    vertical-align: middle;
}
.cp-td-center { text-align: center; }
.cp-td-right  { text-align: right; }
.cp-product-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.cp-product-img-placeholder {
    width: 52px;
    height: 52px;
    background: #f3f4f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}
.cp-product-name { font-weight: 600; color: #111827; margin-bottom: 2px; }
.cp-product-price { font-size: 12px; color: #9ca3af; }
.cp-total-val { font-weight: 700; color: #111827; }
.cp-tr-subtotal td { background: #fafafa; padding: 8px 12px; font-size: 13px; color: #6b7280; }
.cp-subtotal-label { font-weight: 500; }
.cp-subtotal-val { font-weight: 600; color: #374151; }
.cp-tr-total td { background: #f0f5ff; padding: 12px; }
.cp-grand-label { font-weight: 700; font-size: 14px; color: #23427E; }
.cp-grand-val { font-weight: 800; font-size: 15px; color: #C79626; }

/* VA payment section */
.cp-expiry-warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #c2410c;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cp-va-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 10px;
}
.cp-va-bank-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
    font-weight: 600;
}
.cp-va-number {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #111827;
    font-family: 'Courier New', monospace;
}
.cp-va-note {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    background: #C79626;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.cp-copy-btn {
    background: #23427E;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .2s;
    white-space: nowrap;
}
.cp-copy-btn:hover { background: #C79626; }
.cp-payment-fallback { padding: 8px 0; }

/* Address box */
.cp-address-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 14px;
}
.cp-address-name { font-weight: 700; margin-bottom: 4px; color: #111827; }
.cp-address-text { color: #374151; margin: 0 0 8px; }
.cp-shipping-method {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Action buttons */
.cp-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 32px 40px;
}
.cp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #C79626;
    color: #fff;
    padding: 13px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s, transform .15s;
}
.cp-btn-primary:hover { background: #b5851f; color: #fff; transform: translateY(-1px); }
.cp-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #23427E;
    padding: 13px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: 2px solid #23427E;
    transition: background .2s, color .2s;
}
.cp-btn-secondary:hover { background: #23427E; color: #fff; }

/* Butik Pickup Box (thank you page) */
.cp-butik-box {
    background: #f0f7ff;
    border: 1px solid #23427E;
    border-radius: 10px;
    padding: 20px;
}
.cp-butik-name {
    font-size: 16px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 8px;
}
.cp-butik-addr {
    font-size: 14px;
    color: #5F5F5F;
    margin-bottom: 10px;
    line-height: 1.6;
}
.cp-butik-addr .fas { color: #C79626; margin-right: 6px; }
.cp-butik-hours {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.cp-butik-hours .fas { color: #C79626; margin-top: 2px; flex-shrink: 0; }
.cp-butik-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 6px;
    padding: 10px 14px;
}
.cp-butik-note .fas { color: #9ca3af; margin-top: 2px; flex-shrink: 0; }

/* Petunjuk Pembayaran (thank you page) */
.cp-pay-guide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    background: #FFF9EC;
    border: 1px solid #C79626;
    border-radius: 8px;
}
.cp-pay-guide-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #23427E;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.cp-pay-guide-btn:hover { background: #1a3568; }
.cp-pay-guide-btn .fas { color: #C79626; }
.cp-pay-guide-hint {
    font-size: 12px;
    color: #5F5F5F;
}
.cp-pay-popup .ngc-maintitle { display: none; }
.cp-pay-popup .box-white {
    box-shadow: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
.cp-pay-popup-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #E9E8E9;
    text-align: center;
}
.cp-pay-fullpage-link {
    font-size: 13px;
    color: #23427E;
    font-weight: 600;
    text-decoration: none;
}
.cp-pay-fullpage-link:hover { color: #C79626; }
.cp-pay-fullpage-link .fas { margin-right: 6px; font-size: 12px; }

/* cp- Responsive */
@media (max-width: 640px) {
    .cp-page { padding: 148px 0 48px; }
    .cp-section { padding: 20px 20px; }
    .cp-card-header { padding: 28px 20px 20px; }
    .cp-card-title { font-size: 20px; }
    .cp-info-grid { grid-template-columns: 1fr; gap: 4px 0; }
    .cp-info-key { color: #9ca3af; font-size: 12px; margin-top: 8px; }
    .cp-info-val { font-size: 14px; }
    .cp-stepper { gap: 2px; }
    .cp-step-line { width: 28px; }
    .cp-step { min-width: 60px; }
    .cp-step-label { font-size: 10px; }
    .cp-va-item { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cp-va-number { font-size: 17px; }
    .cp-actions { flex-direction: column; align-items: stretch; padding: 20px; }
    .cp-btn-primary, .cp-btn-secondary { justify-content: center; }
}

/* ============================================================
   CHECKOUT FORM (co-) — Stitch "Checkout - ANTAM LOGAM MULIA"
   ============================================================ */

/* Outer wrapper via page.php → wc-page-outer */
.wc-page-outer .co-page-header {
    max-width: 1280px;
    margin: 0 auto;
    padding: 168px 24px 32px;
}
.wc-page-outer .co-back-link {
    display: block;
    max-width: 1280px;
    margin: 0 auto 24px;
    padding: 0 24px;
}
.wc-page-outer .co-form {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* Co stepper — same look as kb- but different active step */
.co-page-title {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 28px;
}
.co-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}
.co-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
}
.co-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background .2s, color .2s;
}
.co-step-done .co-step-circle { background: #dbeafe; color: #23427E; }
.co-circle-active {
    background: #C79626 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(199,150,38,.35);
}
.co-step-label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
}
.co-label-active { color: #C79626 !important; font-weight: 700; }
.co-step-line {
    width: 60px;
    height: 2px;
    background: #e5e7eb;
    flex-shrink: 0;
    margin-bottom: 18px;
}
.co-line-active { background: #C79626; }

/* Back link */
.co-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #23427E;
    text-decoration: none;
    transition: color .2s;
    margin-bottom: 4px;
}
.co-back-link:hover { color: #C79626; }

/* Two-col layout */
.co-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
    align-items: start;
}
.co-col-side { position: sticky; top: 158px; }

/* Numbered sections */
.co-section {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    margin-bottom: 20px;
}
.co-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}
.co-num-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #23427E;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.co-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}
.co-section-body { padding: 20px 24px; }

/* Layanan cards */
.co-layanan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
.co-layanan-card {
    display: block;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.co-layanan-card:hover { border-color: #23427E; }
.co-layanan-sel {
    border-color: #23427E !important;
    box-shadow: 0 0 0 4px rgba(42,69,128,.08);
}
.co-layanan-radio { display: none; }
.co-layanan-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
}
.co-layanan-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23427E;
    font-size: 16px;
    flex-shrink: 0;
}
.co-layanan-sel .co-layanan-icon-wrap { background: #C79626; color: #fff; }
.co-layanan-name {
    font-weight: 700;
    color: #111827;
    font-size: 14px;
    margin-bottom: 2px;
}
.co-layanan-desc { font-size: 12px; color: #6b7280; line-height: 1.4; }

/* Info box */
.co-info-box {
    background: #f0f5ff;
    border: 1px solid #c7d7f9;
    border-radius: 10px;
    padding: 14px 16px;
}
.co-info-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #23427E;
    margin-bottom: 8px;
}
.co-info-list {
    margin: 0;
    padding: 0 0 0 20px;
    font-size: 13px;
    color: #374151;
    line-height: 1.7;
}

/* Billing fields wrap - style WC generated fields */
.co-billing-wrap .woocommerce-billing-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
}
.co-billing-wrap .form-row {
    margin-bottom: 16px;
}
.co-billing-wrap .form-row-first,
.co-billing-wrap .form-row-last {
    width: calc(50% - 8px);
    float: none;
    clear: none;
}
.co-billing-wrap .form-row-wide {
    width: 100%;
}
.co-billing-wrap label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}
.co-billing-wrap input[type="text"],
.co-billing-wrap input[type="email"],
.co-billing-wrap input[type="tel"],
.co-billing-wrap input[type="number"],
.co-billing-wrap textarea,
.co-billing-wrap select {
    width: 100%;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    transition: border-color .2s;
    outline: none;
    box-sizing: border-box;
}
.co-billing-wrap input:focus,
.co-billing-wrap textarea:focus,
.co-billing-wrap select:focus {
    border-color: #23427E;
    box-shadow: 0 0 0 3px rgba(42,69,128,.1);
}
.co-billing-wrap .woocommerce-invalid input,
.co-billing-wrap .woocommerce-invalid select {
    border-color: #ef4444 !important;
}

/* Summary card sidebar */
.co-summary-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.co-summary-hdr {
    background: #23427E;
    padding: 16px 20px;
}
.co-summary-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* WC order review inside co summary */
.co-col-side .woocommerce-checkout-review-order {
    padding: 0;
}
.co-col-side .shop_table.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.co-col-side .woocommerce-checkout-review-order-table thead th {
    padding: 12px 16px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}
.co-col-side .woocommerce-checkout-review-order-table th.product-total { text-align: right; }
.co-col-side .woocommerce-checkout-review-order-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
}
.co-col-side .woocommerce-checkout-review-order-table tbody td {
    padding: 12px 16px;
    vertical-align: top;
}
.co-col-side .woocommerce-checkout-review-order-table td.product-total {
    text-align: right;
    font-weight: 700;
    color: #111827;
}
.co-col-side .woocommerce-checkout-review-order-table tfoot tr {
    border-top: 1px solid #e5e7eb;
}
.co-col-side .woocommerce-checkout-review-order-table tfoot td,
.co-col-side .woocommerce-checkout-review-order-table tfoot th {
    padding: 10px 16px;
    font-size: 13px;
    color: #374151;
}
.co-col-side .woocommerce-checkout-review-order-table tfoot .order-total th,
.co-col-side .woocommerce-checkout-review-order-table tfoot .order-total td {
    font-weight: 800;
    font-size: 15px;
    color: #C79626;
    padding: 14px 16px;
}

/* WC Payment section inside co-summary */
.co-col-side #payment {
    padding: 16px;
}
.co-col-side #payment .wc_payment_methods {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.co-col-side #payment .wc_payment_method {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
}
.co-col-side #payment .wc_payment_method:last-child { border-bottom: none; }
.co-col-side #payment .wc_payment_method label { font-weight: 600; cursor: pointer; }
.co-col-side #payment .payment_box { padding: 8px 0 0; font-size: 12px; color: #6b7280; }

/* Place Order button → Bayar Sekarang */
.co-col-side #payment .place-order { margin: 0; }
.co-col-side #place_order {
    width: 100% !important;
    background: #C79626 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .2s, transform .15s !important;
    letter-spacing: .02em !important;
}
.co-col-side #place_order:hover {
    background: #b5851f !important;
    transform: translateY(-1px) !important;
}
.co-col-side #place_order::before {
    content: "\f09d  ";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* Security note */
.co-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    color: #6b7280;
    padding: 12px 16px 16px;
    border-top: 1px solid #f0f0f0;
}
.co-secure-note .fa-lock { color: #17B248; }

/* Co- Responsive */
@media (max-width: 1024px) {
    .co-layout { grid-template-columns: 1fr 340px; }
    .co-col-side { position: static; }
    .wc-page-outer .co-page-header { padding-top: 148px; }
}
@media (max-width: 860px) {
    .co-layout { grid-template-columns: 1fr; }
    .co-layanan-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
    .wc-page-outer .co-page-header { padding: 140px 16px 24px; }
    .wc-page-outer .co-back-link { padding: 0 16px; }
    .wc-page-outer .co-form { padding: 0 16px 60px; }
    .co-layanan-grid { grid-template-columns: 1fr; }
    .co-section-body { padding: 16px; }
    .co-billing-wrap .form-row-first,
    .co-billing-wrap .form-row-last {
        width: 100%;
    }
    .co-stepper { gap: 2px; }
    .co-step-line { width: 28px; }
    .co-step-label { font-size: 10px; }
}

/* Butik Selected Display */
.co-butik-selected {
    background: #f0f7ff;
    border: 1px solid #23427E;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}
.co-butik-sel-head {
    font-size: 14px;
    font-weight: 600;
    color: #23427E;
    margin-bottom: 10px;
}
.co-butik-sel-head .fas { margin-right: 6px; }
.co-butik-sel-name {
    font-size: 15px;
    font-weight: 600;
    color: #23427E;
    margin-bottom: 4px;
}
.co-butik-sel-addr, .co-butik-sel-phone {
    font-size: 13px;
    color: #5F5F5F;
    line-height: 1.5;
}
.co-butik-change-btn {
    margin-top: 10px;
    background: none;
    border: 1px solid #C79626;
    color: #C79626;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Hind Siliguri', sans-serif;
    transition: all 0.2s;
}
.co-butik-change-btn:hover { background: #C79626; color: #fff; }

/* Butik Popup Overlay */
.co-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.co-popup {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}
.co-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 2px solid #C79626;
}
.co-popup-title {
    font-size: 18px;
    font-weight: 700;
    color: #23427E;
    margin: 0;
}
.co-popup-title .fas { margin-right: 8px; color: #C79626; }
.co-popup-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
}
.co-popup-close:hover { color: #23427E; }

.co-popup-info {
    padding: 16px 24px;
    background: #fefce8;
    border-bottom: 1px solid #fde68a;
}
.co-popup-info-head {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 8px;
}
.co-popup-info-head .fas { margin-right: 6px; }
.co-popup-info-list {
    margin: 0 0 10px 20px;
    padding: 0;
    font-size: 13px;
    color: #78350f;
    line-height: 1.7;
}
.co-popup-hours {
    font-size: 12px;
    color: #78350f;
    line-height: 1.6;
}

.co-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px 24px;
}
.co-popup-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
}
.co-popup-tab {
    padding: 6px 12px;
    background: #23427E;
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Hind Siliguri', sans-serif;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}
.co-popup-tab:hover { background: #1a3568; }
.co-popup-tab.active { background: #C79626; }

.co-popup-panel { display: none; }
.co-popup-panel.active { display: block; }

.co-popup-butik-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}
.co-popup-butik-card:hover { border-color: #C79626; }
.co-popup-butik-name {
    font-size: 15px;
    font-weight: 600;
    color: #23427E;
    margin-bottom: 8px;
}
.co-popup-butik-addr, .co-popup-butik-phone {
    font-size: 13px;
    color: #5F5F5F;
    line-height: 1.5;
    margin-bottom: 4px;
}
.co-popup-butik-addr .fas, .co-popup-butik-phone .fas {
    color: #C79626;
    margin-right: 6px;
    width: 14px;
    text-align: center;
}
.co-popup-select-btn {
    margin-top: 10px;
    background: #17B248;
    color: #fff;
    border: none;
    padding: 8px 24px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Hind Siliguri', sans-serif;
    transition: background 0.2s;
}
.co-popup-select-btn:hover { background: #0f8a37; }

/* Popup responsive */
@media (max-width: 600px) {
    .co-popup { max-height: 95vh; border-radius: 8px; }
    .co-popup-header { padding: 12px 16px; }
    .co-popup-info { padding: 12px 16px; }
    .co-popup-body { padding: 12px 16px 16px; }
    .co-popup-tab { padding: 5px 8px; font-size: 10px; }
}

/* ============================================================
   RIWAYAT PESANAN (rp-) — Stitch "Riwayat Pesanan" design
   Renders inside .as-main of page-akun-saya.php
   ============================================================ */

.rp-header { margin-bottom: 24px; }
.rp-title {
    font-size: 24px;
    font-weight: 800;
    color: #23427E;
    margin: 0 0 4px;
}
.rp-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Filter toolbar */
.rp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.rp-filter-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rp-filter-wide  { flex: 1; min-width: 180px; }
.rp-filter-group:not(.rp-filter-wide):not(.rp-filter-btn-group) { width: 160px; }
.rp-filter-label { font-size: 12px; font-weight: 600; color: #374151; }
.rp-label-hidden { visibility: hidden; }

.rp-input-wrap, .rp-select-wrap {
    position: relative;
    height: 42px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: border-color .2s;
}
.rp-input-wrap:focus-within,
.rp-select-wrap:focus-within { border-color: #23427E; }
.rp-input-icon {
    position: absolute;
    left: 11px;
    color: #9ca3af;
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}
.rp-input {
    width: 100%;
    padding: 0 12px 0 34px;
    border: none;
    outline: none;
    font-size: 13px;
    color: #111827;
    background: transparent;
    height: 100%;
}
.rp-select {
    width: 100%;
    padding: 0 32px 0 12px;
    border: none;
    outline: none;
    font-size: 13px;
    color: #111827;
    background: transparent;
    height: 100%;
    cursor: pointer;
    appearance: none;
}
.rp-select-noicon { padding-left: 10px; }
.rp-select-arrow {
    position: absolute;
    right: 10px;
    color: #9ca3af;
    font-size: 11px;
    pointer-events: none;
}
.rp-apply-btn {
    height: 42px;
    background: #C79626;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: background .2s;
}
.rp-apply-btn:hover { background: #b5851f; }

/* Table card */
.rp-table-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.rp-table-scroll { overflow-x: auto; }
.rp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 620px;
}
.rp-thead-row {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.rp-th {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #23427E;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    text-align: left;
}
.rp-th-right  { text-align: right; }
.rp-th-center { text-align: center; }
.rp-th-product { min-width: 200px; }

.rp-row {
    border-bottom: 1px solid #f3f4f6;
    transition: background .15s;
}
.rp-row:last-child { border-bottom: none; }
.rp-row:hover { background: #f9fafb; }
.rp-row-cancelled { opacity: .7; }

.rp-td {
    padding: 14px 16px;
    vertical-align: middle;
    color: #111827;
}
.rp-td-right  { text-align: right; }
.rp-td-center { text-align: center; }
.rp-td-date   { color: #6b7280; white-space: nowrap; }

.rp-order-link {
    font-weight: 700;
    color: #23427E;
    text-decoration: none;
}
.rp-order-link:hover { color: #C79626; text-decoration: underline; }

.rp-product-cell { display: flex; align-items: center; gap: 10px; }
.rp-product-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.rp-thumb-ph {
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C79626;
    font-size: 16px;
}
.rp-thumb-dim { opacity: .5; }
.rp-product-name {
    font-weight: 600;
    color: #111827;
    margin: 0 0 2px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.rp-product-qty {
    font-size: 11px;
    color: #9ca3af;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.rp-extra-items {
    background: #f3f4f6;
    color: #6b7280;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
}

.rp-total {
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

/* Status badges */
.rp-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.rp-badge-selesai { background: #d1fae5; color: #065f46; }
.rp-badge-proses  { background: #dbeafe; color: #1a3568; }
.rp-badge-pending { background: #fef3c7; color: #92400e; }
.rp-badge-batal   { background: #fee2e2; color: #991b1b; }
.rp-badge-default { background: #f3f4f6; color: #6b7280; }

/* Action buttons */
.rp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.rp-btn-pay {
    background: #C79626;
    color: #fff;
    border-color: #C79626;
}
.rp-btn-pay:hover { background: #b5851f; color: #fff; }
.rp-btn-detail {
    background: transparent;
    color: #23427E;
    border-color: #23427E;
}
.rp-btn-detail:hover { background: #23427E; color: #fff; }
.rp-btn-dim {
    background: transparent !important;
    color: #9ca3af !important;
    border-color: #d1d5db !important;
}
.rp-btn-dim:hover { background: #f3f4f6 !important; color: #6b7280 !important; }

/* Empty state */
.rp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 24px;
    text-align: center;
}
.rp-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #9ca3af;
    margin-bottom: 16px;
}
.rp-empty-text {
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 20px;
}
.rp-shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #C79626;
    color: #fff;
    padding: 11px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: background .2s;
}
.rp-shop-btn:hover { background: #b5851f; color: #fff; }

/* Pagination footer */
.rp-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-wrap: wrap;
    gap: 10px;
}
.rp-pagination-info { font-size: 12px; color: #6b7280; }
.rp-pagination { display: flex; align-items: center; gap: 4px; }
.rp-page-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
    cursor: pointer;
}
.rp-page-btn:hover { border-color: #23427E; color: #23427E; }
.rp-page-active {
    background: #C79626 !important;
    color: #fff !important;
    border-color: #C79626 !important;
}
.rp-page-btn-disabled { opacity: .4; cursor: not-allowed; }
.rp-page-ellipsis { padding: 0 4px; color: #9ca3af; font-size: 13px; }

/* rp- Responsive */
@media (max-width: 860px) {
    .rp-toolbar { flex-direction: column; }
    .rp-filter-group:not(.rp-filter-wide):not(.rp-filter-btn-group) { width: 100%; }
    .rp-label-hidden { display: none; }
}
@media (max-width: 640px) {
    .rp-title { font-size: 19px; }
    .rp-table-footer { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   BE — Beli Emas Page
   Design ref: Stitch "Beli Emas - Antam Logam Mulia"
   ============================================================ */

/* Breadcrumb */
.be-breadcrumb {
    background: #f3f4f6;
    padding: 14px 0 10px;
}
.be-bc-link { color: #23427E; text-decoration: none; font-size: 13px; }
.be-bc-link:hover { text-decoration: underline; }
.be-bc-sep { font-size: 10px; color: #9ca3af; margin: 0 8px; }
.be-bc-current { font-size: 13px; color: #6b7280; font-weight: 600; }

/* Location Bar */
.be-lokasi-bar {
    background: #23427E;
    padding: 12px 0;
}
.be-lokasi-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.be-lokasi-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
}
.be-lokasi-icon { color: #C79626; font-size: 14px; }
.be-lokasi-label { opacity: .8; }
.be-lokasi-name { font-weight: 700; }
.be-lokasi-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.3);
    transition: background .15s;
    white-space: nowrap;
}
.be-lokasi-btn:hover { background: rgba(255,255,255,.25); }

/* ============================================================
   LM-LOKASI — Reusable Lokasi Butik Bar + Popup
   (dipakai di beli-emas, gift series, dan halaman produk tabel)
   ============================================================ */

.lm-lokasi-bar {
    background: #23427E;
    padding: 12px 0;
}
.lm-lokasi-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.lm-lokasi-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
    min-width: 0;
}
.lm-lokasi-icon { color: #C79626; font-size: 14px; flex-shrink: 0; }
.lm-lokasi-label { opacity: .8; white-space: nowrap; flex-shrink: 0; }
.lm-lokasi-name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}
.lm-lokasi-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.3);
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.lm-lokasi-btn:hover { background: rgba(255,255,255,.28); }

/* Overlay */
.lm-lokasi-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* Popup card */
.lm-lokasi-popup {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.lm-lokasi-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e53935;
    color: #fff;
    font-size: 20px;
    line-height: 36px;
    text-align: center;
    border: none;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.lm-lokasi-close:hover { background: #c62828; }

/* Popup header */
.lm-lokasi-popup-title {
    font-size: 20px;
    font-weight: 700;
    color: #C79626;
    text-align: center;
    margin: 28px 24px 4px;
}
.lm-lokasi-popup-sub {
    font-size: 13px;
    color: #888;
    text-align: center;
    margin: 0 24px 16px;
}
.lm-lokasi-popup-section {
    font-size: 14px;
    font-weight: 700;
    color: #23427E;
    margin: 0 24px 12px;
}

/* Current selection display */
.lm-lokasi-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #23427E;
    color: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 24px 10px;
    gap: 10px;
}
.lm-lokasi-current-text {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lm-lokasi-current-icon { color: #C79626; font-size: 15px; flex-shrink: 0; }

/* Search input */
.lm-lokasi-search {
    display: block;
    width: calc(100% - 48px);
    margin: 0 24px 8px;
    padding: 10px 14px;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}
.lm-lokasi-search:focus { border-color: #C79626; }

/* List */
.lm-lokasi-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    border-top: 1px solid #eee;
}
.lm-lokasi-placeholder {
    padding: 12px 24px;
    font-size: 12px;
    color: #aaa;
    font-style: italic;
}
.lm-lokasi-item {
    padding: 13px 24px;
    font-size: 13px;
    color: #1a1c1c;
    cursor: pointer;
    border-bottom: 1px solid #f3f3f3;
    transition: background .1s;
}
.lm-lokasi-item:hover { background: #f9f6ee; }
.lm-lokasi-item-active {
    background: #FFF9EC;
    color: #C79626;
    font-weight: 700;
}
.lm-lokasi-item-active::after {
    content: ' ✓';
}

/* Responsive */
@media (max-width: 600px) {
    .lm-lokasi-inner { flex-direction: column; align-items: flex-start; }
    .lm-lokasi-name { max-width: 260px; }
    .lm-lokasi-popup-title { font-size: 17px; }
    .lm-lokasi-item { padding: 12px 16px; }
    .lm-lokasi-current, .lm-lokasi-popup-section,
    .lm-lokasi-search, .lm-lokasi-popup-title, .lm-lokasi-popup-sub { margin-left: 16px; margin-right: 16px; }
    .lm-lokasi-search { width: calc(100% - 32px); }
}

/* Main Section */
.be-main {
    background: #f3f4f6;
    padding: 32px 0 72px;
}
.be-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

/* ── Product Card ── */
.be-product-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* Table Header */
.be-tbl-head {
    display: grid;
    grid-template-columns: 5fr 3fr 2fr 2fr;
    background: #23427E;
    padding: 12px 20px;
    gap: 12px;
}
.be-th {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.be-th-harga { text-align: left; }
.be-th-qty   { text-align: center; }
.be-th-sub   { text-align: right; }
.be-th-note {
    font-size: 10px;
    font-weight: 400;
    color: rgba(255,255,255,.7);
    text-transform: none;
    letter-spacing: 0;
}

/* Product Rows */
.be-product-row {
    display: grid;
    grid-template-columns: 5fr 3fr 2fr 2fr;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f4f6;
    align-items: center;
    transition: background .15s;
}
.be-product-row:last-of-type { border-bottom: none; }
.be-product-row:hover { background: #fffdf8; }
.be-row-oos {
    opacity: .65;
    background: #f9fafb;
}
.be-row-oos:hover { background: #f9fafb; }

/* TD cells */
.be-td { display: flex; align-items: center; }
.be-td-produk { gap: 12px; }
.be-td-harga  { flex-direction: column; align-items: flex-start; justify-content: center; }
.be-td-qty    { justify-content: center; }
.be-td-sub    { justify-content: flex-end; }

/* Product image */
.be-product-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.be-product-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.be-product-name {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}
.be-product-cert {
    font-size: 11px;
    color: #9ca3af;
}
.be-oos-badge {
    display: inline-block;
    background: #fee2e2;
    color: #dc2626;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 2px;
}

/* Price */
.be-price-val {
    font-size: 14px;
    font-weight: 700;
    color: #23427E;
}
.be-price-incl {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 2px;
}
.be-price-na, .be-qty-na {
    color: #d1d5db;
    font-size: 18px;
    font-weight: 300;
}

/* Qty Spinner */
.be-qty-spinner {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.be-qty-btn {
    width: 30px;
    height: 34px;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.be-qty-btn:hover { background: #23427E; color: #fff; }
.be-qty-input {
    width: 42px;
    height: 34px;
    border: none;
    border-left: 1.5px solid #e5e7eb;
    border-right: 1.5px solid #e5e7eb;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    background: #fff;
    -moz-appearance: textfield;
    outline: none;
}
.be-qty-input::-webkit-inner-spin-button,
.be-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Subtotal */
.be-subtotal-val {
    font-size: 14px;
    font-weight: 700;
    color: #C79626;
}

/* Note & no-data */
.be-note {
    font-size: 11px;
    color: #9ca3af;
    padding: 14px 20px;
    border-top: 1px solid #f3f4f6;
    margin: 0;
    line-height: 1.6;
}
.be-no-data {
    padding: 32px 20px;
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
}

/* ── Sidebar ── */
.be-col-side { position: sticky; top: 164px; height: max-content; }
.be-sidebar-wrap { display: flex; flex-direction: column; gap: 16px; }

/* Summary Card */
.be-summary-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px 20px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.be-summary-title {
    font-size: 20px;
    font-weight: 800;
    color: #C79626;
    margin: 0 0 2px;
}
.be-summary-date {
    font-size: 12px;
    color: #9ca3af;
    margin: 0 0 14px;
}
.be-summary-items {
    min-height: 40px;
    margin-bottom: 12px;
}
.be-sum-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    padding: 4px 0;
    border-bottom: 1px dashed #f3f4f6;
}
.be-sum-item:last-child { border-bottom: none; }
.be-summary-empty {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    padding: 6px 0;
    margin: 0;
}
.be-summary-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 12px 0;
}
.be-summary-rows { display: flex; flex-direction: column; gap: 6px; }
.be-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #374151;
}
.be-sum-val { font-weight: 600; color: #374151; font-size: 13px; }
.be-row-grand {
    border-top: 2px solid #e5e7eb;
    padding-top: 10px;
    margin-top: 4px;
    font-size: 15px;
}
.be-grand-val {
    font-size: 18px;
    font-weight: 800;
    color: #23427E;
}
.be-row-dpp { margin-top: 0; }
.be-dpp-lbl { font-size: 11px; color: #9ca3af; }
.be-dpp-val { font-size: 11px; color: #9ca3af; font-weight: 500; }
.be-pmk-note {
    font-size: 10px;
    color: #9ca3af;
    margin: 2px 0 0;
}

/* Cart button — green CTA */
.be-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    background: #17B248;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s;
    box-shadow: 0 3px 10px rgba(16,185,129,.25);
}
.be-cart-btn:hover { background: #0f8a37; }

/* Brankas Promo Card */
.be-brankas-card {
    background: #23427E;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(42,69,128,.15);
}
.be-brankas-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.be-brankas-logo {
    background: #C79626;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 3px 10px;
    border-radius: 4px;
}
.be-brankas-text {
    font-size: 13px;
    color: rgba(255,255,255,.85);
    margin: 0 0 14px;
    line-height: 1.5;
}
.be-brankas-btn {
    display: inline-block;
    background: #C79626;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s;
}
.be-brankas-btn:hover { background: #a57c1f; }

/* Tax Info Card */
.be-tax-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.be-tax-title {
    font-size: 14px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.be-tax-icon { color: #C79626; font-size: 13px; }
.be-tax-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}
.be-tax-list li {
    font-size: 12px;
    color: #4b5563;
    padding: 4px 0 4px 16px;
    border-bottom: 1px dashed #f3f4f6;
    position: relative;
}
.be-tax-list li:last-child { border-bottom: none; }
.be-tax-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #C79626;
    font-size: 14px;
    line-height: 1;
    top: 5px;
}
.be-tax-link {
    font-size: 12px;
    font-weight: 600;
    color: #23427E;
    text-decoration: none;
}
.be-tax-link:hover { text-decoration: underline; }

/* ── Budget Calculator Banner ── */
.be-calc-banner {
    background: #1a3568;
    padding: 40px 0;
}
.be-calc-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.be-calc-left {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #fff;
}
.be-calc-icon {
    font-size: 36px;
    color: #C79626;
    flex-shrink: 0;
}
.be-calc-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}
.be-calc-sub {
    font-size: 13px;
    color: rgba(255,255,255,.75);
}
.be-calc-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.be-calc-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 10px;
    padding: 0 14px;
    gap: 8px;
}
.be-calc-rp {
    color: rgba(255,255,255,.7);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.be-calc-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    width: 200px;
    height: 44px;
    -moz-appearance: textfield;
}
.be-calc-input::placeholder { color: rgba(255,255,255,.45); }
.be-calc-input::-webkit-inner-spin-button,
.be-calc-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.be-calc-btn {
    background: #C79626;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 0 28px;
    height: 44px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.be-calc-btn:hover { background: #a57c1f; }
.be-calc-result {
    margin-top: 24px;
}
.be-calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.be-calc-item {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.be-calc-item-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.be-calc-item-qty {
    font-size: 20px;
    font-weight: 800;
    color: #C79626;
}
.be-calc-item-total {
    font-size: 11px;
    color: rgba(255,255,255,.65);
}
.be-calc-empty {
    color: rgba(255,255,255,.65);
    font-size: 13px;
    margin: 0;
}

/* be- Responsive */
@media (max-width: 1024px) {
    .be-layout { grid-template-columns: 1fr 300px; }
}
@media (max-width: 860px) {
    .be-layout { grid-template-columns: 1fr; }
    .be-col-side { position: static; }
    .be-tbl-head,
    .be-product-row { grid-template-columns: 1fr 1fr; }
    .be-th-qty, .be-th-sub,
    .be-td-qty,  .be-td-sub  { display: none; }
    .be-calc-inner { flex-direction: column; align-items: flex-start; }
    .be-calc-right { width: 100%; }
    .be-calc-input { width: 100%; }
}
@media (max-width: 540px) {
    .be-tbl-head { display: none; }
    .be-product-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px 16px;
    }
    .be-td-harga, .be-td-qty, .be-td-sub { display: flex; }
    .be-td-produk { flex-direction: row; }
    .be-lokasi-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   SH — Shop / Archive Product
   ============================================================ */

.sh-hero {
    background: linear-gradient(135deg, #23427E 0%, #1a3568 100%);
    color: #fff;
    padding: 200px 0 40px;
    text-align: center;
}
.sh-hero-title {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px;
    color: #fff;
}
.sh-hero-sub {
    font-size: 14px;
    color: rgba(255,255,255,.8);
    margin: 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.sh-breadcrumb {
    background: #f3f4f6;
    padding: 12px 0;
}
.sh-bc-link { color: #23427E; text-decoration: none; font-size: 13px; }
.sh-bc-link:hover { text-decoration: underline; }
.sh-bc-sep { font-size: 10px; color: #9ca3af; margin: 0 8px; }
.sh-bc-current { font-size: 13px; color: #6b7280; font-weight: 600; }

.sh-main {
    background: #f3f4f6;
    padding: 28px 0 72px;
}
.sh-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}

/* Sidebar */
.sh-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 164px; }
.sh-filter-card,
.sh-info-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.sh-filter-title {
    font-size: 14px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sh-filter-icon { color: #C79626; font-size: 13px; }

.sh-cat-list { list-style: none; padding: 0; margin: 0; }
.sh-cat-list li { border-bottom: 1px dashed #f3f4f6; }
.sh-cat-list li:last-child { border-bottom: none; }
.sh-cat-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    color: #374151;
    font-size: 13px;
    text-decoration: none;
    transition: color .15s;
}
.sh-cat-link:hover { color: #C79626; }
.sh-cat-active { color: #C79626; font-weight: 700; }
.sh-cat-count {
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}
.sh-cat-active .sh-cat-count { background: #C79626; color: #fff; }

.sh-price-form { display: flex; flex-direction: column; gap: 10px; }
.sh-price-row { display: flex; flex-direction: column; gap: 4px; }
.sh-price-lbl { font-size: 11px; color: #6b7280; font-weight: 600; }
.sh-price-input {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color .15s;
}
.sh-price-input:focus { border-color: #23427E; }
.sh-price-btn {
    background: #23427E;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    margin-top: 4px;
}
.sh-price-btn:hover { background: #1a3568; }

.sh-info-card { text-align: center; }
.sh-info-icon { font-size: 28px; color: #C79626; }
.sh-info-title {
    font-size: 14px;
    font-weight: 700;
    color: #23427E;
    margin: 8px 0 6px;
}
.sh-info-text {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    margin: 0 0 10px;
}
.sh-info-link {
    font-size: 12px;
    font-weight: 700;
    color: #C79626;
    text-decoration: none;
}
.sh-info-link:hover { text-decoration: underline; }

/* Content */
.sh-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    margin-bottom: 18px;
    gap: 16px;
    flex-wrap: wrap;
}
.sh-result-count { font-size: 13px; color: #6b7280; margin: 0; }
.sh-sort .orderby,
.sh-sort select {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: #1f2937;
    background: #fff;
    cursor: pointer;
}

/* Product Grid */
.sh-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.sh-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.sh-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.sh-card-link { text-decoration: none; color: inherit; display: block; }
.sh-card-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f9fafb;
    overflow: hidden;
}
.sh-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.sh-card:hover .sh-card-img { transform: scale(1.05); }
.sh-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.sh-badge-seri { background: #C79626; color: #fff; }
.sh-badge-oos  { background: #ef4444; color: #fff; top: 10px; right: 10px; left: auto; }
.sh-card-body { padding: 14px 16px 6px; }
.sh-card-weight {
    display: inline-block;
    background: #f3f4f6;
    color: #23427E;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 6px;
}
.sh-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 6px;
    line-height: 1.35;
    min-height: 2.7em;
}
.sh-card-cert {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 8px;
}
.sh-card-cert .fas { color: #C79626; }
.sh-card-price {
    font-size: 16px;
    font-weight: 800;
    color: #23427E;
    margin-bottom: 8px;
}
.sh-card-price .amount { color: #23427E; }
.sh-card-action { padding: 0 16px 16px; margin-top: auto; }
.sh-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: #C79626;
    color: #fff;
    border: none;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}
.sh-card-btn:hover { background: #a57c1f; color: #fff; }
.sh-btn-disabled { background: #d1d5db; cursor: not-allowed; pointer-events: none; }

.sh-pagination { margin-top: 28px; text-align: center; }
.sh-pagination .woocommerce-pagination ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
}
.sh-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #374151;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.sh-pagination .page-numbers.current,
.sh-pagination .page-numbers:hover {
    background: #C79626;
    color: #fff;
    border-color: #C79626;
}

.sh-empty {
    background: #fff;
    border-radius: 12px;
    padding: 60px 32px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.sh-empty-icon { font-size: 48px; color: #d1d5db; margin-bottom: 16px; }
.sh-empty-title { font-size: 18px; color: #1f2937; margin: 0 0 8px; }
.sh-empty-text { color: #6b7280; margin: 0 0 18px; font-size: 13px; }
.sh-empty-btn {
    display: inline-block;
    background: #C79626;
    color: #fff;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
}

/* sh- Responsive */
@media (max-width: 960px) {
    .sh-layout { grid-template-columns: 220px 1fr; }
}
@media (max-width: 768px) {
    .sh-layout { grid-template-columns: 1fr; }
    .sh-sidebar { position: static; }
    .sh-hero { padding: 180px 0 30px; }
    .sh-hero-title { font-size: 24px; }
}

/* ============================================================
   SP — Single Product
   ============================================================ */

.sp-breadcrumb {
    background: #f3f4f6;
    padding: 168px 0 12px;
}
.sp-bc-link { color: #23427E; text-decoration: none; font-size: 13px; }
.sp-bc-link:hover { text-decoration: underline; }
.sp-bc-sep { font-size: 10px; color: #9ca3af; margin: 0 8px; }
.sp-bc-current { font-size: 13px; color: #6b7280; font-weight: 600; }

.sp-main {
    background: #f3f4f6;
    padding: 24px 0 72px;
}
.sp-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* Gallery */
.sp-main-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f9fafb;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.sp-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sp-img-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #C79626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sp-img-oos { background: #ef4444; left: auto; right: 12px; }
.sp-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.sp-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .15s;
}
.sp-thumb:hover, .sp-thumb-active { border-color: #C79626; }

/* Info */
.sp-info-cat {
    display: inline-block;
    background: #f3f4f6;
    color: #23427E;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}
.sp-info-title {
    font-size: 24px;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 12px;
    line-height: 1.25;
}
.sp-info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 18px;
}
.sp-meta-item .fas { color: #C79626; margin-right: 4px; }

/* Price Card */
.sp-price-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.sp-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}
.sp-price-lbl { color: #6b7280; }
.sp-price-val { font-weight: 700; color: #374151; }
.sp-price-tax { color: #C79626; font-weight: 600; }
.sp-price-divider { height: 1px; background: #e5e7eb; margin: 8px 0; }
.sp-price-grand-lbl {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}
.sp-price-grand-val {
    font-size: 24px;
    font-weight: 800;
    color: #C79626;
}

.sp-stock-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #17B248;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
}
.sp-stock-out { color: #ef4444; }
.sp-stock-icon { font-size: 16px; }

/* Cart form */
.sp-cart-form { margin: 0 0 18px; }
.sp-qty-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.sp-qty-lbl { font-size: 13px; color: #374151; font-weight: 600; }
.sp-qty-spinner {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.sp-qty-btn {
    width: 38px;
    height: 42px;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}
.sp-qty-btn:hover { background: #23427E; color: #fff; }
.sp-qty-input {
    width: 56px;
    height: 42px;
    border: none;
    border-left: 1.5px solid #e5e7eb;
    border-right: 1.5px solid #e5e7eb;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    background: #fff;
    -moz-appearance: textfield;
    outline: none;
}
.sp-qty-input::-webkit-inner-spin-button,
.sp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.sp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-btn-cart, .sp-btn-buy {
    flex: 1;
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, opacity .15s;
    text-decoration: none;
}
.sp-btn-cart {
    background: #fff;
    color: #23427E;
    border: 2px solid #23427E;
}
.sp-btn-cart:hover { background: #23427E; color: #fff; }
.sp-btn-buy {
    background: #17B248;
    color: #fff;
}
.sp-btn-buy:hover { background: #0f8a37; }
.sp-btn-cart:disabled, .sp-btn-buy:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Trust badges */
.sp-trust {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}
.sp-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}
.sp-trust-item .fas { color: #C79626; font-size: 14px; }

/* Tabs */
.sp-tabs {
    background: #fff;
    border-radius: 14px;
    margin-top: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow: hidden;
}
.sp-tab-nav {
    display: flex;
    border-bottom: 2px solid #f3f4f6;
    overflow-x: auto;
}
.sp-tab-btn {
    padding: 14px 22px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.sp-tab-btn:hover { color: #23427E; }
.sp-tab-btn.sp-tab-active {
    color: #C79626;
    border-bottom-color: #C79626;
}
.sp-tab-content {
    padding: 22px 26px;
    display: none;
    font-size: 13px;
    color: #374151;
    line-height: 1.7;
}
.sp-tab-content.sp-tab-active { display: block; }
.sp-desc p { margin: 0 0 12px; }

.sp-info-tbl { width: 100%; border-collapse: collapse; }
.sp-info-tbl th, .sp-info-tbl td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px dashed #f3f4f6;
    font-size: 13px;
}
.sp-info-tbl th {
    color: #23427E;
    font-weight: 700;
    width: 180px;
}
.sp-info-tbl td { color: #374151; }

.sp-kurir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.sp-kurir-item {
    background: #f9fafb;
    border-radius: 10px;
    padding: 16px 18px;
}
.sp-kurir-icon { font-size: 22px; color: #C79626; margin-bottom: 8px; display: inline-block; }
.sp-kurir-item h4 { font-size: 14px; font-weight: 700; color: #1f2937; margin: 0 0 4px; }
.sp-kurir-item p { font-size: 12px; color: #6b7280; margin: 0; line-height: 1.5; }

/* Related */
.sp-related { margin-top: 32px; }
.sp-related-title {
    font-size: 20px;
    font-weight: 800;
    color: #23427E;
    margin: 0 0 18px;
}
.sp-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.sp-rel-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
    display: block;
}
.sp-rel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.sp-rel-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.sp-rel-body { padding: 10px 12px 14px; }
.sp-rel-weight {
    display: inline-block;
    background: #f3f4f6;
    color: #23427E;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 4px;
}
.sp-rel-name {
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.3;
    min-height: 2.6em;
}
.sp-rel-price {
    font-size: 14px;
    font-weight: 800;
    color: #C79626;
}

/* sp- Responsive */
@media (max-width: 860px) {
    .sp-layout { grid-template-columns: 1fr; padding: 18px; }
    .sp-info-title { font-size: 20px; }
}
@media (max-width: 540px) {
    .sp-actions { flex-direction: column; }
    .sp-btn-cart, .sp-btn-buy { width: 100%; }
}

/* ============================================================
   SB — Simulasi Buyback
   ============================================================ */

/* Hero */
.sb-hero {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: #e5e7eb;
    margin-top: 130px;
}
.sb-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
}
.sb-hero-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sb-hero-title {
    color: #fff;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: .04em;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
    margin: 0;
}

/* Breadcrumb */
.sb-breadcrumb {
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 0;
}
.sb-bc-link { color: #6b7280; text-decoration: none; font-size: 13px; }
.sb-bc-link:hover { color: #23427E; }
.sb-bc-sep { font-size: 10px; color: #9ca3af; margin: 0 10px; }
.sb-bc-current { font-size: 13px; color: #C79626; font-weight: 700; }

/* Main */
.sb-main { background: #f9fafb; padding: 48px 0 64px; }

/* Intro */
.sb-intro { margin-bottom: 40px; }
.sb-intro-title {
    font-size: 30px;
    font-weight: 800;
    color: #C79626;
    margin: 0 0 14px;
    line-height: 1.2;
}
.sb-intro-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #4b5563;
    margin: 0;
    max-width: 1100px;
}
.sb-intro-desc em { color: #9ca3af; font-style: italic; }

/* Chart Card */
.sb-chart-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    padding: 18px;
    margin-bottom: 40px;
}
.sb-chart-wrap {
    position: relative;
    min-height: 400px;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    overflow: hidden;
    background: #fafbfc;
}
#sb-chart { width: 100%; height: 380px; }

/* Overlay Card */
.sb-overlay-card {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 230px;
    background: #fff;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
    font-size: 13px;
    z-index: 10;
}
.sb-ov-lbl {
    font-size: 12px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 2px;
}
.sb-ov-val {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 10px;
}
.sb-ov-price { color: #23427E; }
.sb-ov-neutral { color: #6b7280; }
.sb-ov-meta {
    font-size: 13px;
    color: #4b5563;
    margin: 0 0 10px;
    line-height: 1.5;
}
.sb-ov-btn {
    display: inline-block;
    border: 1.5px solid #23427E;
    color: #23427E;
    background: #fff;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sb-ov-btn:hover { background: #23427E; color: #fff; }

.sb-chart-footer {
    position: absolute;
    bottom: 16px;
    left: 18px;
    font-size: 11px;
    color: #6b7280;
}
.sb-chart-foot-title { font-weight: 700; color: #23427E; margin: 0; }
.sb-chart-foot-sub { margin: 2px 0 0; }

/* Simulation Layout */
.sb-sim-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 28px;
    margin-bottom: 56px;
    align-items: start;
}
.sb-sim-main { display: flex; flex-direction: column; gap: 22px; }
.sb-sim-side { position: sticky; top: 164px; }

/* Card base */
.sb-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding: 26px;
}

/* Simulasi Card */
.sb-sim-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: center;
}
.sb-card-title { font-size: 22px; font-weight: 800; margin: 0 0 10px; line-height: 1.2; }
.sb-title-gold { color: #C79626; }
.sb-card-desc { font-size: 13px; color: #4b5563; line-height: 1.7; margin: 0; }

.sb-sim-form { display: flex; flex-direction: column; gap: 8px; }
.sb-sim-lbl {
    font-size: 13px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 4px;
}
.sb-input-group {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid #e5e7eb;
}
.sb-input {
    flex: 1;
    border: none;
    padding: 12px 14px;
    font-size: 14px;
    color: #1f2937;
    outline: none;
    background: #fff;
    -moz-appearance: textfield;
    min-width: 0;
}
.sb-input::-webkit-inner-spin-button,
.sb-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.sb-input:focus { background: #fff8eb; }
.sb-btn-hitung {
    background: #C79626;
    color: #fff;
    border: none;
    padding: 0 28px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.sb-btn-hitung:hover { background: #a57c1f; }
.sb-sim-note { font-size: 11px; color: #9ca3af; margin: 0; }

/* Tax Card */
.sb-tax-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.sb-tax-icon-wrap {
    color: #C79626;
    font-size: 22px;
    margin-top: 2px;
    flex-shrink: 0;
}
.sb-tax-title {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 12px;
    line-height: 1.4;
}
.sb-tax-text {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.75;
    margin: 0 0 12px;
}
.sb-tax-text:last-child { margin-bottom: 0; }
.sb-tax-text strong { color: #23427E; }

/* Summary Card */
.sb-summary-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
    padding: 26px 24px;
}
.sb-sum-title {
    font-size: 22px;
    font-weight: 800;
    color: #C79626;
    margin: 0 0 18px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}
.sb-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
}
.sb-sum-lbl { color: #4b5563; display: inline-flex; align-items: center; gap: 6px; }
.sb-sum-info {
    color: #9ca3af;
    font-size: 11px;
    cursor: help;
}
.sb-sum-val { font-weight: 700; font-size: 13px; }
.sb-val-navy { color: #23427E; }
.sb-val-red  { color: #ef4444; }
.sb-sum-row-line {
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 16px;
    margin-bottom: 4px;
}
.sb-sum-row-grand {
    padding: 16px 0 22px;
}
.sb-sum-grand-lbl {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}
.sb-sum-grand-val {
    font-size: 22px;
    font-weight: 800;
    color: #23427E;
}
.sb-sum-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #17B248;
    color: #fff;
    padding: 13px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s;
    box-shadow: 0 3px 10px rgba(23,178,72,.25);
}
.sb-sum-btn:hover { background: #0f8a37; color: #fff; }

/* Bottom Layout */
.sb-bottom-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 32px;
    margin-bottom: 56px;
}
.sb-bot-title {
    font-size: 26px;
    font-weight: 800;
    color: #C79626;
    line-height: 1.2;
    margin: 0 0 20px;
}
.sb-bot-p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.8;
    margin: 0 0 14px;
}

/* Accordion */
.sb-bot-acc { display: flex; flex-direction: column; gap: 14px; }
.sb-acc {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.sb-acc-gold {
    background: #fff;
    border: 1px solid #C79626;
}
.sb-acc-navy {
    background: #23427E;
    color: #fff;
}
.sb-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    cursor: pointer;
    transition: background .15s;
}
.sb-acc-gold .sb-acc-head {
    background: #C79626;
    color: #fff;
}
.sb-acc-navy .sb-acc-head:hover { background: #1a3568; }
.sb-acc-head h3 { font-size: 15px; font-weight: 800; margin: 0; }
.sb-acc-arrow { font-size: 12px; transition: transform .2s; }
.sb-acc-open .sb-acc-arrow { transform: rotate(180deg); }

.sb-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    background: #fff;
    color: #4b5563;
}
.sb-acc-open .sb-acc-body { max-height: 800px; }
.sb-acc-navy .sb-acc-body { background: #fff; color: #4b5563; }
.sb-acc-content {
    padding: 22px;
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 22px;
    align-items: center;
}
.sb-acc-content-text { display: block; }
.sb-acc-text p {
    font-size: 13px;
    line-height: 1.75;
    margin: 0 0 10px;
    color: #4b5563;
}
.sb-acc-text p:last-child { margin-bottom: 0; }
.sb-acc-text em { color: #C79626; font-style: italic; }
.sb-acc-img-wrap { text-align: center; }
.sb-acc-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    border-radius: 10px;
}
.sb-acc-list {
    padding-left: 18px;
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: #4b5563;
}
.sb-acc-list li::marker { color: #C79626; font-weight: 700; }
.sb-acc-link { color: #C79626; font-weight: 700; text-decoration: none; }
.sb-acc-link:hover { text-decoration: underline; }

/* Related */
.sb-related { margin-top: 24px; text-align: center; }
.sb-related-title {
    font-size: 26px;
    font-weight: 800;
    color: #C79626;
    margin: 0 0 24px;
}
.sb-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.sb-rel-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
    display: block;
    text-align: left;
}
.sb-rel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.sb-rel-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.sb-rel-body { padding: 12px 14px 16px; }
.sb-rel-weight {
    display: inline-block;
    background: #f3f4f6;
    color: #23427E;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 6px;
}
.sb-rel-name {
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.3;
    min-height: 2.6em;
}
.sb-rel-price {
    font-size: 14px;
    font-weight: 800;
    color: #C79626;
}

/* sb- Responsive */
@media (max-width: 960px) {
    .sb-sim-layout, .sb-bottom-layout { grid-template-columns: 1fr; }
    .sb-sim-side { position: static; }
    .sb-sim-row { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
    .sb-hero { height: 170px; }
    .sb-hero-title { font-size: 26px; }
    .sb-overlay-card {
        position: static;
        width: auto;
        margin-bottom: 16px;
    }
    .sb-chart-footer { position: static; padding: 12px 18px; }
    .sb-chart-wrap { padding-bottom: 8px; }
    .sb-acc-content { grid-template-columns: 1fr; }
    .sb-acc-img-wrap { text-align: center; }
    .sb-intro-title, .sb-bot-title, .sb-related-title { font-size: 22px; }
}

/* ============================================================
   BELI PERAK — bp- prefix
   ============================================================ */

/* --- Hero --- */
.bp-hero {
    background: linear-gradient(135deg, #23427E 0%, #1a3568 100%);
    margin-top: 130px;
    padding: 48px 0 36px;
    color: #fff;
}
.bp-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.bp-hero-title {
    font-family: 'Mucho_Bold', sans-serif;
    font-size: 36px;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
}
.bp-hero-sub {
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    margin: 0;
}
.bp-filter-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.bp-filter-btn:hover { background: rgba(255,255,255,0.22); }

/* --- Breadcrumb --- */
.bp-breadcrumb {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 0;
    font-size: 13px;
    color: #5F5F5F;
}
.bp-bc-link {
    color: #23427E;
    text-decoration: none;
}
.bp-bc-link:hover { text-decoration: underline; }
.bp-bc-sep {
    color: #aaa;
    font-size: 10px;
    margin: 0 8px;
}
.bp-bc-current {
    color: #C79626;
    font-weight: 600;
}

/* --- Main Section --- */
.bp-main {
    background: #f3f4f6;
    padding: 32px 0 60px;
    min-height: 60vh;
}
.bp-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.bp-products-col {
    flex: 1;
    min-width: 0;
}
.bp-sidebar-col {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 160px;
}

/* --- Category Header --- */
.bp-cat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}
.bp-cat-bar {
    display: block;
    width: 4px;
    height: 28px;
    background: #23427E;
    border-radius: 3px;
    flex-shrink: 0;
}
.bp-cat-title {
    font-family: 'Mucho_Bold', sans-serif;
    font-size: 20px;
    color: #23427E;
    margin: 0;
}

/* --- Product Card --- */
.bp-product-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 14px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: box-shadow .2s, transform .15s;
}
.bp-product-card:hover {
    box-shadow: 0 6px 20px rgba(35,66,126,.10);
    transform: translateY(-1px);
}
.bp-product-card.bp-oos {
    opacity: 0.65;
    background: #fafafa;
}

/* --- Product Image --- */
.bp-product-img-wrap {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f9f9f9;
}
.bp-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Product Body --- */
.bp-product-body {
    flex: 1;
    min-width: 0;
}
.bp-product-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.bp-product-name {
    font-family: 'Mucho_Bold', sans-serif;
    font-size: 15px;
    color: #1a2a4a;
    margin: 0;
    line-height: 1.3;
}
.bp-product-desc {
    color: #5F5F5F;
    font-size: 13px;
    margin: 2px 0 6px;
}
.bp-product-pg {
    color: #5F5F5F;
    font-size: 12px;
    margin: 0 0 6px;
}
.bp-product-price {
    font-size: 18px;
    font-weight: 700;
    color: #23427E;
    line-height: 1;
}
.bp-price-unit {
    font-size: 12px;
    font-weight: 400;
    color: #5F5F5F;
    margin-left: 4px;
}

/* --- Badges --- */
.bp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.bp-badge-stock {
    background: #e6f8ed;
    color: #17B248;
}
.bp-badge-oos {
    background: #fee2e2;
    color: #dc2626;
}

/* --- Product Action (qty + subtotal) --- */
.bp-product-action {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.bp-qty-spinner {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.bp-qty-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #374151;
    transition: background .15s;
}
.bp-qty-btn:hover:not(:disabled) { background: #e5e7eb; }
.bp-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bp-qty-input {
    width: 50px;
    height: 30px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    color: #1a2a4a;
    background: #fff;
    -moz-appearance: textfield;
}
.bp-qty-input::-webkit-inner-spin-button,
.bp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bp-qty-input:disabled { background: #f3f4f6; color: #aaa; }
.bp-product-subtotal {
    font-size: 14px;
    color: #5F5F5F;
}
.bp-subtotal-val {
    font-weight: 700;
    color: #23427E;
}
.bp-oos-text {
    font-size: 13px;
    color: #dc2626;
    font-style: italic;
}

/* --- Empty State --- */
.bp-empty {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}
.bp-empty-icon {
    font-size: 40px;
    margin-bottom: 14px;
    display: block;
    color: #d1d5db;
}

/* --- Sidebar Summary Card --- */
.bp-summary-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px 20px;
    box-shadow: 0 2px 12px rgba(35,66,126,.07);
}
.bp-summary-title {
    font-family: 'Mucho_Bold', sans-serif;
    font-size: 16px;
    color: #23427E;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #23427E;
}
.bp-summary-items {
    min-height: 40px;
    margin-bottom: 14px;
}
.bp-summary-empty {
    font-size: 13px;
    color: #9ca3af;
    text-align: center;
    margin: 8px 0;
}
.bp-sum-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
}
.bp-sum-item-name {
    color: #5F5F5F;
    flex: 1;
    line-height: 1.4;
}
.bp-sum-item-val {
    font-weight: 600;
    color: #1a2a4a;
    white-space: nowrap;
}
.bp-summary-breakdown {
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    margin-bottom: 12px;
}
.bp-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}
.bp-sum-lbl { color: #5F5F5F; }
.bp-sum-val { color: #374151; font-weight: 600; }
.bp-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0f4ff;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.bp-tot-lbl {
    font-size: 14px;
    font-weight: 600;
    color: #23427E;
}
.bp-tot-val {
    font-size: 18px;
    font-weight: 700;
    color: #23427E;
}
.bp-checkout-btn {
    display: block;
    width: 100%;
    background: #17B248;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    text-align: center;
    letter-spacing: .3px;
}
.bp-checkout-btn:hover { background: #0f8a37; }
.bp-summary-note {
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
    margin-top: 12px;
    line-height: 1.5;
}

/* --- Responsive Beli Perak --- */
@media (max-width: 992px) {
    .bp-layout {
        flex-direction: column;
    }
    .bp-sidebar-col {
        width: 100%;
        position: static;
    }
    .bp-hero-row {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 576px) {
    .bp-hero { padding: 32px 0 24px; }
    .bp-hero-title { font-size: 26px; }
    .bp-product-card { flex-direction: column; }
    .bp-product-img-wrap { width: 100%; height: 180px; }
    .bp-product-action { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   HARGA EMAS HARI INI — he- prefix
   ============================================================ */

/* --- Hero (removed to match logammulia.com) --- */
.he-hero { display: none; }

/* --- Breadcrumb (removed to match logammulia.com) --- */
.he-breadcrumb { display: none; }

/* --- Main --- */
.he-main { background: #f3f4f6; padding: 28px 0 56px; margin-top: 130px; }

/* --- Location bar --- */
.he-lokasi-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #23427E;
    color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 14px 20px;
    gap: 20px;
    flex-wrap: wrap;
}
.he-lokasi-left { display: flex; align-items: center; gap: 12px; }
.he-lokasi-label { font-size: 14px; font-weight: 600; }
.he-lokasi-btn {
    border: 1px solid rgba(255,255,255,.6);
    background: transparent;
    color: #fff;
    padding: 5px 14px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s;
}
.he-lokasi-btn:hover { background: rgba(255,255,255,.15); }
.he-lokasi-right {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,.9);
    flex-wrap: wrap;
}
.he-cek-btn {
    border: 1px solid rgba(255,255,255,.6);
    background: transparent;
    color: #fff;
    padding: 5px 14px;
    border-radius: 5px;
    font-size: 13px;
    text-decoration: none;
    transition: background .2s;
    white-space: nowrap;
}
.he-cek-btn:hover { background: rgba(255,255,255,.15); color: #fff; }

/* --- Main card --- */
.he-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 24px;
    margin-bottom: 24px;
}

/* --- Two column layout --- */
.he-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.he-tables-col { width: 33.33%; max-width: 33.33%; flex-shrink: 0; min-width: 0; overflow: hidden; }
.he-sidebar-col { width: 66.66%; max-width: 66.66%; flex-shrink: 0; }
.he-sidebar-banner { position: sticky; top: 160px; border-radius: 8px; overflow: hidden; }
.he-banner-img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* --- Table header --- */
.he-tbl-header { margin-bottom: 20px; }
.he-tbl-title {
    font-family: 'Mucho_Bold', sans-serif;
    font-size: 20px;
    color: #23427E;
    margin: 0 0 4px;
}
.he-tbl-sub { font-size: 13px; color: #5F5F5F; margin: 0; }

/* --- Category sections --- */
.he-cat-section { margin-bottom: 24px; }
.he-cat-label {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    padding: 8px 12px;
    color: #374151;
    margin-bottom: 0;
}

/* --- Table --- */
.he-cat-section { overflow-x: auto; }
.he-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.he-table thead tr { background: #fff; }
.he-table th { padding: 10px 8px; font-size: 11px; color: #6b7280; font-weight: 600; border-bottom: 2px solid #dee2e6; text-align: left; }
.he-th-r { text-align: right !important; }
.he-table td { padding: 10px 8px; color: #374151; border-bottom: 1px solid #f0f0f0; }
.he-td-r { text-align: right !important; }
.he-row-alt { background: #f8f9fa; }

/* --- Full width section (Liontin) --- */
.he-full-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid #e5e7eb; }
.he-tbl-scroll { overflow-x: auto; }

/* --- Price summary sidebar card --- */
.he-price-summary {
    background: #23427E;
    color: #fff;
    border-radius: 10px;
    padding: 20px 18px;
    margin-bottom: 16px;
    text-align: center;
}
.he-ps-label { font-size: 12px; color: rgba(255,255,255,.75); margin-bottom: 6px; }
.he-ps-val { font-family: 'Mucho_Bold', sans-serif; font-size: 24px; color: #C79626; margin-bottom: 6px; }
.he-ps-change { font-size: 13px; margin-bottom: 8px; }
.he-ps-up { color: #6ee7a0; }
.he-ps-down { color: #fca5a5; }
.he-ps-note { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 14px; }
.he-ps-btn {
    display: block;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    transition: background .2s;
}
.he-ps-btn:hover { background: rgba(255,255,255,.22); color: #fff; }

/* --- Promo card --- */
.he-promo-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(35,66,126,.06);
}
.he-promo-title { font-size: 14px; color: #23427E; font-weight: 700; margin: 0 0 8px; }
.he-promo-desc { font-size: 13px; color: #5F5F5F; margin: 0 0 14px; line-height: 1.5; }
.he-promo-btn, .he-promo-btn-alt {
    display: block;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 8px;
    transition: background .2s;
}
.he-promo-btn { background: #C79626; color: #fff; }
.he-promo-btn:hover { background: #a57c1f; color: #fff; }
.he-promo-btn-alt { background: #f3f4f6; color: #23427E; border: 1px solid #e5e7eb; }
.he-promo-btn-alt:hover { background: #e5e7eb; color: #23427E; }

/* --- Simulation Section --- */
.he-sim-section {
    background: #23427E;
    padding: 40px 0;
    color: #fff;
    margin-bottom: 0;
}
.he-sim-card {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    background: rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 28px 32px;
    flex-wrap: wrap;
}
.he-sim-left { flex: 1; min-width: 240px; }
.he-sim-title { font-family: 'Mucho_Bold', sans-serif; font-size: 22px; color: #C79626; margin: 0 0 10px; }
.he-sim-desc { font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.6; margin: 0; }
.he-sim-right { flex: 1; min-width: 280px; }
.he-sim-tabs { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.he-sim-tab {
    background: rgba(255,255,255,.15);
    color: #fff;
    padding: 8px 18px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background .2s;
}
.he-sim-tab:hover { background: rgba(255,255,255,.25); color: #fff; }
.he-sim-tab-active { background: #C79626; color: #fff; }
.he-sim-tab-active:hover { background: #a57c1f; color: #fff; }
.he-sim-lbl { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.he-sim-row { display: flex; gap: 0; }
.he-sim-input {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 6px 0 0 6px;
    font-size: 14px;
    color: #1a2a4a;
    outline: none;
}
.he-sim-hitung {
    background: #C79626;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.he-sim-hitung:hover { background: #a57c1f; }
.he-sim-result {
    background: rgba(255,255,255,.1);
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 10px;
    font-size: 13px;
}
.he-result-list { margin: 0; padding-left: 18px; color: rgba(255,255,255,.9); }
.he-result-list li { margin-bottom: 5px; }

/* --- Info Section --- */
.he-info-section { background: #fff; padding: 60px 0; }
.he-info-layout { display: flex; gap: 48px; align-items: flex-start; flex-wrap: wrap; }
.he-info-text { flex: 1; min-width: 240px; }
.he-info-title { font-family: 'Mucho_Bold', sans-serif; font-size: 24px; color: #C79626; margin: 0 0 16px; line-height: 1.3; }
.he-info-desc { font-size: 14px; color: #5F5F5F; line-height: 1.7; margin-bottom: 14px; }
.he-info-accordions { flex: 2; min-width: 280px; display: flex; flex-direction: column; gap: 12px; }

/* --- Accordions --- */
.he-acc { border-radius: 8px; overflow: hidden; }
.he-acc-gold .he-acc-head { background: #C79626; color: #fff; }
.he-acc-navy .he-acc-head { background: #23427E; color: #fff; }
.he-acc-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    transition: opacity .2s;
}
.he-acc-head:hover { opacity: .9; }
.he-acc-icon { font-size: 14px; flex-shrink: 0; }
.he-acc-body { background: #fff; border: 1px solid #e5e7eb; border-top: none; }
.he-acc-content { display: flex; gap: 20px; padding: 16px 20px; }
.he-acc-text { flex: 1; font-size: 13px; color: #5F5F5F; line-height: 1.7; }
.he-acc-text p { margin: 0 0 10px; }
.he-acc-inner { padding: 14px 20px; font-size: 13px; color: #5F5F5F; line-height: 1.7; }
.he-acc-inner ol, .he-acc-inner p { margin: 0; }
.he-acc-inner ol { padding-left: 18px; }
.he-acc-inner li { margin-bottom: 6px; }

/* --- Responsive --- */
@media (max-width: 992px) {
    .he-layout { flex-direction: column; }
    .he-tables-col { width: 100%; max-width: 100%; }
    .he-sidebar-col { width: 100%; max-width: 100%; position: static; }
    .he-lokasi-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .he-lokasi-right { flex-wrap: wrap; }
    .he-sim-card { flex-direction: column; padding: 20px; }
    .he-card { padding: 16px; }
}
@media (max-width: 576px) {
    .he-info-layout { flex-direction: column; }
    .he-tbl-scroll { -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   CARA PEMBELIAN — cb- prefix
   ============================================================ */

/* Banner */
.cb-banner {
    margin-top: 130px;
    overflow: hidden;
    max-height: 220px;
}
.cb-banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Breadcrumb */
.cb-breadcrumb {
    background: #f1f1f1;
    padding: 3px 0;
    text-align: center;
    font-size: 14px;
}
.cb-bc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cb-bc-link {
    color: #5F5F5F;
    text-decoration: none;
    font-size: 14px;
}
.cb-bc-link:hover { color: #C79626; }
.cb-bc-sep { color: #999; font-size: 12px; }
.cb-bc-current { color: #C79626; font-weight: 600; }

/* Main layout */
.cb-main {
    padding: 60px 0;
}
.cb-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Sidebar */
.cb-sidebar {
    width: 260px;
    flex-shrink: 0;
}
.cb-sidebar-title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #C79626;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.cb-sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cb-sidebar-nav li {
    margin-bottom: 0;
}
.cb-nav-link {
    display: block;
    padding: 10px 0;
    color: #5F5F5F;
    text-decoration: none;
    font-size: 16px;
    border-bottom: 1px solid #f1f1f1;
    transition: color .15s;
}
.cb-nav-link:hover { color: #23427E; }
.cb-nav-active {
    color: #23427E;
    font-weight: 600;
}

/* Content area */
.cb-content {
    flex: 1;
    min-width: 0;
}

/* Page Title */
.cb-page-title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #C79626;
    margin: 0 0 30px;
}

/* Steps ordered list */
.cb-steps-list {
    padding-left: 20px;
    margin: 0;
}
.cb-steps-list > li {
    margin-bottom: 24px;
    font-size: 15px;
    color: #5F5F5F;
    line-height: 1.7;
}
.cb-steps-list > li > strong {
    display: block;
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
}
.cb-steps-list > li > p {
    margin: 0;
}
.cb-steps-list > li > ul {
    padding-left: 20px;
    margin: 8px 0 0;
}
.cb-steps-list > li > ul > li {
    margin-bottom: 8px;
    font-size: 15px;
    color: #5F5F5F;
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 992px) {
    .cb-layout { flex-direction: column; }
    .cb-sidebar { width: 100%; }
}
@media (max-width: 576px) {
    .cb-main { padding: 40px 0; }
    .cb-page-title { font-size: 24px; }
}

/* ============================================================
   VERIFIKASI PRODUK (vp-)
   ============================================================ */

/* Banner */
.vp-banner {
    margin-top: 130px;
    overflow: hidden;
    max-height: 220px;
}
.vp-banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Breadcrumb */
.vp-breadcrumb {
    background: #f1f1f1;
    padding: 3px 0;
    text-align: center;
    font-size: 14px;
}
.vp-bc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.vp-bc-link {
    color: #5F5F5F;
    text-decoration: none;
    font-size: 14px;
}
.vp-bc-link:hover { color: #C79626; }
.vp-bc-sep { color: #999; font-size: 12px; }
.vp-bc-current { color: #C79626; font-weight: 600; }

/* Section common */
.vp-section {
    padding: 60px 0;
}
.vp-section-murni {
    border-bottom: 1px solid #e5e7eb;
}

/* "EMAS. DIBUAT ULANG." section */
.vp-row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 40px;
}
.vp-col-left {
    flex: 0 0 40%;
}
.vp-col-right {
    flex: 1;
}
.vp-main-title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #C79626;
    line-height: 1.2;
    margin: 0;
}
.vp-desc {
    font-size: 15px;
    color: #5F5F5F;
    line-height: 1.7;
    margin: 0;
}
.vp-infographic {
    text-align: center;
}
.vp-infographic-img {
    max-width: 100%;
    height: auto;
}

/* Section Title */
.vp-section-title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #C79626;
    margin-bottom: 24px;
}

/* Murni dan Aman content */
.vp-murni-content p {
    font-size: 15px;
    color: #5F5F5F;
    line-height: 1.7;
    margin-bottom: 16px;
}
.vp-murni-content p:last-child {
    margin-bottom: 0;
}

/* Contact / Kendala Section */
.vp-contact {
    padding: 60px 0;
    background: #fff;
}
.vp-contact-inner {
    display: flex;
    align-items: center;
    gap: 60px;
}
.vp-contact-left {
    flex: 1;
}
.vp-contact-title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}
.vp-contact-desc {
    font-size: 15px;
    color: #5F5F5F;
    margin: 0;
}
.vp-contact-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.vp-contact-icon-wrap {
    flex-shrink: 0;
}
.vp-contact-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.vp-contact-label {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}
.vp-contact-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vp-contact-link {
    font-size: 14px;
    color: #C79626;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.vp-contact-link:hover {
    text-decoration: underline;
    color: #a57c1f;
}
.vp-contact-link i {
    font-size: 12px;
    color: #5F5F5F;
}

/* Responsive vp- */
@media (max-width: 992px) {
    .vp-row { flex-direction: column; gap: 20px; }
    .vp-col-left { flex: none; width: 100%; }
    .vp-contact-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 576px) {
    .vp-main-title { font-size: 24px; }
    .vp-section-title { font-size: 24px; }
    .vp-section { padding: 40px 0; }
    .vp-contact { padding: 40px 0; }
    .vp-contact-right { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   LACAK PESANAN (lo-)
   ============================================================ */

/* Main */
.lo-main {
    margin-top: 130px;
    padding: 40px 0 80px;
    background: #fff;
}
.lo-form-wrap {
    max-width: 780px;
}

/* Page Title */
.lo-page-title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px;
}
.lo-page-desc {
    font-size: 16px;
    color: #000;
    margin: 0 0 24px;
}

/* Form */
.lo-form {
    margin: 0;
}
.lo-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.lo-label {
    font-size: 16px;
    font-weight: 600;
    color: #23427E;
}
.lo-input {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    color: #1f2937;
    outline: none;
    transition: border-color .2s;
    width: 100%;
    max-width: 760px;
    box-sizing: border-box;
}
.lo-input:focus {
    border-color: #23427E;
    box-shadow: 0 0 0 3px rgba(35,66,126,.1);
}
.lo-submit-btn {
    background: #fff;
    color: #000;
    border: 1px solid #333;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.lo-submit-btn:hover {
    background: #f3f4f6;
}

/* Result */
.lo-result {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}
.lo-result-title {
    font-size: 18px;
    font-weight: 700;
    color: #23427E;
    margin-bottom: 12px;
}
.lo-result-msg {
    font-size: 15px;
    color: #5F5F5F;
    line-height: 1.6;
}

/* Responsive lo- */
@media (max-width: 576px) {
    .lo-page-title { font-size: 24px; }
    .lo-main { padding: 30px 0 60px; }
}

/* ========================================
   AUTH PAGES (au-) - Login & Register
   ======================================== */
.au-page {
    background: #f3f4f6;
    min-height: 100vh;
    padding: 40px 20px;
    margin-top: 144px;
}
.au-container {
    max-width: 920px;
    margin: 0 auto;
}
.au-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    padding: 40px 50px;
}
.au-title {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #C79626;
    text-align: center;
    font-style: italic;
    margin-bottom: 30px;
}
.au-alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; }
.au-alert-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* Login layout */
.au-login-layout {
    display: flex;
    gap: 40px;
    align-items: stretch;
}
.au-login-left {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}
.au-login-right {
    flex: 1;
    border-left: 1px solid #e5e7eb;
    padding-left: 40px;
}
.au-or-text {
    font-size: 16px;
    color: #5F5F5F;
    margin-bottom: 20px;
}
.au-social-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}
.au-social-btn {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s;
}
.au-social-btn:hover { opacity: 0.85; }
.au-social-fb { background: #3b5998; }
.au-social-google { background: #db4437; }

/* Form elements */
.au-form { }
.au-field { margin-bottom: 18px; }
.au-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #23427E;
    margin-bottom: 6px;
}
.au-req { color: #dc2626; }
.au-opt { font-weight: 400; color: #5F5F5F; font-size: 12px; }
.au-input-wrap {
    position: relative;
}
.au-input {
    width: 100%;
    padding: 10px 40px 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Hind Siliguri', sans-serif;
    color: #333;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.au-input:focus {
    outline: none;
    border-color: #C79626;
}
.au-input::placeholder { color: #9ca3af; }
.au-input-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 14px;
}
.au-toggle-pw { cursor: pointer; }

.au-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.au-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #5F5F5F;
    cursor: pointer;
    line-height: 1.5;
}
.au-checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    accent-color: #C79626;
}
.au-link {
    font-size: 13px;
    color: #23427E;
    text-decoration: none;
}
.au-link:hover { text-decoration: underline; }
.au-link-navy { color: #23427E; font-weight: 600; text-decoration: none; }
.au-link-navy:hover { text-decoration: underline; }
.au-link-gold { color: #C79626; text-decoration: none; }
.au-link-gold:hover { text-decoration: underline; }

/* Buttons */
.au-btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Hind Siliguri', sans-serif;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
    letter-spacing: 1px;
}
.au-btn-gold {
    background: #C79626;
    color: #fff;
}
.au-btn-gold:hover { background: #a57c1f; }
.au-btn-outline {
    background: #C79626;
    color: #fff;
    border: none;
}
.au-btn-outline:hover { background: #a57c1f; }
.au-btn-full { width: 100%; }

/* Register layout */
.au-row {
    display: flex;
    gap: 20px;
    margin-bottom: 18px;
}
.au-col { flex: 1; }
.au-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 24px 0;
}
.au-has-account {
    text-align: center;
    font-size: 14px;
    color: #5F5F5F;
    margin-bottom: 20px;
}
.au-checkboxes {
    margin-bottom: 24px;
}
.au-checkboxes .au-checkbox-label {
    margin-bottom: 10px;
}
.au-back-home {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

/* Responsive au- */
@media (max-width: 768px) {
    .au-page { margin-top: 60px; padding: 20px 15px; }
    .au-card { padding: 30px 20px; }
    .au-title { font-size: 26px; }
    .au-login-layout { flex-direction: column; gap: 20px; }
    .au-login-left {
        flex: none;
        flex-direction: row;
        gap: 15px;
        padding: 0;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 20px;
    }
    .au-login-right { border-left: none; padding-left: 0; }
    .au-or-text { margin-bottom: 0; }
    .au-social-buttons { margin-bottom: 0; }
    .au-row { flex-direction: column; gap: 0; }
    .au-col { margin-bottom: 18px; }
}
@media (max-width: 576px) {
    .au-title { font-size: 22px; }
    .au-card { padding: 24px 16px; }
}

/* Hubungi Kami page (hk-) */
.hubkami-info-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07);
    margin-bottom: 30px;
    overflow: hidden;
}
.hubkami-info-header {
    background: #23427E;
    color: #fff;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
}
.hubkami-info-body { padding: 20px; }
.hubkami-info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #5F5F5F;
}
.hubkami-icon {
    flex: 0 0 20px;
    text-align: center;
    color: #C79626;
}

/* City Tabs */
.city-tabs-wrap { margin-bottom: 30px; }
.city-tabs, .city-tabs-row2 {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}
.city-tab {
    padding: 8px 16px;
    background: #23427E;
    color: #fff;
    border: none;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Hind Siliguri', sans-serif;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    letter-spacing: 0.5px;
}
.city-tab:hover { background: #1a3568; }
.city-tab.active { background: #C79626; }

.city-panel { display: none; }
.city-panel.active { display: block; }

.butik-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
}
.butik-contact-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}
.butik-contact-name {
    font-size: 16px;
    color: #23427E;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #C79626;
}
.butik-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #5F5F5F;
    margin-bottom: 6px;
    line-height: 1.5;
}
.butik-contact-row .fas,
.butik-contact-row .fab {
    flex: 0 0 16px;
    text-align: center;
    color: #C79626;
    margin-top: 3px;
}
.butik-hours {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    font-size: 12px;
    color: #5F5F5F;
    line-height: 1.6;
}
.butik-hours p { margin-bottom: 8px; }

/* Lokasi Butik page */
.lokasi-butik-grid { }
.lokasi-kota-section { margin-bottom: 30px; }
.lokasi-kota-title {
    font-size: 18px;
    color: #23427E;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #C79626;
}
.lokasi-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 15px;
}
.lokasi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
}
.lokasi-card h3 {
    font-size: 15px;
    color: #23427E;
    font-weight: 600;
    margin-bottom: 10px;
}
.lokasi-card p {
    font-size: 13px;
    color: #5F5F5F;
    line-height: 1.5;
    margin-bottom: 6px;
}
.lokasi-card .fas { color: #C79626; margin-right: 6px; }
.lokasi-contact-footer p {
    font-size: 14px;
    color: #5F5F5F;
}

/* Responsive Hubungi/Lokasi */
@media (max-width: 768px) {
    .city-tab { padding: 6px 10px; font-size: 11px; }
    .butik-contact-grid { grid-template-columns: 1fr; }
    .lokasi-cards { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .city-tab { padding: 5px 8px; font-size: 10px; }
}

/* ============================================================
   PRODUCT LIST — Category Index Grid (pl-*)
   ============================================================ */
.pl-breadcrumb {
    background: #f8f8f8;
    padding: 14px 0;
    font-size: 13px;
    color: #5F5F5F;
    margin-top: 144px;
}
.pl-bc-link { color: #5F5F5F; text-decoration: none; }
.pl-bc-link:hover { color: #C79626; }
.pl-bc-sep { margin: 0 8px; font-size: 10px; color: #999; }
.pl-bc-current { color: #C79626; font-weight: 600; }

.pl-main { padding: 40px 0 60px; background: #fff; }
.pl-title {
    font-size: 28px;
    font-weight: 700;
    color: #C79626;
    margin-bottom: 32px;
}

.pl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
}

.pl-card { text-align: center; }
.pl-card-link { text-decoration: none; display: block; }
.pl-card-link:hover .pl-diamond { transform: rotate(45deg) scale(1.05); }

.pl-diamond-wrap {
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pl-diamond {
    width: 160px;
    height: 160px;
    transform: rotate(45deg);
    overflow: hidden;
    border: 3px solid #C79626;
    border-radius: 8px;
    background: linear-gradient(135deg, #23427E 0%, #1a3568 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    position: relative;
}
.pl-diamond-img {
    width: 200%;
    height: 200%;
    object-fit: cover;
    transform: rotate(-45deg);
    position: absolute;
}
.pl-diamond-text {
    transform: rotate(-45deg);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    padding: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pl-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #23427E;
    margin: 0 0 4px;
}
.pl-card-count {
    font-size: 12px;
    color: #999;
}

@media (max-width: 768px) {
    .pl-breadcrumb { margin-top: 100px; }
    .pl-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .pl-diamond-wrap { width: 150px; height: 150px; }
    .pl-diamond { width: 120px; height: 120px; }
    .pl-title { font-size: 22px; }
}
@media (max-width: 480px) {
    .pl-diamond-wrap { width: 130px; height: 130px; }
    .pl-diamond { width: 100px; height: 100px; }
    .pl-diamond-text { font-size: 10px; }
}

/* ============================================================
   ARCHIVE PRODUCT — Saring Sidebar (sh-* overrides)
   ============================================================ */
.sh-breadcrumb {
    background: #f8f8f8;
    padding: 14px 0;
    font-size: 13px;
    color: #5F5F5F;
    margin-top: 144px;
}
.sh-bc-link { color: #5F5F5F; text-decoration: none; }
.sh-bc-link:hover { color: #C79626; }
.sh-bc-sep { margin: 0 8px; font-size: 10px; color: #999; }
.sh-bc-current { color: #C79626; font-weight: 600; }

.sh-cat-header { padding: 28px 0 8px; }
.sh-cat-title {
    font-size: 28px;
    font-weight: 700;
    color: #C79626;
    margin: 0;
}

.sh-toolbar-wrap { padding: 12px 0; border-bottom: 1px solid #eee; }
.sh-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.sh-toolbar-left, .sh-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sh-toolbar-label {
    font-size: 13px;
    font-weight: 600;
    color: #5F5F5F;
}
.sh-toolbar select, .sh-per-page {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    color: #5F5F5F;
    background: #fff;
    cursor: pointer;
}
.sh-toolbar .woocommerce-ordering select {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
}
.sh-toolbar .woocommerce-ordering { margin: 0; }

.sh-main { padding: 30px 0 60px; background: #f3f4f6; }
.sh-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

/* Saring Sidebar */
.sh-sidebar {
    width: 260px;
    min-width: 260px;
    position: sticky;
    top: 160px;
}
.sh-saring-title {
    font-size: 20px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 16px;
}
.sh-filter-card {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.sh-filter-heading {
    font-size: 14px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.sh-filter-toggle { font-size: 12px; color: #999; }
.sh-filter-body.sh-collapsed { display: none; }

.sh-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    font-size: 13px;
    color: #5F5F5F;
}
.sh-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #17B248;
}
.sh-star-row { gap: 6px; }
.sh-stars { display: flex; gap: 2px; }
.sh-star-on { color: #C79626; font-size: 14px; }
.sh-star-off { color: #ddd; font-size: 14px; }

.sh-range-track {
    position: relative;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    margin: 12px 0 16px;
}
.sh-range-input {
    -webkit-appearance: none;
    width: 100%;
    position: absolute;
    top: -6px;
    height: 6px;
    background: transparent;
    pointer-events: none;
}
.sh-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #17B248;
    pointer-events: auto;
    cursor: pointer;
}
.sh-price-inputs {
    display: flex;
    gap: 12px;
}
.sh-price-field { flex: 1; }
.sh-price-lbl {
    font-size: 11px;
    color: #999;
    display: block;
    margin-bottom: 4px;
}
.sh-price-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    box-sizing: border-box;
}
.sh-price-note {
    font-size: 11px;
    color: #bbb;
    margin: 8px 0 0;
}

.sh-filter-apply {
    display: block;
    width: 100%;
    background: #17B248;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}
.sh-filter-apply:hover { background: #0f8a37; }

/* Product Grid */
.sh-content { flex: 1; min-width: 0; }
.sh-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.sh-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
    text-align: center;
}
.sh-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.sh-card-link { text-decoration: none; display: block; }
.sh-card-img-wrap { padding: 16px; }
.sh-card-img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
}
.sh-card-body { padding: 0 16px 8px; }
.sh-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #23427E;
    margin: 0;
    line-height: 1.4;
}
.sh-card-action { padding: 0 16px 16px; }
.sh-detail-link {
    color: #C79626;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.sh-detail-link:hover { text-decoration: underline; }

.sh-toolbar-bottom { padding-top: 20px; justify-content: flex-end; }

.sh-pagination { text-align: center; margin-top: 24px; }
.sh-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px;
    border-radius: 4px;
    font-size: 14px;
    color: #5F5F5F;
    text-decoration: none;
    background: #fff;
}
.sh-pagination .page-numbers.current {
    background: #23427E;
    color: #fff;
}

.sh-empty { text-align: center; padding: 60px 20px; }
.sh-empty-icon { font-size: 48px; color: #ddd; margin-bottom: 16px; }
.sh-empty-title { font-size: 20px; color: #23427E; margin-bottom: 8px; }
.sh-empty-text { color: #5F5F5F; font-size: 14px; margin-bottom: 20px; }
.sh-empty-btn {
    display: inline-block;
    background: #C79626;
    color: #fff;
    padding: 10px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

@media (max-width: 992px) {
    .sh-breadcrumb { margin-top: 100px; }
    .sh-layout { flex-direction: column; }
    .sh-sidebar { width: 100%; min-width: 0; position: static; }
    .sh-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .sh-product-grid { grid-template-columns: 1fr; }
    .sh-toolbar { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   SINGLE PRODUCT — Ulasan & Recently Viewed (sp-reviews-*)
   ============================================================ */
.sp-reviews {
    margin-top: 40px;
    padding: 32px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.sp-reviews-title {
    font-size: 22px;
    font-weight: 700;
    color: #23427E;
    margin: 0 0 20px;
}
.sp-reviews-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.sp-reviews-avg { text-align: center; }
.sp-avg-num {
    font-size: 42px;
    font-weight: 700;
    color: #23427E;
    line-height: 1;
}
.sp-avg-stars { margin: 6px 0; }
.sp-avg-stars .fas { font-size: 16px; }
.sp-avg-count { font-size: 13px; color: #999; }

.sp-star-on { color: #C79626; }
.sp-star-off { color: #ddd; }

.sp-reviews-list { display: flex; flex-direction: column; gap: 16px; }
.sp-review-card {
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
}
.sp-review-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}
.sp-review-author { font-weight: 600; color: #23427E; font-size: 14px; }
.sp-review-date { font-size: 12px; color: #999; }
.sp-review-stars { margin-bottom: 8px; }
.sp-review-stars .fas { font-size: 13px; }
.sp-review-text { font-size: 14px; color: #5F5F5F; line-height: 1.6; margin: 0; }

.sp-no-reviews {
    color: #999;
    font-size: 14px;
    font-style: italic;
    padding: 20px 0;
}

.sp-review-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid #eee; }
.sp-review-form-title {
    font-size: 16px;
    font-weight: 600;
    color: #23427E;
    margin: 0 0 12px;
}
.sp-review-form textarea,
.sp-review-form input[type="text"],
.sp-review-form input[type="email"] {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 8px;
}
.sp-review-submit {
    background: #C79626;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.sp-review-submit:hover { background: #a57c1f; }

.sp-recently-viewed { margin-top: 40px; }

@media (max-width: 768px) {
    .sp-reviews { padding: 20px 16px; }
    .sp-avg-num { font-size: 32px; }
}