/* ============================================================
   V6E — Halaman Customer Katalog Harga Service
   Bahasa visual mengikuti desain "Redesain Katalog Harga HP":
   hitam pekat + aksen merah, huruf tebal kapital, sudut miring.
   Berdiri sendiri, tidak memuat berkas aplikasi pengelola.
   Warna utama/aksen tetap dapat diubah dari menu Tampilan Website.
   ============================================================ */

@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

:root {
  --pc-primary: #d61f2b;
  --pc-accent: #8a5a2b;
  --pc-dark: #141414;
  --pc-dark-2: #1e1c1b;
  /* V6F: hitam dilembutkan (sekitar 75-80%) agar tidak pekat. */
  --pc-dark-soft: #38352f;
  --pc-dark-soft-2: #2e2b26;
  /* V6F: palet emas sesuai logo usaha (merah, putih, hitam, emas). */
  --pc-gold: #c9a227;
  --pc-gold-light: #e9c884;
  --pc-gold-pale: #f6e9cf;
  --pc-bg: #ffffff;
  --pc-surface: #ffffff;
  --pc-surface-2: #f5f3f0;
  --pc-ink: #141414;
  --pc-muted: #77716a;
  --pc-muted-dark: #9a9490;
  --pc-warm: #c9c2ba;
  --pc-line: #e6e2dd;
  --pc-line-dark: #332f2d;
  --pc-radius: 4px;
  --pc-shadow: 0 8px 24px rgba(20, 20, 20, .08);
  --pc-shadow-lg: 0 20px 50px rgba(20, 20, 20, .16);
  --pc-wide: 1440px;
  --pc-gutter: clamp(18px, 4vw, 56px);
  --pc-skew: -6deg;
  --pc-font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* V6Y — font judul terpisah dari font isi teks. Tanpa nilai kustom dari
     menu Tampilan Website, jatuh kembali ke --pc-font (tidak berubah). */
  --pc-heading-font: var(--pc-font);
}

/* Mode gelap penuh dari menu Tampilan Website. */
.pc-theme-dark {
  --pc-bg: #141414;
  --pc-surface: #1e1c1b;
  --pc-surface-2: #262322;
  --pc-ink: #f6f4f2;
  --pc-muted: #9a9490;
  --pc-line: #332f2d;
  --pc-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  --pc-shadow-lg: 0 20px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.pc-body {
  margin: 0;
  background: var(--pc-bg);
  color: var(--pc-ink);
  font-family: var(--pc-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* V6F: latar putih diganti gradasi emas lembut.
   Kartu tetap putih supaya tulisan tetap mudah dibaca. */
body.pc-body:not(.pc-theme-dark) {
  background:
    radial-gradient(1100px 560px at 10% -6%, rgba(233, 200, 132, .42), transparent 62%),
    radial-gradient(900px 480px at 96% 6%, rgba(214, 31, 43, .06), transparent 58%),
    radial-gradient(800px 700px at 50% 108%, rgba(201, 162, 39, .22), transparent 60%),
    linear-gradient(180deg, #fffdf8 0%, #fbf4e6 26%, #f7ecd6 58%, #f3e5c8 100%);
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

.pc-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  padding: 12px 20px; background: var(--pc-primary); color: #fff;
  font-weight: 800; text-transform: uppercase; text-decoration: none;
}
.pc-skip:focus { left: 8px; }

:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--pc-primary);
  outline-offset: 3px;
}

/* ---------- Layar pemuatan ---------- */
.pc-boot { min-height: 70vh; display: grid; place-items: center; background: var(--pc-dark); }
.pc-boot-inner { display: grid; gap: 16px; justify-items: center; color: var(--pc-muted-dark); }
.pc-boot-inner p { text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: .1em; }
.pc-boot-spinner {
  width: 38px; height: 38px;
  border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--pc-primary);
  animation: pc-spin .8s linear infinite;
}
@keyframes pc-spin { to { transform: rotate(360deg); } }

.pc-shell { display: flow-root; }
.pc-wrap { width: min(var(--pc-wide), 100% - (var(--pc-gutter) * 2)); margin-inline: auto; }

.pc-kicker {
  display: inline-block; margin: 0 0 14px;
  color: var(--pc-primary);
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.pc-section { margin-top: clamp(56px, 8vw, 104px); }
/* V6G: sisakan ruang agar judul tidak tertutup menu atas yang menempel
   ketika pengunjung melompat lewat tautan navigasi. */
#beranda, #pcKatalog, #testimoni, #garansi, #cabang, #kontak { scroll-margin-top: 96px; }
.pc-section-head { max-width: 680px; margin-bottom: clamp(26px, 3.5vw, 40px); }
.pc-section-head h2, .pc-panel-head h2, .pc-contact h2 {
  margin: 0;
  font-family: var(--pc-heading-font);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 46px); line-height: 1.04; letter-spacing: -.01em;
}
.pc-section-head p { margin: 14px 0 0; color: var(--pc-muted); font-size: 16px; }

/* ---------- Header ---------- */
.pc-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(20, 20, 20, .96);
  backdrop-filter: blur(8px);
}
.pc-header-inner {
  min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.pc-brand { display: flex; align-items: center; gap: 13px; color: #fff; text-decoration: none; }
.pc-brand img { width: 44px; height: 44px; object-fit: contain; }
.pc-brand-mark {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--pc-primary); color: #fff;
  font-size: 20px; font-weight: 800;
  transform: skewX(var(--pc-skew));
}
.pc-brand-mark > * { transform: skewX(calc(var(--pc-skew) * -1)); }
.pc-brand-text { display: grid; gap: 2px; }
.pc-brand-text strong {
  font-size: 18px; font-weight: 800; color: #fff;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
}
.pc-brand-text small { font-size: 12px; color: var(--pc-muted-dark); letter-spacing: .03em; }

.pc-nav { display: flex; align-items: center; gap: 32px; }
.pc-nav a {
  color: #fff; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  transition: color .15s ease;
}
.pc-nav a:hover { color: var(--pc-primary); }
.pc-header-actions { display: flex; align-items: center; gap: 10px; }

/* ---------- Tombol ---------- */
.pc-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px; border: 0; background: transparent;
  color: #fff; font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; text-decoration: none; cursor: pointer;
}
.pc-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: skewX(var(--pc-skew));
  transition: background .15s ease, box-shadow .15s ease;
}
.pc-btn:active { transform: translateY(1px); }
.pc-btn-primary::before { background: var(--pc-primary); }
.pc-btn-primary:hover::before { background: #a5121f; }
.pc-btn-ghost { color: var(--pc-ink); }
.pc-btn-ghost::before { background: transparent; border: 2px solid currentColor; }
.pc-btn-ghost:hover { color: var(--pc-primary); }
.pc-btn-sm { min-height: 40px; padding: 0 18px; font-size: 12.5px; }
.pc-btn-admin { color: var(--pc-muted-dark); font-size: 11.5px; }
.pc-btn-admin::before { border: 1px solid var(--pc-line-dark); }
.pc-btn-admin:hover { color: #fff; }
/* Tombol di dalam pita gelap tetap putih. */
.pc-header .pc-btn-ghost { color: #fff; }

/* ---------- Running text ---------- */
.pc-marquee {
  overflow: hidden;
  background: var(--pc-primary); color: #fff;
}
.pc-marquee.tone-accent { background: var(--pc-accent); }
.pc-marquee.tone-dark { background: var(--pc-dark); }
.pc-marquee-track {
  display: flex; width: max-content;
  animation: pc-marquee var(--pc-marquee-duration, 30s) linear infinite;
}
.pc-marquee:hover .pc-marquee-track,
.pc-marquee:focus-within .pc-marquee-track { animation-play-state: paused; }
.pc-marquee-group { display: flex; flex: none; }
.pc-marquee-item {
  display: inline-flex; align-items: center;
  padding: 13px 0;
  font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}
.pc-marquee-item::after { content: "◆"; opacity: .5; font-size: 8px; margin-inline: 30px; }
@keyframes pc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pc-marquee-track { animation: none; flex-wrap: wrap; width: 100%; }
  .pc-marquee-group:last-child { display: none; }
}

/* ---------- Hero / Slideshow ---------- */
.pc-hero { position: relative; background: var(--pc-dark); }
.pc-slides {
  position: relative; overflow: hidden;
  background: var(--pc-dark);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 94%);
}
/* Bentuk geometris merah khas desain. */
.pc-slides::before {
  content: ""; position: absolute; top: -80px; right: -60px;
  width: 420px; height: 420px; z-index: 1;
  background: var(--pc-primary); transform: rotate(18deg); opacity: .9;
  pointer-events: none;
}
.pc-slides::after {
  content: ""; position: absolute; top: 60px; right: 100px;
  width: 140px; height: 140px; z-index: 3;
  border: 3px solid rgba(255, 255, 255, .2); border-radius: 50%;
  pointer-events: none;
}
.pc-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease; }
.pc-slide.is-active { position: relative; opacity: 1; visibility: visible; }
.pc-slide-media { position: absolute; inset: 0; z-index: 2; }
.pc-slide-media img { width: 100%; height: 100%; object-fit: cover; }
.pc-slide-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(20, 20, 20, .97) 0%,
    rgba(20, 20, 20, .88) 42%,
    rgba(20, 20, 20, .45) 72%,
    rgba(20, 20, 20, .25) 100%);
}
.pc-slide-body {
  position: relative; z-index: 4;
  min-height: clamp(440px, 50vw, 560px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 100px);
}
.pc-slide-inner { max-width: 640px; }
.pc-slide-body .pc-kicker {
  padding: 9px 18px; margin-bottom: 26px;
  background: var(--pc-primary); color: #fff;
  letter-spacing: .06em; transform: skewX(-8deg);
}
.pc-slide-body .pc-kicker > * { display: inline-block; transform: skewX(8deg); }
.pc-slide-body h1 {
  margin: 0 0 22px;
  font-family: var(--pc-heading-font);
  color: #fff; font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 5.4vw, 58px); line-height: 1.02; letter-spacing: -.01em;
}
.pc-slide-body h1 em { font-style: normal; color: var(--pc-primary); }
.pc-slide-desc {
  margin: 0 0 32px; max-width: 520px;
  color: var(--pc-warm); font-size: 17px; line-height: 1.6;
}
.pc-slide-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.pc-slide-actions .pc-btn-ghost { color: #fff; }
.pc-slide-hours {
  display: block; margin-top: 24px;
  color: var(--pc-muted-dark); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}

.pc-slide-nav {
  position: absolute; z-index: 6; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .35); background: transparent;
  color: #fff; font-size: 18px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.pc-slide-nav:hover { background: var(--pc-primary); border-color: var(--pc-primary); }
.pc-slide-prev { left: clamp(10px, 2vw, 22px); }
.pc-slide-next { right: clamp(10px, 2vw, 22px); }
.pc-slide-dots {
  position: absolute; z-index: 6; left: 50%; bottom: 40px; transform: translateX(-50%);
  display: flex; gap: 9px;
}
.pc-slide-dot {
  width: 26px; height: 5px; padding: 0; border: 0;
  background: rgba(255, 255, 255, .3); cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.pc-slide-dot.is-active { width: 46px; background: var(--pc-primary); }

/* ---------- Promo ---------- */
.pc-promo {
  position: relative; z-index: 8;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  margin-top: clamp(28px, 4vw, 44px); padding: 22px 26px;
  background: var(--pc-dark-soft); color: #fff;
}
.pc-promo img { width: 96px; height: 70px; object-fit: cover; }
.pc-promo-symbol {
  width: 62px; height: 62px; display: grid; place-items: center;
  background: var(--pc-primary); color: #fff; font-size: 26px; font-weight: 800;
  transform: skewX(var(--pc-skew));
}
.pc-promo h2 { margin: 0; font-size: 22px; font-weight: 800; text-transform: uppercase; }
.pc-promo p { margin: 5px 0 0; color: var(--pc-warm); font-size: 14px; }
.pc-promo .pc-kicker { margin-bottom: 6px; }

/* ---------- Panel katalog ---------- */
.pc-panel {
  position: relative;
  padding: clamp(26px, 4vw, 46px);
  background: var(--pc-surface); border: 1px solid var(--pc-line);
}
/* V6F: judul katalog diberi panel gelap dengan ornamen teratai Bali + jalur sirkuit. */
.pc-panel-head {
  position: relative; overflow: hidden;
  margin: calc(clamp(26px, 4vw, 46px) * -1) calc(clamp(26px, 4vw, 46px) * -1) 30px;
  padding: clamp(30px, 4.5vw, 52px) clamp(26px, 4vw, 46px);
  background:
    radial-gradient(680px 320px at 8% 0%, rgba(201, 162, 39, .22), transparent 70%),
    linear-gradient(120deg, var(--pc-dark-soft-2) 0%, var(--pc-dark-soft) 58%, #423d34 100%);
  border-bottom: 3px solid var(--pc-primary);
}
.pc-panel-head::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c9a227%22%20stroke-width%3D%221.1%22%20opacity%3D%22.55%22%3E%3Cpath%20d%3D%22M0%2026h30l10%2010h22%22%2F%3E%3Cpath%20d%3D%22M160%2026h-30l-10%2010h-22%22%2F%3E%3Cpath%20d%3D%22M0%20134h30l10-10h22%22%2F%3E%3Cpath%20d%3D%22M160%20134h-30l-10-10h-22%22%2F%3E%3Cpath%20d%3D%22M80%200v14%22%2F%3E%3Cpath%20d%3D%22M80%20160v-14%22%2F%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%2236%22%20r%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%2298%22%20cy%3D%2236%22%20r%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%22124%22%20r%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%2298%22%20cy%3D%22124%22%20r%3D%222.4%22%2F%3E%3Crect%20x%3D%2256%22%20y%3D%2266%22%20width%3D%2248%22%20height%3D%2228%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M56%2074H42M56%2086H42M104%2074h14M104%2086h14%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c9a227%22%20stroke-width%3D%221.3%22%20opacity%3D%22.8%22%3E%3Cpath%20d%3D%22M80%2080C73.5%2066%2073.5%2057%2080%2048C86.5%2057%2086.5%2066%2080%2080Z%22%20transform%3D%22rotate%280%2080%2080%29%22%2F%3E%3Cpath%20d%3D%22M80%2080C73.5%2066%2073.5%2057%2080%2048C86.5%2057%2086.5%2066%2080%2080Z%22%20transform%3D%22rotate%2845%2080%2080%29%22%2F%3E%3Cpath%20d%3D%22M80%2080C73.5%2066%2073.5%2057%2080%2048C86.5%2057%2086.5%2066%2080%2080Z%22%20transform%3D%22rotate%2890%2080%2080%29%22%2F%3E%3Cpath%20d%3D%22M80%2080C73.5%2066%2073.5%2057%2080%2048C86.5%2057%2086.5%2066%2080%2080Z%22%20transform%3D%22rotate%28135%2080%2080%29%22%2F%3E%3Cpath%20d%3D%22M80%2080C73.5%2066%2073.5%2057%2080%2048C86.5%2057%2086.5%2066%2080%2080Z%22%20transform%3D%22rotate%28180%2080%2080%29%22%2F%3E%3Cpath%20d%3D%22M80%2080C73.5%2066%2073.5%2057%2080%2048C86.5%2057%2086.5%2066%2080%2080Z%22%20transform%3D%22rotate%28225%2080%2080%29%22%2F%3E%3Cpath%20d%3D%22M80%2080C73.5%2066%2073.5%2057%2080%2048C86.5%2057%2086.5%2066%2080%2080Z%22%20transform%3D%22rotate%28270%2080%2080%29%22%2F%3E%3Cpath%20d%3D%22M80%2080C73.5%2066%2073.5%2057%2080%2048C86.5%2057%2086.5%2066%2080%2080Z%22%20transform%3D%22rotate%28315%2080%2080%29%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%225.5%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%2213%22%20stroke-dasharray%3D%223%205%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 160px 160px;
  background-position: center;
  opacity: .3;
  pointer-events: none;
}
.pc-panel-head::after {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(214, 31, 43, .3), transparent 62%);
  pointer-events: none;
}
.pc-panel-head > * { position: relative; z-index: 1; }
.pc-panel-head .pc-kicker { color: var(--pc-gold-light); }
.pc-panel-head h2 { font-size: clamp(26px, 3.6vw, 40px); color: #fff; }
.pc-panel-head p { margin: 12px 0 0; color: var(--pc-warm); font-size: 15px; max-width: 60ch; }

.pc-search {
  display: flex; align-items: center; gap: 13px;
  min-height: 58px; padding: 0 20px;
  background: var(--pc-surface-2); border: 2px solid transparent;
  transition: border-color .15s ease;
}
.pc-search:focus-within { border-color: var(--pc-primary); background: var(--pc-surface); }
.pc-search span { color: var(--pc-primary); font-size: 19px; }
.pc-search input {
  width: 100%; height: 54px; border: 0; outline: 0; background: transparent;
  color: var(--pc-ink); font-family: inherit; font-size: 15px;
}
.pc-search input::placeholder { color: var(--pc-muted); }

/* ---------- Langkah 1-2-3 ---------- */
.pc-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 26px; }
.pc-step {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border: 2px solid var(--pc-line); background: transparent;
  color: var(--pc-muted); font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; cursor: default;
}
.pc-step b {
  width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--pc-surface-2); color: var(--pc-muted); font-size: 11px;
}
.pc-step.is-done { color: var(--pc-ink); border-color: var(--pc-ink); cursor: pointer; }
.pc-step.is-done b { background: var(--pc-ink); color: #fff; }
.pc-step.is-current { border-color: var(--pc-primary); color: var(--pc-primary); }
.pc-step.is-current b { background: var(--pc-primary); color: #fff; }
.pc-step-sep { color: var(--pc-line); font-weight: 800; }

/* ---------- Kartu merek ---------- */
.pc-brand-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.pc-brand-card {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  padding: 26px 16px;
  border: 1px solid var(--pc-line); background: var(--pc-surface); cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pc-brand-card:hover {
  transform: translateY(-4px);
  border-color: var(--pc-primary); box-shadow: var(--pc-shadow);
}
.pc-brand-logo { width: 60px; height: 60px; object-fit: contain; }
.pc-brand-initial {
  width: 60px; height: 60px; display: grid; place-items: center;
  background: var(--pc-dark); color: #fff;
  font-size: 26px; font-weight: 800;
  transform: skewX(var(--pc-skew));
}
.pc-brand-card strong {
  font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
}
.pc-brand-card small {
  color: var(--pc-muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ---------- Daftar tipe ---------- */
.pc-model-list { display: grid; gap: 10px; margin-top: 20px; }
.pc-model-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 18px 22px; text-align: left;
  border: 1px solid var(--pc-line); background: var(--pc-surface); cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.pc-model-item:hover {
  transform: translateX(4px);
  border-color: var(--pc-primary); background: var(--pc-surface-2);
}
.pc-model-item strong { font-size: 16px; font-weight: 800; text-transform: uppercase; }
.pc-model-item span { color: var(--pc-muted); font-size: 12px; font-weight: 600; }
.pc-model-arrow { color: var(--pc-primary); font-size: 20px; font-weight: 800; }

.pc-back {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 18px; padding: 0; border: 0; background: none;
  color: var(--pc-primary); font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
}
.pc-back:hover { text-decoration: underline; }

/* ---------- Kartu harga ---------- */
.pc-price-group { margin-top: 30px; }
.pc-price-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 20px; margin-bottom: 16px;
  background: var(--pc-dark-soft); color: #fff;
}
.pc-price-group-head strong {
  font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.pc-price-group-head span {
  color: var(--pc-warm); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.pc-price-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pc-price-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 13px;
  padding: 22px;
  border: 1px solid var(--pc-line); background: var(--pc-surface);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pc-price-card:hover {
  transform: translateY(-4px);
  border-color: var(--pc-primary); box-shadow: var(--pc-shadow);
}
.pc-price-card.has-photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--pc-card-photo); background-size: cover; background-position: center;
  opacity: .08;
}
.pc-price-card > * { position: relative; z-index: 1; }
.pc-price-top { display: flex; align-items: center; gap: 13px; }
.pc-price-icon {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: var(--pc-surface-2); color: var(--pc-primary); font-size: 20px;
}
.pc-price-icon img { width: 100%; height: 100%; object-fit: contain; }
.pc-price-name { display: grid; gap: 3px; min-width: 0; }
.pc-price-name strong {
  font-size: 14px; font-weight: 800; line-height: 1.25;
  text-transform: uppercase; letter-spacing: .02em;
}
.pc-price-name small {
  color: var(--pc-muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.pc-price-value {
  font-size: clamp(24px, 2.8vw, 30px); font-weight: 800;
  color: var(--pc-primary); letter-spacing: -.02em;
}
.pc-price-compare { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.pc-price-compare del { color: var(--pc-muted); font-size: 14px; font-weight: 500; }
.pc-price-compare em {
  font-style: normal; padding: 4px 9px;
  background: var(--pc-primary); color: #fff;
  font-size: 11px; font-weight: 800;
  transform: skewX(var(--pc-skew));
}
.pc-price-split { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-price-split span {
  padding: 6px 11px; background: var(--pc-surface-2);
  color: var(--pc-muted); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.pc-price-note { margin: 0; color: var(--pc-muted); font-size: 13px; line-height: 1.55; }
.pc-price-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-price-meta span {
  padding: 5px 10px; border: 1px solid var(--pc-line);
  color: var(--pc-ink); font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}
.pc-knowledge-btn {
  margin-top: auto; align-self: start;
  padding: 10px 16px; border: 2px solid var(--pc-ink); background: transparent;
  color: var(--pc-ink); font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pc-knowledge-btn:hover { background: var(--pc-primary); border-color: var(--pc-primary); color: #fff; }

.pc-empty {
  display: grid; gap: 10px; justify-items: center; text-align: center;
  padding: 56px 24px; border: 2px dashed var(--pc-line); background: var(--pc-surface-2);
}
.pc-empty strong { font-size: 17px; font-weight: 800; text-transform: uppercase; }
.pc-empty p { margin: 0; max-width: 46ch; color: var(--pc-muted); font-size: 14px; }
.pc-error {
  padding: 20px 24px; border-left: 5px solid var(--pc-primary);
  background: #fdf1f1; color: #8a1520; font-weight: 600;
}
.pc-theme-dark .pc-error { background: #2a1215; color: #ff8a80; }

.pc-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 28px;
}
.pc-pagination span {
  color: var(--pc-muted); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.pc-pagination .pc-btn[disabled] { opacity: .35; cursor: not-allowed; }

/* ---------- Keunggulan (trust strip) ---------- */
.pc-benefits {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background: var(--pc-dark-soft);
}
.pc-benefit {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 32px 28px;
  border-right: 1px solid var(--pc-line-dark);
}
.pc-benefit:last-child { border-right: 0; }
.pc-benefit > span {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--pc-primary); color: #fff; font-size: 18px; font-weight: 800;
  transform: skewX(var(--pc-skew));
}
.pc-benefit strong {
  display: block; margin-bottom: 6px; color: #fff;
  font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
}
.pc-benefit small { color: var(--pc-muted-dark); font-size: 13px; line-height: 1.55; }

/* ---------- V6F: Testimoni ---------- */
.pc-testi-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.pc-testi {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px;
  background: var(--pc-surface);
  border: 1px solid var(--pc-line);
  border-top: 4px solid var(--pc-gold);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pc-testi:hover { transform: translateY(-4px); box-shadow: var(--pc-shadow); }
.pc-testi-stars { color: var(--pc-gold); font-size: 17px; letter-spacing: 2px; }
.pc-testi-stars span { color: var(--pc-line); }
.pc-testi-quote {
  margin: 0; flex: 1;
  color: var(--pc-ink); font-size: 15.5px; line-height: 1.65; font-style: italic;
}
.pc-testi-person { display: flex; align-items: center; gap: 13px; }
.pc-testi-person img {
  width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover;
}
.pc-testi-initial {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--pc-dark-soft); color: var(--pc-gold-light);
  font-size: 18px; font-weight: 800;
}
.pc-testi-person strong {
  display: block; font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
}
.pc-testi-person small { color: var(--pc-muted); font-size: 12px; font-weight: 600; }

/* ---------- V6F: Garansi + alamat cabang ---------- */
.pc-warranty {
  display: grid; grid-template-columns: 1.1fr .9fr;
  border: 1px solid var(--pc-line); background: var(--pc-surface);
}
.pc-warranty.is-single { grid-template-columns: 1fr; }
.pc-warranty-main {
  position: relative; overflow: hidden;
  padding: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(520px 260px at 92% 4%, rgba(201, 162, 39, .2), transparent 68%),
    linear-gradient(130deg, var(--pc-dark-soft-2), var(--pc-dark-soft) 62%, #423d34 100%);
  color: #fff;
}
.pc-warranty-main > * { position: relative; z-index: 1; }
.pc-warranty-badge {
  display: inline-block; margin-bottom: 18px; padding: 9px 18px;
  background: var(--pc-primary); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  transform: skewX(var(--pc-skew));
}
.pc-warranty-main h2 {
  margin: 0 0 16px; color: #fff;
  font-size: clamp(24px, 3.4vw, 36px); font-weight: 800;
  text-transform: uppercase; line-height: 1.08;
}
.pc-warranty-main > p { margin: 0 0 22px; color: var(--pc-warm); font-size: 15.5px; line-height: 1.65; }
.pc-warranty-points { display: grid; gap: 11px; margin: 0 0 26px; padding: 0; list-style: none; }
.pc-warranty-points li {
  position: relative; padding-left: 28px;
  color: var(--pc-warm); font-size: 14px; line-height: 1.6;
}
.pc-warranty-points li::before {
  content: "\2714"; position: absolute; left: 0; top: 0;
  color: var(--pc-gold-light); font-weight: 800;
}
.pc-warranty-loc { padding: clamp(28px, 4vw, 44px); background: var(--pc-gold-pale); }
.pc-theme-dark .pc-warranty-loc { background: var(--pc-surface-2); }
.pc-warranty-loc .pc-kicker { color: var(--pc-accent); }
.pc-loc-list { display: grid; gap: 18px; }
.pc-loc {
  display: grid; gap: 5px;
  padding-left: 18px; border-left: 3px solid var(--pc-primary);
}
.pc-loc strong { font-size: 15px; font-weight: 800; text-transform: uppercase; }
.pc-loc p { margin: 0; color: var(--pc-muted); font-size: 13.5px; line-height: 1.55; }
.pc-loc small { color: var(--pc-muted); font-size: 12px; font-weight: 600; }
.pc-loc a {
  justify-self: start; margin-top: 3px;
  color: var(--pc-primary); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
}
.pc-loc a:hover { text-decoration: underline; }
.pc-loc-hours {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--pc-line);
  color: var(--pc-muted); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- Cabang ---------- */
.pc-branch-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pc-branch {
  overflow: hidden; border: 1px solid var(--pc-line); background: var(--pc-surface);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.pc-branch:hover { transform: translateY(-3px); box-shadow: var(--pc-shadow); }
.pc-branch.is-nearest { border-color: var(--pc-primary); border-width: 2px; }
.pc-branch figure { height: 168px; margin: 0; }
.pc-branch figure img { width: 100%; height: 100%; object-fit: cover; }
.pc-branch-placeholder {
  height: 130px; display: grid; place-items: center;
  background: var(--pc-dark); color: var(--pc-primary); font-size: 36px;
}
.pc-branch-body { display: grid; gap: 11px; padding: 22px; }
.pc-branch-body h3 { margin: 0; font-size: 18px; font-weight: 800; text-transform: uppercase; }
.pc-branch-body p { margin: 0; color: var(--pc-muted); font-size: 13.5px; }
.pc-branch-badge {
  width: max-content; padding: 5px 11px;
  background: var(--pc-primary); color: #fff;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  transform: skewX(var(--pc-skew));
}
.pc-branch-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Kontak ---------- */
.pc-contact {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 4vw, 48px); align-items: center;
  padding: clamp(30px, 5vw, 56px);
  background: var(--pc-dark-soft); color: #fff;
}
.pc-contact h2 { color: #fff; }
.pc-contact > div > p { color: var(--pc-warm); font-size: 15.5px; }
.pc-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pc-contact-actions .pc-btn-ghost { color: #fff; }
.pc-contact dl { display: grid; gap: 16px; margin: 0; }
.pc-contact dl div { display: grid; gap: 4px; }
.pc-contact dt {
  color: var(--pc-primary); font-size: 10.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.pc-contact dd { margin: 0; font-size: 15px; font-weight: 600; }
.pc-social { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.pc-social a {
  color: #fff; font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
}
.pc-social a:hover { color: var(--pc-primary); }

/* ---------- Footer ---------- */
.pc-footer {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px;
  margin-top: clamp(56px, 8vw, 100px); padding-block: 36px;
  background: var(--pc-dark-soft); color: #fff;
  border-top: 4px solid var(--pc-primary);
}
.pc-footer .pc-brand-text small { color: var(--pc-muted-dark); }
.pc-footer p { margin: 0; color: var(--pc-muted-dark); font-size: 13px; text-align: center; }
.pc-footer > a, .pc-footer a {
  color: var(--pc-primary); font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
}

/* ---------- Popup Info & Edukasi ---------- */
.pc-modal {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: var(--pc-gutter); background: rgba(20, 20, 20, .8); backdrop-filter: blur(4px);
}
.pc-modal-card {
  width: min(660px, 100%); max-height: 88vh; overflow: auto;
  padding: clamp(24px, 3.5vw, 36px);
  background: var(--pc-surface); border-top: 5px solid var(--pc-primary);
  box-shadow: var(--pc-shadow-lg);
}
.pc-modal-card-has-photo {
  background-image: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--pc-surface) 92%, transparent),
      var(--pc-surface) 60%),
    var(--pc-knowledge-photo);
  background-size: cover;
  background-position: center top;
}
.pc-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 20px;
}
.pc-modal-head h2 {
  margin: 0; font-size: 26px; font-weight: 800;
  text-transform: uppercase; line-height: 1.1;
}
.pc-modal-close {
  width: 40px; height: 40px; flex: none;
  border: 2px solid var(--pc-line); background: transparent;
  font-size: 16px; font-weight: 800; cursor: pointer;
}
.pc-modal-close:hover { background: var(--pc-primary); border-color: var(--pc-primary); color: #fff; }
.pc-modal-intro { margin-bottom: 8px; }
.pc-modal-short { font-weight: 700; font-size: 15px; }
.pc-modal-section-grid { display: grid; gap: 4px; }
.pc-modal-section { margin-top: 22px; }
.pc-modal h3 {
  margin: 0 0 10px;
  color: var(--pc-primary); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.pc-modal ul { margin: 0; padding-left: 20px; color: var(--pc-muted); font-size: 14.5px; }
.pc-modal li { margin-bottom: 6px; }
.pc-modal p { color: var(--pc-muted); font-size: 14.5px; }
.pc-modal-bottom-actions { display: flex; justify-content: flex-end; margin-top: 26px; }
.pc-modal-close-bottom {
  padding: 12px 22px; border: 2px solid var(--pc-ink); background: transparent;
  color: var(--pc-ink); font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
}
.pc-modal-close-bottom:hover { background: var(--pc-ink); color: #fff; }

/* ---------- Muncul saat digulir ---------- */
.pc-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.pc-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pc-reveal { opacity: 1; transform: none; transition: none; }
  .pc-slide { transition: none; }
}

/* ---------- Responsif ---------- */
@media (max-width: 1000px) {
  .pc-nav { display: none; }
  .pc-warranty { grid-template-columns: 1fr; }
  .pc-contact { grid-template-columns: 1fr; }
  .pc-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pc-benefit { border-right: 0; border-bottom: 1px solid var(--pc-line-dark); }
}
@media (max-width: 760px) {
  :root { --pc-skew: -4deg; }
  .pc-slides { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 97%); }
  .pc-slides::before { width: 240px; height: 240px; top: -60px; right: -70px; }
  .pc-slides::after { display: none; }
  .pc-slide-media::after {
    background: linear-gradient(178deg,
      rgba(20, 20, 20, .55) 0%,
      rgba(20, 20, 20, .9) 46%,
      rgba(20, 20, 20, .98) 78%);
  }
  .pc-slide-body { min-height: 0; padding-top: clamp(150px, 40vw, 230px); }
  .pc-slide-nav { display: none; }
  .pc-slide-dots { bottom: 26px; }
  .pc-promo { grid-template-columns: auto 1fr; }
  .pc-promo > a { grid-column: 1 / -1; }
  .pc-brand-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .pc-brand-card { padding: 18px 12px; }
  .pc-brand-logo, .pc-brand-initial { width: 48px; height: 48px; font-size: 21px; }
  .pc-price-grid { grid-template-columns: 1fr; }
  .pc-header-actions .pc-btn-admin { display: none; }
  .pc-header-inner { min-height: 66px; }
}


/* ============================================================
   PATCH_PUBLIC_BRAND_THEME_FINAL_V1
   Halaman pelanggan:
   - warna identitas masing-masing merek
   - perbaikan tombol TUTUP popup
   ============================================================ */


/* ============================================================
   KARTU MEREK
   ============================================================ */

.pc-brand-card.pc-brand-themed {
  --pc-brand-color: var(--pc-primary);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  border-color:
    color-mix(
      in srgb,
      var(--pc-brand-color) 45%,
      var(--pc-line)
    );

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--pc-brand-color) 7%,
        var(--pc-surface)
      ) 0%,
      var(--pc-surface) 70%
    );

  box-shadow:
    0 2px 8px rgba(20,20,20,.04);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


/* garis identitas merek */
.pc-brand-card.pc-brand-themed::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 4px;

  background:
    var(--pc-brand-color);

  pointer-events: none;
}


/* Nama merek */
.pc-brand-card.pc-brand-themed strong {
  color:
    var(--pc-brand-color);
}


/* jumlah tipe */
.pc-brand-card.pc-brand-themed small {
  color:
    color-mix(
      in srgb,
      var(--pc-brand-color) 60%,
      var(--pc-muted)
    );
}


/* fallback logo berupa huruf */
.pc-brand-card.pc-brand-themed
.pc-brand-initial {
  background:
    var(--pc-brand-color);

  color:
    #fff;

  box-shadow:
    0 6px 16px
    color-mix(
      in srgb,
      var(--pc-brand-color) 22%,
      transparent
    );
}


/* hover */
.pc-brand-card.pc-brand-themed:hover {
  transform:
    translateY(-4px);

  border-color:
    var(--pc-brand-color);

  background:
    color-mix(
      in srgb,
      var(--pc-brand-color) 12%,
      var(--pc-surface)
    );

  box-shadow:
    0 12px 28px
    color-mix(
      in srgb,
      var(--pc-brand-color) 20%,
      transparent
    );
}


/* ============================================================
   POPUP INFO & EDUKASI
   ============================================================ */

/*
 * Tombol bawah memakai class pc-modal-close juga.
 * CSS lama membuat semua pc-modal-close width:40px.
 * Karena itu tulisan TUTUP terpotong.
 */
.pc-modal-close.pc-modal-close-bottom {
  width:
    auto !important;

  min-width:
    116px !important;

  max-width:
    none !important;

  height:
    44px !important;

  min-height:
    44px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  flex:
    0 0 auto !important;

  padding:
    0 24px !important;

  overflow:
    visible !important;

  border:
    2px solid var(--pc-ink) !important;

  background:
    transparent !important;

  color:
    var(--pc-ink) !important;

  font-size:
    12.5px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  letter-spacing:
    .04em !important;

  text-transform:
    uppercase !important;

  text-align:
    center !important;

  white-space:
    nowrap !important;

  text-overflow:
    clip !important;

  cursor:
    pointer !important;
}


.pc-modal-close.pc-modal-close-bottom:hover {
  border-color:
    var(--pc-primary) !important;

  background:
    var(--pc-primary) !important;

  color:
    #fff !important;
}


/* ruang aman footer popup */
.pc-modal-bottom-actions {
  display:
    flex;

  justify-content:
    flex-end;

  align-items:
    center;

  width:
    100%;

  margin-top:
    28px;

  padding:
    4px 2px 4px 0;
}


/* Beri ruang bawah agar tidak menempel scrollbar */
.pc-modal-card {
  scrollbar-gutter:
    stable;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 560px) {

  .pc-modal-bottom-actions {
    padding:
      2px 0
      max(
        4px,
        env(safe-area-inset-bottom)
      );
  }

  .pc-modal-close.pc-modal-close-bottom {
    width:
      100% !important;

    min-width:
      0 !important;

    height:
      48px !important;
  }

}


/* ============================================================
   PATCH_PUBLIC_BRAND_LOGO_LARGE_V1
   Logo merek dibuat lebih besar, lebar, dan mudah dikenali.
   ============================================================ */

.pc-brand-card .pc-brand-logo {
  width: 118px !important;
  height: 60px !important;
  max-width: 100% !important;

  display: block !important;

  object-fit: contain !important;
  object-position: center !important;

  margin:
    0 auto 2px !important;

  transform-origin:
    center center;

  transition:
    transform .18s ease;
}


/*
 * Beberapa file logo memiliki ruang kosong di dalam gambar.
 * Pembesaran ringan membuat logo aktual lebih jelas
 * tanpa merusak proporsi.
 */
.pc-brand-card[data-brand-theme="oppo"] .pc-brand-logo {
  transform: scale(1.18);
}

.pc-brand-card[data-brand-theme="realme"] .pc-brand-logo {
  transform: scale(1.12);
}

.pc-brand-card[data-brand-theme="samsung"] .pc-brand-logo {
  transform: scale(1.10);
}

.pc-brand-card[data-brand-theme="vivo"] .pc-brand-logo {
  transform: scale(1.08);
}


/* hover tetap halus */
.pc-brand-card:hover .pc-brand-logo {
  filter:
    drop-shadow(
      0 3px 5px
      rgba(20, 20, 20, .08)
    );
}


/* Mobile */
@media (max-width: 760px) {

  .pc-brand-card .pc-brand-logo {
    width:
      98px !important;

    height:
      50px !important;
  }

}


/* HP kecil */
@media (max-width: 480px) {

  .pc-brand-card .pc-brand-logo {
    width:
      88px !important;

    height:
      46px !important;
  }

}

/* BRANCH_IMAGE_TYPE_V1 */

.pc-branch.pc-branch-logo figure {
  background: var(--pc-surface);
  padding: 10px;
  box-sizing: border-box;
}

.pc-branch.pc-branch-logo figure img {
  object-fit: contain !important;
  object-position: center !important;
}

.pc-branch.pc-branch-photo figure img {
  object-fit: cover !important;
  object-position: center !important;
}

/* BRANCH_LOGO_BOX_V2 */
.pc-branch.pc-branch-logo figure {
  background: #929292 !important;
  border: 2px solid #202020 !important;
  padding: 4px !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pc-branch.pc-branch-logo figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}