:root {
  --green: #49aaa8;
  --green-dark: #177f82;
  --green-soft: #e3f3f1;
  --orange: #2b9898;
  --orange-soft: #d7eeeb;
  --blue: #5fb9b7;
  --red: #d85f73;
  --teal: #8fcac6;
  --purple: #6aaeb5;
  --ink: #222831;
  --ink-soft: #394150;
  --muted: #687280;
  --line: #d9e9e7;
  --soft: #f1f8f7;
  --white: #ffffff;
  --mint: #a7d8d4;
  --mint-light: #c6e6e3;
  --deep-teal: #1f8b8f;
  /* Aksen PROMO. Sengaja hangat, di luar keluarga teal merek: tombol
     Checkout sudah teal pekat, jadi promo bertteal akan tenggelam jadi "tombol
     kedua" alih-alih tawaran yang menggoda. Kuning-ke-koral adalah kosakata
     voucher yang langsung dikenali pembeli. */
  --promo-1: #f7a325;
  --promo-2: #ef6f57;
  --promo-ink: #8a4b12;
  --promo-soft: #fff4e3;
  --promo-soft-2: #ffe6da;
  --promo-line: rgba(239, 111, 87, 0.32);
  /* ---- Ramp warna merek yang DULU hardcoded di seluruh berkas ini ----
     Dipindahkan ke variabel supaya tema per-client (web/static/spesific/
     css/theme.css) benar-benar bisa menggantinya. Sebelum ini hanya :root
     yang bisa ditimpa, sementara puluhan nilai teal tertanam langsung di
     aturan CSS — akibatnya tema client hijau masih menyisakan teal di
     tombol, gradasi, dan ikon.
     Nilainya SAMA PERSIS dengan sebelumnya; ini pemindahan, bukan perubahan
     tampilan. */
  --green-darker: #176f72;
  --green-deep: #227f84;
  --green-rgb: 73, 170, 168;
  --deep-teal-rgb: 31, 139, 143;
  --green-deep-rgb: 33, 127, 132;
  --shadow-rgb: 25, 104, 108;
  --brand-ice: #e7fbf8;
  --brand-wash: #edf7f6;
  --brand-wash-2: #eff8f7;
  --brand-wash-3: #f0f7f5;
  --brand-wash-4: #f2faf9;
  --brand-wash-5: #e7f2ef;
  --brand-soft-1: #78c3bf;
  --brand-soft-2: #98d0cb;
  --brand-pale-rgb: 209, 239, 235;
  --shadow: 0 18px 44px rgba(25, 104, 108, 0.14);
  --shadow-soft: 0 10px 26px rgba(25, 104, 108, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

/* Sticky footer: body jadi kolom flex setinggi minimal viewport, <main>
   (satu-satunya konten "mengembang", header/footer tetap ukuran alami)
   menyerap sisa ruang. Tanpa ini footer mengikuti tinggi konten apa
   adanya — pada halaman pendek (mis. tab riwayat pesanan yang kosong)
   footer jadi "mengambang" di tengah viewport alih-alih menempel di
   bawah, sementara halaman dengan banyak konten footer-nya tampak normal
   di bawah — posisinya jadi tidak konsisten antar halaman. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(
      circle at top left,
      rgba(var(--green-rgb), 0.18),
      transparent 32rem
    ),
    linear-gradient(180deg, var(--brand-wash-2) 0, var(--soft) 360px);
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
}

body > main {
  flex: 1 0 auto;
}

a:hover {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.page-shell {
  width: min(1200px, calc(100% - 32px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 0 rgba(230, 233, 238, 0.9);
  backdrop-filter: blur(16px);
}

.topbar {
  background: var(--green-darker);
  color: var(--white);
  font-size: 12px;
}

.topbar__inner {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  min-height: 34px;
  align-items: center;
  color: rgba(255, 255, 255, 0.86);
}

.nav {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--deep-teal);
}

.brand__mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--green-deep), var(--teal));
  color: var(--white);
  box-shadow: 0 8px 18px rgba(var(--green-deep-rgb), 0.18);
  font-size: 16px;
}

/* Logo brand (gambar) — disamakan dengan Web-Hub-v2. */
.brand__logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
}

.search {
  display: flex;
  min-width: 0;
  border: 1px solid rgba(var(--green-rgb), 0.46);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(var(--green-deep-rgb), 0.08);
}

.search input {
  width: 100%;
  min-width: 0;
  border: 0;
  min-height: 38px;
  padding: 9px 14px;
  outline: 0;
  font-size: 14px;
}

.search button,
.primary-button {
  border: 0;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  cursor: pointer;
}

.search button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 18px;
  background: linear-gradient(135deg, var(--blue), var(--green-dark));
  font-size: 14px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.icon-button,
.login-button,
.ghost-button,
.tab {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.icon-button {
  display: grid;
  min-width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  font-size: 12px;
}

.icon-button i {
  font-size: 17px;
}

.icon-button .badge {
  min-width: 16px;
  padding: 3px 5px;
  font-size: 9px;
}

.icon-button .bg-danger {
  background-color: var(--deep-teal) !important;
}

.login-button,
.primary-button,
.ghost-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 700;
}

.primary-button--light {
  background: var(--white);
  color: var(--green-dark);
}

.quick-links {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  padding: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.quick-links span {
  color: var(--ink);
  font-weight: 800;
}

.quick-links a {
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f2f5f7;
  padding: 5px 10px;
  transition: 180ms ease;
}

.quick-links a:hover {
  border-color: rgba(var(--green-rgb), 0.34);
  background: var(--green-soft);
  color: var(--green-dark);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  padding-block: 26px 20px;
}

.hero__banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 24px;
  background: linear-gradient(165deg, var(--deep-teal) 0%, var(--green) 46%, var(--mint) 100%);
  color: var(--white);
  box-shadow: var(--shadow);
}

.hero__banner::before {
  position: absolute;
  inset: -80px -80px auto auto;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  content: "";
}

.hero__banner::after {
  position: absolute;
  right: -6%;
  bottom: -34%;
  width: 118%;
  height: 54%;
  border-radius: 50% 50% 0 0;
  background: rgba(var(--brand-pale-rgb), 0.34);
  content: "";
}

.hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 46px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero .eyebrow,
.section--highlight .eyebrow {
  color: var(--brand-ice);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 620px;
  margin-bottom: 14px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
}

h3 {
  font-size: 15px;
  line-height: 1.45;
}

.hero__copy p:not(.eyebrow) {
  max-width: 580px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.75;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.hero-metrics div {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  padding: 12px;
  backdrop-filter: blur(10px);
}

.hero-metrics strong,
.hero-metrics span {
  display: block;
}

.hero-metrics strong {
  font-size: 20px;
  font-weight: 800;
}

.hero-metrics span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
}

.hero__banner img {
  position: relative;
  z-index: 1;
  align-self: end;
  width: 100%;
  height: 92%;
  object-fit: contain;
  padding: 22px 22px 0 0;
  filter: drop-shadow(0 24px 36px rgba(18, 31, 43, 0.18));
}

.hero__side {
  display: grid;
  gap: 20px;
}

.hero__side article {
  display: flex;
  min-height: 151px;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(230, 233, 238, 0.78);
  border-radius: 20px;
  background: var(--white);
  padding: 24px;
  box-shadow: var(--shadow-soft);
  transition: 180ms ease;
}

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

.hero__side span,
.hero__side small {
  color: var(--muted);
}

.hero__side span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
}

.hero__side i {
  color: var(--green);
}

.hero__side strong {
  margin: 8px 0;
  color: var(--deep-teal);
  font-size: 26px;
}

.promo-carousel {
  margin-bottom: 20px;
}

.promo-carousel .carousel {
  overflow: hidden;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}

.promo-slide {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 30px 72px;
  color: var(--white);
}

.promo-slide h2 {
  max-width: 620px;
  margin: 6px 0 8px;
  color: var(--white);
}

.promo-slide p {
  max-width: 560px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
}

.promo-slide span {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.promo-slide i {
  font-size: clamp(54px, 9vw, 96px);
  opacity: 0.72;
}

.promo-slide--one {
  background: linear-gradient(135deg, var(--green-darker), var(--blue));
}

.promo-slide--two {
  background: linear-gradient(135deg, var(--green-deep), var(--teal));
}

.promo-slide--three {
  background: linear-gradient(135deg, var(--deep-teal), var(--mint));
}

/* Banner dikelola staf (web-hub-v2 > Ecommerce > Banner) — gambar upload
   sebagai background, dengan overlay gradasi tipis supaya judul (opsional)
   tetap terbaca di atas gambar apa pun. */
.promo-slide--dynamic {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
}

.promo-slide--dynamic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 32, 0) 45%,
    rgba(15, 23, 32, 0.6) 100%
  );
}

.promo-slide--dynamic > div {
  position: relative;
  z-index: 1;
}

/* Banner promo di dalam section Flash Sale (web/views/partials/promo-banner-carousel.html)
   — pola sama dengan .promo-carousel di atas, dibuat lebih ringkas karena
   posisinya di dalam section, bukan hero paling atas beranda. */
.promo-banner-carousel {
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.promo-banner-carousel .promo-slide {
  min-height: 120px;
  padding: 20px 40px;
}

.service-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.service-strip a {
  display: flex;
  min-height: 108px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 8px 20px rgba(29, 39, 54, 0.04);
  font-size: 14px;
  text-align: center;
  transition: 180ms ease;
}

.service-strip a:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--green-rgb), 0.34);
  box-shadow: var(--shadow-soft);
}

.service-strip strong {
  font-weight: 800;
}

.service-strip small {
  color: var(--muted);
  font-size: 12px;
}

.service-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.trust-strip div {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(230, 233, 238, 0.8);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  padding: 14px 16px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
}

.trust-strip i {
  color: var(--green);
  font-size: 18px;
}

.service-icon--green {
  background: var(--deep-teal);
}

.service-icon--orange {
  background: var(--green);
}

.service-icon--blue {
  background: var(--blue);
}

.service-icon--red {
  background: var(--brand-soft-1);
}

.service-icon--purple {
  background: var(--brand-soft-2);
}

.service-icon--teal {
  background: var(--orange);
}

.section {
  padding: 18px 0;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.section-heading > a {
  color: var(--green-dark);
  font-weight: 800;
  white-space: nowrap;
}

.section-subtitle {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

#kategori {
  padding-top: 10px;
  padding-bottom: 8px;
}

#produk {
  padding-top: 8px;
}

#kategori .section-heading {
  align-items: center;
  margin-bottom: 8px;
}

#kategori .section-heading h2 {
  font-size: 22px;
}

#kategori .section-heading .eyebrow {
  margin-bottom: 3px;
  font-size: 11px;
}

#kategori .section-subtitle {
  margin-top: 2px;
  font-size: 13px;
}

/* Strip kategori ala marketplace: ikon kecil, geser horizontal, tombol panah. */
.category-strip {
  position: relative;
}

.category-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--white);
  border-radius: 12px;
  padding: 6px 4px;
}

.category-grid::-webkit-scrollbar {
  display: none;
}

.category-card {
  display: grid;
  flex: 0 0 96px;
  scroll-snap-align: start;
  place-items: center;
  align-content: start;
  gap: 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  text-align: center;
  box-shadow: none;
  transition: 180ms ease;
}

.category-card:hover {
  transform: none;
  background: var(--brand-wash-4);
  color: var(--deep-teal);
}

.category-card img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

/* Ikon kategori: glyph Bootstrap Icons atau emoji dari master kategori. */
.category-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  color: var(--deep-teal);
  font-size: 32px;
  line-height: 1;
}

.category-icon .category-emoji {
  font-size: 30px;
  line-height: 1;
}

/* Tombol panah geser — muncul hanya bila strip bisa digeser (dikelola JS). */
.category-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(29, 39, 54, 0.14);
  transition: 150ms ease;
}

.category-nav:hover {
  color: var(--deep-teal);
  border-color: var(--deep-teal);
}

.category-nav--prev {
  left: -6px;
}

.category-nav--next {
  right: -6px;
}

.category-strip.is-scrollable .category-nav.is-visible {
  display: flex;
}

.section--highlight {
  margin-top: 14px;
  background:
    linear-gradient(165deg, var(--deep-teal) 0%, #55b4b1 54%, var(--mint) 100%), var(--green);
  color: var(--white);
}

.section--highlight h2 {
  color: var(--white);
}

.seller-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.seller-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  padding: 18px;
  box-shadow: var(--shadow-soft);
  transition: 180ms ease;
}

.seller-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--green-rgb), 0.34);
}

.seller-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--deep-teal), var(--mint));
  color: var(--white);
  font-weight: 800;
}

.seller-card h3 {
  min-height: 0;
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 800;
}

.seller-card p {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}

.seller-card span {
  color: var(--green-darker);
  font-size: 12px;
  font-weight: 800;
}

.section-heading--sale {
  align-items: center;
}

/* Panel Flash Sale — panel gradasi hangat (teal -> merah) supaya section
   promo jelas beda dari grid "Produk" biasa di bawahnya (bukan cuma teks
   diskon kecil), rounded card besar (bukan full-bleed) supaya tetap
   konsisten dengan ritme section lain di beranda yang semuanya di dalam
   .page-shell. */
.flash-sale-panel {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 20px 20px 24px;
  background: linear-gradient(135deg, var(--deep-teal) 0%, var(--green-dark) 100%);
  box-shadow: 0 20px 45px rgba(var(--deep-teal-rgb), 0.28);
}

.flash-sale-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(216, 95, 115, 0.4), transparent 45%);
  pointer-events: none;
}

.flash-sale-panel .section-heading {
  position: relative;
  margin-bottom: 16px;
}

.flash-sale-panel .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

.flash-sale-panel .section-heading h2 {
  color: var(--white);
}

.flash-sale-panel .section-heading > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  padding: 8px 14px;
  color: var(--white);
  font-size: 13px;
  transition: background 160ms ease;
}

.flash-sale-panel .section-heading > a:hover {
  background: rgba(255, 255, 255, 0.28);
}

.flash-sale-panel .promo-banner-carousel {
  box-shadow: 0 14px 30px rgba(15, 23, 32, 0.22);
}

.countdown {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  padding: 10px 16px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.sale-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sale-card,
.product-card,
.filter-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
}

.sale-card {
  position: relative;
  padding: 14px;
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(var(--shadow-rgb), 0.12);
  transition: 180ms ease;
}

.sale-card:hover {
  transform: translateY(-4px);
}

.discount {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 999px;
  background: #d8f4f0;
  padding: 4px 8px;
  color: var(--green-darker);
  font-size: 12px;
  font-weight: 800;
}

.sale-card img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  border-radius: 14px;
  background: #f7f8fb;
}

.sale-card h3,
.product-card h3 {
  min-height: 44px;
  margin: 12px 0 8px;
}

.sale-card p,
.price {
  color: var(--orange);
  font-size: 18px;
  font-weight: 800;
}

.price {
  margin-bottom: 0;
}

.price-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

.price-wrap span {
  color: #9aa3ad;
  font-size: 12px;
  text-decoration: line-through;
}

.stock {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--orange-soft);
}

.stock span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--deep-teal);
}

.sale-card small {
  color: var(--muted);
}

.sale-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.sale-meta .btn {
  border-radius: 999px;
  background: var(--deep-teal);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
}

.tabs {
  display: inline-flex;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  padding: 4px;
}

.product-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.tab {
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  padding: 0 14px;
  font-weight: 800;
}

.sort-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
}

.tab.is-active {
  border-color: transparent;
  background: var(--deep-teal);
  color: var(--white);
}

.catalog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.filter-panel {
  position: sticky;
  top: 138px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(29, 39, 54, 0.05);
}

.filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.filter-title i {
  color: var(--deep-teal);
}

.filter-panel h3 {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 800;
}

.filter-panel label {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.filter-panel select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  padding: 10px;
  color: var(--ink);
}

.filter-panel .checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}

.filter-reset {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-weight: 800;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Varian lebih kecil dipakai section "Flash Sale" (pages/home.html) —
   modifier terpisah supaya .product-grid/.product-card dasar (dipakai grid
   katalog utama #produk) tetap tidak berubah. */
.product-grid--compact {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.product-grid--compact .product-card img {
  padding: 8px;
}

.product-grid--compact .product-card h3 {
  margin: 6px 0 2px;
  font-size: 12px;
}

.product-grid--compact .product-card__body {
  padding: 8px;
}

.catalog-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 260px;
  place-items: center;
  border: 1px dashed rgba(var(--green-rgb), 0.5);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  text-align: center;
}

.catalog-empty i {
  color: var(--deep-teal);
  font-size: 42px;
}

.product-card {
  overflow: hidden;
  border: 1px solid rgba(230, 233, 238, 0.86);
  box-shadow: 0 8px 22px rgba(29, 39, 54, 0.045);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--green-rgb), 0.36);
  box-shadow: var(--shadow);
}

/* Kartu produk stok habis: gambar & warna tetap seperti biasa (tidak
   diburamkan), indikasi stok habis cukup lewat badge "Stok Habis" &
   tombol tambah yang dinonaktifkan (lihat product-card.html), kartu
   tetap bisa diklik untuk lihat Detail. */
.product-card--soldout .cart-button:disabled {
  cursor: not-allowed;
  border-color: var(--line);
  background: #dfe3e8;
  color: #8a92a0;
}

.product-detail.is-soldout .cart-button:disabled {
  cursor: not-allowed;
  border-color: var(--line);
  background: #dfe3e8;
  color: #8a92a0;
}

.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: linear-gradient(180deg, #ffffff, var(--brand-wash));
  padding: 12px;
  cursor: pointer;
}

.product-card__body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 11px;
}

.product-card h3 {
  min-height: 0;
  margin: 8px 0 4px;
  font-size: 14px;
  line-height: 1.3;
}

.product-card__top {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.product-card__actions {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.outline-button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--deep-teal);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.product-meta:last-of-type {
  margin-bottom: 0;
}

.product-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.product-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: var(--green-soft);
  padding: 4px 9px;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 800;
}

.product-promo {
  overflow: hidden;
  color: var(--deep-teal);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating {
  color: var(--green-darker);
}

.rating i {
  margin-right: 3px;
}

/* Kartu produk Flash Sale — beda dari .product-card biasa lewat pita
   diskon merah menempel di gambar (bukan teks kecil di body) + garis tepi
   rosy tipis, supaya langsung kebaca "ini promo" tanpa perlu baca teks. */
.product-card--flash {
  position: relative;
  border-color: rgba(216, 95, 115, 0.28);
}

.product-card--flash .discount {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  border-radius: 999px;
  background: var(--red);
  padding: 5px 10px;
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(216, 95, 115, 0.4);
}

.product-card--flash .product-card__actions {
  grid-template-columns: 1fr;
}

.cart-button {
  min-height: 32px;
  border: 1px solid var(--green);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--green-dark));
  color: var(--white);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.product-card__actions .cart-button i {
  font-size: 13px;
}

.product-modal {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
}

.product-modal .btn-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
}

.product-detail {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  gap: 24px;
  padding: 28px;
}

.product-detail__image {
  display: grid;
  min-height: 380px;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, var(--brand-wash));
}

.product-detail__image img {
  width: 86%;
  max-height: 340px;
  object-fit: contain;
}

.product-detail__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.product-meta--detail {
  justify-content: flex-start;
}

.detail-copy {
  color: var(--muted);
  line-height: 1.75;
}

.detail-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.detail-specs div {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--green-soft);
  padding: 12px;
}

.detail-specs strong,
.detail-specs span {
  display: block;
}

.detail-specs strong {
  color: var(--deep-teal);
}

.detail-specs span {
  color: var(--muted);
  font-size: 12px;
}

.cart-panel {
  border-left: 0;
}

.cart-items {
  display: grid;
  gap: 12px;
}

.cart-item {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
}

.cart-item img {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  background: var(--green-soft);
  object-fit: contain;
  padding: 8px;
}

.cart-item h3 {
  min-height: 0;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 800;
}

.cart-item p {
  margin-bottom: 0;
  color: var(--deep-teal);
  font-weight: 800;
}

.cart-item button {
  border: 0;
  background: transparent;
  color: var(--muted);
}

/* Stepper jumlah barang (+ / -) di dalam kartu keranjang. */
.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.cart-item .cart-qty-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--deep-teal);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cart-item .cart-qty-btn:hover {
  background: var(--green-soft);
  border-color: var(--deep-teal);
}

.cart-item .cart-qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #fff;
  border-color: var(--line);
}

.cart-qty-value {
  min-width: 24px;
  text-align: center;
  font-weight: 800;
  color: var(--deep-teal);
}

.cart-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.cart-empty i {
  color: var(--deep-teal);
  font-size: 44px;
}

.cart-empty.is-hidden {
  display: none;
}

.cart-summary {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 12px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  background: var(--white);
  padding-top: 16px;
}

.cart-summary div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.cart-summary strong {
  color: var(--deep-teal);
}

/* Kode promo di laci keranjang — lihat partials/cart-offcanvas.html.
   Diletakkan tepat di atas ringkasan biaya supaya menambah kode dan melihat
   akibatnya pada total terjadi tanpa berpindah layar. */
.cart-promo {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* display di kelas mengalahkan [hidden] bawaan browser (spesifisitas sama,
   aturan kita menang karena datang belakangan) — tanpa dua penjaga ini blok
   promo & rincian biaya tetap terlihat saat disembunyikan JS. */
.cart-promo[hidden] {
  display: none;
}

.cart-breakdown[hidden] {
  display: none !important;
}

.cart-promo-chips:empty {
  display: none;
}

.cart-promo-chips {
  display: grid;
  gap: 6px;
}

/* Promo yang SEDANG terpasang memakai keluarga warna yang sama dengan tombol
   "Pilih Promo", tapi diredam: ia mengabarkan keadaan, bukan mengajak. Kalau
   intensitasnya disamakan, dua benda berwarna terang akan berebut perhatian
   dan ajakan memilih promo justru tenggelam. */
.cart-promo-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--promo-line);
  border-radius: 10px;
  background: linear-gradient(115deg, var(--promo-soft), var(--promo-soft-2));
  font-size: 13px;
  line-height: 1.35;
  color: var(--promo-ink);
}

/* Kode yang dibawa tapi sudah tidak berlaku TIDAK ikut berwarna hangat —
   tampil polos & putus-putus supaya tidak menyamar sebagai promo yang aktif. */
.cart-promo-chip.is-unusable {
  border: 1px dashed var(--line);
  background: none;
  color: #9a3412;
}

.cart-promo-chip strong {
  color: var(--promo-ink);
}

.cart-promo-chip.is-unusable strong {
  color: inherit;
}

/* Tombol lepas: ikon saja, tanpa kotak, supaya tidak bersaing dengan
   tombol Checkout yang merupakan aksi utama laci ini. */
.cart-promo-remove {
  border: 0;
  background: transparent;
  color: var(--promo-ink);
  opacity: 0.65;
  padding: 2px 4px;
  line-height: 1;
  cursor: pointer;
}

.cart-promo-remove:hover {
  color: #b91c1c;
  opacity: 1;
}

/* Tombol pembuka daftar promo. Inilah jalur utama memasang promo, jadi ia
   dibuat MENONJOL — bidang warna penuh yang hangat, bukan kotak putus-putus
   yang mudah dilewati mata. Warnanya sengaja beda keluarga dari tombol
   Checkout supaya keduanya tidak berebut peran. */
.cart-promo-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(115deg, var(--promo-1), var(--promo-2));
  box-shadow: 0 8px 20px rgba(239, 111, 87, 0.28);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
}

.cart-promo-toggle[hidden] {
  display: none;
}

/* Kilau tipis yang melintas sekali-sekali — cukup untuk menarik mata ke
   tawaran, tidak sampai mengganggu orang yang sedang membaca totalnya. */
.cart-promo-toggle::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  animation: cartPromoShine 4.5s ease-in-out infinite;
}

@keyframes cartPromoShine {
  0%,
  65% {
    left: -60%;
  }
  95%,
  100% {
    left: 130%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-promo-toggle::after {
    animation: none;
    opacity: 0;
  }
}

.cart-promo-toggle:hover {
  filter: brightness(1.04);
}

.cart-promo-toggle:active {
  transform: translateY(1px);
}

/* Jumlah promo dibungkus pil putih — angka inilah isi tawarannya
   ("2 promo tersedia"), jadi ia pantas dibaca lebih dulu daripada labelnya. */
.cart-promo-toggle-meta {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--promo-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.cart-promo-list {
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.cart-promo-list[hidden] {
  display: none;
}

/* Satu baris promo. Yang belum memenuhi syarat TIDAK disembunyikan — hanya
   diredupkan, dengan alasannya terbaca, karena "kurang sekian lagi" justru
   mendorong belanja. */
/* Promo yang bisa dipakai memakai keluarga warna yang sama dengan chip promo
   terpasang di atas — seluruh blok promo jadi satu kesatuan, bukan tumpukan
   kotak yang tampak tak berhubungan. */
.cart-promo-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--promo-line);
  border-radius: 10px;
  background: linear-gradient(115deg, var(--promo-soft), var(--promo-soft-2));
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  color: var(--promo-ink);
  cursor: pointer;
}

.cart-promo-option:hover:not(:disabled) {
  filter: brightness(0.98);
}

/* Yang belum memenuhi syarat dikembalikan ke polos — kalau ikut berwarna, ia
   akan tampak sama menariknya dengan yang bisa langsung diklik. */
.cart-promo-option:disabled {
  border-color: var(--line);
  background: none;
  color: var(--muted);
  cursor: default;
  opacity: 0.75;
}

.cart-promo-option-code {
  font-weight: 700;
  color: var(--promo-ink);
}

.cart-promo-option-note {
  display: block;
  color: var(--muted, #6b7280);
  font-size: 12px;
}

.cart-promo-option-action {
  flex: none;
  font-weight: 700;
  color: var(--promo-2);
}

.cart-promo-option:disabled .cart-promo-option-code {
  color: var(--muted);
}

/* ---- baris promo + tombol info -------------------------------------- */

/* Baris membungkus tombol "Pakai" DAN tombol info berdampingan; panel detail
   mengalir di bawah keduanya selebar baris. */
.cart-promo-option-row {
  display: grid;
  gap: 6px;
  align-items: center;
}

/* Kolom kedua HANYA dibuat saat tombol info memang dirender — tanpa penjaga
   ini, promo tanpa detail menyisakan kolom kosong dan tombol "Pakai"-nya jadi
   lebih pendek daripada baris lain. */
.cart-promo-option-row.has-info {
  grid-template-columns: 1fr auto;
}

.cart-promo-option-row .cart-promo-detail {
  grid-column: 1 / -1;
}

/* Tombol info: ikon saja, netral, supaya tidak bersaing dengan "Pakai" yang
   merupakan aksi utama tiap baris. */
.cart-promo-info {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.cart-promo-info:hover,
.cart-promo-info.is-open {
  border-color: var(--promo-2);
  color: var(--promo-2);
}

/* Panel info sengaja TIDAK memakai gradasi hangat: ia duduk tepat di bawah
   baris promo yang kini berwarna itu, dan latar yang sama akan membuat
   keduanya melebur jadi satu blok tanpa batas. Putih berbingkai hangat
   membacanya sebagai panel yang baru dibuka. */
.cart-promo-detail {
  padding: 10px 12px;
  border: 1px solid var(--promo-line);
  border-radius: 10px;
  background: var(--white);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.cart-promo-detail[hidden] {
  display: none;
}

.cart-promo-detail p {
  margin: 4px 0 0;
}

.cart-promo-detail strong {
  color: var(--promo-ink);
}

.cart-promo-detail-img {
  display: block;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 8px;
}

.cart-promo-detail-facts {
  font-weight: 600;
  color: var(--promo-ink);
}

.cart-promo-detail-terms-label {
  margin-top: 8px !important;
  font-weight: 700;
  color: var(--promo-ink);
}

.cart-promo-note {
  font-size: 12.5px;
  line-height: 1.4;
  color: #9a3412;
}

.cart-breakdown {
  display: grid !important;
  gap: 6px;
  font-size: 13px;
}

.cart-breakdown .cart-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.cart-breakdown .is-discount {
  color: #15803d;
}

.cart-breakdown s {
  color: var(--muted, #6b7280);
  margin-right: 6px;
}

/* Widget chat mengambang — lihat web/views/partials/chat-widget.html +
   web/static/js/chat-widget.js. z-index lebih tinggi dari .mobile-nav (30)
   supaya tak tertutup bottom-nav mobile; bottom offset diberi jarak supaya
   tak menumpuk dengan bottom-nav itu di layar kecil. */
.chat-widget-toggle {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 40;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--deep-teal);
  color: var(--white);
  font-size: 24px;
  box-shadow: var(--shadow);
}

.chat-widget-toggle--unread::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: var(--red);
}

.chat-panel {
  border-left: 0;
}

.chat-panel-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-bottom: 12px;
}

.chat-bubble-row {
  display: flex;
}

.chat-bubble-row--mine {
  justify-content: flex-end;
}

.chat-bubble-row--staff {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 80%;
  border-radius: 16px;
  padding: 8px 12px;
}

.chat-bubble-row--mine .chat-bubble {
  border-bottom-right-radius: 4px;
  background: var(--deep-teal);
  color: var(--white);
}

.chat-bubble-row--staff .chat-bubble {
  border-bottom-left-radius: 4px;
  background: var(--soft);
  color: var(--ink);
}

.chat-bubble-sender {
  margin-bottom: 2px;
  color: var(--deep-teal);
  font-size: 11px;
  font-weight: 800;
}

.chat-bubble-body {
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.chat-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
}

.chat-login-prompt {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.chat-login-prompt i {
  color: var(--deep-teal);
  font-size: 44px;
}

.mobile-nav {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 30;
  display: none;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid rgba(217, 233, 231, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.mobile-nav a,
.mobile-nav button {
  display: grid;
  min-height: 62px;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.mobile-nav i {
  color: var(--deep-teal);
  font-size: 19px;
}

/* Badge jumlah item keranjang pada ikon "Cart" di bottom-nav mobile —
   supaya pengguna tetap tahu isi keranjangnya tanpa harus buka offcanvas
   dulu (sebelumnya cuma ada di ikon keranjang header, yang tersembunyi
   di layar mobile). Disamakan (elemen data-cart-count) dengan badge di
   header supaya app.js meng-update keduanya sekaligus. */
.mobile-nav__icon-wrap {
  position: relative;
  display: inline-flex;
}

.mobile-nav__badge {
  position: absolute;
  top: -6px;
  right: -9px;
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 999px;
  background: var(--deep-teal);
  padding: 0 4px;
  color: var(--white);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.footer {
  flex-shrink: 0;
  margin-top: 28px;
  border-top: 1px solid var(--line);
  background: var(--green-darker);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 30px 0;
  color: rgba(255, 255, 255, 0.68);
}

.footer__inner div:first-child {
  display: grid;
  gap: 4px;
}

.footer strong {
  color: var(--white);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  font-weight: 700;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 980px) {
  .nav {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 0;
  }

  .nav-actions {
    justify-content: space-between;
  }

  .hero,
  .hero__banner,
  .catalog-layout {
    grid-template-columns: 1fr;
  }

  .hero__banner img {
    max-height: 260px;
  }

  .trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-strip,
  .category-grid,
  .seller-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sale-row,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .filter-panel {
    position: static;
  }
}

@media (max-width: 620px) {
  body {
    background:
      radial-gradient(120% 80% at 50% 0%, var(--brand-wash-3) 0%, var(--brand-wash-5) 58%), var(--soft);
    padding-bottom: 88px;
  }

  .page-shell {
    width: calc(100% - 24px);
  }

  .site-header {
    position: sticky;
    background: rgba(251, 253, 252, 0.96);
    box-shadow: 0 1px 0 rgba(217, 233, 231, 0.86);
  }

  .topbar {
    display: none;
  }

  .topbar__inner {
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
  }

  .nav {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    min-height: 0;
    padding: 10px 0 8px;
  }

  .brand {
    gap: 8px;
    min-width: 0;
  }

  .brand__mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .brand__text {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search {
    grid-column: 1 / -1;
    flex-direction: row;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(var(--shadow-rgb), 0.07);
  }

  .search input {
    min-height: 38px;
    padding: 9px 12px;
    font-size: 12.5px;
  }

  .search button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 0;
  }

  .search button i {
    font-size: 16px;
  }

  .nav-actions {
    justify-content: flex-end;
    gap: 7px;
  }

  .nav-actions .login-button,
  .nav-actions .primary-button {
    display: none;
  }

  .icon-button {
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .quick-links {
    width: min(100% - 24px, 420px);
    padding: 0 0 10px;
    gap: 7px;
    font-size: 11.5px;
  }

  .quick-links span {
    display: none;
  }

  .quick-links a {
    background: var(--white);
    padding: 6px 10px;
  }

  .hero {
    gap: 12px;
    padding-block: 12px 14px;
  }

  .hero__copy {
    padding: 22px 18px 18px;
  }

  .hero__banner {
    min-height: auto;
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .hero__banner::before {
    width: 170px;
    height: 170px;
  }

  .hero__banner::after {
    bottom: -26%;
    height: 42%;
  }

  h1 {
    margin-bottom: 10px;
    font-size: 27px;
    line-height: 1.12;
  }

  h2 {
    font-size: 20px;
    line-height: 1.25;
  }

  h3 {
    font-size: 13px;
  }

  .hero__copy p:not(.eyebrow) {
    font-size: 13px;
    line-height: 1.55;
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
  }

  .hero__actions .btn {
    min-height: 43px;
    border-radius: 14px;
    font-size: 13px;
  }

  .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 16px;
  }

  .hero-metrics div {
    border-radius: 14px;
    padding: 9px 7px;
  }

  .hero-metrics strong {
    font-size: 15px;
  }

  .hero-metrics span {
    font-size: 10px;
    line-height: 1.3;
  }

  .hero__banner img {
    justify-self: center;
    width: min(78%, 260px);
    max-height: 190px;
    padding: 0 12px 10px;
  }

  .hero__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hero__side article {
    min-height: 106px;
    border-radius: 16px;
    padding: 14px;
  }

  .hero__side span {
    font-size: 11px;
  }

  .hero__side strong {
    margin: 6px 0 2px;
    font-size: 18px;
  }

  .hero__side small {
    font-size: 11px;
  }

  .trust-strip {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }

  .trust-strip div {
    border-radius: 14px;
    padding: 12px 13px;
    font-size: 12px;
  }

  .service-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 10px;
  }

  .service-strip a {
    min-height: 96px;
    border-radius: 16px;
    padding: 10px 6px;
    font-size: 12px;
  }

  .service-strip small {
    font-size: 10.5px;
  }

  .service-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .promo-slide {
    min-height: 174px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 22px 34px;
  }

  .promo-carousel,
  .section {
    margin-bottom: 0;
  }

  .promo-carousel .carousel {
    border-radius: 18px;
  }

  .promo-slide h2 {
    font-size: 19px;
  }

  .promo-slide p {
    font-size: 12px;
    line-height: 1.45;
  }

  .promo-slide i {
    align-self: flex-end;
    margin-top: -18px;
    font-size: 52px;
  }

  .carousel-indicators {
    margin-bottom: 6px;
  }

  .category-grid,
  .sale-row,
  .product-grid,
  .seller-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .category-card {
    flex: 0 0 76px;
    font-size: 11.5px;
  }

  .category-card img {
    width: 44px;
    height: 44px;
  }

  .category-icon {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  .category-icon .category-emoji {
    font-size: 22px;
  }

  .section {
    padding: 20px 0;
  }

  .section--highlight {
    margin-top: 8px;
    padding: 18px 0;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
  }

  .section-heading > a {
    font-size: 12px;
  }

  .section-subtitle {
    font-size: 12px;
    line-height: 1.45;
  }

  .countdown {
    width: 100%;
    border-radius: 14px;
    padding: 10px 12px;
    text-align: center;
  }

  .sale-card {
    border-radius: 16px;
    padding: 11px;
  }

  .sale-card img {
    height: 108px;
    border-radius: 13px;
  }

  .product-card h3 {
    min-height: 0;
    margin: 6px 0 4px;
    font-size: 13px;
    line-height: 1.3;
  }

  .sale-card h3 {
    min-height: 38px;
    margin: 9px 0 7px;
    line-height: 1.35;
  }

  .sale-card p,
  .price {
    font-size: 14px;
  }

  .sale-meta {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  .sale-meta .btn {
    min-height: 34px;
  }

  .seller-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    border-radius: 16px;
    padding: 14px;
  }

  .seller-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 12px;
  }

  .seller-card h3 {
    font-size: 14px;
  }

  .seller-card p,
  .seller-card span {
    font-size: 11px;
  }

  .catalog-layout {
    gap: 12px;
  }

  .filter-panel {
    border-radius: 16px;
    padding: 14px;
  }

  .filter-panel label {
    margin-bottom: 11px;
    font-size: 12px;
  }

  .filter-title {
    margin-bottom: 10px;
  }

  .filter-title h3 {
    font-size: 16px;
  }

  .filter-reset,
  .filter-panel select {
    min-height: 40px;
    border-radius: 12px;
    font-size: 12px;
  }

  .product-card {
    border-radius: 16px;
  }

  .product-card img {
    padding: 10px;
  }

  .product-card__body {
    min-height: 0;
    padding: 10px;
  }

  .product-card__top,
  .product-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-card__top {
    min-height: 0;
    gap: 4px;
  }

  .product-badge {
    padding: 4px 8px;
    font-size: 10px;
  }

  .product-promo,
  .product-meta {
    width: 100%;
    font-size: 10.5px;
    line-height: 1.35;
  }

  .product-meta span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .price-wrap {
    gap: 5px;
    margin-bottom: 5px;
  }

  .price-wrap span {
    font-size: 10.5px;
  }

  .product-card__actions {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-top: 8px;
  }

  .outline-button,
  .cart-button {
    min-height: 31px;
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: auto;
    border-radius: 14px;
  }

  .tab {
    min-height: 35px;
    padding: 0 8px;
    font-size: 12px;
  }

  .product-tools {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: stretch;
  }

  .product-tools .tabs {
    grid-column: 1 / -1;
  }

  .sort-button {
    min-height: 36px;
    border-radius: 12px;
    font-size: 12px;
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 0;
    font-size: 12px;
  }

  .product-detail {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }

  .product-detail__image {
    min-height: 220px;
    border-radius: 16px;
  }

  .product-detail__content h2 {
    padding-right: 28px;
  }

  .detail-copy {
    font-size: 13px;
    line-height: 1.6;
  }

  .detail-specs {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cart-item {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    border-radius: 14px;
  }

  .cart-item img {
    width: 58px;
    height: 58px;
  }

  .mobile-nav {
    display: grid;
    right: 12px;
    bottom: 10px;
    left: 12px;
    max-width: 420px;
    margin-inline: auto;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 38px rgba(13, 40, 30, 0.18);
  }

  .mobile-nav a,
  .mobile-nav button {
    min-height: 60px;
    font-size: 10.5px;
    line-height: 1.2;
  }

  .mobile-nav a:first-child,
  .mobile-nav a:hover,
  .mobile-nav button:hover {
    color: var(--deep-teal);
  }
}

@media (max-width: 380px) {
  .page-shell,
  .quick-links {
    width: calc(100% - 18px);
  }

  h1 {
    font-size: 24px;
  }

  .hero__copy {
    padding: 20px 15px 16px;
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .hero__side,
  .category-grid,
  .sale-row,
  .product-grid,
  .seller-grid {
    grid-template-columns: 1fr;
  }

  .category-card {
    flex: 0 0 72px;
  }

  .service-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-card__body {
    min-height: auto;
  }

  .product-card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* Akun & transaksi: login, register, cart, checkout, orders          */
/* Dibuat memakai token warna & pola kartu (.filter-panel/.cart-item)  */
/* yang sudah ada, bukan sistem visual baru.                          */
/* ------------------------------------------------------------------ */

.nav-hello {
  margin-right: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

.auth-shell {
  display: grid;
  justify-content: center;
  padding: 32px 0 48px;
}

.auth-card {
  width: min(100%, 420px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  padding: 28px 24px;
}

.auth-card h1 {
  margin-bottom: 4px;
  font-size: 22px;
  font-weight: 800;
}

.auth-card .section-subtitle {
  display: block;
  margin-bottom: 20px;
}

.auth-card .form-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.auth-card .form-control {
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 10px 12px;
}

.auth-card .form-control:focus {
  border-color: var(--deep-teal);
  box-shadow: 0 0 0 0.2rem rgba(var(--deep-teal-rgb), 0.15);
}

.auth-card .btn {
  border-radius: 10px;
  font-weight: 700;
  padding: 10px 16px;
}

.auth-switch {
  margin-top: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

.auth-switch a {
  color: var(--deep-teal);
  font-weight: 700;
}

.alert-inline {
  margin-bottom: 16px;
  border-radius: 10px;
  border: 1px solid rgba(216, 95, 115, 0.35);
  background: rgba(216, 95, 115, 0.1);
  color: #9d3247;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  overflow-wrap: break-word;
}

.summary-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  padding: 18px;
  overflow-wrap: break-word;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
}

.summary-line--total {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--deep-teal);
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
}

/* Kolom kanan checkout: ringkasan + kabar promo di bawahnya, sebagai SATU
   anak grid. Tanpa pembungkus ini keduanya jadi dua kolom terpisah dan
   tata letak dua-kolomnya pecah. */
.checkout-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-method-option {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--soft);
}

.payment-method-option .form-check-label {
  font-weight: 600;
  color: var(--ink);
}

.payment-method-option .form-check-label i {
  color: var(--green-dark);
  margin-right: 4px;
}

.payment-method-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

/* Grup metode bayar per type (Virtual Account / E-Wallet) — pola sama dengan
   grup Transfer Bank: header + garis pemisah + item radio dalam kotak putih. */
.payment-method-group .payment-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink);
}

.payment-method-group .payment-group-header i {
  color: var(--green-dark);
}

.payment-group-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Item radio di dalam grup — pakai flex agar radio & label sejajar dengan
   jarak tetap. Menetralkan float/margin negatif bawaan Bootstrap .form-check
   yang bikin radio "mengambang" ke tepi kotak & menempel border. */
.payment-group-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--line);
}

.payment-group-item .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
}

.payment-group-item .form-check-label {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

.bank-account-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bank-account {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--line);
}

.bank-account__name {
  font-weight: 700;
  color: var(--deep-teal);
  min-width: 90px;
}

.bank-account__number {
  font-weight: 600;
  letter-spacing: 0.03em;
}

.bank-account__holder {
  color: var(--muted);
  font-size: 13px;
}

.qris-image {
  max-width: 220px;
  width: 100%;
  margin-inline: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 8px;
}

/* -------------------------------------------------- alamat pengiriman (checkout) */
.address-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--soft);
  font-size: 14px;
}

.address-card strong {
  color: var(--deep-teal);
}

.address-card__phone {
  color: var(--muted);
  font-size: 13px;
  margin-left: 4px;
}

.address-card--empty {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13.5px;
}

.address-option-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.address-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.address-option:hover {
  border-color: var(--green-dark);
}

.address-option.is-selected {
  border-color: var(--green-dark);
  background: var(--soft);
}

.address-option input[type="radio"] {
  margin-top: 4px;
  flex-shrink: 0;
}

.address-option__body {
  font-size: 13.5px;
}

.address-option__body strong {
  color: var(--deep-teal);
}

.address-option__body p {
  color: var(--muted);
}

.address-option__tags {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 2px;
}

.address-option__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--green-dark);
  background: rgba(45, 138, 96, 0.12);
  border-radius: 999px;
  padding: 2px 8px;
}

.address-option__badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  background: var(--green-dark);
  border-radius: 999px;
  padding: 2px 8px;
}

.address-add-form {
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.order-list {
  display: grid;
  gap: 12px;
}

.order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  padding: 14px 16px;
}

.order-row__image {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--soft);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.order-row__info {
  flex: 1 1 160px;
  min-width: 0;
}

.order-row__info strong,
.order-row__info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-row strong {
  display: block;
  font-size: 14px;
}

.order-row span {
  color: var(--muted);
  font-size: 13px;
}

.order-row__product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.order-row__thumb {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--soft);
}

.order-row__more {
  color: var(--muted);
  font-weight: 500;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--deep-teal);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}

.order-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.order-items-table th,
.order-items-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.order-items-table th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.empty-state {
  display: grid;
  min-height: 200px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.empty-state i {
  color: var(--deep-teal);
  font-size: 42px;
}

/* ---- Filter tab daftar pesanan (/orders) ---- */
.order-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.order-tab {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--white);
  text-decoration: none;
}

.order-tab--active {
  background: var(--deep-teal);
  border-color: var(--deep-teal);
  color: #fff;
}

/* Badge jumlah pesanan pada tiap tab — warna per status. */
.order-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  background: #e5e7eb;
  color: #374151;
}

/* Warna per tab (tetap tampil walau tab sedang aktif). */
.order-tab-count--pending_payment { background: #fde68a; color: #92610a; } /* kuning */
.order-tab-count--processing      { background: #fed7aa; color: #b8460a; } /* jingga */
.order-tab-count--shipped         { background: #bfdbfe; color: #1d4ed8; } /* biru   */
.order-tab-count--delivered       { background: #bbf7d0; color: #15803d; } /* hijau  */
.order-tab-count--cancelled       { background: #fecaca; color: #b91c1c; } /* merah  */

/* ---- Badge status terminal/peringatan (halaman daftar & detail pesanan) ---- */
.status-pill--danger {
  background: rgba(216, 95, 115, 0.15);
  color: var(--red);
}

.status-pill--warning {
  background: rgba(216, 165, 95, 0.18);
  color: #a3711f;
}

/* ---- Stepper status pesanan (halaman detail pesanan) ---- */
.order-stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.order-stepper__step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 110px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.order-stepper__step:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--line);
  margin-left: 8px;
}

.order-stepper__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--line);
  flex-shrink: 0;
}

.order-stepper__step--done .order-stepper__dot {
  background: var(--deep-teal);
}

.order-stepper__step--done {
  color: var(--deep-teal);
}

.order-stepper__step--current .order-stepper__label {
  text-decoration: underline;
}

.order-status-terminal {
  border: 1px solid rgba(216, 95, 115, 0.35);
  border-radius: 16px;
  background: rgba(216, 95, 115, 0.08);
  padding: 16px;
  margin-bottom: 20px;
}

.order-status-terminal__reason {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

/* ---- Panel aksi siklus-hidup pesanan (halaman detail pesanan) ---- */
.order-actions__note {
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 12px;
}

.order-actions__cancel {
  margin-top: 12px;
}

.order-actions__cancel summary {
  cursor: pointer;
  color: var(--red);
  font-weight: 600;
  font-size: 13.5px;
}

.order-support {
  margin-top: 16px;
}

.complaint-list {
  display: grid;
  gap: 10px;
}

.complaint-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13.5px;
}

.complaint-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.complaint-item__resolution {
  margin: 6px 0 0;
  color: var(--deep-teal);
}

/* ===================================================================
   Animasi "tambah ke keranjang" — foto produk terbang ke ikon keranjang
   + ikon keranjang berdenyut saat mendarat + toast konfirmasi. Dipicu
   dari app.js (addToCart), meniru animasi yang sama di hub-pos.
   =================================================================== */
.fly-to-cart {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--white);
  background-position: center;
  background-size: cover;
  box-shadow: var(--shadow);
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes cartIconBump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.28);
  }
  70% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
  }
}

.cart-icon-bump {
  animation: cartIconBump 420ms ease;
}

.cart-toast {
  position: fixed;
  z-index: 2000;
  bottom: 24px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(90vw, 360px);
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow);
  padding: 10px 18px 10px 12px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  pointer-events: none;
}

.cart-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.cart-toast i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 14px;
  flex: none;
}

.cart-toast span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .cart-toast {
    bottom: 96px;
  }
}

/* ============================================================
   Halaman "Semua Promo" (/promo) — kartu promo bergambar
   ============================================================ */
/* Kartu promo VERTIKAL: banner di atas (rasio banner) → info → S&K
   (scroll bila panjang) → tombol Belanja, semua dalam satu kartu. */
.promo-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.promo-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.promo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
/* Banner full-width di atas kartu (kartu 1 baris/melebar). Tinggi DISAMAKAN
   dengan banner beranda (.promo-slide = 180px) supaya konsisten. */
.promo-card__media {
  display: block;
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
}
.promo-card__media--fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  background: linear-gradient(135deg, var(--deep-teal), var(--green));
}
.promo-card__media--fallback .bi {
  font-size: 34px;
  opacity: 0.9;
}
.promo-card__deal {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.promo-card__fallback-title {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.95;
}
.promo-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 18px;
  flex: 1;
  min-width: 0;
}
.promo-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.promo-card__title a {
  color: var(--ink);
  text-decoration: none;
}
.promo-card__title a:hover {
  text-decoration: underline;
}
.promo-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.promo-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 700;
  font-size: 12.5px;
  padding: 3px 10px;
  border-radius: 999px;
}
.promo-card__min,
.promo-card__period {
  font-size: 12.5px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* S&K: kotak abu; kalau isinya panjang, area ini yang scroll (bukan kartunya). */
.promo-card__terms {
  padding: 12px 14px;
  background: var(--soft);
  border-radius: 12px;
  max-height: 132px;
  overflow-y: auto;
}
.promo-card__terms strong {
  display: block;
  margin-bottom: 2px;
}
.promo-card__terms p {
  margin: 0;
  color: var(--ink-soft);
  white-space: pre-line;
}
/* Baris tombol di bawah banner: "Syarat & Ketentuan" + "Belanja Sekarang". */
.promo-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 18px 18px;
}
.promo-card__actions .btn {
  flex: 1 1 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* Teks S&K di dalam modal — pertahankan baris baris baru, body modal yg scroll. */
.promo-terms-text {
  margin: 0;
  color: var(--ink-soft);
  white-space: pre-line;
}

/* Isi kartu di halaman "Semua Promo": badge diskon, deskripsi, fakta (tanggal/
   min belanja). S&K memakai .promo-card__terms (scroll bila panjang). */
.promo-card__deal-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
}
.promo-card__desc {
  margin: 0;
  color: var(--muted);
}
.promo-card__facts {
  list-style: none;
  padding: 0;
  margin: 2px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.promo-card__facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
}
.promo-card__facts .bi {
  color: var(--deep-teal);
}

/* Baris diskon promo di ringkasan checkout — hijau, menandakan potongan. */
.summary-line--discount {
  color: var(--green-dark);
  font-weight: 600;
}

/* Daftar pilihan promo (modal "Pilih Promo" saat produk tercakup >1 promo). */
.promo-choose-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.promo-choose-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.promo-choose-item:hover {
  background: var(--soft);
  border-color: var(--deep-teal);
}
.promo-choose-item__title {
  flex: 1;
  font-weight: 600;
}
.promo-choose-item__label {
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 700;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
}
.promo-choose-item .bi {
  color: var(--muted);
}

/* Kartu Flash Sale/promo kini punya 2 tombol (Detail + Tambah) berdampingan. */
.product-card__actions--flash {
  display: flex;
  gap: 8px;
}
.product-card__actions--flash .btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* ============================================================
   Landing detail promo (/promo/:code)
   ============================================================ */
.promo-detail {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.promo-detail__banner {
  height: 240px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.promo-detail__info {
  padding: 22px 24px 24px;
}
.promo-detail__deal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
}
.promo-detail__title {
  margin: 12px 0 4px;
  font-size: 24px;
  line-height: 1.25;
}
.promo-detail__facts {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.promo-detail__facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
}
.promo-detail__facts .bi {
  color: var(--deep-teal);
}
.promo-detail__terms {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--soft);
  border-radius: 12px;
}
.promo-detail__terms p {
  margin: 4px 0 0;
  color: var(--ink-soft);
}

@media (max-width: 620px) {
  .promo-detail__banner {
    height: 170px;
  }
}

/* ==========================================================================
   SPANDUK KEADAAN TOKO (layouts/main.html)
   Tampil di bawah header pada SEMUA halaman saat toko tutup atau pengantaran
   hari ini sudah lewat batas. Lihat handlers.storeNotice.
   ========================================================================== */
.store-notice {
  background: #fff7e6;
  border-bottom: 1px solid #ffd591;
  color: #7a4b00;
}

/* Kritis = benar-benar tidak menerima pesanan. Warnanya dibedakan karena
   "diantar besok" adalah keterangan, sedangkan "tidak bisa memesan" adalah
   halangan — dan menyamakan keduanya membuat yang satu ikut terabaikan. */
.store-notice--critical {
  background: #fff1f0;
  border-bottom-color: #ffa39e;
  color: #a8071a;
}

.store-notice__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.store-notice__inner i {
  flex-shrink: 0;
  margin-top: 2px;
}