/* CSS khusus product.blade.php (resources/views/livewire/guest-page). Dimuat di <head> lewat partials/page-css. */
/* ================================================
   DESIGN TOKENS
   ================================================ */
:root {
    --ugs-navy: #0d1b2e;
    --ugs-blue: var(--ugs-accent-deep);
    --ugs-red: #c0392b;
    /* warna mengikuti token tema (ugs-site.css) supaya ikut dark mode */
    --ugs-light: var(--ugs-surface);
    --ugs-white: var(--ugs-card);
    --ugs-text: var(--ugs-fg);
    --ugs-muted: var(--ugs-fg-2);
    --ugs-border: var(--ugs-hairline-strong);
    --tr: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── TYPOGRAPHY HELPERS ── */
.ugs-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    margin-bottom: 0.75rem;
}

.ugs-product-accent {
    color: var(--ugs-red);
}

/* ── Global font ── */
:where(*) { font-family: var(--font-body); }

/* ================================================
   HERO — New design system
   ================================================ */
.pr-hero {
    position:relative; min-height:0; background:var(--ugs-studio);
    display:flex; flex-direction:column;
    justify-content:flex-end; overflow:hidden;
}
.pr-hero-img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 40%; z-index:0; display:none;
}
.pr-hero-scrim {
    display:none; position:absolute; inset:0; z-index:1;
    background:
        linear-gradient(105deg, rgba(11,24,40,.88) 0%, rgba(11,24,40,.55) 50%, rgba(11,24,40,.2) 100%),
        linear-gradient(to top, rgba(11,24,40,.95) 0%, transparent 55%);
}
/* Spacer untuk mendorong content ke bawah & beri ruang dari navbar */
.pr-hero::before {
    content:''; display:block;
    min-height:calc(var(--ugs-nav-h) + 3.5rem);
    flex-shrink:0;
}
@media(max-width:640px){ .pr-hero::before { min-height:calc(var(--ugs-nav-h) + 2rem); } }
.pr-hero-body {
    position:relative; z-index:2;
    padding:0 2rem 3rem; max-width:1240px; width:100%; margin:0 auto;
}
.pr-label {
    display:block; font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size:.72rem; font-weight:500;
    text-transform:uppercase; letter-spacing:.14em;
    color:var(--ugs-accent-text); margin-bottom:.75rem;
}
.pr-hero-h1 {
    font-family:var(--font-display);
    font-size:var(--ugs-fs-h1);
    font-weight:900; line-height:.88;
    letter-spacing:1px; text-transform:uppercase;
    color:var(--ugs-fg); margin:.5rem 0 1.25rem;
}
.pr-hero-h1 em { font-style:normal; color:var(--ugs-fg-3); font-weight:300; }
.pr-hero-sub {
    font-size:clamp(.92rem,1.4vw,1.05rem); font-weight:400;
    color:var(--ugs-fg-2); line-height:1.7;
    max-width:580px; margin:0 0 2rem;
}
.pr-hero-meta {
    display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
    padding-top:1.5rem; border-top:1px solid var(--ugs-hairline);
}
.pr-hero-meta-item { display:flex; flex-direction:column; gap:.15rem; }
.pr-hero-meta-item strong {
    font-family:var(--font-display);
    font-size:1.6rem; font-weight:800; color:var(--ugs-fg); line-height:1;
}
.pr-hero-meta-item span {
    font-size:.82rem; font-weight:400;
    color:var(--ugs-fg-3);
}
.pr-hero-meta-div { width:1px; height:32px; background:var(--ugs-hairline); flex-shrink:0; }

/* ================================================
   BRANDS SECTION — New design
   ================================================ */
.pr-container { max-width:1240px; margin:0 auto; padding:0 2rem; }

/* ── Global Search Bar ── */
.pr-global-search-section { background:var(--ugs-surface); padding:1.25rem 0; border-bottom:1px solid var(--ugs-hairline-strong); }
.pr-global-search-wrap { position:relative; max-width:680px; margin:0 auto; }
.pr-global-search-icon { position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); color:var(--ugs-accent-deep); font-size:1rem; pointer-events:none; }
.pr-global-search-input {
    width:100%; padding:.85rem 3rem .85rem 2.8rem;
    border:1.5px solid var(--ugs-hairline-strong); border-radius:50px;
    font-size:.95rem; color:var(--ugs-fg); background:var(--ugs-card);
    transition:border-color .2s, box-shadow .2s;
    outline:none;
}
.pr-global-search-input:focus { border-color:var(--ugs-accent-deep); box-shadow:0 0 0 3px rgba(var(--ugs-accent-deep-rgb),.1); }
.pr-global-search-clear { position:absolute; right:1rem; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--ugs-fg-3); cursor:pointer; font-size:.9rem; padding:.25rem; min-width:40px; min-height:40px; } /* DEV-25: tombol × mudah disentuh */
.pr-global-search-clear:hover { color:#c0392b; }
.pc-results-search-badge { font-size:.75rem; font-weight:500; color:var(--ugs-accent-deep); background:var(--ugs-surface); padding:.2rem .6rem; border-radius:20px; margin-left:.5rem; vertical-align:middle; }

.pr-brands-section { background:var(--surface); padding:5rem 0; transition:padding .3s ease; }
/* Saat produk tampil, brand section jadi lebih compact */
.pr-brands-section.has-results { padding:2.5rem 0; }
.pr-brands-section.has-results .pr-brands-head { margin-bottom:1.5rem; }
.pr-brands-section.has-results .pr-brands-hint { display:none; }
.pr-brands-section.has-results .pr-h2 { font-size:clamp(1.5rem,3vw,2rem); }
.pr-brands-section.has-results .pr-label { margin-bottom:.3rem; }
.pr-h2 {
    font-family:var(--font-display);
    font-size:clamp(2rem,4vw,3rem); font-weight:700;
    text-transform:uppercase; letter-spacing:-.5px; line-height:1.05;
    color:var(--text); margin:0 0 0;
}
.pr-h2 em { font-style:normal; color:var(--blue); }
.pr-brands-head {
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:2rem; flex-wrap:wrap; margin-bottom:3rem;
}
.pr-brands-hint {
    font-size:.88rem; color:var(--muted); max-width:280px;
    align-self:flex-end; margin:0;
}
/* Flexbox → baris terakhir yang tidak penuh otomatis rata kiri (natural) */
.pr-brands-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.pr-brand-card {
    flex: 0 0 calc(25% - 0.94rem); /* 4 per baris di desktop */
}
@media(max-width:900px){
    .pr-brand-card { flex: 0 0 calc(33.333% - 0.84rem); }
}
@media(max-width:600px){
    /* 2 per baris di mobile — hapus min-width agar fit di 390px */
    .pr-brand-card { flex: 0 0 calc(50% - 0.625rem); min-width:0; }
}
@media(max-width:360px){
    .pr-brand-card { flex: 0 0 100%; }
}

.pr-brand-card {
    background:var(--ugs-card); border:1.5px solid var(--border);
    border-radius:14px; padding:1.75rem 1.5rem;
    display:flex; flex-direction:column; gap:1.25rem;
    cursor:pointer; position:relative; overflow:hidden;
    transition:border-color .25s, box-shadow .25s, transform .25s;
}
.pr-brand-card:hover {
    border-color:var(--blue);
    box-shadow:0 8px 32px rgba(var(--ugs-accent-deep-rgb),.12);
    transform:translateY(-3px);
}
.pr-brand-card.is-active {
    border-color:var(--blue);
    box-shadow:0 8px 32px rgba(var(--ugs-accent-deep-rgb),.18);
    background:var(--ugs-surface);
}
.pr-brand-logo {
    height:52px; display:flex; align-items:center;
}
.pr-brand-logo img {
    max-height:44px; max-width:100%; object-fit:contain;
    transition:transform .3s;
}
@media(max-width:600px){
    .pr-brand-logo { height:44px; }
    .pr-brand-logo img { max-height:36px; }
    .pr-brand-card { padding:1.25rem 1rem; gap:.875rem; }
    .pr-brand-name { font-size:.85rem; }
    .pr-brand-desc { font-size:.72rem; }
    .pr-brand-count { font-size:.6rem; }
}
.pr-brand-card:hover .pr-brand-logo img { transform:scale(1.05); }
.pr-brand-body { flex:1; display:flex; flex-direction:column; gap:.5rem; }
.pr-brand-name {
    font-family:var(--font-display);
    font-size:1rem; font-weight:700; color:var(--text);
    text-transform:uppercase; letter-spacing:.5px; margin:0;
}
.pr-brand-desc {
    font-size:.78rem; color:var(--muted); line-height:1.6; margin:0; flex-grow:1;
}
.pr-brand-count {
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:1px; color:var(--blue);
    background:rgba(var(--ugs-accent-deep-rgb),.08); padding:.3rem .75rem;
    border-radius:100px; align-self:flex-start; margin-top:.25rem;
}
.pr-brand-count i { font-size:.6rem; }
.pr-brand-active-bar {
    position:absolute; top:0; left:0; right:0; height:3px; background:var(--blue);
}
.pr-brands-toggle { text-align:center; margin-top:2rem; }
.pr-toggle-btn {
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.8rem; font-weight:600; color:var(--blue);
    background:transparent; border:1.5px solid var(--blue);
    padding:.6rem 1.5rem; border-radius:100px; cursor:pointer;
    transition:all .2s ease;
}
.pr-toggle-btn:hover { background:var(--blue); color:#fff; }

/* gaya toast "Tambah ke Penawaran" ada di partials/inquiry-toast.blade.php */
/* Mobile tweaks for new hero/brands */
@media(max-width:640px){
    .pr-hero { min-height:60vh; }
    .pr-hero-body { padding:0 1.25rem 2.5rem; }
    .pr-hero-h1 { letter-spacing:-1px; }
    .pr-hero-meta { gap:1rem; }
    .pr-brands-section { padding:3.5rem 0; }
    .pr-brands-head { flex-direction:column; gap:1rem; margin-bottom:2rem; }
    .pr-container { padding:0 1.25rem; }

/* Viewport HEIGHT — laptop/short screens */
@media(max-height:1000px) and (min-width:768px){
    .pr-hero-h1 { font-size:var(--ugs-fs-h1) !important; letter-spacing:-.5px; }
    .pr-hero-sub { font-size:.88rem; margin-bottom:1.25rem; }
    .pr-hero-meta { display:none; }
}
@media(max-height:800px) and (min-width:768px){
    .pr-hero-h1 { font-size:var(--ugs-fs-h1) !important; }
}
}

/* ================================================
   BRANDS SECTION (OLD — keep for compat)
   ================================================ */
.ugs-brands-section {
    padding: 2.5rem 0 1rem;
    background: var(--ugs-card);
}

.ugs-brand-card {
    background: var(--ugs-card);
    border: 1px solid var(--ugs-border);
    border-radius: 10px;
    padding: 1rem 0.75rem;
    text-align: center;
    transition: var(--tr);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ugs-brand-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(var(--ugs-accent-deep-rgb), 0.12);
    border-color: var(--ugs-blue);
}

.ugs-brand-card.is-active {
    border-color: var(--ugs-blue);
    box-shadow: 0 8px 24px rgba(var(--ugs-accent-deep-rgb), 0.20);
}

.ugs-brand-logo {
    height: 52px;
    width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
}

.ugs-brand-logo img {
    max-height: 52px;
    max-width: 52px;
    object-fit: contain;
    /* Hapus grayscale — logo putih/terang jadi invisible di bg putih */
    opacity: 0.85;
    transition: var(--tr);
}

.ugs-brand-card:hover .ugs-brand-logo img,
.ugs-brand-card.is-active .ugs-brand-logo img {
    opacity: 1;
    transform: scale(1.06);
}

.ugs-brand-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ugs-text);
    margin-bottom: 0.4rem;
}

.ugs-brand-desc {
    font-size: 0.72rem;
    color: var(--ugs-muted);
    min-height: 32px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.6rem;
}

.ugs-product-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 50rem;
    background: var(--ugs-navy);
    color: #fff;
    display: inline-block;
    transition: var(--tr);
    filter: grayscale(100%);
    opacity: 0.75;
}

.ugs-brand-card:hover .ugs-product-badge,
.ugs-brand-card.is-active .ugs-product-badge {
    filter: none;
    opacity: 1;
    background: var(--ugs-blue);
}

/* Toggle show more/less */
.ugs-btn-toggle {
    background: transparent;
    border: 1.5px solid var(--ugs-border);
    color: var(--ugs-muted);
    padding: 0.5rem 1.5rem;
    border-radius: 50rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tr);
}

.ugs-btn-toggle:hover {
    border-color: var(--ugs-blue);
    color: var(--ugs-blue);
}

/* ================================================
   FILTER SIDEBAR
   ================================================ */
.ugs-sidebar-sticky {
    position: sticky;
    top: 120px;
    z-index: 100;
}

@media (max-width: 991px) {
    .ugs-sidebar-sticky {
        position: relative;
        top: auto;
        margin-bottom: 1.5rem;
    }
}

.ugs-filter-card {
    background: var(--ugs-card);
    border: 1px solid var(--ugs-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.ugs-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ugs-border);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ugs-text);
    background: var(--ugs-card);
    position: sticky;
    top: 0;
}

.ugs-btn-reset {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 50rem;
    border: 1.5px solid var(--ugs-red);
    color: var(--ugs-red);
    background: transparent;
    cursor: pointer;
    transition: var(--tr);
}

.ugs-btn-reset:hover {
    background: var(--ugs-red);
    color: #fff;
}

.ugs-filter-body {
    padding: 1.25rem;
}

.ugs-filter-group-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ugs-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.ugs-search-wrap {
    position: relative;
}

.ugs-search-input {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 1rem;
    border: 1.5px solid var(--ugs-border);
    border-radius: 50rem;
    font-size: 0.85rem;
    color: var(--ugs-text);
    transition: var(--tr);
    outline: none;
}

.ugs-search-input:focus {
    border-color: var(--ugs-blue);
    box-shadow: 0 0 0 3px rgba(var(--ugs-accent-deep-rgb), 0.12);
}

.ugs-search-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ugs-muted);
    font-size: 0.8rem;
    pointer-events: none;
}

.ugs-filter-scroll {
    max-height: 200px;
    overflow-y: auto;
}

.ugs-check-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.ugs-checkbox {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1.5px solid var(--ugs-border);
    accent-color: var(--ugs-blue);
    cursor: pointer;
    flex-shrink: 0;
}

.ugs-check-label {
    font-size: 0.82rem;
    color: var(--ugs-text);
    cursor: pointer;
    line-height: 1.4;
}

/* ================================================
   RESULTS HEADER
   ================================================ */
.ugs-results-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ugs-results-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ugs-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.25rem;
}

.ugs-results-count {
    font-size: 0.8rem;
    color: var(--ugs-muted);
    margin: 0;
}

.ugs-view-label {
    font-size: 0.8rem;
    color: var(--ugs-muted);
    margin-right: 0.5rem;
}

.ugs-toggle-group {
    display: flex;
    border: 1.5px solid var(--ugs-border);
    border-radius: 6px;
    overflow: hidden;
}

.ugs-toggle-btn {
    padding: 0.4rem 0.75rem;
    background: var(--ugs-card);
    border: none;
    color: var(--ugs-muted);
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--tr);
}

.ugs-toggle-btn.is-active,
.ugs-toggle-btn:hover {
    background: var(--ugs-blue);
    color: #fff;
}

.ugs-view-toggle {
    display: flex;
    align-items: center;
}

/* ================================================
   PRODUCT CARDS
   ================================================ */
.ugs-product-card {
    background: var(--ugs-card);
    border: 1px solid var(--ugs-border);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--tr);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.ugs-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(13, 27, 46, 0.10);
    border-color: rgba(var(--ugs-accent-deep-rgb), 0.2);
}

.ugs-product-card-list {
    flex-direction: row;
    height: auto;
}

.ugs-brand-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: var(--ugs-navy);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 50rem;
    z-index: 2;
}

.ugs-product-img-wrap {
    background: var(--ugs-light);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.ugs-product-img-list {
    aspect-ratio: unset;
    min-height: 150px;
    height: 100%;
}

.ugs-product-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 0.75rem;
    transition: transform 0.3s ease;
}

.ugs-product-card:hover .ugs-product-img-wrap img {
    transform: scale(1.04);
}

.ugs-product-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--ugs-accent-deep-rgb), 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    font-size: 1.4rem;
}

.ugs-product-img-wrap:hover .ugs-product-img-overlay {
    opacity: 1;
}

.ugs-product-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ugs-product-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--ugs-text);
    line-height: 1.25;
    cursor: pointer;
    margin-bottom: 0.6rem;
    min-height: 2.4rem;
}

.ugs-product-name:hover {
    color: var(--ugs-blue);
}

.ugs-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.ugs-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ugs-muted);
    background: var(--ugs-light);
    border-radius: 50rem;
    padding: 0.2rem 0.6rem;
}

.ugs-tag-muted {
    opacity: 0.7;
}

/* ── Primary: Add to Inquiry ── */
.ugs-btn-inquiry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    background: var(--ugs-blue);
    border: 1.5px solid var(--ugs-blue);
    color: #fff;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: var(--tr);
    margin-top: auto;
    text-decoration: none;
    width: 100%;
}
.ugs-btn-inquiry:hover {
    background: var(--ugs-accent-dark);
    border-color: var(--ugs-accent-dark);
    color: #fff;
}

/* ── Secondary: View Detail → jadi link teks, bukan tombol ── */
.ugs-btn-inquiry + .ugs-btn-inquiry {
    background: transparent;
    border: none;
    color: var(--ugs-blue);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35rem 0;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    justify-content: center;
    margin-top: 0.25rem;
    width: 100%;
    opacity: 0.85;
}
.ugs-btn-inquiry + .ugs-btn-inquiry:hover {
    opacity: 1;
    color: var(--ugs-accent-dark);
    transform: none;
}

/* ================================================
   PAGINATION
   ================================================ */
.ugs-pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

/* Override Laravel pagination Bootstrap vars */
.ugs-pagination-wrap .pagination .page-link {
    border-radius: 50rem;
    margin: 0 2px;
    border: none;
    color: var(--ugs-muted);
}

.ugs-pagination-wrap .pagination .page-link:hover {
    background: var(--ugs-light);
    color: var(--ugs-blue);
}

.ugs-pagination-wrap .pagination .page-item.active .page-link {
    background: var(--ugs-blue);
    border-color: var(--ugs-blue);
    color: #fff;
}

/* ================================================
   EMPTY STATE
   ================================================ */
.ugs-empty-state {
    text-align: center;
    padding: 4rem 1rem;
}

.ugs-empty-state i {
    font-size: 3rem;
    color: var(--ugs-muted);
    margin-bottom: 1rem;
    display: block;
}

.ugs-empty-state h4 {
    color: var(--ugs-muted);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.ugs-empty-state p {
    color: var(--ugs-muted);
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}

.ugs-btn-primary-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    background: var(--ugs-blue);
    color: #fff;
    border: none;
    border-radius: 50rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tr);
}

.ugs-btn-primary-sm:hover {
    background: var(--ugs-accent-dark);
}

/* ================================================
   MODAL
   ================================================ */
.ugs-modal-content {
    border-radius: 12px;
    overflow: hidden;
}

/* Modal header — navy solid (bukan gradient teal) */
.ugs-modal-header {
    background: var(--ugs-navy) !important;
    color: #fff;
}

/* Modal footer buttons */
.ugs-btn-inquiry-modal {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    background: var(--ugs-blue);
    color: #fff;
    border: none;
    border-radius: 50rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tr);
    min-width: 130px;
    justify-content: center;
}

.ugs-btn-inquiry-modal:hover {
    background: var(--ugs-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--ugs-accent-deep-rgb), 0.35);
}

.ugs-btn-close-modal {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    background: transparent;
    color: var(--ugs-muted);
    border: 1.5px solid var(--ugs-border);
    border-radius: 50rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tr);
    min-width: 100px;
    justify-content: center;
}

.ugs-btn-close-modal:hover {
    background: var(--ugs-light);
    border-color: var(--ugs-muted);
}

.ugs-btn-outline-navy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    background: transparent;
    color: var(--ugs-navy);
    border: 1.5px solid var(--ugs-navy);
    border-radius: 50rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tr);
    text-decoration: none;
}

.ugs-btn-outline-navy:hover {
    background: var(--ugs-navy);
    color: #fff;
}

.ugs-btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1.25rem;
    background: var(--ugs-navy);
    color: #fff;
    border-radius: 50rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--tr);
}

.ugs-btn-dark:hover {
    background: var(--ugs-blue);
    color: #fff;
}

.ugs-no-catalog {
    font-size: 0.88rem;
    color: var(--ugs-muted);
    font-style: italic;
    padding: 0.5rem 1rem;
    background: var(--ugs-light);
    border-radius: 50rem;
    border: 1px dashed var(--ugs-border);
}

.ugs-spec-content {
    line-height: 1.8;
}

.ugs-spec-content table th,
.ugs-spec-content table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--ugs-border);
}

/* Scrollbar */
.overflow-auto::-webkit-scrollbar,
.ugs-filter-scroll::-webkit-scrollbar,
.ugs-filter-card::-webkit-scrollbar {
    width: 5px;
}

.overflow-auto::-webkit-scrollbar-track,
.ugs-filter-scroll::-webkit-scrollbar-track,
.ugs-filter-card::-webkit-scrollbar-track {
    background: var(--ugs-light);
    border-radius: 3px;
}

.overflow-auto::-webkit-scrollbar-thumb,
.ugs-filter-scroll::-webkit-scrollbar-thumb,
.ugs-filter-card::-webkit-scrollbar-thumb {
    background: var(--ugs-border);
    border-radius: 3px;
}

/* ================================================
   IMAGE ZOOM (tidak berubah — hanya dipertahankan)
   ================================================ */
.image-zoom-container {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    border-radius: 12px;
    background: var(--ugs-surface);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-zoom-container.zoomed {
    cursor: zoom-out;
}

.zoomable-image {
    transition: transform 0.3s ease;
    transform-origin: center center;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.zoom-controls {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.zoom-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ugs-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.zoom-btn:hover {
    background: var(--ugs-card);
    transform: scale(1.1);
}

.zoom-instructions {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.image-zoom-container:hover .zoom-instructions {
    opacity: 1;
}

.zoom-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
}

.zoom-modal.active {
    display: flex;
}

.zoom-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    z-index: 10000;
}

.zoom-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .ugs-product-hero-content {
        padding: 6rem 0 3rem;
    }

    .zoom-instructions {
        display: none;
    }

    .zoom-btn {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .zoomable-image {
        max-height: 250px;
    }
}

@media (max-width: 991px) {
    .modal-body .row.g-0 {
        flex-direction: column;
    }

    .col-lg-5 .sticky-top {
        position: relative !important;
        height: auto !important;
        max-height: 400px !important;
    }
}

@media (max-width: 575px) {

    .ugs-btn-inquiry-modal,
    .ugs-btn-close-modal {
        font-size: 0.82rem;
        padding: 0.5rem 0.75rem;
        min-width: auto;
    }
}

/* ════════════════════════════════════════════
   PRODUCT CATALOG AREA — New Design System
════════════════════════════════════════════ */

/* Layout */
.pc-section { padding:3rem 0 5rem; background:var(--ugs-card); }
.pc-layout {
    max-width:1240px; margin:0 auto; padding:0 2rem;
    display:grid; grid-template-columns:260px 1fr; gap:2.5rem;
    align-items:start;
}
@media(max-width:991px){ .pc-layout{ grid-template-columns:1fr; } }

/* ── SIDEBAR ── */
.pc-sidebar { position:sticky; top:90px; }

/* Mobile: collapsible filter */
.pc-filter-toggle { display:none; }

@media(max-width:991px){
    .pc-sidebar {
        position:static; /* hapus sticky di mobile */
    }
    .pc-filter-toggle {
        display:flex; align-items:center; gap:.5rem;
        width:100%; padding:.875rem 1.25rem;
        background:var(--navy); color:#fff;
        border:none; border-radius:10px; cursor:pointer;
        font-family:var(--font-display); font-size:.82rem;
        font-weight:700; text-transform:uppercase; letter-spacing:2px;
        transition:background .2s; margin-bottom:.5rem;
        position:relative;
    }
    .pc-filter-toggle:hover { background:#1a3050; }
    .pc-filter-toggle .pc-filter-chevron {
        margin-left:auto; transition:transform .3s; font-size:.7rem;
    }
    .pc-filter-toggle.is-open .pc-filter-chevron { transform:rotate(180deg); }
    .pc-filter-active-dot {
        width:7px; height:7px; border-radius:50%;
        background:var(--blue); box-shadow:0 0 0 2px rgba(var(--ugs-accent-deep-rgb),.3);
        flex-shrink:0;
    }
    /* Filter panel hidden by default on mobile */
    #pcFilterPanel {
        display:none;
        border-radius:0 0 10px 10px;
        overflow:hidden;
    }
    #pcFilterPanel.is-open { display:block; }
}
.pc-filter-panel {
    background:var(--ugs-card); border:1.5px solid var(--border);
    border-radius:14px; overflow:hidden;
}
.pc-filter-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:.875rem 1.25rem;
    background:var(--navy); border-bottom:1px solid rgba(255,255,255,.08);
}
.pc-filter-title {
    font-family:var(--font-display); font-size:.85rem; font-weight:700;
    text-transform:uppercase; letter-spacing:2px; color:#fff;
    display:flex; align-items:center; gap:.5rem;
}
.pc-filter-title i { color:var(--blue); }
.pc-reset-btn {
    font-size:.7rem; font-weight:600; text-transform:uppercase;
    letter-spacing:1px; color:rgba(255,255,255,.5);
    background:transparent; border:none; cursor:pointer;
    display:flex; align-items:center; gap:.3rem; transition:color .2s;
}
.pc-reset-btn:hover { color:#fff; }

.pc-filter-section {
    padding:.875rem 1.25rem;
    border-bottom:1px solid var(--border);
}
.pc-filter-section:last-child { border-bottom:none; }
.pc-filter-section-title {
    font-size:.6rem; font-weight:700; text-transform:uppercase;
    letter-spacing:2.5px; color:var(--muted);
    display:flex; align-items:center; gap:.4rem;
    margin:0 0 .75rem;
}

/* Search */
.pc-search-wrap { position:relative; }
.pc-search-icon {
    position:absolute; left:.875rem; top:50%; transform:translateY(-50%);
    color:var(--muted); font-size:.8rem; pointer-events:none;
}
.pc-search-input {
    width:100%; padding:.625rem .875rem .625rem 2.25rem;
    border:1.5px solid var(--border); border-radius:8px;
    font-size:.83rem; color:var(--text);
    background:var(--ugs-card); outline:none; transition:border-color .2s;
}
.pc-search-input:focus { border-color:var(--blue); }
.pc-search-input::placeholder { color:var(--muted); }

/* Checkboxes */
.pc-check {
    display:flex; align-items:center; gap:.625rem;
    padding:.45rem .25rem; cursor:pointer; border-radius:6px;
    transition:background .15s;
    user-select:none;
}
.pc-check:hover { background:var(--surface); }
.pc-check-box {
    width:16px; height:16px; border-radius:4px;
    border:1.5px solid var(--border); background:var(--ugs-card);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all .15s; color:#fff; font-size:.55rem;
}
.pc-check.is-on .pc-check-box {
    background:var(--blue); border-color:var(--blue);
}
.pc-check-text { font-size:.82rem; color:var(--text-body); line-height:1.4; }
.pc-check.is-on .pc-check-text { color:var(--blue); font-weight:600; }

/* ── MAIN AREA ── */
.pc-results-bar {
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap;
}
.pc-results-title {
    font-family:var(--font-display); font-size:1.35rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.5px; color:var(--text); margin:0;
}
.pc-results-count { font-size:.78rem; color:var(--muted); margin-top:.2rem; display:block; }

/* label filter aktif (merek, jenis produk, kategori, kata kunci) — tiap label bisa dilepas dengan × */
.pc-active-filters { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:-.75rem 0 1.25rem; }
.pc-active-label { font-size:.78rem; color:var(--muted); }
.pc-active-chip {
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:.78rem; font-weight:600; color:var(--text);
    background:var(--ugs-card); border:1.5px solid var(--border); border-radius:999px;
    padding:.25rem .35rem .25rem .75rem;
}
.pc-active-chip button {
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; margin:-.2rem -.1rem -.2rem 0; border:none; border-radius:50%;
    background:transparent; color:var(--muted); font-size:1.1rem; line-height:1; cursor:pointer;
}
/* HP: area sentuh tombol × lebih besar supaya tidak meleset */
@media (max-width: 768px) {
    .pc-active-chip button { width:36px; height:36px; }
}
.pc-active-chip button:hover, .pc-active-chip button:focus-visible { background:var(--border); color:var(--text); }
.pc-active-clear {
    border:none; background:none; padding:.25rem .35rem; cursor:pointer;
    font-size:.78rem; font-weight:600; color:var(--blue); text-decoration:underline;
}
.pc-loading-text { opacity:.5; }
.pc-view-toggle { display:flex; gap:.375rem; }
.pc-view-btn {
    width:36px; height:36px; border-radius:8px;
    border:1.5px solid var(--border); background:var(--ugs-card);
    color:var(--muted); cursor:pointer; transition:all .2s;
    display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.pc-view-btn.is-active { background:var(--navy); border-color:var(--navy); color:#fff; }
.pc-view-btn:hover:not(.is-active) { border-color:var(--blue); color:var(--blue); }

/* ── SKELETON ── */
.pc-skeleton-wrap {
    display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-bottom:2rem;
}
.pc-skeleton {
    border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.pc-sk-img { height:180px; background:linear-gradient(90deg,#f0f2f5 25%,#e8ebef 50%,#f0f2f5 75%); background-size:400% 100%; animation:shimmer 1.4s infinite; }
.pc-sk-body { padding:1rem; display:flex; flex-direction:column; gap:.625rem; }
.pc-sk-line { border-radius:4px; background:linear-gradient(90deg,#f0f2f5 25%,#e8ebef 50%,#f0f2f5 75%); background-size:400% 100%; animation:shimmer 1.4s infinite; }
.pc-sk-line-lg  { height:14px; width:85%; }
.pc-sk-line-sm  { height:10px; width:55%; }
.pc-sk-line-btn { height:36px; border-radius:100px; margin-top:.25rem; }
@keyframes shimmer { 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }

/* ── PRODUCT GRID ── */
.pc-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
@media(max-width:768px){ .pc-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .pc-grid{ grid-template-columns:1fr; } }

.pc-card {
    background:var(--ugs-card); border:1.5px solid var(--border);
    border-radius:12px; overflow:hidden;
    display:flex; flex-direction:column;
    transition:border-color .25s, box-shadow .25s, transform .25s;
}
.pc-card:hover {
    border-color:var(--blue);
    box-shadow:0 8px 32px rgba(var(--ugs-accent-deep-rgb),.12);
    transform:translateY(-3px);
}
.pc-card-img {
    position:relative; display:block;
    aspect-ratio:4/3; overflow:hidden; background:var(--surface);
}
.pc-card-img img {
    width:100%; height:100%; object-fit:contain;
    padding:1.25rem; mix-blend-mode:multiply;
    transition:transform .4s ease;
}
.pc-card:hover .pc-card-img img { transform:scale(1.05); }
.pc-card-overlay {
    position:absolute; inset:0;
    background:rgba(var(--ugs-accent-deep-rgb),.88);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .25s;
}
.pc-card:hover .pc-card-overlay { opacity:1; }
.pc-card-overlay span {
    color:#fff; font-size:.78rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.5px;
}
.pc-card-brand {
    position:absolute; top:.625rem; left:.625rem;
    background:var(--navy); color:#fff;
    font-size:.58rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.5px; padding:.2rem .55rem; border-radius:100px;
}
.pc-card-body {
    padding:1rem 1.25rem 1.25rem;
    display:flex; flex-direction:column; gap:.5rem; flex-grow:1;
}
.pc-card-name {
    font-family:var(--font-display);
    font-size:.9rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.3px;
    color:var(--text); line-height:1.3; margin:0; cursor:pointer;
    transition:color .2s;
}
.pc-card-name:hover { color:var(--blue); }
.pc-card-tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.pc-card-tag {
    font-size:.65rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.5px; color:var(--muted);
    background:var(--surface); border:1px solid var(--border);
    padding:.15rem .55rem; border-radius:4px;
}
.pc-card-tag-muted { opacity:.65; }

/* Buttons inside card */
.pc-btn-inquiry {
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    padding:.6rem 1rem; background:var(--blue); color:#fff;
    border:none; border-radius:100px; cursor:pointer;
    font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.3px;
    transition:all .2s; text-decoration:none; width:100%; margin-top:auto;
}
.pc-btn-inquiry:hover { background:var(--ugs-accent-dark); color:#fff; transform:translateY(-1px); }
.pc-btn-detail {
    display:block; text-align:center;
    font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
    color:var(--blue); text-decoration:none; padding:.75rem 0 .5rem; /* DEV-25: area sentuh ±40px, tidak rapat dengan tombol penawaran */
    transition:opacity .2s;
}
.pc-btn-detail:hover { opacity:.7; color:var(--blue); }

/* ── LIST VIEW ── */
.pc-list-wrap { display:flex; flex-direction:column; gap:1rem; }
.pc-list-card {
    background:var(--ugs-card); border:1.5px solid var(--border); border-radius:12px;
    overflow:hidden; display:grid; grid-template-columns:160px 1fr;
    transition:border-color .2s, box-shadow .2s;
}
.pc-list-card:hover { border-color:var(--blue); box-shadow:0 4px 16px rgba(var(--ugs-accent-deep-rgb),.1); }
.pc-list-img {
    display:block; background:var(--surface); position:relative; overflow:hidden;
}
.pc-list-img img { width:100%; height:100%; object-fit:contain; padding:1rem; mix-blend-mode:multiply; }
.pc-list-body {
    padding:1.25rem; display:flex; flex-direction:column;
    justify-content:space-between; gap:.75rem;
}
.pc-list-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.pc-list-actions .pc-btn-inquiry { width:auto; }

/* ── PAGINATION ── */
.pc-pagination { margin-top:2rem; }
.pc-pagination .pagination { gap:.25rem; }
.pc-pagination .page-link {
    border-radius:8px !important; border:1.5px solid var(--border);
    color:var(--text); font-size:.8rem; font-weight:500;
    padding:.45rem .875rem; transition:all .2s;
}
.pc-pagination .page-link:hover { border-color:var(--blue); color:var(--blue); background:var(--ugs-card); }
.pc-pagination .page-item.active .page-link {
    background:var(--blue) !important; border-color:var(--blue) !important; color:#fff !important;
}
.pc-pagination .page-item.disabled .page-link { opacity:.4; }

/* ── EMPTY STATE ── */
.pc-empty {
    text-align:center; padding:5rem 2rem;
}
.pc-empty-icon {
    width:72px; height:72px; border-radius:50%;
    background:var(--surface); border:1.5px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:1.75rem; color:var(--muted);
    margin:0 auto 1.5rem;
}
.pc-empty-title {
    font-family:var(--font-display); font-size:1.4rem; font-weight:700;
    text-transform:uppercase; color:var(--text); margin-bottom:.75rem;
}
.pc-empty-sub { font-size:.9rem; color:var(--muted); line-height:1.75; margin:0; }

@media(max-width:640px){
    .pc-section { padding:2rem 0 3.5rem; }
    .pc-layout { padding:0 1.25rem; gap:1.5rem; }
    .pc-skeleton-wrap { grid-template-columns:repeat(2,1fr); }
}

/* ═══ KATALOG RINGKAS: customer langsung bisa mulai mencari di layar pertama ═══ */
/* auto-scroll ke hasil berhenti di bawah navbar yang menempel, judul hasil tidak tertutup */
#pr-product-results { scroll-margin-top:84px; }
/* setelah semua filter dilepas, halaman digulir ke kotak cari: beri jarak supaya tidak tertutup navbar yang menempel */
#prSearchForm { scroll-margin-top:96px; }
.pr-hero { min-height:0; }
.pr-hero::before { min-height:clamp(96px, 14vh, 128px); }
.pr-hero-body { padding-bottom:2.25rem; }
.pr-hero-h1 { font-size:var(--ugs-fs-h1) !important; margin:.25rem 0 1rem; }
.pr-hero-sub { margin-bottom:1.25rem; }
@media(max-width:640px){
    .pr-hero { min-height:0; }
    .pr-hero::before { min-height:84px; }
    .pr-hero-body { padding-bottom:1.5rem; }
    .pr-hero-h1 { font-size:var(--ugs-fs-h1) !important; }
    .pr-hero-sub { display:none; }
    .pr-hero-meta { padding-top:1rem; }
}

.pr-section-mini { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin:0 0 1rem; }

/* jenis produk */
.pr-groups-section { background:var(--ugs-card); padding:1.75rem 0 1.5rem; border-bottom:1px solid var(--border); }
.pr-groups-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.75rem; }
.pr-group-card { display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; background:var(--ugs-surface); border:1.5px solid var(--border); border-radius:12px; text-align:left; cursor:pointer; transition:border-color .2s, background .2s, transform .2s; }
.pr-group-card:hover { border-color:var(--blue); background:var(--ugs-card); transform:translateY(-2px); }
.pr-group-card.is-active { border-color:var(--blue); background:var(--ugs-accent-tint); }
.pr-group-icon { flex-shrink:0; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(var(--ugs-accent-deep-rgb),.1); color:var(--blue); font-size:1rem; }
.pr-group-card.is-active .pr-group-icon { background:var(--blue); color:#fff; }
.pr-group-text { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.pr-group-text strong { font-size:.84rem; font-weight:700; color:var(--text); line-height:1.25; }
.pr-group-text small { font-size:.7rem; color:var(--muted); }
@media(max-width:1100px){ .pr-groups-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:800px){ .pr-groups-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px){
    .pr-groups-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
    .pr-group-card { padding:.65rem .7rem; gap:.55rem; }
    .pr-group-icon { width:34px; height:34px; font-size:.85rem; }
    .pr-group-text strong { font-size:.76rem; }
}

/* brand compact: logo + nama + jumlah, lebih rapat */
.pr-brands-section, .pr-brands-section.has-results { padding:1.75rem 0 2.5rem; }
.pr-brands-head, .pr-brands-section.has-results .pr-brands-head { display:block; margin-bottom:0; text-align:left; }
.pr-brands-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.75rem; }
.pr-brand-card { flex:none; padding:1rem; gap:.6rem; border-radius:12px; }
.pr-brand-logo { height:40px; }
.pr-brand-logo img { max-height:34px; }
.pr-brand-name { font-size:.82rem; }
.pr-brand-desc { display:none; }
.pr-brand-count { font-size:.6rem; padding:.2rem .55rem; margin-top:0; }
@media(max-width:1100px){ .pr-brands-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:600px){
    .pr-brands-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }
    .pr-brand-card { padding:.7rem .6rem; gap:.4rem; }
    .pr-brand-logo { height:30px; }
    .pr-brand-logo img { max-height:26px; }
    .pr-brand-name { font-size:.68rem; }
    .pr-brand-count { font-size:.55rem; padding:.15rem .4rem; }
}

/* kartu produk: nama huruf biasa, overlay hanya di perangkat dengan hover (di HP sempat "nyangkut") */
.pc-card-name { font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:.92rem; line-height:1.35; }
.pc-check-brand { display:block; font-size:.66rem; color:var(--muted); margin-top:.1rem; }
@media (hover: none) {
    .pc-card-overlay { display:none; }
    .pc-card:hover { transform:none; box-shadow:none; border-color:var(--border); }
    .pc-card:hover .pc-card-img img { transform:none; }
}
/* kolom pencarian: tombol Cari + dropdown saran */
.pr-global-search-input { padding-right:7.5rem; }
.pr-global-search-submit { position:absolute; right:.35rem; top:50%; transform:translateY(-50%); border:0; border-radius:50px; background:var(--blue); color:#fff; font-size:.82rem; font-weight:700; padding:.55rem 1.15rem; cursor:pointer; }
.pr-global-search-submit:hover { background:var(--ugs-accent-dark); }
.pr-global-search-clear { right:6.2rem !important; }
.pr-suggest { position:absolute; left:0; right:0; top:calc(100% + .4rem); z-index:60; background:var(--ugs-card); border:1px solid var(--ugs-hairline-strong); border-radius:16px; box-shadow:0 18px 44px rgba(15,35,80,.16); padding:.4rem; max-height:min(70vh, 460px); overflow-y:auto; text-align:left; }
.pr-suggest[hidden] { display:none; }
.pr-suggest-item { display:flex; align-items:center; gap:.8rem; padding:.5rem .6rem; border-radius:10px; text-decoration:none; color:var(--text); }
.pr-suggest-item img { width:46px; height:46px; flex-shrink:0; object-fit:contain; background:var(--ugs-surface); border-radius:8px; padding:.2rem; mix-blend-mode:multiply; }
.pr-suggest-text { display:flex; flex-direction:column; min-width:0; }
.pr-suggest-text strong { font-size:.88rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pr-suggest-text small { font-size:.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pr-suggest-item:hover, .pr-suggest [aria-selected="true"] { background:var(--ugs-accent-tint); }
.pr-suggest-all, .pr-suggest-mean { display:block; width:100%; margin-top:.25rem; padding:.65rem .6rem; border:0; border-top:1px solid var(--ugs-hairline-strong); background:none; border-radius:0 0 10px 10px; text-align:left; font-size:.84rem; font-weight:700; color:var(--blue); cursor:pointer; }
.pr-suggest-mean { border-top:0; border-radius:10px; color:var(--text); font-weight:500; }
.pr-suggest-mean strong { color:var(--blue); }
.pr-suggest-empty { margin:0; padding:.6rem; font-size:.82rem; color:var(--muted); }
@media(max-width:600px){
    .pr-global-search-input { padding-right:5.6rem; font-size:.9rem; }
    .pr-global-search-submit { padding:.5rem .85rem; font-size:.76rem; }
    .pr-global-search-clear { right:4.6rem !important; }
    .pr-suggest-item img { width:40px; height:40px; }
}

/* empty state yang membantu */
.pc-empty-suggest { margin:1.25rem 0 0; font-size:.95rem; color:var(--text); }
.pc-empty-suggest button,
.pc-suggest-link { border:0; background:none; padding:0; color:var(--blue); font-weight:700; text-decoration:underline; cursor:pointer; font-size:inherit; }
.pc-empty-source { display:flex; flex-direction:column; align-items:center; gap:.5rem; max-width:520px; margin:1.75rem auto 0; padding:1.5rem; border:1.5px dashed var(--ugs-hairline-strong); border-radius:14px; background:var(--ugs-surface); }
.pc-empty-source strong { font-size:1rem; color:var(--text); }
.pc-empty-source span { font-size:.86rem; color:var(--muted); line-height:1.6; }
.pc-empty-source .pc-btn-inquiry { margin-top:.5rem; width:auto; padding:.65rem 1.5rem; text-decoration:none; }
.pc-empty-groups { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1.5rem; }
.pc-empty-groups span { width:100%; font-size:.78rem; color:var(--muted); }
.pc-empty-groups button { border:1.5px solid var(--border); background:var(--ugs-card); border-radius:100px; padding:.4rem .9rem; font-size:.78rem; font-weight:600; color:var(--text); cursor:pointer; }
.pc-empty-groups button:hover { border-color:var(--blue); color:var(--blue); }
/* tombol sekunder: "Minta kami carikan" tetap satu-satunya tombol utama di hasil kosong */
.pc-empty-clear { display:inline-flex; align-items:center; gap:.45rem; margin-top:1.5rem; padding:.55rem 1.25rem; border:1.5px solid var(--border); border-radius:100px; background:transparent; color:var(--text); font-size:.85rem; font-weight:600; cursor:pointer; }
.pc-empty-clear:hover { border-color:var(--blue); color:var(--blue); }
.pc-ignored-words { margin:.35rem 0 0; font-size:.8rem; color:var(--muted); }
/* DEV-12: garis pemisah sebelum produk yang hanya cocok di deskripsi; selebar grid */
.pc-other-results { grid-column:1 / -1; display:flex; align-items:center; gap:.75rem; margin:.5rem 0 0; font-size:.8rem; font-weight:600; color:var(--muted); }
.pc-other-results::after { content:""; flex:1; border-top:1px solid var(--border); }

/* chip kategori: hanya saat sidebar filter berubah jadi panel tertutup (≤991px) */
.pc-chips { display:none; }
/* item grid default min-width:auto → deretan chip yang panjang ikut melebarkan kolom & seluruh halaman */
.pc-layout > *, .pc-main { min-width:0; }
@media(max-width:991px){
    .pc-chips { display:flex; gap:.5rem; overflow-x:auto; padding:.15rem 0 .85rem; margin-bottom:.5rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .pc-chips::-webkit-scrollbar { display:none; }
    .pc-chip { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-start; border:1.5px solid var(--border); background:var(--ugs-card); border-radius:12px; padding:.45rem .8rem; font-size:.76rem; font-weight:600; color:var(--text); white-space:nowrap; cursor:pointer; }
    .pc-chip small { font-size:.6rem; font-weight:500; color:var(--muted); }
    .pc-chip.is-on { border-color:var(--blue); background:var(--blue); color:#fff; }
    .pc-chip.is-on small { color:rgba(255,255,255,.75); }
}

/* HP: tampilkan nomor halaman (bawaan hanya Previous/Next — 54 halaman tidak bisa dilompati) */
@media(max-width:575px){
    .pc-pagination nav > .d-sm-none { display:none !important; }
    .pc-pagination nav > .d-none.d-sm-flex { display:flex !important; flex-direction:column; align-items:center; gap:.75rem; }
    .pc-pagination nav > .d-none.d-sm-flex p { margin:0; font-size:.75rem; text-align:center; }
    .pc-pagination .pagination { flex-wrap:wrap; justify-content:center; gap:.15rem; margin:0; }
    .pc-pagination .page-link { min-width:30px; padding:.3rem .42rem; text-align:center; font-size:.76rem; }
}

/* HP: 2 kolom kartu ringkas */
@media(max-width:480px){
    .pc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
    .pc-card-img img { padding:.6rem; }
    .pc-card-body { padding:.7rem .75rem .8rem; gap:.4rem; }
    .pc-card-name { font-size:.8rem; }
    .pc-card-tag-muted { display:none; }
    .pc-card-tag { font-size:.56rem; }
    .pc-btn-inquiry { font-size:.66rem; padding:.5rem .4rem; gap:.3rem; }
    .pc-btn-detail { font-size:.66rem; }
    .pc-card-brand { font-size:.5rem; }
}

/* ================================================
   TEMA TERANG + DARK MODE & HIERARKI TIPOGRAFI
   Urutan: H1 hero (display, kapital) → judul hasil (display) → label kecil (mono, oranye)
   → judul kartu (Inter tebal) → tombol/tag/keterangan (Inter, huruf biasa, bukan kapital)
   ================================================ */
/* teks di dalam judul ikut font judul (aturan font global di atas punya specificity 0) */
.pr-hero-h1 em, .pr-h2 em, .pc-results-title * { font-family:inherit; }
.pc-skeleton .pc-sk-img, .pc-sk-line { background:linear-gradient(90deg, var(--ugs-surface) 25%, var(--ugs-card-2) 50%, var(--ugs-surface) 75%); background-size:400% 100%; }

/* label kecil: sama dengan home */
.pr-section-mini, .pc-filter-section-title { font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size:.72rem; font-weight:500; letter-spacing:.12em; color:var(--ugs-accent-text); }
.pc-filter-section-title i { color:inherit; }

/* bagian atas: pencarian & jenis produk ikut latar halaman */
.pr-global-search-section { background:var(--ugs-page); border-bottom:0; padding:1.5rem 0 .5rem; }
.pr-global-search-input { background:var(--ugs-card); color:var(--ugs-fg); border-color:var(--ugs-hairline-strong); }
.pr-global-search-input::placeholder { color:var(--ugs-fg-3); }
.pr-groups-section { background:var(--ugs-page); border-bottom:0; }
.pr-group-card { background:var(--ugs-card); border:1px solid var(--ugs-hairline); border-radius:16px; }
.pr-group-card:hover { background:var(--ugs-card); border-color:rgba(var(--ugs-accent-rgb),.5); }
.pr-group-text strong { font-weight:600; color:var(--ugs-fg); }
.pr-group-text small, .pr-brand-desc { color:var(--ugs-fg-3); }
.pr-brands-section { background:var(--ugs-surface); }
.pr-brand-card { background:var(--ugs-card); border:1px solid var(--ugs-hairline); border-radius:16px; }
.pr-brand-name { font-family:var(--font-body); font-size:.85rem; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ugs-fg); }
.pr-brand-count { font-size:.74rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--ugs-accent-text); background:var(--ugs-accent-tint); }
/* logo merek berwarna di atas kartu gelap: diberi pelat terang */
:root[data-ugs-theme="dark"] .pr-brand-logo { background:#f5f5f7; border-radius:10px; padding:.35rem .5rem; }

/* hasil produk */
.pc-section { background:var(--ugs-page); }
.pc-results-title { font-weight:800; color:var(--ugs-fg); }
.pc-results-count { font-size:.88rem; color:var(--ugs-fg-3); }
.pc-results-search-badge { background:var(--ugs-accent-tint); color:var(--ugs-accent-text); }
.pc-view-btn { background:var(--ugs-card); border:1px solid var(--ugs-hairline-strong); color:var(--ugs-fg-2); }
.pc-view-btn.is-active { background:var(--ugs-fg); border-color:var(--ugs-fg); color:var(--ugs-page); }

/* panel filter: kepala tidak lagi navy gelap */
.pc-filter-panel { background:var(--ugs-card); border-color:var(--ugs-hairline); }
.pc-filter-head { background:var(--ugs-card); border-bottom:1px solid var(--ugs-hairline); }
.pc-filter-title { font-family:var(--font-body); font-size:.95rem; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ugs-fg); }
.pc-reset-btn { font-size:.8rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--ugs-fg-3); }
.pc-reset-btn:hover { color:var(--ugs-accent-text); }
.pc-search-input { background:var(--ugs-surface); color:var(--ugs-fg); border-color:var(--ugs-hairline-strong); }
.pc-check-text { color:var(--ugs-fg-2); }
.pc-check.is-on .pc-check-text { color:var(--ugs-fg); }

/* kartu produk: foto JPG berlatar putih selalu di kotak terang (di latar gelap multiply membuat foto menghitam) */
.pc-card, .pc-list-card { background:var(--ugs-card); border:1px solid var(--ugs-hairline); border-radius:18px; }
.pc-card-img, .pc-list-img { background:var(--ugs-photo-tile); }
:root[data-ugs-theme="dark"] .pc-card-img, :root[data-ugs-theme="dark"] .pc-list-img { background:#f2f4f7; }
.pc-card-brand { background:var(--ugs-card); color:var(--ugs-fg); font-size:.68rem; font-weight:500; text-transform:none; letter-spacing:0; border:1px solid var(--ugs-hairline); }
:root[data-ugs-theme="dark"] .pc-card-brand { background:rgba(255,255,255,.85); color:#1d1d1f; }
.pc-card-name { font-family:var(--font-body); font-size:.98rem; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ugs-fg); }
.pc-card-tag { font-size:.74rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--ugs-fg-2); background:var(--ugs-surface); border-color:var(--ugs-hairline); border-radius:6px; }
.pc-btn-inquiry { font-size:.85rem; font-weight:500; text-transform:none; letter-spacing:0; }
.pc-btn-detail { font-size:.85rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--ugs-accent-text); }
.pc-btn-detail:hover { color:var(--ugs-accent-text); }
.pc-chip { background:var(--ugs-card); border-color:var(--ugs-hairline-strong); color:var(--ugs-fg); font-weight:500; }
.pc-chip small { color:var(--ugs-fg-3); }
.pc-empty-title { color:var(--ugs-fg); }
.pc-empty-sub { color:var(--ugs-fg-2); }
@media(max-width:600px){
    .pc-card-name { font-size:.86rem; }
    .pc-card-tag { font-size:.68rem; }
    .pc-btn-inquiry { font-size:.78rem; }
    .pc-btn-detail { font-size:.78rem; }
    .pc-card-brand { font-size:.6rem; }
    .pr-brand-name { font-size:.72rem; }
    .pr-brand-count { font-size:.66rem; }
}

/* DEV-16: produk sudah di daftar penawaran → tombol garis dengan centang, mengarah ke daftar */
.pc-btn-inquiry.is-added,
.ugs-btn-inquiry-modal.is-added { background:transparent !important; color:var(--ugs-accent-text, var(--blue)) !important; box-shadow:inset 0 0 0 1.5px currentColor; text-decoration:none; }
.pc-btn-inquiry.is-added:hover,
.ugs-btn-inquiry-modal.is-added:hover { background:var(--ugs-accent-tint, transparent) !important; transform:none; }