/* ============================================================
   Aksen TBB (9 Nov 2026)
   Merah (--tbb-sale) hanya untuk "hemat uang": label diskon, harga setelah diskon, info gratis.
   Emas (--tbb-gold) hanya penanda aktif (menu, pilihan varian, halaman aktif).
   Berkas terpisah (bukan custom_web.css) karena custom_web.css punya sisa penanda merge conflict di sekitar baris 2999
   yang membuat ±3000 baris sesudahnya tidak berlaku; sheet ini dimuat setelahnya di views/web/shortcut/style.php.
   :has() dipakai agar warna ikut berganti saat JS menyembunyikan/menampilkan harga coret ketika varian diganti;
   di peramban lama yang belum mendukung :has() harga tetap hitam seperti sebelumnya.
   ============================================================ */
:root {
    --tbb-sale: #a8201a;
    --tbb-gold: #a8802f;
}

/* label diskon: persegi kecil, bukan pil */
.product-card__image .label.discount-percent,
.detail-product .product--desc .text--right span.label.discount-percent,
.modal--cart .modal-content .content--right .product-detail .text--right > div span.label.discount-percent,
.modal--cart--mobile .modal-dialog .modal-body .product-detail .text--right > div span.label.discount-percent {
    background: var(--tbb-sale);
    color: #fff;
    border-radius: 2px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* harga setelah diskon merah, hanya bila ada harga coret yang tampil */
.product-card__detail div .product--price:has(> p:not(.hidden)) h5,
.product-card__detail div .product--price:has(> p:not(.hidden)) h5 span {
    color: var(--tbb-sale);
}

.detail-product .product--desc .text--right:has(> h6.discount:not(.hidden)) h3,
.detail-product .product--desc .text--right:has(> h6.discount:not(.hidden)) h3 span,
.modal--cart .modal-content .content--right .product-detail .text--right:has(> h6.discount:not(.hidden)) > div h3 span,
.modal--cart--mobile .modal-dialog .modal-body .product-detail .text--right:has(> h6.discount:not(.hidden)) > div h3 span {
    color: var(--tbb-sale);
}

#form_cart_side .product .price:has(.discount) .price-after {
    color: var(--tbb-sale);
}

/* info gratis di foto kartu (Buy X Get Y, dll): sama-sama "hemat" jadi ikut merah */
.campaign-free-info {
    background: var(--tbb-sale);
}

/* stok habis: foto diredupkan supaya terbaca sebelum labelnya dibaca */
.product-card__image:has(.label--out-of-stock) a > img.image {
    opacity: .5;
    filter: grayscale(.5);
}

/* emas untuk penanda aktif */
header .navbar .menu__item.active {
    border-bottom-color: var(--tbb-gold);
}

.product-card__detail ul li a.variant-selection.active,
ul.pagination li a.active {
    text-decoration-line: underline;
    text-decoration-color: var(--tbb-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}