/* =====================================================================
   MASUK PTN — Redesign v3 · Product catalog page (produk.css)
   ---------------------------------------------------------------------
   Page-specific polish only (base.css owns tokens + shared components).
   v3: ZERO gradients · flat diverse tints · proportional · glass accents.

   Scheme:
   · Category sections become full "bands" with alternating flat tints —
     blue-50 → amber-50 → violet-50 — each with a matching accent for the
     heading underline, "Lihat Semua" pill and card hover border.
   · Discount = coral (base token), shown as a GLASS chip overlaying the
     product image (glass spot #2; breadcrumb pill glass is spot #1).
   · BELI stays flat amber. Final price stays brand blue.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  Page header rhythm (glass breadcrumb pill comes from base.css)     */
/* ------------------------------------------------------------------ */
.page-header nav p {
  max-width: 40rem;
  margin: .9rem auto 0;
}

/* ------------------------------------------------------------------ */
/*  Category bands — flat alternating tints (blue / amber / violet)    */
/*  Each category block is a sibling .container-xxl after .page-header */
/* ------------------------------------------------------------------ */
.page-header ~ .container-xxl.py-5 {
  /* band accent variables — blue by default (section 1) */
  --band-tint:        var(--blue-50);
  --band-line:        var(--blue-100);
  --band-accent:      var(--blue-600);
  --band-underline:   var(--blue);
  --band-hover-bg:    var(--blue-600);
  --band-hover-ink:   #fff;
  --band-card-border: var(--blue-200);

  width: min(100% - 1.5rem, 1320px);
  margin: 0 auto 1.25rem;
  padding-top: 2.75rem !important;
  padding-bottom: 3rem !important;
  background: var(--band-tint);
  border: 1px solid var(--band-line);
  border-radius: var(--r-xl);
}

/* Section 2 — amber band */
.page-header + .container-xxl.py-5 + .container-xxl.py-5 {
  --band-tint:        var(--amber-50);
  --band-line:        var(--amber-100);
  --band-accent:      var(--amber-600);
  --band-underline:   var(--amber-600);
  --band-hover-bg:    var(--amber);
  --band-hover-ink:   var(--navy);
  --band-card-border: var(--amber-100);
}

/* Section 3 — violet band */
.page-header + .container-xxl.py-5 + .container-xxl.py-5 + .container-xxl.py-5 {
  --band-tint:        var(--violet-50);
  --band-line:        var(--violet-100);
  --band-accent:      var(--violet-600);
  --band-underline:   var(--violet);
  --band-hover-bg:    var(--violet-600);
  --band-hover-ink:   #fff;
  --band-card-border: var(--violet-100);
}

/* ------------------------------------------------------------------ */
/*  Section heading + "Lihat Semua" pill — takes the band accent       */
/* ------------------------------------------------------------------ */
.container-xxl .text-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-header ~ .container-xxl.py-5 .text-center > h2 { margin-bottom: .25rem; }
.page-header ~ .container-xxl.py-5 .text-center > h2::after {
  background: var(--band-underline);
}

.page-header ~ .container-xxl.py-5 .text-center > h2 + a {
  color: var(--band-accent);
  background: var(--surface);
  border-color: var(--band-line);
  box-shadow: var(--shadow-xs);
}
.page-header ~ .container-xxl.py-5 .text-center > h2 + a:hover {
  background: var(--band-hover-bg);
  border-color: var(--band-hover-bg);
  color: var(--band-hover-ink);
  box-shadow: var(--shadow-sm);
}

/* Forward chevron cue on the pill (decorative, no new copy) */
.text-center > h2 + a::after {
  content: "\f105"; /* fa angle-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: var(--fs-xs);
  transition: transform .35s var(--ease);
}
.text-center > h2 + a:hover::after { transform: translateX(3px); }

/* The source places <br><br> after the title — trim their impact */
.container-xxl.py-5 .text-center + br,
.container-xxl.py-5 .text-center + br + br { line-height: .5; }

/* ------------------------------------------------------------------ */
/*  Product cards (.list_produk) — core styling in base.css            */
/* ------------------------------------------------------------------ */

/* Equal-height cards across the row */
.row.g-4 > [class*="col-"] { display: flex; }
.row.g-4 > [class*="col-"] > .list_produk { width: 100%; }

.list_produk { position: relative; }

/* Card hover border echoes its band accent */
.page-header ~ .container-xxl.py-5 .list_produk:hover {
  border-color: var(--band-card-border);
}

/* ------------------------------------------------------------------ */
/*  Discount — GLASS chip floating over the product image              */
/*  Source: .div_btn .harga .diskon > h6.has_diskon + h3[harga_dapat_  */
/*  diskon]; repositioned over .div_img purely via CSS.                */
/* ------------------------------------------------------------------ */
.list_produk .div_btn .harga .diskon {
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .26rem .7rem .26rem .3rem;
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}

/* Percent badge — coral = discount/urgency (-600 shade for AA on white text) */
.list_produk .div_btn .harga .diskon h6.has_diskon,
.list_produk .div_btn .harga .diskon .has_diskon {
  margin: 0;
  background: var(--coral-600);
  color: #fff;
  padding: .24rem .6rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: none;
  line-height: 1.2;
}

/* Struck-through original price, readable on glass */
.list_produk .div_btn .harga .diskon h3,
.list_produk .div_btn .harga .diskon h3[harga_dapat_diskon] {
  margin: 0;
  color: rgba(255, 255, 255, .88);
  text-decoration: line-through;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* Final price — brand blue, proportional */
.list_produk .div_btn { align-items: center; }
.list_produk .div_btn .harga h5 {
  margin: 0;
  color: var(--blue-700);
  font-size: var(--fs-lg);
  font-weight: 800;
}

/* ------------------------------------------------------------------ */
/*  BELI — flat amber CTA (source markup says btn-primary)             */
/* ------------------------------------------------------------------ */
.list_produk .div_btn .beli a { display: inline-block; }
.list_produk .div_btn .beli .btn,
.list_produk .div_btn .beli button.btn-primary {
  background: var(--amber);
  border: none;
  outline: none;
  color: var(--navy);
  font-weight: 800;
  font-size: var(--fs-sm);
  padding: .5rem 1.4rem;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background-color .25s var(--ease);
}
.list_produk .div_btn .beli .btn:hover,
.list_produk .div_btn .beli button.btn-primary:hover {
  background: var(--amber-600);
  color: var(--navy-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

/* ------------------------------------------------------------------ */
/*  Responsive niceties                                                */
/* ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .list_produk .div_img { height: 200px; }
}
@media (max-width: 575.98px) {
  .page-header ~ .container-xxl.py-5 {
    width: calc(100% - .9rem);
    padding-top: 2.2rem !important;
    padding-bottom: 2.4rem !important;
    border-radius: var(--r-lg);
  }
  .list_produk .div_btn .harga h5 { font-size: var(--fs-md); }
}