/*
 * woo.css — penyelarasan tampilan WooCommerce dengan bahasa desain theme.
 *
 * Dimuat setelah stylesheet inti WooCommerce, jadi selektor sederhana sudah
 * cukup untuk menang; `!important` hanya dipakai bila WooCommerce menulis gaya
 * inline atau memakai selektor id.
 */

/* ══ Kerangka halaman toko ════════════════════════════════════════════════ */
.shop-main {
  padding-block: var(--s-8) var(--s-16);
}

/* Remah roti di halaman produk — latarnya terang, jadi tidak memakai gaya
   khusus milik pita gelap. */
.shop-crumbs {
  margin-bottom: var(--s-6);
}

.woocommerce-products-header {
  margin-bottom: var(--s-6);
}

.woocommerce-products-header__title,
.shop-main .page-title {
  font-size: var(--t-3xl);
  margin-bottom: 0.5rem;
}

.term-description,
.woocommerce-product-details__short-description {
  color: var(--c-ink-soft);
}

/* ── Bilah urut & jumlah hasil ───────────────────────────────────────── */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.85rem 1.15rem;
  margin-bottom: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.woocommerce-result-count {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.woocommerce-ordering {
  margin: 0;
}

.woocommerce-ordering select {
  height: 42px;
  padding-block: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: var(--r-full);
}

/* ── Grid produk ─────────────────────────────────────────────────────── */
ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * WAJIB dengan prefiks .woocommerce/.woocommerce-page: clearfix warisan di
 * woocommerce.css ditulis sebagai `.woocommerce ul.products::before` — tanpa
 * prefiks yang sama, aturan tema kalah spesifisitas, pseudo-element `display:
 * table` itu hidup lagi dan menjadi SEL KOSONG pertama di grid.
 */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none;
}

ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

ul.products li.product .pcard {
  height: 100%;
}

@media (max-width: 560px) {
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }
}

/* ── Paginasi ────────────────────────────────────────────────────────── */
.woocommerce-pagination {
  margin-top: var(--s-10);
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  border: 0;
  margin: 0;
  padding: 0;
}

.woocommerce-pagination ul.page-numbers li {
  border: 0;
  margin: 0;
}

.page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 0.75rem;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--c-ink);
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.page-numbers:hover {
  border-color: var(--c-primary);
  background: var(--c-primary-tint);
}

.page-numbers.current {
  color: var(--c-ink-deep);
  background: var(--c-primary);
  border-color: var(--c-primary);
}

/* ══ Halaman produk tunggal ═══════════════════════════════════════════════ */
.single-product div.product {
  display: grid;
  /* Galeri sedikit lebih ramping: foto produk sparepart umumnya persegi,
     kolom info butuh ruang lebih untuk judul panjang + tombol beli. */
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: clamp(1.75rem, 3.2vw, 3rem);
}

/*
 * Galeri IKUT MENGGULIR bersama halaman — jangan dibuat sticky.
 *
 * Percobaan sebelumnya memakai `position: sticky` supaya foto tetap terlihat
 * saat pembeli membaca. Hasilnya kacau: galeri lebih tinggi daripada kolom
 * ringkasannya, jadi ia menempel melewati batas barisnya sendiri lalu menimpa
 * baris tab dan teks deskripsi di bawahnya.
 *
 * Selektornya tetap dibuat sepanjang milik WooCommerce
 * (`.woocommerce div.product div.images.woocommerce-product-gallery`, 0,4,2)
 * supaya padding dan bingkainya menang tanpa perlu !important.
 */
.woocommerce div.product div.images.woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: var(--s-4);
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
}

/*
 * Galeri dibingkai satu kartu: foto utama di atas, deretan thumbnail di
 * bawahnya, semuanya di dalam satu kotak bergaris. Lencana, panah geser, dan
 * tombol perbesar mengambang di atas foto.
 */
.woocommerce-product-gallery__wrapper {
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface-2);
}

.woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
}

/* ── Lencana & tombol mengambang di atas foto ────────────────────────── */
.product-badge {
  position: absolute;
  top: calc(var(--s-4) + 0.6rem);
  left: calc(var(--s-4) + 0.6rem);
  z-index: 3;
  padding: 0.3rem 0.85rem;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-ink-deep);
  background: var(--c-primary);
  border-radius: var(--r-full);
  box-shadow: 0 3px 10px rgba(244, 183, 17, 0.35);
}

/*
 * Tombol perbesar bawaan digambar WooCommerce sebagai kaca pembesar lewat
 * ::before dan ::after, dengan selektor sepanjang
 * `.woocommerce div.product div.images .woocommerce-product-gallery__trigger`
 * (0,3,2). Selektor pendek tidak akan menang, jadi panjangnya disamakan lalu
 * unggul karena woo.css dimuat belakangan. Gambarnya dimatikan dan diganti
 * ikon perbesar bergaya sama dengan ikon lain di situs.
 */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  top: calc(var(--s-4) + 0.5rem);
  right: calc(var(--s-4) + 0.5rem);
  z-index: 3;
  width: 38px;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.92);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2317171b" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  box-shadow: var(--sh-sm);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
  display: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover {
  background-color: #fff;
  transform: scale(1.06);
}

/* ── Panah geser (muncul kalau produk punya lebih dari satu foto) ─────── */
.woocommerce-product-gallery .flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-product-gallery .flex-direction-nav a {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  overflow: hidden;
  text-indent: -999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--c-border);
  border-radius: 50%;
  box-shadow: var(--sh-sm);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.single-product div.product .woocommerce-product-gallery:hover .flex-direction-nav a,
.woocommerce-product-gallery .flex-direction-nav a:focus-visible {
  opacity: 1;
}

.woocommerce-product-gallery .flex-direction-nav a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--c-ink-deep);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>')
    center / 16px 16px no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>')
    center / 16px 16px no-repeat;
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev {
  left: 0.75rem;
}

.woocommerce-product-gallery .flex-direction-nav .flex-next {
  right: 0.75rem;
  transform: rotate(180deg);
}

/* ── Deretan thumbnail ───────────────────────────────────────────────── */
.flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.6rem;
  margin: 0.75rem 0 0 !important;
  padding: 0;
}

.flex-control-thumbs li {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

.flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  padding: 0.35rem;
  object-fit: contain;
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  opacity: 1;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.flex-control-thumbs img:hover {
  border-color: var(--c-primary-soft);
}

.flex-control-thumbs img.flex-active {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 1px var(--c-primary);
}

.single-product div.product .summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.single-product .product_title {
  font-size: var(--t-2xl);
  margin-bottom: 0.6rem;
}

/* Harga di kiri, penanda stok di kanan pada satu baris. */
.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: var(--s-4);
}

.single-product div.product p.price,
.single-product div.product span.price {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--c-ink-deep);
  margin-bottom: 0;
}

.price-block {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

/* Rincian "Rp 60.000 × 2" saat jumlah lebih dari satu. */
.price-calc {
  font-size: var(--t-xs);
  color: var(--c-muted);
}

.stock-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-success);
}

.stock-flag--out {
  color: var(--c-danger);
}

.stock-flag__icon {
  flex: none;
  padding: 3px;
  background: rgba(18, 133, 91, 0.12);
  border-radius: 50%;
  box-sizing: content-box;
}

.stock-flag--out .stock-flag__icon {
  background: rgba(207, 46, 46, 0.12);
}

.single-product div.product p.price del {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-muted);
  margin-right: 0.5rem;
}

.single-product div.product p.price ins {
  text-decoration: none;
}

.woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--s-4);
  font-size: var(--t-sm);
}

.stock.in-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--t-xs);
  font-weight: 650;
  color: #0b6b47;
  background: rgba(18, 133, 91, 0.1);
  border-radius: var(--r-full);
}

.stock.out-of-stock {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  font-size: var(--t-xs);
  font-weight: 650;
  color: var(--c-danger);
  background: rgba(207, 46, 46, 0.1);
  border-radius: var(--r-full);
}

/* ── Formulir tambah ke keranjang ────────────────────────────────────── */

/*
 * Area beli memakai grid tiga kolom, bukan flex.
 *
 * Susunannya: kotak jumlah sendirian di baris pertama, lalu tiga tombol aksi
 * berjajar sama lebar di baris kedua. Dengan flex, penempatan baris bergantung
 * pada hasil pembungkusan otomatis — dan itu berubah-ubah mengikuti lebar
 * kolom serta panjang label. Grid mengunci posisinya.
 *
 * Aturan `> *` memberi baris penuh untuk anak yang tidak disebut eksplisit
 * (tabel variasi, pemberitahuan stok), supaya elemen tak terduga tidak
 * menyelinap ke salah satu kolom tombol.
 */
.single-product form.cart {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0.6rem;
  padding-block: var(--s-5) 0;
  margin-block: var(--s-5) 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.single-product form.cart > * {
  grid-column: 1 / -1;
}

.single-product form.cart .quantity {
  justify-self: start;
}

.single-product form.cart .variations {
  width: 100%;
  margin-bottom: var(--s-4);
}

.single-product form.cart .variations td,
.single-product form.cart .variations th {
  padding: 0.35rem 0;
  border: 0;
}

.quantity {
  display: inline-flex;
  align-items: center;
  height: 50px;
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  overflow: hidden;
}

.quantity input.qty {
  width: 3.5rem;
  height: 100%;
  padding: 0;
  text-align: center;
  font-weight: 650;
  border: 0;
  border-radius: 0;
  background: transparent;
  -moz-appearance: textfield;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.quantity input.qty:focus {
  box-shadow: none;
}

.qty-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 100%;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-ink-soft);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.qty-btn:hover {
  color: var(--c-ink-deep);
  background: var(--c-surface);
}

.single-product .single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0.85rem 1.85rem;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-ink-deep);
  background: var(--c-primary);
  border: 0;
  border-radius: var(--r-full);
  box-shadow: 0 4px 14px rgba(244, 183, 17, 0.34);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.single-product .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
  color: var(--c-ink-deep);
  background: var(--c-primary-deep);
  box-shadow: var(--sh-brand);
  transform: translateY(-2px);
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-ink-deep);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button:hover {
  color: var(--c-ink-deep);
  background: var(--c-primary-tint);
  border-color: var(--c-primary);
}

/*
 * Susunan tombol: [jumlah][Tambah ke Keranjang] di baris pertama, lalu
 * [Beli Langsung][WhatsApp] berdampingan di baris kedua.
 *
 * Sebelumnya ketiganya ditumpuk selebar penuh dengan warna solid kuning,
 * hitam, dan hijau. Tiga blok warna sekuat itu berjajar membuat pembeli tidak
 * tahu mana aksi utamanya — dan halaman terlihat seperti daftar spanduk.
 *
 * Sekarang hanya "Tambah ke Keranjang" yang terisi penuh sebagai aksi utama;
 * dua lainnya jadi tombol bergaris supaya tetap gampang ditemukan tanpa ikut
 * berteriak.
 */
/* ── Tiga tombol aksi sebaris ────────────────────────────────────────── */

/*
 * Ketiganya bergaya sama: latar putih, garis tipis, ikon di kiri label. Yang
 * membedakan hanya ikonnya. Sebelumnya masing-masing berlatar solid kuning,
 * hitam, dan hijau — tiga blok warna berjajar yang membuat halaman terlihat
 * seperti deretan spanduk dan tidak ada aksi yang benar-benar menonjol.
 */
.single-product form.cart .single_add_to_cart_button {
  grid-column: 1;
}

.single-product form.cart .single-buy {
  grid-column: 2;
}

.single-product form.cart .single-wa {
  grid-column: 3;
}

.single-product form.cart .single_add_to_cart_button,
.single-buy,
.single-wa {
  min-height: 52px;
  padding-inline: 1rem;
  font-size: 0.9375rem;
}

/*
 * Tombol keranjang di halaman produk sengaja dilepas dari gaya `button.alt`
 * yang kuning: di sini ia berdiri sejajar dengan dua tombol lain.
 */
.single-product .summary form.cart .single_add_to_cart_button {
  color: var(--c-ink-deep);
  background: var(--c-base);
  border: 1px solid var(--c-border);
  box-shadow: none;
}

.single-product .summary form.cart .single_add_to_cart_button:hover {
  color: var(--c-ink-deep);
  background: var(--c-primary-tint);
  border-color: var(--c-primary);
  box-shadow: none;
  transform: none;
}

/*
 * Ikon keranjang dipasang lewat mask-image, bukan SVG di markup — template
 * add-to-cart bawaan WooCommerce meng-escape label tombolnya, jadi ikon tidak
 * bisa disisipkan tanpa menimpa template itu.
 */
.single-product .summary form.cart .single_add_to_cart_button::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>')
    center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>')
    center / contain no-repeat;
}

.single-buy.btn--dark {
  --btn-bg: var(--c-base);
  --btn-fg: var(--c-ink-deep);
  --btn-bd: var(--c-border);
  --btn-sh: none;
}

.single-buy.btn--dark:hover {
  --btn-bg: var(--c-primary-tint);
  --btn-bd: var(--c-primary);
  --btn-sh: none;
}

.single-wa.btn--wa {
  --btn-bg: var(--c-base);
  --btn-fg: var(--c-ink-deep);
  --btn-bd: var(--c-border);
  --btn-sh: none;
}

/* Ikon hijau sudah cukup menandai WhatsApp; latar hijau penuh tidak perlu. */
.single-wa.btn--wa .tms-icon {
  color: var(--c-success);
}

.single-wa.btn--wa:hover {
  --btn-bg: rgba(18, 133, 91, 0.07);
  --btn-bd: var(--c-success);
  --btn-sh: none;
}

/* ── Meta & jaminan ──────────────────────────────────────────────────── */

/*
 * SKU dan kategori adalah keterangan penunjang, bukan isi utama. Ditaruh
 * sebaris supaya tidak memakan tiga baris penuh persis di bawah tombol beli.
 * Garis atasnya sudah disediakan border bawah form.cart.
 */
.product_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  font-size: var(--t-xs);
  color: var(--c-muted);
}

/* Garis atasnya sudah disediakan blok jaminan tepat di atasnya. */
.single-product .summary .product_meta {
  padding-top: var(--s-5);
}

.product_meta > span + span {
  padding-left: 1.5rem;
  border-left: 1px solid var(--c-border);
}

/*
 * Blok tombol untuk produk tanpa formulir keranjang. Jarak dan garisnya
 * disamakan dengan form.cart: garis pemisahnya datang dari blok jaminan di
 * bawahnya, bukan dari sini — kalau keduanya memasang garis, hasilnya dua
 * garis sejajar berdempetan.
 */
.single-contact {
  display: flex;
  padding-block: var(--s-5) 0;
  margin-block: var(--s-5) 0;
}

.single-contact .single-wa {
  flex: 1 1 auto;
}

.product_meta > span {
  display: inline;
  margin: 0;
}

.product_meta a,
.product_meta .sku {
  color: var(--c-ink-soft);
  font-weight: 600;
}

.product_meta a:hover {
  color: var(--c-primary-deep);
}

/*
 * Jaminan tampil sebagai daftar bertanda ikon, bukan kotak kuning. Kotak itu
 * dulu berdiri tepat setelah tombol WhatsApp hijau dan tombol Beli Langsung
 * hitam — empat blok warna beruntun dalam satu kolom.
 */
/*
 * Tiga jaminan berjajar dengan ikon di atas teks, dipisah garis tegak tipis.
 * Bentuk ini dulu berupa kotak kuning bertumpuk ke bawah — memakan tinggi dan
 * jadi blok warna keempat setelah tombol-tombol.
 */
.assurance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding-block: var(--s-5);
  margin-block: var(--s-5) 0;
  background: none;
  border: 0;
  border-block: 1px solid var(--c-border);
}

.assurance__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.5rem;
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  color: var(--c-ink-soft);
}

.assurance__item + .assurance__item {
  border-left: 1px solid var(--c-border);
}

.assurance__icon {
  flex: none;
  color: var(--c-primary-deep);
}

/* ── Tab produk & produk terkait ─────────────────────────────────────── */
.woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: var(--s-10);
}

/*
 * Tab produk memakai gaya garis bawah, bukan segmented-control berkotak.
 *
 * Kelas "tabs" pada <ul> milik WooCommerce kebetulan sama dengan komponen
 * global di layout.css yang menggambar kotak berlatar + ber-border. Di sini
 * kotak itu dinolkan dan diganti satu garis melintang, dengan penanda kuning
 * di bawah tab aktif — bentuk yang lebih tenang untuk baris selebar halaman.
 */
.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  padding: 0 !important;
  margin: 0 0 var(--s-6) !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
  content: none !important;
  display: none !important;
}

.woocommerce-tabs ul.tabs li {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.85rem 0 !important;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--c-ink-soft) !important;
  background: none !important;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.woocommerce-tabs ul.tabs li a:hover {
  color: var(--c-ink-deep) !important;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--c-ink-deep) !important;
  background: none !important;
  border-bottom-color: var(--c-primary);
  box-shadow: none !important;
}

.woocommerce-tabs .panel > h2 {
  font-size: var(--t-xl);
  margin-bottom: var(--s-4);
  color: var(--c-ink-deep);
}

/*
 * Isi tab adalah teks panjang, tapi reset global membuang seluruh margin
 * elemen. Tanpa aturan di sini paragraf dan subjudul deskripsi produk saling
 * menempel dan terbaca sebagai satu blok padat. Lebar dibatasi supaya barisnya
 * tidak melintang selebar halaman.
 */
.woocommerce-tabs .panel {
  max-width: 68ch;
  line-height: 1.8;
  color: var(--c-ink-soft);
}

.woocommerce-tabs .panel > * + * {
  margin-top: 1.15em;
}

.woocommerce-tabs .panel > h2 + * {
  margin-top: 0;
}

.woocommerce-tabs .panel h3,
.woocommerce-tabs .panel h4 {
  margin-top: 1.9em;
  font-family: var(--f-display);
  font-size: var(--t-md);
  line-height: 1.35;
  color: var(--c-ink-deep);
}

.woocommerce-tabs .panel strong {
  color: var(--c-ink);
}

.woocommerce-tabs .panel ul {
  list-style: disc;
}

.woocommerce-tabs .panel ol {
  list-style: decimal;
}

.woocommerce-tabs .panel ul,
.woocommerce-tabs .panel ol {
  padding-left: 1.35em;
}

.woocommerce-tabs .panel li + li {
  margin-top: 0.4em;
}

.woocommerce-tabs .panel ul > li::marker {
  color: var(--c-primary-deep);
}

/* Tabel "Informasi Tambahan". */
.woocommerce-product-attributes {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: var(--t-sm);
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-top: 1px solid var(--c-border-soft);
}

.woocommerce-product-attributes tr:first-child th,
.woocommerce-product-attributes tr:first-child td {
  border-top: 0;
}

.woocommerce-product-attributes th {
  width: 12rem;
  font-weight: 650;
  color: var(--c-ink-deep);
  background: var(--c-surface-2);
}

/* WooCommerce memiringkan nilai atribut; di sini disamakan dengan teks lain. */
.woocommerce-product-attributes td,
.woocommerce-product-attributes td p {
  margin: 0;
  font-style: normal;
  color: var(--c-ink-soft);
}

/* ── Judul bagian dengan tautan "Lihat semua" ────────────────────────── */
.related.products .section-head,
.upsells.products .section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: var(--s-6);
}

.related.products .section-head h2,
.upsells.products .section-head h2 {
  margin-bottom: 0;
}

.section-head__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--c-ink-soft);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}

.section-head__link:hover {
  gap: 0.6rem;
  color: var(--c-primary-deep);
}

/* ── Pita jaminan penutup ────────────────────────────────────────────── */
.trustbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  padding: var(--s-6) var(--s-6);
  margin-top: var(--s-12);
  background: var(--c-primary-tint);
  border-radius: var(--r-lg);
}

.trustbar__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.trustbar__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--c-ink-deep);
  background: var(--c-base);
  border-radius: 50%;
  box-shadow: var(--sh-sm);
}

.trustbar__body {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.trustbar__title {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-ink-deep);
}

.trustbar__text {
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--c-ink-soft);
}

@media (max-width: 900px) {
  .trustbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .trustbar {
    grid-template-columns: 1fr;
    padding: var(--s-5);
  }
}

.related.products,
.upsells.products {
  grid-column: 1 / -1;
  margin-top: var(--s-12);
}

.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
  font-size: var(--t-2xl);
  margin-bottom: var(--s-6);
}

@media (max-width: 900px) {
  .single-product div.product {
    grid-template-columns: 1fr;
  }

  .single-product div.product .woocommerce-product-gallery {
    position: static;
  }
}

/*
 * Di layar ponsel tiga tombol sebaris menyisakan ±113px per tombol — labelnya
 * berdesakan sampai garis tepinya nyaris bersentuhan. Di bawah 560px tombolnya
 * ditumpuk selebar penuh, ukuran sentuh yang lazim di ponsel.
 */
@media (max-width: 560px) {
  .single-product form.cart {
    grid-template-columns: 1fr;
  }

  .single-product form.cart .single_add_to_cart_button,
  .single-product form.cart .single-buy,
  .single-product form.cart .single-wa {
    grid-column: 1;
  }

  .assurance {
    padding-block: var(--s-4);
  }

  .assurance__item {
    padding-inline: 0.35rem;
    font-size: 0.6875rem;
  }
}

/* ══ Keranjang ════════════════════════════════════════════════════════════ */
.woocommerce-cart-form table.shop_table,
.woocommerce table.shop_table {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin-bottom: var(--s-6);
}

.woocommerce table.shop_table th {
  padding: 1rem;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 700;
  text-align: left;
  color: var(--c-ink-deep);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.woocommerce table.shop_table td {
  padding: 1rem;
  border-top: 1px solid var(--c-border-soft);
  vertical-align: middle;
}

.woocommerce table.shop_table_responsive tr:first-child td {
  border-top: 0;
}

.woocommerce table.cart img {
  width: 64px;
  border-radius: var(--r-sm);
}

.product-name a {
  font-weight: 650;
  color: var(--c-ink-deep);
}

.product-name a:hover {
  color: var(--c-primary-deep);
}

.woocommerce a.remove {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--c-muted) !important;
  border-radius: 50%;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.woocommerce a.remove:hover {
  color: #fff !important;
  background: var(--c-danger) !important;
}

.cart-collaterals {
  display: grid;
  justify-content: end;
}

.cart_totals {
  width: min(28rem, 100%);
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.cart_totals h2 {
  font-size: var(--t-lg);
  margin-bottom: var(--s-4);
}

.cart_totals table.shop_table {
  border: 0;
  background: transparent;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
  background: transparent;
  padding: 0.6rem 0;
  border-top: 0;
  border-bottom: 1px solid var(--c-border);
}

.cart_totals .order-total th,
.cart_totals .order-total td {
  font-size: var(--t-lg);
  border-bottom: 0;
}

.cart_totals .order-total .amount {
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--c-ink-deep);
}

.wc-proceed-to-checkout {
  margin-top: var(--s-4);
}

.wc-proceed-to-checkout .checkout-button {
  width: 100%;
}

.coupon {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.coupon .input-text {
  width: auto;
  min-width: 12rem;
  border-radius: var(--r-full);
}

/* ══ Checkout ═════════════════════════════════════════════════════════════ */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.woocommerce-checkout #customer_details {
  grid-column: 1;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  grid-column: 2;
}

.woocommerce-checkout #order_review_heading {
  font-size: var(--t-lg);
  margin-bottom: var(--s-4);
}

.woocommerce-checkout #order_review {
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  position: sticky;
  top: calc(var(--h-header) + 1.5rem);
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-size: var(--t-lg);
  margin-bottom: var(--s-4);
}

.woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-bottom: var(--s-4);
}

.woocommerce form .form-row label {
  margin-bottom: 0.35rem;
}

.woocommerce form .form-row .required {
  color: var(--c-danger);
  text-decoration: none;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
  width: 100%;
  float: none;
}

.woocommerce .col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-5);
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
  width: 100%;
  float: none;
}

.select2-container .select2-selection--single {
  height: 46px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px;
  padding-left: 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px;
}

#payment {
  background: var(--c-base) !important;
  border-radius: var(--r-md);
}

#payment ul.payment_methods {
  padding: var(--s-4) !important;
  border-bottom: 1px solid var(--c-border) !important;
}

#payment ul.payment_methods li {
  margin-bottom: 0.5rem;
}

#payment div.payment_box {
  background: var(--c-surface) !important;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

#payment div.payment_box::before {
  border-bottom-color: var(--c-surface) !important;
}

#payment .place-order {
  padding: var(--s-4) !important;
}

#place_order {
  width: 100%;
}

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

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    grid-column: 1;
  }

  .woocommerce-checkout #order_review {
    position: static;
  }

  .woocommerce .col2-set {
    grid-template-columns: 1fr;
  }

  .cart-collaterals {
    justify-content: stretch;
  }

  .cart_totals {
    width: 100%;
  }
}

/* ══ Keranjang & Checkout versi blok ══════════════════════════════════════ */

/*
 * Halaman Keranjang dan Checkout di situs ini memakai blok WooCommerce
 * (wp-block-woocommerce-cart / -checkout), bukan shortcode klasik. Markup-nya
 * dirakit React di sisi peramban dengan kelas berawalan `wc-block-*`, sehingga
 * seluruh aturan klasik di atas (table.shop_table, #order_review, #payment)
 * tidak pernah menyentuhnya — itu sebabnya kedua halaman masih tampil bawaan.
 *
 * Blok itu tetap dipakai, bukan diganti ke klasik: alur checkout yang sudah
 * terbukti jalan sampai pesanan masuk berdiri di atasnya. Yang dilakukan di
 * sini murni penyelarasan rupa. Nama kelas diambil dari stylesheet resmi
 * WooCommerce (assets/client/blocks/cart.css & checkout.css) supaya tidak
 * menebak, dan woo.css dimuat sesudah stylesheet blok sehingga selektor biasa
 * sudah cukup menang tanpa `!important`.
 */

/* ── Kerangka dua kolom ──────────────────────────────────────────────── */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  margin-block: var(--s-8) var(--s-16);
}

/*
 * JANGAN memasang `gap` pada .wc-block-components-sidebar-layout. Tata letak
 * itu memakai flex-wrap dengan kolom 65% + 35% yang persis genap 100%; gap
 * sekecil apa pun membuat total melebihi 100% sehingga kolom ringkasan
 * terlempar ke baris berikutnya.
 *
 * Jarak antar kolom karena itu diambil dari padding kanan kolom utama (bawaan
 * WooCommerce, box-sizing border-box jadi lebar total tetap 65%). Padding kiri
 * kolom ringkasan dinolkan supaya kartunya mulai tepat di batas kolom.
 */
/*
 * Ringkasan pesanan jadi kartu bertumpu (sticky), bukan kolom telanjang.
 *
 * Selektornya dua kelas: gutter bawaan WooCommerce
 * (`.wc-block-components-sidebar-layout .wc-block-components-sidebar
 * { padding-left: 2.26% }`, 0,2,0) harus dikalahkan oleh padding kartu.
 * Versi lama menolkan padding kirinya lewat aturan terpisah — sisa dari
 * sebelum kolom ini jadi kartu — dan justru membuat isi kartu menembus tepi
 * kirinya: tulisan "Total" mencuat keluar kotak.
 */
.wc-block-components-sidebar-layout .wc-block-cart__sidebar,
.wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
  position: sticky;
  top: calc(var(--h-header) + 1.5rem);
  align-self: start;
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

/*
 * Stylesheet blok menulis `.wc-block-components-title.wc-block-components-title`
 * — kelas yang sama digandakan supaya spesifisitasnya 0,2,0 — berisi ukuran
 * huruf preset dan font-weight 500. Selektor kelas tunggal (0,1,0) selalu
 * kalah, jadi kelas di sini ikut digandakan agar setara lalu unggul karena
 * woo.css dimuat belakangan.
 */
.wc-block-components-title.wc-block-components-title,
.wc-block-cart__totals-title.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-ink-deep);
}

.wc-block-components-title.wc-block-components-checkout-step__title {
  font-size: var(--t-lg);
}

.wc-block-cart__totals-title.wc-block-cart__totals-title {
  font-size: var(--t-lg);
  text-transform: none;
  /* Sama dengan padding seksi di bawahnya supaya irama garisnya rata. */
  margin-bottom: var(--s-4);
}

/* ── Daftar barang di keranjang ──────────────────────────────────────── */

/* Prefiks `table.` dipakai karena stylesheet blok menulis aturannya sebagai
   `table.wc-block-cart-items` (0,1,1); selektor kelas polos akan kalah. */
table.wc-block-cart-items {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--c-base);
}

/* Latar abu dipasang di sel, bukan di baris: latar <tr> tidak terlihat di
   bawah sel tengah sehingga kepala tabel tampak belang. */
table.wc-block-cart-items .wc-block-cart-items__header th {
  padding: 0.9rem 1rem;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

/*
 * WooCommerce menyembunyikan label kolom tengah dengan `visibility: hidden`,
 * dan itu ikut melenyapkan latar serta garis bawah selnya — kepala tabel jadi
 * terputus di tengah. Selnya dimunculkan lagi dan hanya tulisannya yang dibuat
 * tak terlihat, sehingga pembaca layar tetap mendapat judul kolom.
 */
table.wc-block-cart-items
  .wc-block-cart-items__header
  .wc-block-cart-items__header-product {
  visibility: visible;
  color: transparent;
}

table.wc-block-cart-items .wc-block-cart-items__row td {
  border-top: 1px solid var(--c-border-soft);
  vertical-align: top;
}

table.wc-block-cart-items .wc-block-cart-items__row:first-child td {
  border-top: 0;
}

/*
 * Padding sel hanya untuk tata letak tabel lebar.
 *
 * Di bawah 700px WooCommerce mengubah tiap baris menjadi grid dua kolom dan
 * menyetel `td { padding: 0 }` lewat @container. Spesifisitasnya sama persis
 * dengan aturan di sini (0,3,1) — dan container query tidak menambah bobot —
 * sehingga woo.css yang dimuat belakangan akan menang dan padding itu bocor ke
 * tampilan seluler; tabelnya melebar sampai halaman bisa digeser ke samping.
 *
 * Memakai @container dengan ambang yang sama seperti aslinya membuat kedua
 * aturan tidak pernah aktif bersamaan. Elemen containernya
 * .wp-block-woocommerce-cart, yang memang sudah container-type: inline-size.
 */
@container (min-width: 700px) {
  table.wc-block-cart-items .wc-block-cart-items__row td {
    padding: var(--s-5) 1rem;
  }
}

@container (max-width: 699px) {
  /*
   * Bingkai kartu dilepas di layar sempit. Lebar tabel di sini ditentukan
   * lebar minimum grid baris bawaan WooCommerce (kolom gambar 80px + kolom
   * jumlah 132px + harga), yang sudah nyaris sama dengan lebar layar ponsel —
   * padding atau border sekecil apa pun langsung membuat halaman bisa digeser
   * ke samping. Pemisah antar barang cukup dari garis atas tiap baris.
   */
  table.wc-block-cart-items {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  /*
   * Kolom gambar dan kolom jumlah dirampingkan sedikit dari ukuran bawaan
   * (80px / 132px) supaya ada sisa ruang untuk memberi jarak kanan; tanpa itu
   * angka harga menempel persis di tepi layar. Kolom jumlah 110px pas untuk
   * stepper seluler (32 + 44 + 32).
   */
  .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
    grid-template-columns: 72px 110px;
    padding: var(--s-4) var(--s-3) var(--s-4) 0;
  }

  /*
   * WooCommerce menyetel `.wc-block-components-sidebar-layout
   * .wc-block-components-sidebar { padding: 0 }` (0,2,0) di lebar sempit, yang
   * mengalahkan kartu ringkasan (0,1,0) sehingga isinya menempel tepi.
   */
  .wc-block-components-sidebar-layout .wc-block-cart__sidebar,
  .wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
    padding: var(--s-5);
  }
}

.wc-block-cart-item__image img {
  width: 84px;
  max-width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border-soft);
  background: var(--c-surface-2);
}

.wc-block-components-product-name {
  font-family: var(--f-display);
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink-deep);
  text-decoration: none;
}

.wc-block-components-product-name:hover {
  color: var(--c-primary-deep);
}

.wc-block-components-product-metadata {
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.wc-block-components-product-price__value,
.wc-block-components-formatted-money-amount {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-ink-deep);
}

.wc-block-cart-item__remove-link {
  font-size: var(--t-xs);
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.wc-block-cart-item__remove-link:hover {
  color: var(--c-danger);
  border-bottom-color: currentColor;
}

/* Pengatur jumlah disamakan dengan stepper di halaman produk. */
.wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: center;
  height: 42px;
  min-width: 0;
  margin: 0.5rem 0 0;
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  overflow: hidden;
}

.wc-block-components-quantity-selector::after {
  display: none;
}

.wc-block-components-quantity-selector__input {
  width: 2.75rem;
  min-width: 0;
  padding: 0;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-ink-deep);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.wc-block-components-quantity-selector__button {
  width: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-ink-soft);
  background: transparent;
  border: 0;
  opacity: 1;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
  color: var(--c-ink-deep);
  background: var(--c-surface);
}

.wc-block-components-quantity-selector__button:disabled {
  color: var(--c-border);
}

/* ── Rincian total ───────────────────────────────────────────────────── */

/*
 * Irama kartu ringkasan: judul, lalu seksi-seksi (kupon, pengiriman, total)
 * yang SEMUANYA berjarak vertikal sama dan dipisah garis dengan warna sama.
 * Sebelumnya tiap seksi membawa bawaannya sendiri — kupon 16px atas-bawah,
 * pengiriman 0 atas / 16 bawah, garisnya campuran abu tema dan `color-mix`
 * milik blok — sehingga kartunya terlihat miring meski isinya benar.
 */
.wc-block-cart__sidebar .wc-block-cart__totals-title {
  padding: 0;
}

.wc-block-components-totals-wrapper {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--c-border);
}

.wc-block-components-totals-wrapper:first-child {
  border-top: 0;
  padding-top: 0;
}

.wc-block-components-totals-wrapper::after {
  display: none;
}

/*
 * Di checkout, seluruh ringkasan berada di dalam panel bergaris yang TIDAK
 * punya padding samping — tiap barisnya membawa padding sendiri. Aturan umum
 * `padding: var(--s-4) 0` di atas menghapus padding samping itu, sehingga
 * baris "Total" melebar sampai menembus tepi panel sementara baris lain tetap
 * menjorok. Di dalam panel checkout, padding sampingnya dikembalikan.
 */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper {
  padding-inline: var(--s-4);
}

/*
 * Seksi pengiriman bukan .wc-block-components-totals-wrapper seperti dua
 * tetangganya, jadi jarak dan garisnya harus disetel sendiri agar seirama.
 * Padanan kelasnya di halaman checkout ikut diatur di sini.
 */
.wp-block-woocommerce-cart-order-summary-totals-block,
.wp-block-woocommerce-checkout-order-summary-totals-block {
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-border);
}

.wp-block-woocommerce-cart-order-summary-coupon-form-block {
  border-top-color: var(--c-border);
}

/* Ongkir gratis ditulis hijau — kabar baik, bukan sekadar angka. */
.wc-block-components-totals-shipping .wc-block-components-totals-item__value {
  color: var(--c-success);
}

.wc-block-components-totals-shipping__via,
.wc-block-components-totals-shipping .wc-block-components-totals-item__description {
  margin-top: 0.25rem;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-muted);
}

/*
 * Blok tombol adalah anak terakhir kartu; margin bawaannya menumpuk dengan
 * padding kartu dan membuat ruang kosong bawah lebih tebal daripada atas.
 */
.wc-block-cart__sidebar .wc-block-cart__submit {
  margin-bottom: 0;
}

.wc-block-components-totals-item__label {
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.wc-block-components-totals-item__value {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-ink-deep);
}

/*
 * Tanpa reset ini baris "Perkiraan total" mendapat padding atas tambahan dari
 * blok, sehingga jarak atasnya lebih besar daripada jarak bawah dan barisnya
 * tampak melorot di dalam seksinya.
 */
.wc-block-components-totals-wrapper .wc-block-components-totals-footer-item {
  padding: 0;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--c-ink-deep);
}

.wc-block-components-totals-coupon__form {
  gap: 0.5rem;
}

.wc-block-components-totals-coupon-link {
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.wc-block-components-totals-coupon-link:hover {
  color: var(--c-primary-deep);
}

/* ── Tombol ──────────────────────────────────────────────────────────── */
.wc-block-components-button:not(.is-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0.85rem 1.75rem;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-ink-deep);
  background: var(--c-primary);
  border: 0;
  border-radius: var(--r-full);
  box-shadow: 0 4px 14px rgba(244, 183, 17, 0.34);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.wc-block-components-button:not(.is-link):hover:not(:disabled) {
  color: var(--c-ink-deep);
  background: var(--c-primary-deep);
  box-shadow: var(--sh-brand);
  transform: translateY(-2px);
}

.wc-block-components-button:not(.is-link):disabled {
  box-shadow: none;
  transform: none;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  width: 100%;
}

/* Kupon "Terapkan" dan "Kembali ke Keranjang" adalah aksi sekunder — jangan
   ikut kuning supaya tombol utama tetap satu-satunya yang menarik mata. */
.wc-block-components-totals-coupon__button,
.wc-block-components-checkout-return-to-cart-button {
  color: var(--c-ink-deep);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: none;
}

.wc-block-components-totals-coupon__button:hover:not(:disabled),
.wc-block-components-checkout-return-to-cart-button:hover:not(:disabled) {
  background: var(--c-primary-tint);
  border-color: var(--c-primary);
  box-shadow: none;
  transform: none;
}

.wc-block-components-checkout-return-to-cart-button {
  min-height: 0;
  padding: 0.6rem 1.1rem;
  font-size: var(--t-sm);
}

/* ── Isian formulir checkout ─────────────────────────────────────────── */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select__select {
  min-height: 50px;
  padding: 0.8rem 1rem;
  font-size: 0.9375rem;
  color: var(--c-ink-deep);
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: none;
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-dim);
  outline: none;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  color: var(--c-muted);
}

.wc-block-components-text-input.is-active label {
  color: var(--c-ink-soft);
}

.wc-block-components-validation-error {
  font-size: var(--t-xs);
  color: var(--c-danger);
}

/* ── Langkah checkout ────────────────────────────────────────────────── */
.wc-block-components-checkout-step {
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--c-border-soft);
}

.wc-block-components-checkout-step:last-child {
  border-bottom: 0;
}

.wc-block-components-checkout-step__title {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-ink-deep);
}

.wc-block-components-checkout-step__description {
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

/* Nomor langkah bawaan dibuat bulat kuning agar senada dengan lencana angka
   di beranda. */
.wc-block-components-checkout-step--with-step-number
  .wc-block-components-checkout-step__heading::before {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 800;
  color: var(--c-ink-deep);
  background: var(--c-primary);
  border-radius: 50%;
}

/* ── Pilihan pengiriman & pembayaran ─────────────────────────────────── */

/*
 * Satu pilihan = satu kartu utuh.
 *
 * Bentuk markup kedua daftar ini berbeda:
 *
 *   Pengiriman : <label.radio-control__option>            (kartu = label)
 *   Pembayaran : <div.radio-control-accordion-option>     (kartu = pembungkus)
 *                   <label.radio-control__option>
 *                   <div.radio-control-accordion-content> ← keterangan
 *
 * Versi sebelumnya memberi latar dan garis ke <label> saja. Di daftar
 * pembayaran, keterangan "Transfer ke rekening resmi…" berada di LUAR label,
 * sehingga sorotan kuningnya berhenti separuh jalan: baris judul kuning,
 * keterangannya putih, lalu garis luar bawaan WooCommerce mengelilingi
 * keduanya dengan warna gelap dan sudut 4px yang tidak sama dengan sudut
 * 12px milik label. Tiga bingkai berbeda dalam satu pilihan.
 *
 * Sekarang kartunya digambar di PEMBUNGKUS bila ada, dan di label bila tidak,
 * sehingga latar, garis, dan sudutnya selalu melingkupi seluruh isi pilihan.
 */

/*
 * Jarak antar kartu diatur lewat `gap` di WADAHNYA, bukan margin tiap kartu.
 *
 * WooCommerce punya beberapa varian kelas (…--last-selected,
 * …--first-selected) yang menolkan margin kartu pengiriman dengan selektor
 * lebih spesifik. Akibatnya kedua kartu pengiriman menempel — jaraknya 0px —
 * sehingga garis bawah kartu terpilih dan garis atas kartu di bawahnya
 * bertemu jadi satu garis tebal, sementara daftar pembayaran tetap berjarak
 * 10px. `gap` tidak bisa ditimpa aturan margin mana pun, jadi kedua daftar
 * dijamin berirama sama.
 */
.wc-block-components-radio-control {
  display: grid;
  gap: 0.6rem;
}

.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
  margin-bottom: 0;
}

/* Kartu untuk daftar tanpa akordeon (pengiriman). */
.wc-block-components-radio-control__option {
  position: relative;
  padding: var(--s-4) var(--s-4) var(--s-4) 2.75rem;
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.wc-block-components-radio-control__option:hover {
  border-color: var(--c-primary-soft);
}

.wc-block-components-radio-control__option-checked {
  background: var(--c-primary-tint);
  border-color: var(--c-primary);
}

/* Kartu untuk daftar berakordeon (pembayaran) — pindah ke pembungkusnya. */
.wc-block-components-radio-control-accordion-option {
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.wc-block-components-radio-control-accordion-option:hover {
  border-color: var(--c-primary-soft);
}

.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  background: var(--c-primary-tint);
  border-color: var(--c-primary);
}

/* Label di dalam pembungkus dibuat transparan: kartunya sudah digambar induk. */
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked {
  margin-bottom: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/*
 * WooCommerce menandai pilihan terpilih dengan cincin gelap 1,5px di dalam
 * (`box-shadow: inset 0 0 0 1.5px currentColor`) plus sudut 4px. Cincin itu
 * bertumpuk dengan garis kuning kita dan sudutnya berbeda, jadi dimatikan.
 * Panjang selektornya disamakan dengan aslinya supaya menang tanpa !important.
 */
.wc-block-components-radio-control--highlight-checked
  div.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked
  label.wc-block-components-radio-control__option--checked-option-highlighted {
  border-radius: var(--r-md);
  box-shadow: none;
}

/*
 * Garis rambut pemisah antar pilihan bawaan blok tidak diperlukan — tiap
 * pilihan sudah berdiri sebagai kartu terpisah.
 */
.wc-block-components-radio-control--highlight-checked
  div.wc-block-components-radio-control-accordion-option::after,
.wc-block-components-radio-control--highlight-checked
  .wc-block-components-radio-control__option::after {
  content: none;
}

.wc-block-components-radio-control__option::before {
  border-color: var(--c-border);
}

/*
 * Bulatan radio.
 *
 * Bawaannya memakai `color-mix(currentColor 48%)` untuk garis dan titik hitam
 * pekat 10px — kontrasnya melompat tajam antara belum dipilih dan terpilih,
 * dan titik hitamnya terasa berat di atas kartu krem. Di sini garisnya dibuat
 * senada dengan kartu, titiknya memakai warna tinta tema, lalu diberi
 * transisi supaya perpindahan pilihan tidak berkedut.
 *
 * Panjang selektor disamakan dengan aslinya
 * (`.wc-block-components-radio-control .wc-block-components-radio-control__input`)
 * agar menang tanpa !important.
 */
.wc-block-components-radio-control .wc-block-components-radio-control__input {
  width: 20px;
  height: 20px;
  background: var(--c-base);
  /*
   * Bukan --c-border (#e8e8e8): di atas latar putih kontrasnya hanya ~1,2:1
   * sehingga lingkarannya nyaris tak terlihat. --c-muted memberi ~3,5:1,
   * memenuhi ambang kontras untuk kendali formulir.
   */
  border: 1.5px solid var(--c-muted);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.wc-block-components-radio-control__option:hover
  .wc-block-components-radio-control__input {
  border-color: var(--c-primary-soft);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
  border: 1.5px solid var(--c-ink-deep);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
  width: 10px;
  height: 10px;
  background: var(--c-ink-deep);
  transition: transform var(--dur) var(--ease-out);
}

/* Cincin fokus mengikuti warna merek, bukan hitam pekat. */
.wc-block-components-radio-control .wc-block-components-radio-control__input:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.wc-block-components-radio-control__label {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-ink-deep);
}

.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description {
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

/* Keterangan sejajar di bawah judulnya, bukan di bawah bulatan radio. */
.wc-block-components-radio-control-accordion-content {
  padding: 0 var(--s-4) var(--s-4) 2.75rem;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-ink-soft);
}

.wc-block-components-radio-control-accordion-content:empty {
  display: none;
}

/* ── Ringkasan barang di sidebar checkout ────────────────────────────── */
.wc-block-components-order-summary-item {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-border-soft);
}

.wc-block-components-order-summary-item:last-child {
  border-bottom: 0;
}

.wc-block-components-order-summary-item__image img {
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border-soft);
}

.wc-block-components-order-summary-item__quantity {
  color: var(--c-ink-deep);
  background: var(--c-primary);
  border: 0;
  box-shadow: 0 0 0 2px var(--c-base);
}

.wc-block-components-panel__button {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-ink-deep);
}

/* ── Pemberitahuan & keranjang kosong ────────────────────────────────── */
.wc-block-components-notice-banner {
  border-radius: var(--r-md);
  font-size: var(--t-sm);
}

.wc-block-cart__empty-cart__title,
.wc-block-checkout-empty__title {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--c-ink-deep);
}

/* ── Seluler ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wc-block-cart__sidebar,
  .wc-block-checkout__sidebar {
    position: static;
    padding: var(--s-5);
  }
}

@media (max-width: 700px) {
  /* Kepala tabel dan padding sel sudah diurus WooCommerce lewat @container di
     bagian "Daftar barang"; di sini hanya penyesuaian ukuran. */
  .wc-block-cart-item__image img {
    width: 64px;
  }

  .wc-block-components-quantity-selector {
    height: 38px;
  }

  .wc-block-components-quantity-selector__button {
    width: 32px;
    min-width: 32px;
  }

  .wc-block-components-button:not(.is-link) {
    min-height: 46px;
  }
}

/* ══ Konfirmasi pesanan ═══════════════════════════════════════════════════ */

/*
 * Halaman ini muncul tepat setelah pembeli menekan "Buat Pesanan", jadi isinya
 * murni data: nomor, tanggal, total, metode bayar, rincian, alamat. Judul bagian
 * bawaan WooCommerce mewarisi ukuran h2 tema (48px) dan jadi jauh lebih besar
 * daripada angka-angka yang justru ingin dibaca. Di sini semuanya dikembalikan
 * ke proporsi "kuitansi": label kecil, angka tegas.
 */
.woocommerce-order {
  max-width: 900px;
  margin-inline: auto;
  padding-block: var(--s-10) var(--s-16);
}

.woocommerce-order .woocommerce-thankyou-order-received {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding: var(--s-5) var(--s-6);
  background: rgba(18, 133, 91, 0.08);
  border: 1px solid rgba(18, 133, 91, 0.24);
  border-radius: var(--r-lg);
  color: var(--c-success);
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 700;
}

.woocommerce-order .woocommerce-thankyou-order-received::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--c-success);
  /* centang, di-inline supaya tidak menambah permintaan jaringan */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * Ringkasan atas: kartu-kartu kecil, bukan daftar berpeluru.
 *
 * WAJIB pakai `ul.` di depan. WooCommerce memasang kelas `order_details` pada
 * DUA elemen sekaligus: daftar ringkasan ini DAN tabel rincian pesanan di
 * bawahnya. Tanpa pembatas tag, `display: grid` ikut kena tabel — thead, tbody,
 * dan tfoot berubah jadi tiga sel yang berjajar ke samping.
 */
ul.woocommerce-order-overview.order_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-3);
  margin: 0 0 var(--s-8);
  padding: 0;
  list-style: none;
  border: 0;
}

/*
 * WooCommerce membungkus daftar ini dengan clearfix warisan:
 *   ul.order_details::before, ::after { content: " "; display: table }
 * Di dalam grid, kedua pseudo-element itu ikut jadi item. Akibatnya sel
 * pertama tersita oleh kotak kosong dan kartu terakhir terdorong turun.
 */
ul.woocommerce-order-overview.order_details::before,
ul.woocommerce-order-overview.order_details::after {
  content: none;
}

/*
 * `float` dan `border-right` dashed juga warisan tata letak lama — dibuang.
 * `:last-of-type` disertakan karena WooCommerce menghapus SELURUH border kartu
 * terakhir (dulu untuk membuang garis pemisah paling kanan); tanpa ini kartu
 * "Metode pembayaran" tampil tanpa bingkai sementara tiga lainnya berbingkai.
 */
ul.woocommerce-order-overview.order_details li,
ul.woocommerce-order-overview.order_details li:last-of-type {
  float: none;
  margin: 0;
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}

ul.woocommerce-order-overview.order_details li strong {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--c-ink-deep);
}

ul.woocommerce-order-overview.order_details li.method strong {
  font-size: var(--t-base);
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
  margin-bottom: var(--s-4);
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.woocommerce-order-details,
.woocommerce-customer-details {
  margin-top: var(--s-10);
}

/*
 * Rangka tabel (border, sudut membulat, padding th/td) sudah ditangani aturan
 * `.woocommerce table.shop_table` di bagian Keranjang. Di sini hanya perataan
 * kolom nominal dan penegasan baris total — jangan set ulang `border-collapse`,
 * karena `separate` itulah yang membuat sudut membulatnya bekerja.
 */
.woocommerce-table--order-details td:last-child,
.woocommerce-table--order-details th:last-child {
  text-align: right;
  white-space: nowrap;
}

.woocommerce-table--order-details tfoot th {
  background: none;
  border-bottom: 0;
  font-weight: 600;
  color: var(--c-ink-soft);
}

.woocommerce-table--order-details tfoot td {
  border-top: 0;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 800;
  color: var(--c-ink-deep);
}

.woocommerce-table--order-details .product-name a {
  font-weight: 600;
  color: var(--c-ink-deep);
}

.woocommerce-table--order-details .product-name a:hover {
  color: var(--c-primary-deep);
}

/*
 * `nowrap` hanya aman selama kolomnya muat. Di layar sempit, nilai panjang
 * seperti "Ambil Sendiri di Workshop (Cipondoh, Tangerang)" memaksa tabel
 * melebihi lebar layar, lalu terpotong oleh `overflow: hidden` milik
 * `.shop_table` — nominalnya hilang tanpa bisa digulir.
 */
@media (max-width: 700px) {
  .woocommerce-order {
    padding-block: var(--s-8) var(--s-12);
  }

  .woocommerce-table--order-details td:last-child,
  .woocommerce-table--order-details th:last-child {
    white-space: normal;
  }

  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td {
    padding: 0.7rem 0.75rem;
  }

  ul.woocommerce-order-overview.order_details {
    grid-template-columns: repeat(2, 1fr);
  }
}

.woocommerce-customer-details address {
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  font-style: normal;
  font-size: var(--t-sm);
  line-height: 1.75;
}

/* ══ Akun ═════════════════════════════════════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 100% !important;
  float: none !important;
  margin-bottom: var(--s-6);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--c-ink-soft);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--c-ink-deep);
  background: var(--c-primary-tint);
  border-color: var(--c-primary);
}

.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
}

/*
 * Halaman masuk/daftar berdiri sendiri di halaman yang nyaris kosong. Tanpa
 * pembatas lebar, kartunya menggantung di kiri dengan ruang kosong selebar dua
 * pertiga layar. Kolomnya dipusatkan seperti pola halaman masuk pada umumnya.
 */
.woocommerce-account:not(.logged-in) .site-main > .page > .container {
  max-width: 32rem;
  padding-block: var(--s-10) var(--s-16);
}

.woocommerce-account:not(.logged-in) .woocommerce > h2 {
  font-size: var(--t-xl);
  text-align: center;
  margin-bottom: var(--s-5);
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
  max-width: 30rem;
  padding: var(--s-6);
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login {
  max-width: none;
}

/* ── Kendali formulir klasik ─────────────────────────────────────────── */

/*
 * WooCommerce menulis `.woocommerce form .form-row .input-text` (0,3,1) yang
 * mengalahkan gaya isian dasar di base.css (`input[type="text"]`, 0,0,1).
 * Akibatnya seluruh isian di halaman akun tampil dengan sudut 4px, padding
 * 7px, dan garis kehitaman — beda sendiri dari isian di bagian situs lain.
 * Selektor di sini sengaja sepanjang miliknya supaya setara lalu menang lewat
 * urutan muat.
 */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row .input-text,
.woocommerce-page form .form-row select {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1rem;
  font-family: var(--f-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-ink-deep);
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-page form .form-row .input-text:focus,
.woocommerce-page form .form-row select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-dim);
  outline: none;
}

.woocommerce form .form-row textarea {
  min-height: 8rem;
  resize: vertical;
}

.woocommerce form .form-row > label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--c-ink);
}

/* Kotak centang tampil sebaris dengan keterangannya, bukan bertumpuk. */
.woocommerce form .form-row > label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink-soft);
}

.woocommerce form input[type="checkbox"],
.woocommerce form input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--c-primary);
}

/* Tombol mata pada isian sandi ikut tinggi isiannya. */
.woocommerce form .password-input {
  display: block;
  position: relative;
}

.woocommerce form .show-password-input {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 3rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/*
 * Tombol kirim di formulir akun adalah aksi utama halamannya, jadi diberi
 * rupa tombol primer seperti "Tambah ke Keranjang" — bukan tombol netral.
 */
.woocommerce button.woocommerce-form-login__submit,
.woocommerce button.woocommerce-form-register__submit,
.woocommerce .woocommerce-ResetPassword button.button,
.woocommerce .woocommerce-ResetPassword input.button,
.woocommerce .woocommerce-EditAccountForm button.button,
.woocommerce .woocommerce-address-fields button.button {
  min-height: 50px;
  padding: 0.85rem 1.85rem;
  color: var(--c-ink-deep);
  background: var(--c-primary);
  border: 0;
  box-shadow: 0 4px 14px rgba(244, 183, 17, 0.34);
}

.woocommerce button.woocommerce-form-login__submit:hover,
.woocommerce button.woocommerce-form-register__submit:hover,
.woocommerce .woocommerce-ResetPassword button.button:hover,
.woocommerce .woocommerce-ResetPassword input.button:hover,
.woocommerce .woocommerce-EditAccountForm button.button:hover,
.woocommerce .woocommerce-address-fields button.button:hover {
  background: var(--c-primary-deep);
  box-shadow: var(--sh-brand);
  transform: translateY(-2px);
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit {
  width: 100%;
}

.woocommerce-LostPassword {
  margin-top: var(--s-4);
  margin-bottom: 0;
  font-size: var(--t-sm);
  text-align: center;
}

.woocommerce-LostPassword a {
  color: var(--c-ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--c-primary);
  text-underline-offset: 3px;
}

.woocommerce-LostPassword a:hover {
  color: var(--c-primary-deep);
}

/* ══ Pemberitahuan ════════════════════════════════════════════════════════ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem !important;
  margin-bottom: var(--s-5) !important;
  font-size: var(--t-sm);
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-left: 3px solid var(--c-primary) !important;
  border-radius: var(--r-md);
  list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none !important;
}

.woocommerce-message {
  border-left-color: var(--c-success) !important;
}

.woocommerce-error {
  border-left-color: var(--c-danger) !important;
  background: rgba(207, 46, 46, 0.06) !important;
}

.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
}

/* ══ Ulasan ═══════════════════════════════════════════════════════════════ */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-left: 4.25rem;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
  width: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}

.woocommerce p.stars a {
  color: var(--c-primary);
}

/* ══ Bilah beli lengket (seluler) ═════════════════════════════════════════ */
.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-float);
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem var(--pad-x);
  background: var(--c-base);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -8px 24px rgba(23, 23, 27, 0.08);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}

.buybar.is-visible {
  transform: none;
}

.buybar__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.buybar__name {
  font-size: var(--t-xs);
  line-height: 1.35;
  color: var(--c-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buybar__price {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-ink-deep);
}

.buybar__price del {
  display: none;
}

.buybar__price ins {
  text-decoration: none;
}

.buybar__btn {
  flex: none;
  padding: 0.7rem 1.25rem;
}

@media (max-width: 900px) {
  .buybar {
    display: flex;
  }

  .floaters {
    bottom: 5rem;
  }
}