.price-page { background: var(--sand); }

.price-hero { padding-block: 6rem 3rem; background: var(--sand); }
.price-hero__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(26rem, 1.18fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.price-hero__copy .eyebrow { color: var(--brand); }
.price-hero__copy > p:last-of-type { max-width: 38rem; margin: 1.2rem 0 0; color: var(--ink-soft); line-height: 1.6; }
.price-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.8rem; }
.price-hero__actions .textlink { margin: 0; }
.price-hero__visual { position: relative; margin: 0; }
.price-hero__visual::before { content: ""; position: absolute; z-index: 0; inset: 8% -5% -7% 12%; border-radius: 1rem; background: #d9eafa; }
.price-hero__visual img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; border-radius: 1rem; object-fit: cover; }

.price-browser { padding-block: clamp(4.5rem, 9vw, 8rem); background: var(--paper); }
.price-browser__head { max-width: 48rem; }
.price-browser__head > p { max-width: 62ch; margin: 1.1rem 0 0; color: var(--ink-soft); }
.price-tools { position: sticky; z-index: 20; top: 4.7rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin: 2.5rem calc(-1 * var(--gutter)) 0; padding: 1rem var(--gutter); border-block: 1px solid rgb(226 221 212 / .82); background: rgb(255 255 255 / .9); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.price-tools .catalogue-search { flex: 0 0 min(19rem, 30vw); }
.price-status { margin: 1.4rem 0 0; color: var(--ink-soft); font-size: .78rem; }
.price-status.is-error { color: #9d2929; }
.price-groups { display: grid; gap: clamp(3.5rem, 8vw, 6rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.price-group { display: grid; grid-template-columns: minmax(9rem, .27fr) minmax(0, .73fr); gap: clamp(1.5rem, 5vw, 5rem); }
.price-group__head { align-self: start; }
.price-group__head h3 { margin: 0; font: 400 clamp(2.2rem, 4vw, 3.6rem)/.95 var(--serif); }
.price-group__head p { margin: .7rem 0 0; color: var(--ink-soft); font-size: .76rem; }
.price-group__items { display: grid; margin: 0; padding: 0; list-style: none; }
.price-item { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) minmax(9rem, auto) auto; gap: 1.2rem; align-items: center; min-width: 0; padding-block: 1.15rem; }
.price-item + .price-item { box-shadow: inset 0 1px var(--line); }
.price-item__visual { display: block; overflow: hidden; border-radius: .65rem; background: #eef1f5; }
.price-item__visual img { width: 4.75rem; height: 4.75rem; object-fit: contain; }
.price-item__body { min-width: 0; }
.price-item__type { margin: 0 0 .2rem; color: var(--brand); font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.price-item h4 { margin: 0; font: 400 clamp(1.25rem, 2vw, 1.55rem)/1.05 var(--serif); }
.price-item h4 a { color: var(--ink); text-decoration: none; }
.price-item h4 a:hover { color: var(--brand); }
.price-item__summary { margin: .35rem 0 0; color: var(--ink-soft); font-size: .74rem; line-height: 1.45; }
.price-item__variants { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin: .45rem 0 0; padding: 0; color: var(--ink-soft); font-size: .68rem; list-style: none; }
.price-item__variants li { position: relative; }
.price-item__variants li + li::before { content: "/"; position: absolute; left: -.52rem; color: #a8abb0; }
.price-item__price { display: grid; gap: .18rem; text-align: right; white-space: nowrap; }
.price-item__price strong { font: 400 clamp(1.2rem, 2vw, 1.55rem)/1 var(--serif); }
.price-item__price small { color: var(--ink-soft); font-size: .62rem; }
.price-item__action { min-width: 5rem; padding: .65rem .85rem; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: .7rem; font-weight: 650; text-align: center; text-decoration: none; transition: transform 220ms var(--ease), background-color 180ms ease, color 180ms ease; }
.price-item__action:hover { background: var(--ink); color: #fff; }
.price-item__action:active { transform: scale(.96); transition-duration: 70ms; }
.price-empty { max-width: 34rem; padding-block: 4rem; }
.price-empty h3 { margin: 0; font: 400 2.3rem/1 var(--serif); }
.price-empty p { margin: .8rem 0 0; color: var(--ink-soft); }

.price-skeleton { display: grid; gap: .8rem; grid-column: 1 / -1; }
.price-skeleton span { height: 6.5rem; border-radius: .75rem; background: linear-gradient(100deg, #eef0f3 30%, #f8f9fa 48%, #eef0f3 66%); background-size: 250% 100%; animation: price-shimmer 1.4s ease-in-out infinite; }
@keyframes price-shimmer { to { background-position: -160% 0; } }

.price-help { padding-block: clamp(4rem, 8vw, 7rem); background: #edf5fb; }
.price-help__inner { display: flex; align-items: end; justify-content: space-between; gap: 3rem; }
.price-help__inner > div { max-width: 47rem; }
.price-help p { max-width: 58ch; margin: 1rem 0 0; color: var(--ink-soft); }
.price-help .pill { flex: 0 0 auto; }

@media (max-width: 900px) {
  .price-hero__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .price-tools { align-items: stretch; flex-direction: column; gap: .8rem; }
  .price-tools .catalogue-search { flex-basis: auto; width: min(100%, 28rem); }
  .price-group { grid-template-columns: 1fr; gap: 1rem; }
  .price-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .price-item { grid-template-columns: 4.25rem minmax(0, 1fr) auto; }
  .price-item__visual img { width: 4.25rem; height: 4.25rem; }
  .price-item__price { grid-column: 2; text-align: left; }
  .price-item__action { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 640px) {
  .price-page .shop-bar__order { display: none; }
  .price-hero { padding-block: 5.4rem 2.5rem; }
  .price-hero__grid { grid-template-columns: 1fr; }
  .price-hero__copy { padding-top: 1.5rem; }
  .price-hero__copy .display { font-size: clamp(3.2rem, 15vw, 5rem); }
  .price-hero__visual::before { display: none; }
  .price-tools { top: 4.2rem; }
  .price-item { grid-template-columns: 3.75rem minmax(0, 1fr); gap: .8rem; }
  .price-item__visual img { width: 3.75rem; height: 3.75rem; }
  .price-item__price { grid-column: 2; }
  .price-item__action { grid-column: 2; grid-row: auto; width: fit-content; }
  .price-help__inner { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .price-skeleton span { animation: none; }
  .price-item__action { transition: none; }
}

/* Tabel harga panduan yang bisa dirayapi. Daftar interaktif di atasnya dirender
   pricelist.js; tanpa blok ini tidak ada satu pun harga yang terbaca klien tanpa JS. */
.price-index { margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.price-index__title { margin: 0; font: 400 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--serif); color: var(--ink); }
.price-index__note { max-width: 58ch; margin: .8rem 0 0; color: var(--ink-soft); }
.price-index__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(1.8rem, 3.5vw, 3rem); margin-top: clamp(2rem, 4vw, 3rem); }
.price-index__group h3 { margin: 0 0 .9rem; font: 600 .82rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.price-index__table { width: 100%; border-collapse: collapse; }
.price-index__table th, .price-index__table td { padding: .6rem 0; font-weight: 400; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.price-index__table tr:first-child th, .price-index__table tr:first-child td { border-top: 0; }
.price-index__table td { text-align: right; white-space: nowrap; color: var(--ink); }
.price-index__table a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.price-index__table a:hover, .price-index__table a:focus-visible { color: var(--brand); border-bottom-color: currentColor; }