/*

Theme Name:   Octopus Storefront Child — PasarCirebon Portal

Theme URI:    https://pasarcirebon.com/

Description:  Lapisan portal untuk PasarCirebon: identitas Cirebon, 5 vertikal jelajah

              (Kuliner, Oleh-Oleh, Batik, Jasa, Sayuran & Buah), pencarian global, dan

              navigasi konten. Tidak mengedit tema induk octopus-storefront.

Author:       Raka

Template:     octopus-storefront

Version:      1.4.2

Requires at least: 7.0

Requires PHP: 8.3

Text Domain:  octopus-storefront-child

*/



/* ==========================================================================

   1. DESIGN TOKENS

   ========================================================================== */

:root {

  /* Brand — NAVY / ORANGE / CREAM (standar kerja Phase 3).

     Navy = warna struktural (teks, header, footer); orange HANYA untuk CTA,

     aksen kecil, dan highlight — jangan dipakai luas. Cream = latar hangat. */

  --pc-primary:        #1e3a5f;   /* navy — garis, gradien, ikon */

  --pc-primary-600:    #16304f;

  --pc-primary-700:    #122641;

  --pc-primary-050:    #eef3f8;   /* tint navy pucat */

  /* Permukaan berteks putih: #1e3a5f di atas putih = 11.4:1 (WCAG AAA).

     (Catatan audit lama soal #6366f1 sudah usang — palet kini navy/orange.) */

  --pc-primary-ink:    #1e3a5f;

  /* Orange CTA: #ea580c dengan teks putih = 3.5:1 — kurang untuk teks kecil.

     #c2410c (orange-700) memberi 4.9:1 dengan putih: aman untuk tombol. */

  --pc-accent:         #f97316;   /* orange dekoratif (garis, ikon, gradien) */

  --pc-accent-050:     #fff4ea;   /* tint cream-oranye */

  --pc-accent-ink:     #c2410c;   /* orange CTA — latar tombol dengan teks putih */

  --pc-success:        #10b981;   /* isian, garis, ikon */

  --pc-success-ink:    #047857;   /* teks hijau di latar terang: 5.48:1 */

  --pc-warning:        #f59e0b;

  --pc-danger:         #ef4444;



  /* Netral — dipandu navy */

  --pc-ink:            #122641;   /* navy paling gelap = judul */

  --pc-body:           #2d3f57;

  /* #64748b hanya 4.48:1 di atas --pc-bg (#f7f8fa) — gagal tipis.

     #5c6675 lolos di semua latar terang situs (5.31–5.81:1). */

  --pc-muted:          #5c6675;

  /* #94a3b8 hanya 2.56:1 di atas putih. #5f6b7c = 5.41:1. */

  --pc-faint:          #5f6b7c;

  /* Token bawaan tema induk ikut dinaikkan (lihat §20). */

  --muted:             #5c6675;

  --pc-line:           #e7e2d8;   /* garis hangat di atas cream */

  --pc-line-soft:      #f2efe7;

  --pc-surface:        #fffdf8;   /* cream putih */

  --pc-bg:             #faf7f0;   /* cream latar */



  /* Aksen per vertikal — nuansa Cirebon.

     Nilai di atas adalah warna dekoratif (garis, gradien, isian). Sebagai

     WARNA TEKS warnanya tidak semuanya lolos WCAG AA di atas putih:

     kuliner 3.56:1, jasa 4.10:1, sayur 3.77:1. Varian "-ink" di bawah

     dipakai untuk teks dan ikon; semuanya >= 4.5:1 baik di atas putih

     maupun di atas tint 12% yang dipakai .pc-vcard-ico. */

  --pc-v-kuliner:      #ea580c;

  --pc-v-oleholeh:     #db2777;

  --pc-v-batik:        #92400e;

  --pc-v-jasa:         #0284c7;

  --pc-v-sayur:        #059669;

  --pc-v-kuliner-ink:  #9a3412;   /* 7.31:1 di putih, 6.31:1 di tint */

  --pc-v-oleholeh-ink: #be185d;   /* 6.04:1 di putih, 5.05:1 di tint */

  --pc-v-batik-ink:    #92400e;   /* 7.09:1 di putih, 5.88:1 di tint */

  --pc-v-jasa-ink:     #0369a1;   /* 5.93:1 di putih, 5.09:1 di tint */

  --pc-v-sayur-ink:    #047857;   /* 5.48:1 di putih, 4.73:1 di tint */



  /* Bentuk & gerak */

  --pc-r-sm:           8px;

  --pc-r:              14px;

  --pc-r-lg:           22px;

  --pc-r-pill:         999px;

  --pc-max:            1160px;

  --pc-shadow-sm:      0 1px 2px rgba(15, 23, 42, .06);

  --pc-shadow:         0 1px 2px rgba(15, 23, 42, .06), 0 10px 28px -14px rgba(15, 23, 42, .22);

  --pc-shadow-lg:      0 2px 4px rgba(15, 23, 42, .05), 0 24px 48px -24px rgba(15, 23, 42, .3);

  --pc-ease:           cubic-bezier(.22, .61, .36, 1);

  --pc-speed:          .22s;

}



/* ==========================================================================

   2. DASAR

   ========================================================================== */

.pc-wrap {

  width: min(var(--pc-max), calc(100% - 32px));

  margin-inline: auto;

}



.pc-sr {

  position: absolute;

  width: 1px; height: 1px;

  padding: 0; margin: -1px;

  overflow: hidden;

  clip-path: inset(50%);

  white-space: nowrap;

}



.pc-skip {

  position: absolute;

  left: 12px; top: -60px;

  z-index: 999;

  padding: 10px 16px;

  background: var(--pc-primary-ink);

  color: #fff;

  border-radius: var(--pc-r-sm);

  font-weight: 600;

  transition: top var(--pc-speed) var(--pc-ease);

}

.pc-skip:focus { top: 12px; }



/* ==========================================================================

   3. HEADER PORTAL

   ========================================================================== */

.pc-header {

  position: sticky;

  top: 0;

  z-index: 60;

  background: rgba(255, 255, 255, .92);

  backdrop-filter: saturate(180%) blur(14px);

  border-bottom: 1px solid var(--pc-line);

}



.pc-header-bar {

  display: flex;

  align-items: center;

  gap: 14px;

  min-height: 64px;

}



.pc-brand {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  font-weight: 800;

  letter-spacing: -.02em;

  color: var(--pc-ink);

  flex: 0 0 auto;

}

.pc-brand img { display: block; height: 30px; width: auto; }

.pc-brand-mark {

  display: grid;

  place-items: center;

  width: 34px; height: 34px;

  border-radius: 11px;

  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent));

  color: #fff;

  font-size: 17px;

  box-shadow: var(--pc-shadow-sm);

}

.pc-brand-name { font-size: 1.06rem; }

.pc-brand-tag {

  display: block;

  font-size: .68rem;

  font-weight: 600;

  letter-spacing: .09em;

  text-transform: uppercase;

  color: var(--pc-muted);

  margin-top: -2px;

}



.pc-nav {

  display: flex;

  align-items: center;

  gap: 2px;

  margin-inline-start: 8px;

  flex: 1 1 auto;

  min-width: 0;

}

.pc-nav a {

  display: inline-block;

  padding: 8px 12px;

  border-radius: var(--pc-r-pill);

  font-size: .9rem;

  font-weight: 600;

  color: var(--pc-body);

  text-decoration: none;

  white-space: nowrap;

  transition: background var(--pc-speed) var(--pc-ease), color var(--pc-speed) var(--pc-ease);

}

.pc-nav a:hover { background: var(--pc-line-soft); color: var(--pc-ink); }

.pc-nav a[aria-current="page"] { color: var(--pc-primary-700); background: var(--pc-primary-050); }



/* Dropdown "Jelajah" tanpa JavaScript */

.pc-drop { position: relative; }

.pc-drop > summary {

  list-style: none;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 8px 12px;

  border-radius: var(--pc-r-pill);

  font-size: .9rem;

  font-weight: 600;

  color: var(--pc-body);

  white-space: nowrap;

  transition: background var(--pc-speed) var(--pc-ease);

}

.pc-drop > summary::-webkit-details-marker { display: none; }

.pc-drop > summary::after {

  content: "";

  width: 7px; height: 7px;

  border-right: 2px solid currentColor;

  border-bottom: 2px solid currentColor;

  transform: rotate(45deg) translateY(-2px);

  transition: transform var(--pc-speed) var(--pc-ease);

}

.pc-drop[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.pc-drop > summary:hover { background: var(--pc-line-soft); }



.pc-drop-panel {

  position: absolute;

  top: calc(100% + 8px);

  left: 0;

  min-width: 268px;

  padding: 8px;

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r);

  box-shadow: var(--pc-shadow-lg);

  display: grid;

  gap: 2px;

}

.pc-drop-panel a {

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 9px 11px;

  border-radius: var(--pc-r-sm);

  text-decoration: none;

  color: var(--pc-body);

  font-weight: 600;

  font-size: .9rem;

}

.pc-drop-panel a:hover { background: var(--pc-line-soft); color: var(--pc-ink); }

.pc-drop-ico {

  display: grid;

  place-items: center;

  width: 30px; height: 30px;

  border-radius: 9px;

  font-size: 15px;

  background: var(--pc-line-soft);

  flex: 0 0 auto;

}

.pc-drop-panel small {

  display: block;

  font-weight: 500;

  font-size: .74rem;

  color: var(--pc-muted);

}



/* Pencarian header */

.pc-search { position: relative; flex: 0 1 260px; }

.pc-search input {

  width: 100%;

  padding: 9px 14px 9px 38px;

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r-pill);

  background: var(--pc-bg);

  font: inherit;

  font-size: .88rem;

  color: var(--pc-ink);

  transition: border-color var(--pc-speed) var(--pc-ease), background var(--pc-speed) var(--pc-ease);

}

.pc-search input:focus {

  outline: none;

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

  background: var(--pc-surface);

  box-shadow: 0 0 0 3px rgba(30, 58, 95, .18);

}

.pc-search button {

  position: absolute;

  left: 6px; top: 50%;

  transform: translateY(-50%);

  width: 28px; height: 28px;

  display: grid;

  place-items: center;

  border: 0;

  background: none;

  color: var(--pc-muted);

  cursor: pointer;

  border-radius: 50%;

}

.pc-search button:hover { color: var(--pc-primary); }



.pc-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.pc-icon-btn {

  display: grid;

  place-items: center;

  width: 38px; height: 38px;

  border-radius: 50%;

  border: 1px solid var(--pc-line);

  background: var(--pc-surface);

  color: var(--pc-body);

  text-decoration: none;

  position: relative;

  transition: border-color var(--pc-speed) var(--pc-ease), color var(--pc-speed) var(--pc-ease);

}

.pc-icon-btn:hover { border-color: var(--pc-primary); color: var(--pc-primary); }

.pc-icon-btn svg { width: 18px; height: 18px; }

.pc-cart-count {

  position: absolute;

  top: -4px; right: -4px;

  min-width: 18px; height: 18px;

  padding: 0 5px;

  border-radius: var(--pc-r-pill);

  background: var(--pc-primary-ink);

  color: #fff;

  font-size: .68rem;

  font-weight: 700;

  line-height: 18px;

  text-align: center;

}

.pc-cta {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 9px 16px;

  border-radius: var(--pc-r-pill);

  background: var(--pc-primary-ink);

  color: #fff;

  font-size: .87rem;

  font-weight: 700;

  text-decoration: none;

  transition: background var(--pc-speed) var(--pc-ease);

}

.pc-cta:hover { background: var(--pc-primary-600); }



/* Burger + drawer (mobile) */

.pc-burger-menu { display: none; position: relative; }

.pc-burger-menu[open] { z-index: 70; }

.pc-burger {

  list-style: none;

  cursor: pointer;

  width: 38px; height: 38px;

  display: grid;

  place-items: center;

  border-radius: var(--pc-r-sm);

  border: 1px solid var(--pc-line);

  background: var(--pc-surface);

}

.pc-burger::-webkit-details-marker { display: none; }

.pc-burger span {

  display: block;

  width: 16px; height: 2px;

  background: var(--pc-ink);

  border-radius: 2px;

  box-shadow: 0 -5px 0 var(--pc-ink), 0 5px 0 var(--pc-ink);

}

.pc-mobile-nav {

  position: absolute;

  top: calc(100% + 10px);

  right: 0;

  width: min(330px, calc(100vw - 32px));

  padding: 8px;

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r);

  box-shadow: var(--pc-shadow-lg);

  display: grid;

  gap: 2px;

  max-height: calc(100vh - 110px);

  overflow-y: auto;

}

.pc-mobile-nav a {

  padding: 11px 12px;

  border-radius: var(--pc-r-sm);

  text-decoration: none;

  color: var(--pc-body);

  font-weight: 600;

  font-size: .92rem;

}

.pc-mobile-nav a:hover { background: var(--pc-line-soft); color: var(--pc-ink); }

.pc-mobile-search { padding: 8px 4px 4px; }

.pc-mobile-search input {

  width: 100%;

  padding: 10px 14px;

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r-pill);

  background: var(--pc-bg);

  font: inherit;

  font-size: .9rem;

  color: var(--pc-ink);

}

.pc-mobile-search input:focus {

  outline: none;

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

  box-shadow: 0 0 0 3px rgba(30, 58, 95, .18);

}



/* Menu WP (kalau nanti dipakai) */

.pc-nav ul.pc-nav-list {

  display: flex;

  align-items: center;

  gap: 2px;

  margin: 0;

  padding: 0;

  list-style: none;

}



/* ==========================================================================

   4. HERO PORTAL

   ========================================================================== */

.pc-hero {

  position: relative;

  overflow: hidden;

  padding: 62px 0 54px;

  background:

    radial-gradient(1100px 460px at 12% -10%, rgba(30, 58, 95, .14), transparent 62%),

    radial-gradient(820px 380px at 88% 4%, rgba(249, 115, 22, .13), transparent 60%),

    var(--pc-bg);

  border-bottom: 1px solid var(--pc-line);

}

.pc-hero-inner { max-width: 720px; }

.pc-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 6px 13px;

  border-radius: var(--pc-r-pill);

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  font-size: .76rem;

  font-weight: 700;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: var(--pc-primary-700);

  box-shadow: var(--pc-shadow-sm);

}

.pc-hero h1 {

  margin: 18px 0 14px;

  font-size: clamp(2rem, 5.2vw, 3.15rem);

  line-height: 1.08;

  letter-spacing: -.035em;

  font-weight: 800;

  color: var(--pc-ink);

}

.pc-hero h1 em {

  font-style: normal;

  background: linear-gradient(100deg, var(--pc-primary), var(--pc-accent));

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}

.pc-hero p.pc-lede {

  margin: 0 0 26px;

  font-size: 1.06rem;

  line-height: 1.65;

  color: var(--pc-body);

  max-width: 60ch;

}

.pc-hero-cta { display: flex; flex-wrap: wrap; gap: 11px; }



.pc-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 12px 22px;

  border-radius: var(--pc-r-pill);

  font-size: .94rem;

  font-weight: 700;

  text-decoration: none;

  border: 1px solid transparent;

  cursor: pointer;

  transition: transform var(--pc-speed) var(--pc-ease), background var(--pc-speed) var(--pc-ease),

              border-color var(--pc-speed) var(--pc-ease), color var(--pc-speed) var(--pc-ease);

}

.pc-btn:hover { transform: translateY(-1px); }

.pc-btn-primary { background: var(--pc-accent-ink); color: #fff; }

.pc-btn-primary:hover { background: var(--pc-primary-700); }

.pc-btn-ghost {

  background: var(--pc-surface);

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

  color: var(--pc-ink);

}

.pc-btn-ghost:hover { border-color: var(--pc-primary); color: var(--pc-primary-700); }



/* ==========================================================================

   5. SEKSI UMUM

   ========================================================================== */

.pc-section { padding: 54px 0; }

.pc-section-alt { background: var(--pc-surface); border-block: 1px solid var(--pc-line); }



.pc-head {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 18px;

  margin-bottom: 26px;

  flex-wrap: wrap;

}

.pc-head h2 {

  margin: 0;

  font-size: clamp(1.32rem, 3vw, 1.75rem);

  letter-spacing: -.025em;

  font-weight: 800;

  color: var(--pc-ink);

}

.pc-head p { margin: 6px 0 0; color: var(--pc-muted); font-size: .93rem; max-width: 62ch; }

.pc-head a.pc-more {

  font-size: .88rem;

  font-weight: 700;

  color: var(--pc-primary-700);

  text-decoration: none;

  white-space: nowrap;

}

.pc-head a.pc-more:hover { text-decoration: underline; }



/* ==========================================================================

   6. KARTU VERTIKAL (5 pintu jelajah)

   ========================================================================== */

.pc-verticals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 480px) { .pc-verticals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .pc-verticals { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .pc-verticals { grid-template-columns: repeat(5, 1fr); } }

.pc-vcard {

  --v: var(--pc-primary);

  position: relative;

  display: flex;

  flex-direction: column;

  gap: 9px;

  padding: 22px 20px 20px;

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r-lg);

  text-decoration: none;

  color: inherit;

  overflow: hidden;

  transition: transform var(--pc-speed) var(--pc-ease), box-shadow var(--pc-speed) var(--pc-ease),

              border-color var(--pc-speed) var(--pc-ease);

}

.pc-vcard::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 4px;

  background: var(--v);

}

.pc-vcard::after {

  content: "";

  position: absolute;

  inset: auto -40px -60px auto;

  width: 150px; height: 150px;

  border-radius: 50%;

  background: var(--v);

  opacity: .07;

  transition: opacity var(--pc-speed) var(--pc-ease), transform var(--pc-speed) var(--pc-ease);

}

.pc-vcard:hover {

  transform: translateY(-4px);

  box-shadow: var(--pc-shadow-lg);

  border-color: color-mix(in srgb, var(--v) 42%, var(--pc-line));

}

.pc-vcard:hover::after { opacity: .13; transform: scale(1.12); }

.pc-vcard-ico {

  display: grid;

  place-items: center;

  width: 44px; height: 44px;

  border-radius: 13px;

  background: color-mix(in srgb, var(--v) 12%, #fff);

  color: var(--v-ink);

  font-size: 21px;

}

.pc-vcard h3 {

  margin: 2px 0 0;

  font-size: 1.06rem;

  font-weight: 800;

  letter-spacing: -.02em;

  color: var(--pc-ink);

}

.pc-vcard p {

  margin: 0;

  font-size: .86rem;

  line-height: 1.55;

  color: var(--pc-muted);

  flex: 1 1 auto;

}

.pc-vcard-meta {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: .78rem;

  font-weight: 700;

  color: var(--v-ink);

}

.pc-vcard-meta::after {

  content: "→";

  transition: transform var(--pc-speed) var(--pc-ease);

}

.pc-vcard:hover .pc-vcard-meta::after { transform: translateX(3px); }



/* Warna per vertikal */

.pc-v-kuliner   { --v: var(--pc-v-kuliner); }

.pc-v-oleholeh  { --v: var(--pc-v-oleholeh); }

.pc-v-batik     { --v: var(--pc-v-batik); }

.pc-v-jasa      { --v: var(--pc-v-jasa); }

.pc-v-sayur     { --v: var(--pc-v-sayur); }



/* ==========================================================================

   7. KARTU ARTIKEL

   ========================================================================== */

.pc-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.pc-post {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-r-lg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform var(--pc-speed) var(--pc-ease), box-shadow var(--pc-speed) var(--pc-ease);
}

.pc-post:hover { transform: translateY(-3px); box-shadow: var(--pc-shadow); }

.pc-post-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--pc-line-soft);
  overflow: hidden;
  margin: 0; /* ensure no margin */
}

.pc-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pc-post-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

.pc-post-tag {

  align-self: flex-start;

  padding: 3px 10px;

  border-radius: var(--pc-r-pill);

  background: var(--pc-primary-050);

  color: var(--pc-primary-700);

  font-size: .71rem;

  font-weight: 700;

  letter-spacing: .03em;

  text-transform: uppercase;

  text-decoration: none;

}

.pc-post h3 {

  margin: 0;

  font-size: 1.02rem;

  line-height: 1.35;

  letter-spacing: -.015em;

  font-weight: 700;

}

.pc-post h3 a { color: var(--pc-ink); text-decoration: none; }

.pc-post h3 a:hover { color: var(--pc-primary-700); }

.pc-post p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.58;
  color: #475569;
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-post-meta {

  font-size: .75rem;

  color: var(--pc-faint);

  display: flex;

  gap: 8px;

  align-items: center;

}



/* ==========================================================================

   8. PENCARIAN GLOBAL

   ========================================================================== */

.pc-search-hero {

  padding: 44px 0 30px;

  background: var(--pc-bg);

  border-bottom: 1px solid var(--pc-line);

}

.pc-search-form {

  display: flex;

  gap: 9px;

  max-width: 660px;

  margin-top: 18px;

}

.pc-search-form input[type="search"] {

  flex: 1 1 auto;

  min-width: 0;

  padding: 13px 18px;

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r-pill);

  background: var(--pc-surface);

  font: inherit;

  font-size: .97rem;

  color: var(--pc-ink);

}

.pc-search-form input[type="search"]:focus {

  outline: none;

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

  box-shadow: 0 0 0 3px rgba(30, 58, 95, .18);

}

.pc-search-form button {

  flex: 0 0 auto;

  padding: 13px 26px;

  border: 0;

  border-radius: var(--pc-r-pill);

  background: var(--pc-primary-ink);

  color: #fff;

  font: inherit;

  font-weight: 700;

  cursor: pointer;

  transition: background var(--pc-speed) var(--pc-ease);

}

.pc-search-form button:hover { background: var(--pc-primary-600); }



.pc-search-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 20px;

}

.pc-search-tab {

  padding: 7px 15px;

  border-radius: var(--pc-r-pill);

  border: 1px solid var(--pc-line);

  background: var(--pc-surface);

  font-size: .85rem;

  font-weight: 600;

  color: var(--pc-body);

  text-decoration: none;

}

.pc-search-tab[aria-current="true"] {

  background: var(--pc-primary-ink);

  border-color: var(--pc-primary-ink);

  color: #fff;

}

/* opacity .85 di atas navy #1e3a5f dengan putih = 10.2:1 — aman. */

.pc-search-tab span { opacity: .85; font-weight: 500; }



.pc-empty {

  padding: 40px 26px;

  text-align: center;

  background: var(--pc-surface);

  border: 1px dashed var(--pc-line);

  border-radius: var(--pc-r-lg);

  color: var(--pc-muted);

}

.pc-empty strong { display: block; color: var(--pc-ink); margin-bottom: 6px; font-size: 1.02rem; }

.pc-empty-note { display: block; margin-top: 10px; font-size: .84rem; color: var(--pc-faint); }



/* ==========================================================================

   9. BREADCRUMB

   ========================================================================== */

.pc-crumbs {

  padding: 14px 0;

  font-size: .82rem;

  color: var(--pc-muted);

  border-bottom: 1px solid var(--pc-line-soft);

}

.pc-crumbs ol {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  margin: 0;

  padding: 0;

  list-style: none;

}

.pc-crumbs li { display: flex; align-items: center; gap: 8px; }

.pc-crumbs li + li::before { content: "/"; color: var(--pc-faint); }

.pc-crumbs a { color: var(--pc-muted); text-decoration: none; }

.pc-crumbs a:hover { color: var(--pc-primary-700); text-decoration: underline; }

.pc-crumbs [aria-current="page"] { color: var(--pc-ink); font-weight: 600; }



/* ==========================================================================

   10. HALAMAN VERTIKAL

   ========================================================================== */

.pc-vhead {

  --v: var(--pc-primary);

  position: relative;

  padding: 50px 0 42px;

  background:

    radial-gradient(760px 320px at 8% -20%, color-mix(in srgb, var(--v) 20%, transparent), transparent 66%),

    var(--pc-bg);

  border-bottom: 1px solid var(--pc-line);

}

.pc-vhead h1 {

  margin: 14px 0 12px;

  font-size: clamp(1.75rem, 4.4vw, 2.6rem);

  letter-spacing: -.03em;

  font-weight: 800;

  color: var(--pc-ink);

}

.pc-vhead p { margin: 0; max-width: 66ch; font-size: 1.02rem; line-height: 1.66; color: var(--pc-body); }

.pc-vhead .pc-eyebrow { color: var(--v-ink); border-color: color-mix(in srgb, var(--v) 30%, var(--pc-line)); }

.pc-vhead-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }



.pc-prose {

  font-size: 1rem;

  line-height: 1.75;

  color: var(--pc-body);

}

.pc-prose > * + * { margin-top: 1.05em; }

.pc-prose h2 { margin-top: 1.9em; font-size: 1.34rem; letter-spacing: -.02em; color: var(--pc-ink); }

.pc-prose h3 { margin-top: 1.6em; font-size: 1.1rem; color: var(--pc-ink); }

.pc-prose ul, .pc-prose ol { padding-inline-start: 1.3em; }

.pc-prose li + li { margin-top: .45em; }

.pc-prose a { color: var(--pc-primary-700); }

.pc-prose blockquote {

  margin-inline: 0;

  padding: 14px 20px;

  border-inline-start: 3px solid var(--pc-primary);

  background: var(--pc-primary-050);

  border-radius: 0 var(--pc-r-sm) var(--pc-r-sm) 0;

  color: var(--pc-ink);

}



/* ==========================================================================

   11. 404

   ========================================================================== */

.pc-404 { padding: 76px 0; text-align: center; }

.pc-404-code {

  font-size: clamp(3.4rem, 11vw, 6rem);

  font-weight: 800;

  letter-spacing: -.05em;

  line-height: 1;

  background: linear-gradient(100deg, var(--pc-primary), var(--pc-accent));

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}

.pc-404 h1 { margin: 16px 0 10px; font-size: 1.5rem; color: var(--pc-ink); }

.pc-404 p { color: var(--pc-muted); max-width: 52ch; margin-inline: auto; }

.pc-404-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }



/* ==========================================================================

   12. FOOTER PORTAL

   ========================================================================== */

.pc-footer {

  margin-top: 0;

  padding: 52px 0 26px;

  background: var(--pc-ink);

  color: #cbd5e1;

}

.pc-footer a { color: #cbd5e1; text-decoration: none; }

.pc-footer a:hover { color: #fff; text-decoration: underline; }

.pc-footer-grid {

  display: grid;

  grid-template-columns: 1.5fr repeat(4, 1fr);

  gap: 30px;

}

@media (max-width: 1080px) {

  .pc-footer-grid { grid-template-columns: 1fr 1fr 1fr; }

  .pc-footer-grid > div:first-child { grid-column: 1 / -1; }

}

.pc-footer h2 {

  margin: 0 0 14px;

  font-size: .78rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: #fff;

  font-weight: 700;

}

.pc-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: .89rem; }

.pc-footer-brand {

  display: flex;

  align-items: center;

  gap: 10px;

  font-weight: 800;

  color: #fff;

  font-size: 1.06rem;

  margin-bottom: 12px;

}

.pc-footer-brand .pc-brand-mark { width: 32px; height: 32px; border-radius: 10px; font-size: 16px; }

.pc-footer-tag { font-size: .89rem; line-height: 1.65; color: #94a3b8; max-width: 38ch; margin: 0; }

.pc-footer-bottom {

  margin-top: 38px;

  padding-top: 20px;

  border-top: 1px solid rgba(148, 163, 184, .22);

  display: flex;

  justify-content: space-between;

  gap: 14px;

  flex-wrap: wrap;

  font-size: .8rem;

  color: #94a3b8;

}



/* ==========================================================================

   13. RESPONSIF

   ========================================================================== */

@media (max-width: 1024px) {

  .pc-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }

}



@media (max-width: 900px) {

  .pc-nav, .pc-search { display: none; }

  .pc-burger-menu { display: block; }

  .pc-header-bar { justify-content: space-between; }

  .pc-brand { flex: 1 1 auto; }

  .pc-cta-wa { display: none; }

  .pc-hero { padding: 44px 0 40px; }

  .pc-section { padding: 42px 0; }

}



@media (max-width: 560px) {

  .pc-footer-grid { grid-template-columns: 1fr; }

  .pc-hero-cta .pc-btn { flex: 1 1 100%; justify-content: center; }

  .pc-search-form { flex-direction: column; }

  .pc-search-form button { width: 100%; }

}



@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: .001ms !important;

    transition-duration: .001ms !important;

    scroll-behavior: auto !important;

  }

}



/* Fokus terlihat — aksesibilitas */

.pc-header a:focus-visible,

.pc-footer a:focus-visible,

.pc-btn:focus-visible,

.pc-vcard:focus-visible,

.pc-post h3 a:focus-visible,

.pc-facet-link:focus-visible,

.pc-suggest a:focus-visible,

.pc-faq summary:focus-visible,

.pc-drop > summary:focus-visible {

  outline: 2px solid var(--pc-primary);

  outline-offset: 2px;

  border-radius: var(--pc-r-sm);

}



/* ==========================================================================

   14. HUB TOKO (/toko/)

   ========================================================================== */

.pc-hero-toko {

  background:

    radial-gradient(1000px 420px at 10% -12%, rgba(249, 115, 22, .15), transparent 62%),

    radial-gradient(760px 360px at 92% 0%, rgba(30, 58, 95, .15), transparent 60%),

    var(--pc-bg);

}

.pc-hero-compact { padding: 48px 0 40px; }

.pc-hero-compact h1 { font-size: clamp(1.7rem, 4vw, 2.45rem); }



.pc-trust {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin: 26px 0 0;

  padding: 0;

  list-style: none;

}

.pc-trust li {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 8px 14px;

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r-pill);

  font-size: .85rem;

  font-weight: 600;

  color: var(--pc-body);

  box-shadow: var(--pc-shadow-sm);

}



.pc-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) { .pc-products { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 900px) { .pc-products { grid-template-columns: repeat(4, 1fr); gap: 18px; } }



.pc-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) { .pc-cats { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 900px) { .pc-cats { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.pc-cat {

  position: relative;

  display: flex;

  flex-direction: column;

  gap: 4px;

  padding: 22px 20px 20px;

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r);

  color: var(--pc-ink);

  text-decoration: none;

  overflow: hidden;

  transition: transform var(--pc-speed) var(--pc-ease), box-shadow var(--pc-speed) var(--pc-ease),

              border-color var(--pc-speed) var(--pc-ease);

}

.pc-cat::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 3px;

  background: linear-gradient(90deg, var(--pc-primary), var(--pc-accent));

}

.pc-cat:hover {

  transform: translateY(-3px);

  box-shadow: var(--pc-shadow);

  border-color: color-mix(in srgb, var(--pc-primary) 35%, var(--pc-line));

}

.pc-cat-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em; }

.pc-cat-count { font-size: .84rem; color: var(--pc-muted); }

.pc-cat-go {

  position: absolute;

  right: 18px;

  bottom: 20px;

  color: var(--pc-primary);

  transition: transform var(--pc-speed) var(--pc-ease);

}

.pc-cat:hover .pc-cat-go { transform: translateX(3px); }



.pc-toko-intro { max-width: 76ch; }



.pc-toko-grid {

  display: grid;

  grid-template-columns: 1.5fr 1fr;

  gap: 40px;

  align-items: start;

}



.pc-steps {

  margin: 0;

  padding: 0;

  list-style: none;

  display: grid;

  gap: 14px;

}

.pc-steps li {

  display: flex;

  gap: 14px;

  align-items: flex-start;

  padding: 18px 20px;

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r);

}

.pc-step-num {

  flex: 0 0 auto;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: var(--pc-primary-050);

  color: var(--pc-primary-700);

  display: grid;

  place-items: center;

  font-weight: 800;

  font-size: .9rem;

}

.pc-steps strong { display: block; color: var(--pc-ink); margin-bottom: 4px; }

.pc-step-text { display: block; font-size: .9rem; line-height: 1.6; color: var(--pc-muted); }



.pc-info {

  position: sticky;

  top: 20px;

  padding: 26px;

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r-lg);

  box-shadow: var(--pc-shadow-sm);

}

.pc-info h2 {

  margin: 0 0 16px;

  font-size: 1.16rem;

  letter-spacing: -.02em;

  color: var(--pc-ink);

}

.pc-info dl { margin: 0 0 20px; display: grid; gap: 13px; }

.pc-info dt {

  font-size: .72rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--pc-faint);

  font-weight: 800;

}

.pc-info dd { margin: 3px 0 0; font-size: .94rem; color: var(--pc-body); line-height: 1.55; }

.pc-info dd a { color: var(--pc-primary-700); }

.pc-info .pc-btn { width: 100%; justify-content: center; }



.pc-faq { display: grid; gap: 10px; max-width: 78ch; }

.pc-faq details {

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r);

  overflow: hidden;

}

.pc-faq summary {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 16px 20px;

  cursor: pointer;

  font-weight: 700;

  color: var(--pc-ink);

  list-style: none;

}

.pc-faq summary::-webkit-details-marker { display: none; }

.pc-faq summary::after {

  content: "+";

  font-size: 1.25rem;

  line-height: 1;

  color: var(--pc-primary);

  font-weight: 700;

}

.pc-faq details[open] summary::after { content: "–"; }

.pc-faq details[open] summary { border-bottom: 1px solid var(--pc-line-soft); }

.pc-faq p {

  margin: 0;

  padding: 14px 20px 18px;

  font-size: .93rem;

  line-height: 1.68;

  color: var(--pc-muted);

}



/* ==========================================================================

   15. PENCARIAN LANJUTAN — facet, urutan, saran

   ========================================================================== */

.pc-search-title {

  margin: 14px 0 0;

  font-size: clamp(1.6rem, 4vw, 2.2rem);

  letter-spacing: -.03em;

  color: var(--pc-ink);

}

.pc-search-sub { margin: 8px 0 0; color: var(--pc-muted); }



.pc-search-layout {

  display: grid;

  grid-template-columns: 248px 1fr;

  gap: 34px;

  align-items: start;

}

.pc-search-layout-wide { grid-template-columns: 1fr; }

.pc-search-main { min-width: 0; }



.pc-facets { position: sticky; top: 20px; }

.pc-facets > summary { display: none; }

.pc-facet { margin-bottom: 22px; }

.pc-facet h2 {

  margin: 0 0 10px;

  font-size: .72rem;

  letter-spacing: .09em;

  text-transform: uppercase;

  color: var(--pc-faint);

  font-weight: 800;

}

.pc-facet-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }

.pc-facet-link {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: 8px 11px;

  border: 1px solid transparent;

  border-radius: var(--pc-r-sm);

  font-size: .88rem;

  color: var(--pc-body);

  text-decoration: none;

  transition: background var(--pc-speed) var(--pc-ease), color var(--pc-speed) var(--pc-ease);

}

.pc-facet-link:hover { background: var(--pc-line-soft); color: var(--pc-ink); }

.pc-facet-link.is-on {

  background: var(--pc-primary-050);

  border-color: color-mix(in srgb, var(--pc-primary) 30%, var(--pc-line));

  color: var(--pc-primary-700);

  font-weight: 700;

}

/* Sebelumnya opacity .45 — teks jadi 2.31:1 dan gagal AA. Facet tanpa

   hasil dibedakan lewat warna, bukan lewat transparansi. */

.pc-facet-link.is-zero,

.pc-facet-link.is-zero span { opacity: 1; color: var(--pc-muted); }

.pc-facet-n { font-size: .76rem; color: var(--pc-faint); font-variant-numeric: tabular-nums; }

.pc-facet-reset {

  display: inline-block;

  margin-top: 4px;

  font-size: .85rem;

  font-weight: 700;

  color: var(--pc-primary-700);

}



.pc-results-bar {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  margin-bottom: 22px;

  padding-bottom: 16px;

  border-bottom: 1px solid var(--pc-line);

}

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

.pc-results-count strong { color: var(--pc-ink); }

.pc-sort { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--pc-muted); }

.pc-sort select {

  padding: 9px 13px;

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r-pill);

  background: var(--pc-surface);

  font: inherit;

  font-size: .86rem;

  color: var(--pc-ink);

  cursor: pointer;

}

.pc-sort button {

  padding: 9px 16px;

  border: 0;

  border-radius: var(--pc-r-pill);

  background: var(--pc-primary-ink);

  color: #fff;

  font: inherit;

  font-weight: 700;

  cursor: pointer;

}



.pc-search-product { display: flex; flex-direction: column; min-width: 0; }

.pc-search-product > .product-card { flex: 1 1 auto; }



.pc-suggest {

  margin-top: 26px;

  padding: 22px 24px;

  background: var(--pc-primary-050);

  border: 1px solid color-mix(in srgb, var(--pc-primary) 22%, var(--pc-line));

  border-radius: var(--pc-r-lg);

}

.pc-suggest h2 { margin: 0 0 12px; font-size: 1rem; letter-spacing: -.01em; color: var(--pc-ink); }

.pc-suggest ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 9px; }

.pc-suggest a {

  display: inline-block;

  padding: 8px 15px;

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r-pill);

  font-size: .87rem;

  font-weight: 600;

  color: var(--pc-primary-700);

  text-decoration: none;

}

.pc-suggest a:hover { border-color: var(--pc-primary); }



.pc-pagination {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 7px;

  margin-top: 38px;

}

.pc-pagination .page-numbers {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 40px;

  height: 40px;

  padding: 0 13px;

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r-pill);

  color: var(--pc-body);

  font-size: .88rem;

  font-weight: 600;

  text-decoration: none;

}

.pc-pagination .page-numbers:hover { border-color: var(--pc-primary); color: var(--pc-primary-700); }

.pc-pagination .page-numbers.current { background: var(--pc-primary-ink); border-color: var(--pc-primary-ink); color: #fff; }

.pc-pagination .dots { background: transparent; border-color: transparent; }



/* ==========================================================================

   16. RESPONSIF — tambahan hub toko & pencarian

   ========================================================================== */

@media (max-width: 1024px) {

  .pc-toko-grid { grid-template-columns: 1fr; gap: 30px; }

  .pc-info { position: static; }

}



@media (max-width: 900px) {

  .pc-search-layout { grid-template-columns: 1fr; gap: 20px; }

  .pc-facets {

    position: static;

    padding: 4px 16px 16px;

    background: var(--pc-surface);

    border: 1px solid var(--pc-line);

    border-radius: var(--pc-r);

  }

  .pc-facets > summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 0;

    cursor: pointer;

    font-weight: 700;

    color: var(--pc-ink);

    list-style: none;

  }

  .pc-facets > summary::-webkit-details-marker { display: none; }

  .pc-facets > summary::after {

    content: "▾";

    color: var(--pc-primary);

    transition: transform var(--pc-speed) var(--pc-ease);

  }

  .pc-facets[open] > summary::after { transform: rotate(180deg); }

}



@media (max-width: 560px) {

  .pc-results-bar { flex-direction: column; align-items: flex-start; }

  .pc-sort { width: 100%; }

  .pc-sort select { flex: 1 1 auto; }

}



/* ==========================================================================

   17. HALAMAN HARGA, PANDUAN & KATALOG

   ========================================================================== */



/* --- Blok fakta ringkas: dipakai di /harga/ dan /product/ --- */

.pc-section-tight { padding: 34px 0; }



.pc-facts {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));

  gap: 1px;

  margin: 0;

  background: var(--pc-line);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r);

  overflow: hidden;

}

.pc-facts > div {

  background: var(--pc-surface);

  padding: 16px 18px;

  display: flex;

  flex-direction: column;

  gap: 5px;

}

.pc-facts dt {

  font-size: .74rem;

  font-weight: 700;

  letter-spacing: .07em;

  text-transform: uppercase;

  color: var(--pc-faint);

}

.pc-facts dd {

  margin: 0;

  font-size: 1.02rem;

  font-weight: 700;

  letter-spacing: -.015em;

  color: var(--pc-ink);

  font-variant-numeric: tabular-nums;

}



/* --- Chip kategori katalog --- */

.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pc-chip {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 8px 14px;

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r-pill);

  background: var(--pc-surface);

  color: var(--pc-body);

  font-size: .88rem;

  font-weight: 600;

  text-decoration: none;

  transition: border-color var(--pc-speed) var(--pc-ease),

              color var(--pc-speed) var(--pc-ease),

              background var(--pc-speed) var(--pc-ease);

}

.pc-chip:hover { border-color: var(--pc-primary); color: var(--pc-primary-700); }

.pc-chip.is-active {

  background: var(--pc-primary-ink);

  border-color: var(--pc-primary-ink);

  color: #fff;

}

.pc-chip-n {

  font-size: .74rem;

  font-weight: 700;

  padding: 1px 7px;

  border-radius: var(--pc-r-pill);

  background: var(--pc-line-soft);

  color: var(--pc-muted);

  font-variant-numeric: tabular-nums;

}

.pc-chip.is-active .pc-chip-n { background: rgba(255, 255, 255, .22); color: #fff; }



/* --- Tabel daftar harga --- */

.pc-harga-meta {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  justify-content: space-between;

  gap: 8px 22px;

  padding-bottom: 18px;

  margin-bottom: 26px;

  border-bottom: 1px solid var(--pc-line);

}

.pc-harga-meta p { margin: 0; }

.pc-harga-updated { font-size: .92rem; color: var(--pc-body); }

.pc-harga-sum {

  font-size: .86rem;

  color: var(--pc-muted);

  font-variant-numeric: tabular-nums;

}



.pc-harga-group { margin-bottom: 34px; }

.pc-harga-group:last-of-type { margin-bottom: 22px; }

.pc-harga-ghead {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 14px;

  margin-bottom: 10px;

}

.pc-harga-ghead h2 {

  margin: 0;

  font-size: 1.16rem;

  letter-spacing: -.02em;

  color: var(--pc-ink);

}



.pc-harga-scroll {

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r);

  overflow-x: auto;

  background: var(--pc-surface);

}

.pc-harga-table {

  width: 100%;

  border-collapse: collapse;

  font-size: .93rem;

  min-width: 520px;

}

.pc-harga-table thead th {

  text-align: left;

  padding: 11px 16px;

  font-size: .74rem;

  font-weight: 700;

  letter-spacing: .07em;

  text-transform: uppercase;

  color: var(--pc-faint);

  background: var(--pc-bg);

  border-bottom: 1px solid var(--pc-line);

  white-space: nowrap;

}

.pc-harga-table tbody tr + tr th,

.pc-harga-table tbody tr + tr td { border-top: 1px solid var(--pc-line-soft); }

.pc-harga-table th[scope="row"] {

  text-align: left;

  font-weight: 600;

  padding: 13px 16px;

  color: var(--pc-ink);

}

.pc-harga-table th[scope="row"] a { color: inherit; text-decoration: none; }

.pc-harga-table th[scope="row"] a:hover { color: var(--pc-primary-700); text-decoration: underline; }

.pc-harga-table td { padding: 13px 16px; color: var(--pc-body); }

.pc-td-unit { white-space: nowrap; color: var(--pc-muted); }

.pc-td-price { white-space: nowrap; font-variant-numeric: tabular-nums; }

.pc-td-price .pc-price { font-weight: 700; color: var(--pc-ink); }

.pc-td-price del { color: var(--pc-faint); font-size: .86rem; margin-right: 7px; }

.pc-td-price ins { text-decoration: none; font-weight: 700; color: var(--pc-success-ink); }

.pc-na { color: var(--pc-faint); }

/* Sebelumnya opacity .62 — teks jadi ~3.5:1 dan gagal AA. Status "stok

   habis" sudah dibawa lencana .pc-badge-out, jadi peredupan dibuang. */

.pc-row-out th[scope="row"] a,

.pc-row-out td { opacity: 1; }

.pc-row-out th[scope="row"] a,

.pc-row-out .pc-td-unit,

.pc-row-out .pc-td-price .pc-price,

.pc-row-out .pc-td-price ins,

.pc-row-out .pc-td-price del { color: var(--pc-muted); }



.pc-badge {

  display: inline-block;

  padding: 3px 10px;

  border-radius: var(--pc-r-pill);

  font-size: .76rem;

  font-weight: 700;

  white-space: nowrap;

}

.pc-badge-ok    { background: #ecfdf5; color: #047857; }

.pc-badge-low   { background: #fffbeb; color: #b45309; }

.pc-badge-promo { background: var(--pc-accent-050); color: var(--pc-accent-ink); }

.pc-badge-out   { background: var(--pc-line-soft); color: var(--pc-muted); }



.pc-harga-note {

  margin: 18px 0 0;

  font-size: .84rem;

  line-height: 1.7;

  color: var(--pc-muted);

  max-width: 82ch;

}



/* --- Kartu tips penyimpanan --- */

.pc-tips {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  gap: 16px;

}

.pc-tip {

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r);

  padding: 20px 21px 18px;

  display: flex;

  flex-direction: column;

  gap: 9px;

}

.pc-tip h3 {

  margin: 0;

  font-size: 1rem;

  letter-spacing: -.015em;

  color: var(--pc-ink);

}

.pc-tip p {

  margin: 0;

  font-size: .9rem;

  line-height: 1.68;

  color: var(--pc-body);

  flex: 1 1 auto;

}

.pc-tip-link {

  font-size: .85rem;

  font-weight: 700;

  color: var(--pc-primary-700);

  text-decoration: none;

}

.pc-tip-link:hover { text-decoration: underline; }



/* --- Panel dua kolom halaman panduan --- */

.pc-panduan-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 18px;

  align-items: start;

}

.pc-panel {

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r);

  padding: 24px 24px 22px;

}

.pc-panel h2 {

  margin: 0 0 16px;

  font-size: 1.14rem;

  letter-spacing: -.02em;

  color: var(--pc-ink);

}

.pc-panel p { margin: 0 0 12px; font-size: .92rem; line-height: 1.7; color: var(--pc-body); }

.pc-panel p:last-child { margin-bottom: 0; }

.pc-panel a { color: var(--pc-primary-700); }

.pc-panel-list { margin: 0; display: grid; gap: 13px; }

.pc-panel-list > div { display: grid; gap: 3px; }

.pc-panel-list dt {

  font-size: .74rem;

  font-weight: 700;

  letter-spacing: .07em;

  text-transform: uppercase;

  color: var(--pc-faint);

}

.pc-panel-list dd { margin: 0; font-size: .93rem; line-height: 1.62; color: var(--pc-body); }

.pc-panel-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin: 0 0 14px;

  padding: 0;

  list-style: none;

}

.pc-panel-tags li {

  padding: 5px 12px;

  border-radius: var(--pc-r-pill);

  background: var(--pc-primary-050);

  color: var(--pc-primary-700);

  font-size: .82rem;

  font-weight: 700;

}



/* --- Kotak ajakan di ujung halaman --- */

.pc-cta-box {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 30px 32px;

  border-radius: var(--pc-r-lg);

  background: linear-gradient(135deg, var(--pc-primary) 0%, var(--pc-primary-700) 100%);

  color: #fff;

}

.pc-cta-box h2 {

  margin: 0 0 7px;

  font-size: 1.24rem;

  letter-spacing: -.02em;

  color: #fff;

}

.pc-cta-box p {

  margin: 0;

  font-size: .93rem;

  line-height: 1.66;

  color: rgba(255, 255, 255, .88);

  max-width: 58ch;

}

.pc-cta-box-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }

.pc-cta-box .pc-btn-primary {

  background: #fff;

  color: var(--pc-primary-700);

}

.pc-cta-box .pc-btn-ghost {

  border-color: rgba(255, 255, 255, .55);

  color: #fff;

}

.pc-cta-box .pc-btn-ghost:hover {

  background: rgba(255, 255, 255, .14);

  border-color: #fff;

}



.pc-note {

  margin: 18px 0 0;

  font-size: .86rem;

  color: var(--pc-muted);

}



/* --- Variasi hero halaman baru --- */

.pc-hero-harga    { background: linear-gradient(180deg, var(--pc-primary-050) 0%, var(--pc-bg) 100%); }

.pc-hero-panduan  { background: linear-gradient(180deg, var(--pc-accent-050) 0%, var(--pc-bg) 100%); }

.pc-hero-katalog  { background: linear-gradient(180deg, var(--pc-bg) 0%, var(--pc-surface) 100%); }

.pc-hero-harga .pc-hero-inner,

.pc-hero-panduan .pc-hero-inner,

.pc-hero-katalog .pc-hero-inner { max-width: 760px; }



/* ==========================================================================

   18. RESPONSIF — halaman harga, panduan & katalog

   ========================================================================== */

@media (max-width: 900px) {

  .pc-cta-box { padding: 26px 22px; }

  .pc-cta-box-actions { width: 100%; }

}



@media (max-width: 640px) {

  .pc-harga-meta { flex-direction: column; align-items: flex-start; }

  .pc-harga-table { font-size: .88rem; min-width: 460px; }

  .pc-harga-table thead th,

  .pc-harga-table th[scope="row"],

  .pc-harga-table td { padding: 11px 12px; }

  .pc-tips { grid-template-columns: 1fr; }

  .pc-panel { padding: 20px 18px; }

  .pc-cta-box { border-radius: var(--pc-r); }

  .pc-cta-box-actions .pc-btn { flex: 1 1 auto; justify-content: center; }

}



/* ==========================================================================

   19. HALAMAN STATIS — judul level satu

   ==========================================================================

   Tema induk mencetak isi halaman tanpa judul, jadi halaman seperti

   /tentang/ dan /paneltoko/ sempat terbit tanpa <h1> (temuan QA-F1 & QA-F3).

   page.php tema anak sekarang menyisipkan .pc-page-title kalau perlu, dan

   pc-setup6 mengubah heading pertama /tentang/ jadi <h1>.



   Aturan di bawah menyamakan tampilan kedua sumber itu, sekaligus

   menetapkan ukuran yang wajar: sebelumnya `.page-content h2` mengandalkan

   gaya bawaan peramban (1.5em) tanpa aturan tema sama sekali.

   ========================================================================== */

.page-content > h1:first-child,

.page-content > .pc-page-title:first-child {

  font-size: clamp(28px, 4.6vw, 42px);

  line-height: 1.1;

  letter-spacing: -.03em;

  margin: 26px 0 14px;

}



.page-content > h2 { font-size: 1.5rem; line-height: 1.25; margin: 30px 0 10px; }

.page-content > h3 { font-size: 1.2rem; line-height: 1.3; margin: 26px 0 8px; }

.page-content > p  { line-height: 1.75; margin: 0 0 16px; }



@media (max-width: 640px) {

  .page-content > h1:first-child,

  .page-content > .pc-page-title:first-child { margin-top: 18px; }

}



/* ==========================================================================

   20. KONTRAS — perbaikan WCAG AA (temuan QA-F4 .. QA-F9)

   ==========================================================================

   Audit axe-core Phase 10 menemukan 579 node teks di bawah 4.5:1. Sebagian

   besar berasal dari tema induk `octopus-storefront` yang tidak boleh diubah,

   jadi ditimpa dari sini — berkas ini dimuat sesudah berkas induk.



   Tema induk memakai tokennya sendiri (--muted:#64748b) dan menulis sebagian

   warna mentah. Token sudah dinaikkan di blok §1; aturan di bawah menangani

   warna mentah yang tidak bisa dijangkau lewat token.

   ========================================================================== */



/* Harga sebelum diskon: #94a3b8 di atas putih 2.56:1 -> 5.41:1. */

.old-price { color: var(--pc-faint); }



/* Lencana "Promo": putih di atas #ea580c 3.56:1 -> #c2410c 5.18:1. */

.badge-promo { background: #c2410c; }



/* Ikon keranjang kosong milik plugin commerce: 4.34:1 -> 5.31:1. */

.oc-empty-icon { color: var(--pc-muted); }



/* Elemen yang dicetak plugin commerce (keranjang, checkout, status pesanan).

   Plugin tidak boleh diubah, jadi ditimpa dari tema anak. #64748b di atas

   --pc-bg hanya 4.47:1; --pc-muted (#5c6675) memberi 5.47:1. */

.oc-kicker,

.oc-shop-heading > p { color: var(--pc-muted); }



/* ==========================================================================

   21. PERBAIKAN PHASE 10 PUTARAN 11 — LUAPAN HORIZONTAL & SISA KONTRAS

   ==========================================================================

   Ditemukan setelah metrik luapan pada qa_browser.js diperbaiki: skrip itu

   membandingkan documentElement.scrollWidth dengan window.innerWidth. Di

   emulasi mobile Chrome, innerWidth dilaporkan sebesar lebar KONTEN

   (563px), bukan lebar viewport (375px), sehingga luapan 188px tidak

   pernah terdeteksi. Acuan yang benar adalah

   documentElement.clientWidth.

   ========================================================================== */



/* --- QA-F11: logo wordmark meluber, tombol header keluar layar -----------

   `wm_pasarcirebon.png` berukuran 926x84 px (rasio 11:1). Dengan

   `height:30px; width:auto` logo menjadi 331px; ditambah nama situs dan

   celah, `.pc-brand` mencapai 449px — sedangkan kolom header di layar

   375px hanya 343px. Karena `.pc-brand` memakai `flex:0 0 auto`, ia tidak

   menyusut: tombol keranjang dan menu terdorong ke x=525..563 (di luar

   layar), nama situs terpotong, dan lebar dokumen naik 375px -> 563px.

   Di footer hal yang sama terjadi: 431px di dalam kolom 343px.



   Obatnya: batasi lebar logo, dan sembunyikan teks nama di layar sempit —

   wordmark-nya sendiri sudah memuat nama situs, dan `<img alt>` tetap

   memberi nama aksesibel. */

.pc-brand img,

.pc-footer-brand img {

  object-fit: contain;

  object-position: left center;

}

.pc-footer-brand img {

  display: block;

  height: 28px;

  width: auto;

  max-width: 240px;

}

.pc-brand-text { min-width: 0; }



@media (max-width: 1024px) {

  .pc-brand img { max-width: 300px; }

}

@media (max-width: 900px) {

  .pc-brand img { max-width: 220px; }

}

@media (max-width: 560px) {

  .pc-brand img { max-width: 200px; }

  .pc-brand-text { display: none; }

}



/* --- QA-F12: warna vertikal tidak pernah terpakai ------------------------

   `.pc-vcard` (baris ~520) dan `.pc-vhead` (baris ~771) sama-sama

   menetapkan `--v: var(--pc-primary)`, dan keduanya berada SETELAH aturan

   `.pc-v-kuliner { --v: ... }` (baris ~596). Spesifisitasnya sama (0,1,0),

   jadi yang menang adalah yang terakhir — `--pc-primary`. Terbukti dari

   audit: warna terhitung `.pc-eyebrow` di /kuliner/ adalah #6366f1, bukan

   #ea580c. Artinya kelima warna vertikal tidak pernah muncul di kartu

   jelajah maupun kepala halaman vertikal.



   Aturan di bawah dikualifikasi dengan `.pc-portal` (0,2,0) supaya menang

   tanpa perlu memindahkan blok aslinya. `.pc-portal` ada di <body> setiap

   halaman, jadi selektornya selalu cocok. */

.pc-vcard,

.pc-vhead { --v-ink: var(--pc-primary-ink); }



.pc-portal .pc-v-kuliner  { --v: var(--pc-v-kuliner);  --v-ink: var(--pc-v-kuliner-ink); }

.pc-portal .pc-v-oleholeh { --v: var(--pc-v-oleholeh); --v-ink: var(--pc-v-oleholeh-ink); }

.pc-portal .pc-v-batik    { --v: var(--pc-v-batik);    --v-ink: var(--pc-v-batik-ink); }

.pc-portal .pc-v-jasa     { --v: var(--pc-v-jasa);     --v-ink: var(--pc-v-jasa-ink); }

.pc-portal .pc-v-sayur    { --v: var(--pc-v-sayur);    --v-ink: var(--pc-v-sayur-ink); }



/* --- QA-F13: sisa warna mentah plugin di atas putih ----------------------

   Plugin commerce menulis `.oc-checkout-form label span{color:#94a3b8}`

   dan `.oc-invoice-meta span{color:#94a3b8}`. #94a3b8 di atas putih hanya

   2.56:1. Ditimpa ke --pc-faint (#5f6b7c, 5.41:1). */

.oc-checkout-form label span,

.oc-invoice-meta span { color: var(--pc-faint); }





/* ==========================================================================

   22. PHASE 3 — TYPOGRAPHY & SPACING SCALE (navy/orange/cream)

   Tipografi clamp() sesuai target hierarchy; spacing scale 4..80.

   Bagian ini HANYA menaikkan hero & section H2 bila belum tercakup;

   selektor dikualifikasi supaya tidak menimpa aturan lain.

   ========================================================================== */

:root {

  --pc-space-1: 4px;  --pc-space-2: 8px;  --pc-space-3: 12px;

  --pc-space-4: 16px; --pc-space-6: 24px; --pc-space-8: 32px;

  --pc-space-12: 48px; --pc-space-16: 64px; --pc-space-20: 80px;

}



/* Hero H1: formula step 6 refinement — clamp(2.25rem, 4vw, 3.5rem) */

.pc-hero h1 {

  font-size: clamp(2.25rem, 4vw, 3.5rem);

}

/* Section H2: 30-36px desktop, nyaman di mobile */

.pc-head h2 {

  font-size: clamp(1.55rem, 1.4vw + 1.1rem, 2.25rem); /* ~24.8 -> 36px */

}

/* Card title & body & metadata sudah dekat target; pastikan body 16-18 */

.pc-section p { line-height: 1.66; }





/* ==========================================================================

   23. PHASE 4 — KOMPONEN HOMEPAGE V2

   Search hero besar, chips "Sedang Dicari", section spacing.

   ========================================================================== */



/* Search besar di bawah hero */

.pc-section-search { padding-top: 30px; padding-bottom: 6px; }

.pc-hero-search { max-width: 720px; }

.pc-search-home {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 10px 10px 18px;

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r-pill);

  box-shadow: var(--pc-shadow);

}

.pc-search-home svg { width: 20px; height: 20px; color: var(--pc-faint); flex: none; }

.pc-search-home input {

  flex: 1 1 auto;

  min-width: 0;

  border: 0;

  outline: none;

  background: transparent;

  font: inherit;

  font-size: 1.02rem;

  color: var(--pc-ink);

}

.pc-search-home input::placeholder { color: var(--pc-faint); }

.pc-search-home .pc-btn { flex: none; padding: 10px 20px; }

.pc-search-home input:focus-visible ~ .pc-btn,

.pc-search-home:focus-within { border-color: var(--pc-primary); }



/* Chips topik */

.pc-chips {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 4px;

}

.pc-chip {

  display: inline-flex;

  align-items: center;

  padding: 9px 16px;

  border-radius: var(--pc-r-pill);

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  font-size: .92rem;

  font-weight: 600;

  color: var(--pc-primary-ink);

  text-decoration: none;

  transition: border-color var(--pc-speed) var(--pc-ease), background var(--pc-speed) var(--pc-ease);

}

.pc-chip:hover { border-color: var(--pc-accent); background: var(--pc-accent-050); }



/* Mobile: search & CTA tetap nyaman */

@media (max-width: 640px) {

  .pc-search-home { flex-wrap: nowrap; padding: 8px 8px 8px 14px; }

  .pc-search-home input { font-size: .98rem; }

  .pc-search-home .pc-btn { padding: 9px 14px; }

  .pc-chip { padding: 8px 13px; font-size: .88rem; }

}



/* ==========================================================================

   24. PHASE 3 — LATAR BODY CREAM (palet menyeluruh)

   Tema induk menetapkan body{background:var(--bg)} dengan --bg:#f7f8fa abu.

   Tema anak mengganti latar ke cream --pc-bg supaya seluruh halaman ikut

   palet navy/orange/cream. Induk tidak pernah diedit.

   ========================================================================== */

body {

  background: var(--pc-bg);

  color: var(--pc-body);

}





/* ==========================================================================

   25. REFINEMENT V2 — WIDTH SYSTEM, NAV BARU, 3 KARTU, MOTIF

   Implementasi master refinement: width 1200px, radius 10-12px, spacing

   scale, kartu editorial (tanpa kesan dashboard), search icon-only header,

   motif Mega Mendung halus 3-6%, section rhythm.

   ========================================================================== */



/* ---------- Width system (step 3) ---------- */

:root {

  --pc-max: 1200px;

  --pc-r-card: 12px;

}

.pc-wrap {

  width: min(var(--pc-max), calc(100% - 40px));

}

@media (max-width: 640px) {

  .pc-wrap { width: calc(100% - 32px); }

}

/* Hero & search & lede tetap constrained */

.pc-hero-inner { max-width: 700px; }

.pc-hero p.pc-lede { max-width: 66ch; }

.pc-hero-search { max-width: 760px; }



/* ---------- Ikon SVG vertikal ---------- */

.pc-ico { width: 30px; height: 30px; display: block; }

.pc-vcard-ico { display: inline-flex; }

.pc-vcard-ico .pc-ico { width: 32px; height: 32px; }

.pc-drop-ico .pc-ico { width: 22px; height: 22px; }

.pc-mobile-nav .pc-ico { width: 20px; height: 20px; }



/* ---------- VerticalTile (PC_VerticalTile, step CARD A) ---------- */

.pc-vcard {

  border-radius: var(--pc-r-card);

  padding: 22px 20px;

  box-shadow: none;

  transition: transform var(--pc-speed) var(--pc-ease), border-color var(--pc-speed) var(--pc-ease);

}

.pc-vcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--v) 45%, var(--pc-line)); }

.pc-vcard-cta {

  margin-top: auto;

  font-size: .92rem;

  font-weight: 700;

  color: var(--v-ink);

  display: inline-flex;

  align-items: center;

  gap: 6px;

}

.pc-vcard-cta span { transition: transform var(--pc-speed) var(--pc-ease); }

.pc-vcard:hover .pc-vcard-cta span { transform: translateX(3px); }

.pc-vcard-meta { display: none; } /* digantikan text CTA */



/* Mobile: 2 kolom + sayuran full width (step 24) */

@media (max-width: 720px) {

  .pc-verticals { grid-template-columns: 1fr 1fr !important; }

  .pc-verticals .pc-v-sayur,

  .pc-verticals .pc-vcard:last-child { grid-column: 1 / -1; }

}



/* ---------- CommerceCard (PC_CommerceCard, step CARD C) ---------- */

.pc-commerce-card .inside { padding: 12px 14px 14px; }

.pc-commerce-card .card-description { display: none; } /* tanpa deskripsi panjang */

.pc-commerce-card .price { font-size: 1.02rem; }



/* ---------- Header: nav inline vertikal + search icon-only (step 13) ---------- */

.pc-nav { gap: 18px; }

.pc-nav > a { white-space: nowrap; }

.pc-caret { font-size: .7rem; opacity: .7; }

.pc-search-toggle { position: relative; }

.pc-search-toggle > summary {

  list-style: none;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 38px; height: 38px;

  border-radius: var(--pc-r-pill);

  border: 1px solid var(--pc-line);

  background: var(--pc-surface);

  color: var(--pc-ink);

}

.pc-search-toggle > summary::-webkit-details-marker { display: none; }

.pc-search-toggle > summary svg { width: 18px; height: 18px; }

.pc-search-toggle[open] > summary { border-color: var(--pc-primary); color: var(--pc-primary); }

.pc-search-drop {

  position: absolute;

  right: 0; top: calc(100% + 10px);

  z-index: 60;

  display: flex;

  gap: 8px;

  padding: 10px;

  background: var(--pc-surface);

  border: 1px solid var(--pc-line);

  border-radius: var(--pc-r-pill);

  box-shadow: var(--pc-shadow);

  width: min(360px, calc(100vw - 48px));

}

.pc-search-drop input {

  flex: 1;

  border: 0;

  outline: none;

  background: transparent;

  font: inherit;

  min-width: 0;

}

.pc-search-drop button {

  border: 0; background: transparent; cursor: pointer;

  display: inline-flex; padding: 4px; color: var(--pc-ink);

}

.pc-search-drop button svg { width: 18px; height: 18px; }

/* search bar lama di header disembunyikan (icon-only sekarang) */

.pc-header-bar > .pc-search { display: none; }



/* ---------- Mobile: header [MENU] brand [search icon] ---------- */

@media (max-width: 900px) {

  .pc-nav { display: none; }

  .pc-cta-wa { display: none; }

}

.pc-mobile-sep {

  height: 1px;

  background: var(--pc-line);

  margin: 10px 0;

}

.pc-mobile-toko {

  font-weight: 800;

  color: var(--pc-accent-ink);

}



/* ---------- Section rhythm (step 23) ---------- */

.pc-business-cta {

  background: var(--pc-primary);

  border-block: 0;

}

.pc-business-cta h2,

.pc-business-cta p { color: #f6f9fc; }

.pc-business-cta .pc-btn-ghost {

  background: transparent;

  border-color: rgba(255, 255, 255, .4);

  color: #fff;

}



/* ---------- Motif Mega Mendung halus (3-6%, step Cirebon identity) ---------- */

.pc-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .05;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70' viewBox='0 0 140 70'%3E%3Cg fill='none' stroke='%231e3a5f' stroke-width='2'%3E%3Cpath d='M0 55c10 0 14-8 24-8s14 8 24 8 14-8 24-8 14 8 24 8 14-8 24-8 14 8 20 8'/%3E%3Cpath d='M0 38c10 0 14-8 24-8s14 8 24 8 14-8 24-8 14 8 24 8 14-8 24-8 14 8 20 8'/%3E%3Cpath d='M0 21c10 0 14-8 24-8s14 8 24 8 14-8 24-8 14 8 24 8 14-8 24-8 14 8 20 8'/%3E%3C/g%3E%3C/svg%3E");

  background-size: 140px 70px;

}

.pc-hero-inner { position: relative; }



/* ---------- Grid commerce desktop 4 kolom sudah bawaan; editorial 3 ---------- */







/* ---------- 26. FIX OVERFLOW HEADER (QA refinement) ----------

   Di 320-414px, header-actions (search icon + cart + burger = 3 x 38px +

   gap) melebihi sisa ruang setelah brand. Brand teks disembunyikan lebih

   awal, search icon disembunyikan di layar sangat kecil (search tetap ada

   di burger drawer), dan overflow-x di-*clip* sebagai jaring pengaman. */

@media (max-width: 420px) {

  .pc-search-toggle { display: none; }

}

@media (max-width: 1024px) {

  html, body { overflow-x: clip; }

}

/* Search drop & mobile-nav: pastikan tidak keluar viewport */

.pc-search-drop { right: max(0px, calc((100vw - 100%) / -2)); }

@media (max-width: 640px) {

  .pc-search-drop { position: fixed; inset: 70px 16px auto 16px; width: auto; z-index: 90; }

}

/* Mobile nav max width guard */

@media (max-width: 360px) {

  .pc-mobile-nav { width: calc(100vw - 40px); }

}





/* ---------- 27. FIX DROPDOWN OVERFLOW (QA refinement) ----------

   .pc-drop-panel terbuka absolute left:0 dari item terakhir nav (dekat

   tepi kanan) sehingga melewati viewport. Rata kanan dari summary supaya

   panel selalu jatuh ke dalam. `.pc-drop-panel a` yang keluar viewport

   saat panel tertutup: details > .pc-drop-panel display grid; ketika

   [open] baru terlihat — karena panel selalu dirender (bukan display:none

   pada summary tertutup), kita clamp dengan visibility. */

.pc-drop > .pc-drop-panel {

  left: auto;

  right: 0;

}

/* panel tertutup harus benar-benar tidak memengaruhi layout/scroll */

.pc-drop:not([open]) > .pc-drop-panel { display: none; }





/* ---------- 28. PANEL TERTUTUP = DISPLAY NONE + HEADER COMPACT ---------- */

.pc-burger-menu:not([open]) > .pc-mobile-nav { display: none; }

.pc-search-toggle:not([open]) > .pc-search-drop { display: none; }

@media (max-width: 480px) {

  .pc-brand img { max-width: 150px; }

  .pc-header-bar { gap: 10px; }

  .pc-header-actions { gap: 6px; }

}


/* ==========================================================================
   18. HEADER RESPONSIVE FIX (Override)
   ========================================================================== */
@media (max-width: 1440px) {
  .pc-brand-tag { display: none; }
  .pc-header-bar { gap: 8px; }
  .pc-nav { gap: 0; margin-inline-start: 4px; }
  .pc-nav a, .pc-drop > summary { padding: 8px 8px; font-size: .85rem; }
}
@media (max-width: 1320px) {
  .pc-nav a, .pc-drop > summary { font-size: .8rem; padding: 6px 6px; }
  .pc-search { flex: 0 1 200px; }
}
@media (max-width: 1220px) {
  .pc-nav, .pc-search { display: none !important; }
  .pc-burger-menu { display: block !important; }
  .pc-header-bar { justify-content: space-between; }
  .pc-brand { flex: 1 1 auto; }
}

/* ==========================================================================
   19. WOOCOMMERCE .products GRID FIX
   ========================================================================== */
ul.products, div.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
ul.products::before, ul.products::after, div.products::before, div.products::after { display: none !important; }
@media (min-width: 640px) { ul.products, div.products { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } }
@media (min-width: 900px) { ul.products, div.products { grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; } }
ul.products > li.product, div.products > .product, ul.products > .type-product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

.pc-brand-name { display: none !important; }


/* ==========================================================================
   20. UI/UX PREMIUM ENHANCEMENTS
   ========================================================================== */

/* 1. Ultra-smooth, deeper lift on cards for a premium tactile feel */
.pc-post:hover, .product-card:hover, .pc-cat:hover, .pc-vcard:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04) !important;
  border-color: color-mix(in srgb, var(--pc-primary) 40%, var(--pc-line)) !important;
}

/* 2. Apple-style blur on the header (make it even silkier) */
.pc-header {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}

/* 3. Subtle scale animation for navigation links */
.pc-nav a {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease !important;
}
.pc-nav a:hover {
  transform: scale(1.05);
  background: var(--pc-primary-050) !important;
  color: var(--pc-primary-700) !important;
}

/* 4. Pulse glow animation for the WhatsApp primary button */
@keyframes pc-pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(30, 58, 95, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(30, 58, 95, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 58, 95, 0); }
}
.pc-cta-wa {
  animation: pc-pulse-glow 2.5s infinite;
  background: linear-gradient(135deg, var(--pc-ink) 0%, #2a4b7c 100%) !important;
  border: none !important;
  color: #fff !important;
}
.pc-cta-wa:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 16px rgba(30, 58, 95, 0.25) !important;
  animation: none;
}

/* 5. Sleeker images: subtle zoom on hover */
.pc-post-thumb img, .product-image-link img, .pc-vcard-img img {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.pc-post:hover .pc-post-thumb img, .product-card:hover .product-image-link img, .pc-vcard:hover .pc-vcard-img img {
  transform: scale(1.06) !important;
}

/* 6. Chips (Tags) hover upgrade */
.pc-chip {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease !important;
}
.pc-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}


/* ==========================================================================
   HOMEPAGE REFINEMENT (Anti-Slop & CRO Updates)
   ========================================================================== */

/* 1. HERO SECTION & SEARCH KING */
.pc-hero-search-box .pc-search-home {
    background: #ffffff;
    border-radius: 999px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}
.pc-hero-search-box .pc-search-home:focus-within {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: var(--pc-accent);
}
.pc-hero-search-box svg {
    width: 24px;
    height: 24px;
    color: #94a3b8;
    margin-left: 12px;
}
.pc-hero-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 16px;
    font-size: 1.1rem;
    color: var(--pc-text);
    outline: none;
}
.pc-hero-search-box input::placeholder {
    color: #94a3b8;
}
.pc-hero-search-box button {
    padding: 12px 28px;
    font-size: 1.05rem;
    border-radius: 999px;
    margin-left: 8px;
}

/* 2. RHYTHM VARIATION: ASYMMETRICAL (Oleh-Oleh) */
@media (min-width: 768px) {
    .pc-layout-asym .pc-posts {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: repeat(2, 1fr);
        gap: 24px;
    }
    .pc-layout-asym .pc-posts .pc-post:first-child {
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
    }
    .pc-layout-asym .pc-posts .pc-post:first-child .pc-post-thumb {
  flex: 0 0 auto;
  min-height: 240px;
}
    .pc-layout-asym .pc-posts .pc-post:not(:first-child) {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0; /* gap handled by padding */
}
    .pc-layout-asym .pc-posts .pc-post:not(:first-child) .pc-post-thumb {
  width: 140px;
  height: 100%;
  aspect-ratio: unset;
  flex-shrink: 0;
  margin-bottom: 0;
}
}

/* 3. RHYTHM VARIATION: HORIZONTAL (Batik) */
.pc-layout-horizontal .pc-posts {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
}
.pc-layout-horizontal .pc-posts::-webkit-scrollbar {
    display: none; /* Safari/Chrome */
}
.pc-layout-horizontal .pc-posts .pc-post {
    min-width: 280px;
    max-width: 320px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* 4. CLEAN UP "JELAJAHI CIREBON" CARDS */
.pc-verticals .pc-vcard {
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    background: #ffffff;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.pc-verticals .pc-vcard:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1);
}
.pc-verticals .pc-vcard-action {
    display: none !important; /* Remove decorative arrows */
}


/* --- Mobile Horizontal Swipe --- */
@media (max-width: 760px) {
  .pc-posts, .products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    margin-right: -16px; /* Bleed edge */
    padding-right: 16px;
    gap: 16px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pc-posts::-webkit-scrollbar, .products::-webkit-scrollbar {
    display: none;
  }
  .pc-posts > *, .products > * {
    flex: 0 0 85% !important;
    scroll-snap-align: center;
    max-width: 320px;
  }
  .pc-layout-asym .pc-posts {
    display: flex !important; 
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
  }
  .pc-layout-asym .pc-posts .pc-post:first-child,
  .pc-layout-asym .pc-posts .pc-post:not(:first-child) {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0; /* gap handled by padding */
}
  .pc-layout-asym .pc-posts .pc-post:not(:first-child) .pc-post-thumb {
  width: 140px;
  height: 100%;
  aspect-ratio: unset;
  flex-shrink: 0;
  margin-bottom: 0;
}
}