/* ============================================================
   ARC CART PAGE WIDGET

   Menata tampilan blok Cart resmi WooCommerce yang dirender APA ADANYA
   oleh widget (lihat class-arc-cart-page-widget.php). MURNI CSS - tidak
   ada perhitungan cart, kupon, ongkir, atau checkout yang disentuh.

   Semua rule di-scope di bawah .arc-cp (wrapper milik widget ini
   sendiri), jadi TIDAK PERNAH menyentuh widget ARC Cart navbar
   (off-canvas) maupun bagian lain situs.

   Nilai warna/ukuran dibaca dari CSS variable yang di-set Elementor
   lewat kontrol Style di panel widget. Angka di var(..., X) adalah
   nilai cadangan kalau kontrolnya belum pernah disentuh.

   KENAPA SELECTORNYA DITULIS ".arc-cp.arc-cp" (class-nya dobel)?
   Blok Cart WooCommerce memuat CSS-nya sendiri (wc-blocks-style-cart)
   BELAKANGAN, di bagian bawah halaman - setelah file ini. Padahal di CSS,
   kalau dua aturan sama-sama kuat (specificity-nya seri), yang menang
   adalah yang dimuat paling akhir. Akibatnya aturan di file ini kalah
   terus dari aturan bawaan WooCommerce.

   Menulis class-nya dua kali (".arc-cp.arc-cp") itu trik sah CSS untuk
   menaikkan specificity tanpa mengubah HTML sama sekali - elemen yang
   dituju tetap sama persis. Dengan begitu aturan di sini menang tanpa
   perlu !important dan tanpa bergantung pada urutan pemuatan file.

   CATATAN: nama class WooCommerce di bawah mengikuti WooCommerce Blocks
   (@woocommerce/block-library). Kalau ada bagian yang tidak ikut
   ter-style: klik kanan bagian itu > Inspect, kirim nama class-nya,
   saya sesuaikan.
   ============================================================ */

.arc-cp {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #000000;
}

.arc-cp__title {
  margin: 0 0 32px;
}

/* ============================================================
   0. KUNCI BLOK CART DI DALAM KOTAK WIDGET

   Blok Cart itu blok WordPress, jadi dia ikut aturan tata letak isi
   halaman - termasuk kelas "melebar" seperti .alignwide/.alignfull yang
   diwujudkan tema pakai margin kiri-kanan NEGATIF supaya blok bisa
   tembus keluar container.

   Di dalam container Elementor, margin negatif itu tidak punya ruang
   untuk melebar: yang terjadi seluruh blok cart tergeser ke KIRI keluar
   dari kotak widget. Gejalanya persis yang terlihat - kolom gambar
   produk jatuh di luar tepi layar sampai kepotong, dan tampilan
   keranjang kosong tidak lagi tepat di tengah.

   Markup widget sudah tidak menulis kelas itu lagi (lihat
   default_cart_block_markup()). Blok di bawah ini pagar keduanya: kalau
   tema, plugin lain, atau versi WooCommerce berikutnya menambahkannya
   sendiri, efek geser-nya tetap dimatikan - dan HANYA di dalam .arc-cp,
   jadi blok melebar di bagian lain situs tidak ikut terpengaruh.
   ============================================================ */

.arc-cp.arc-cp .wp-block-woocommerce-cart,
.arc-cp.arc-cp .alignwide,
.arc-cp.arc-cp .alignfull {
  margin-left: 0;
  margin-right: 0;
  width: auto;
  max-width: none;
}

/* ============================================================
   1. LAYOUT 2 KOLOM
   WooCommerce sudah memberi struktur main + sidebar; di sini cuma
   dikunci jadi flex supaya lebar & jaraknya bisa diatur dari Elementor.
   ============================================================ */

.arc-cp.arc-cp .wc-block-cart,
.arc-cp.arc-cp .wc-block-components-sidebar-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--arc-cp-gap, 48px);
  align-items: flex-start;
  margin: 0;
}

.arc-cp.arc-cp .wc-block-cart__main,
.arc-cp.arc-cp .wc-block-components-main {
  flex: 1 1 320px;
  min-width: 0;
  padding: 0;
  width: auto;
  max-width: none;
}

.arc-cp.arc-cp .wc-block-cart__sidebar,
.arc-cp.arc-cp .wc-block-components-sidebar {
  flex: 0 0 var(--arc-cp-sidebar-w, 34%);
  max-width: 100%;
  background: var(--arc-cp-totals-bg, transparent);
  padding: 0;
  width: auto;
}

/* Satu kolom di layar sempit. Dua varian breakpoint - dipilih dari
   kontrol "Stack to One Column At". */

@media (max-width: 1024px) {
  .arc-cp--stack-tablet.arc-cp--stack-tablet .wc-block-cart__main,
  .arc-cp--stack-tablet.arc-cp--stack-tablet .wc-block-components-main,
  .arc-cp--stack-tablet.arc-cp--stack-tablet .wc-block-cart__sidebar,
  .arc-cp--stack-tablet.arc-cp--stack-tablet .wc-block-components-sidebar {
    flex: 1 1 100%;
  }
}

@media (max-width: 767px) {
  .arc-cp--stack-mobile.arc-cp--stack-mobile .wc-block-cart__main,
  .arc-cp--stack-mobile.arc-cp--stack-mobile .wc-block-components-main,
  .arc-cp--stack-mobile.arc-cp--stack-mobile .wc-block-cart__sidebar,
  .arc-cp--stack-mobile.arc-cp--stack-mobile .wc-block-components-sidebar {
    flex: 1 1 100%;
  }
}

/* ============================================================
   2. DAFTAR ITEM
   ============================================================ */

.arc-cp.arc-cp .wc-block-cart-items,
.arc-cp.arc-cp table.wc-block-cart-items {
  border: none;
  width: 100%;
}

.arc-cp--hide-header.arc-cp--hide-header .wc-block-cart-items__header {
  display: none;
}

.arc-cp.arc-cp .wc-block-cart-items__row {
  border-bottom: 1px solid var(--arc-cp-line, #e5e5e5);
}

.arc-cp.arc-cp .wc-block-cart-items__row td {
  padding-top: var(--arc-cp-row-pad, 20px);
  padding-bottom: var(--arc-cp-row-pad, 20px);
  border: none;
}

/* -------- Foto produk --------
   Lebarnya dipatok dalam PIKSEL, bukan persen. Di tabel dengan
   table-layout:auto, width/min-width pada <td> cuma saran - kalau <img>
   di dalamnya juga pakai width:100%, kolom menunggu gambar dan gambar
   menunggu kolom, dan kolomnya bisa menyusut habis. Ukuran piksel pasti
   memutus rantai saling-menunggu itu.

   Angkanya diatur dari kontrol "Thumbnail Width" di Elementor.

   Selector ditulis dua jalur: lewat nama class WooCommerce, DAN lewat
   posisi (sel pertama di baris). Jadi kalau nama class-nya berbeda di
   versi WooCommerce tertentu, aturan ini tetap kena. */

.arc-cp.arc-cp .wc-block-cart-item__image,
.arc-cp.arc-cp .wc-block-cart-items__row > td:first-child {
  /* display:table-cell dipaksa supaya kolom ini tetap sel tabel biasa.
     Kalau WooCommerce menjadikannya flex/grid, lebar kolomnya tidak lagi
     dihitung oleh tabel dan gampang kolaps. */
  display: table-cell;
  position: static;
  width: var(--arc-cp-thumb-w, 90px);
  min-width: var(--arc-cp-thumb-w, 90px);
  padding-right: 16px;
  padding-left: 0;
  vertical-align: top;
  text-align: left;
}

/* CATATAN: di sini dulu ada blok "reset paksa" (position/transform/margin
   dinolkan untuk SEMUA isi kolom gambar) yang dipasang untuk melawan
   gambar yang menjulur ke kiri sampai kepotong tepi layar. Blok itu sudah
   dihapus - gambarnya tidak pernah bergeser sendiri; yang bergeser
   seluruh blok cart, gara-gara kelas alignwide (lihat bagian 0 di atas).
   Kolom gambar cuma ikut terbawa karena dia yang paling kiri.

   Reset itu sekarang justru berbahaya: memaksa position:static ke SEMUA
   turunan ikut mematikan elemen yang memang perlu ditumpuk, misalnya
   label diskon di atas foto produk. */

.arc-cp.arc-cp .wc-block-cart-item__image > *,
.arc-cp.arc-cp .wc-block-cart-items__row > td:first-child > * {
  display: block;
  width: var(--arc-cp-thumb-w, 90px);
  max-width: 100%;
  line-height: 0;
  text-align: left;
}

.arc-cp.arc-cp .wc-block-cart-item__image img,
.arc-cp.arc-cp .wc-block-cart-items__row > td:first-child img {
  display: block;
  width: var(--arc-cp-thumb-w, 90px);
  max-width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 1 / var(--arc-cp-thumb-ratio, 1);
  object-fit: cover;
  background: var(--arc-cp-thumb-bg, #f3f3f3);
  border-radius: var(--arc-cp-thumb-radius, 0px);
}

.arc-cp.arc-cp .wc-block-components-product-name {
  text-decoration: none;
  display: block;
}

.arc-cp.arc-cp .wc-block-components-product-name:hover {
  opacity: 0.7;
}

.arc-cp.arc-cp .wc-block-components-product-metadata {
  margin-top: 4px;
}

.arc-cp.arc-cp .wc-block-components-product-metadata p {
  margin: 0;
}

/* -------- Deskripsi singkat vs variasi --------
   Di bawah nama produk, WooCommerce mencetak DUA hal berbeda di dalam
   .wc-block-components-product-metadata:

     .wc-block-components-product-metadata__description
         deskripsi singkat produk (Short description di halaman produk)
     .wc-block-components-product-details
         daftar variasi yang dipilih pembeli - Ukuran, Warna, dsb

   Yang perlu dibaca pembeli di halaman keranjang adalah variasinya.
   Deskripsi singkat cuma teks jualan yang sudah dibaca di halaman
   produk, dan di sini malah gampang disangka nama variasi.

   Jadi deskripsi singkat disembunyikan secara default, lewat kelas
   arc-cp--hide-desc dari kontrol "Show Product Short Description".
   Daftar variasi TIDAK ikut disembunyikan - dia elemen yang berbeda. */
.arc-cp--hide-desc.arc-cp--hide-desc .wc-block-components-product-metadata__description {
  display: none;
}

/* Harga per item di kolom kanan. */

.arc-cp.arc-cp .wc-block-cart-item__total .wc-block-components-product-price__value {
  font: inherit;
  color: inherit;
}

/* ============================================================
   3. QTY STEPPER + REMOVE
   ============================================================ */

.arc-cp.arc-cp .wc-block-components-quantity-selector {
  border: 1px solid var(--arc-cp-qty-line, #d5d5d5);
  border-radius: var(--arc-cp-qty-radius, 0px);
  background: var(--arc-cp-qty-bg, #ffffff);
  overflow: hidden;
}

/* WooCommerce menggambar garis pemisah stepper dengan ::before/::after -
   diselaraskan supaya ikut warna border dari Elementor. */
.arc-cp.arc-cp .wc-block-components-quantity-selector::before,
.arc-cp.arc-cp .wc-block-components-quantity-selector::after {
  background: var(--arc-cp-qty-line, #d5d5d5);
}

.arc-cp.arc-cp .wc-block-components-quantity-selector__button {
  color: var(--arc-cp-qty-fg, #000000);
  background: transparent;
  border: none;
}

.arc-cp.arc-cp .wc-block-components-quantity-selector__button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}

.arc-cp.arc-cp .wc-block-components-quantity-selector__input {
  color: var(--arc-cp-qty-fg, #000000);
  background: transparent;
  font-weight: 600;
}

.arc-cp.arc-cp .wc-block-cart-item__remove-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ============================================================
   4. CART TOTALS
   ============================================================ */

.arc-cp.arc-cp .wc-block-cart__totals-title {
  margin: 0 0 12px;
  padding: 0;
  text-align: left;
}

/* -------- SATU GARIS SAJA DI SELURUH KOTAK TOTALS --------
   WooCommerce membungkus tiap bagian kotak totals dengan
   .wc-block-components-totals-wrapper, dan TIAP pembungkus itu menggambar
   garisnya sendiri - abu-abu #ccc, tidak ikut kontrol "Line Color" di
   Elementor. Ditambah garis milik widget, hasilnya garis-garis menumpuk
   berdempetan cuma belasan piksel jaraknya.

   Semua garis bawaan itu dimatikan di sini. Yang disisakan HANYA satu:
   garis pembuka baris "Estimated total" (lihat .wc-block-components-
   totals-footer-item di bawah). Pembungkusnya sendiri tidak diapa-apakan,
   jadi jarak antar bagian tetap sama - yang hilang cuma coretannya.

   CATATAN buat yang mengubah file ini nanti: garisnya BUKAN ::after.
   Sempat dikira begitu dan display:none pada pseudo-element-nya tidak
   mengubah apa-apa. Garisnya border betulan di elemen pembungkusnya.
   Keduanya dimatikan sekalian supaya tahan kalau WooCommerce ganti cara. */
.arc-cp.arc-cp .wc-block-components-totals-wrapper,
.arc-cp.arc-cp .wc-block-components-totals-wrapper::before,
.arc-cp.arc-cp .wc-block-components-totals-wrapper::after {
  border: 0;
}

.arc-cp.arc-cp .wc-block-components-totals-wrapper::before,
.arc-cp.arc-cp .wc-block-components-totals-wrapper::after {
  display: none;
}

.arc-cp.arc-cp .wc-block-components-totals-item {
  border: none;
  padding: 8px 0;
  margin: 0;
}

.arc-cp.arc-cp .wc-block-components-totals-item__label {
  color: var(--arc-cp-totals-label, #6b6b6b);
  font-weight: 400;
}

.arc-cp.arc-cp .wc-block-components-totals-item__value {
  color: var(--arc-cp-totals-value, #000000);
  font-weight: 600;
}

.arc-cp.arc-cp .wc-block-components-totals-item__description {
  color: var(--arc-cp-totals-label, #6b6b6b);
}

/* Baris Total paling bawah. */

.arc-cp.arc-cp .wc-block-components-totals-footer-item {
  border-top: 1px solid var(--arc-cp-line, #e5e5e5);
  margin-top: 8px;
  padding-top: 16px;
}

.arc-cp.arc-cp .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.arc-cp.arc-cp .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--arc-cp-totals-final, #000000);
  font: inherit;
}

/* ============================================================
   4B. RANGKUMAN ORDER (tambahan widget, bukan bawaan WooCommerce)
   Isinya disalin dari baris keranjang oleh arc-cart-page.js - lihat
   catatan di file itu. Tidak ada harga yang dihitung ulang.
   ============================================================ */

/* Tanpa garis sendiri - kotak Cart Totals sudah punya cukup banyak garis
   dari WooCommerce. Pemisahnya cukup pakai jarak. */
.arc-cp .arc-cp__summary {
  padding: 4px 0 6px;
  margin-bottom: 4px;
}

.arc-cp .arc-cp__summary-title {
  margin: 0 0 10px;
}

.arc-cp .arc-cp__summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--arc-cp-summary-gap, 10px);
}

.arc-cp .arc-cp__summary-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}

.arc-cp .arc-cp__summary-name {
  min-width: 0;
  flex: 1 1 auto;
}

.arc-cp .arc-cp__summary-qty {
  white-space: nowrap;
}

.arc-cp .arc-cp__summary-price {
  flex: none;
  white-space: nowrap;
  text-align: right;
}

/* ============================================================
   4C. BARIS VOUCHER TERPASANG (tambahan widget)
   Daftar kupon yang sedang dipakai, dibaca dari gudang data WooCommerce
   oleh arc-cart-page.js - lihat catatan panjang di file itu.
   ============================================================ */

.arc-cp .arc-cp__vouchers {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
}

.arc-cp .arc-cp__voucher-label {
  color: var(--arc-cp-totals-label, #6b6b6b);
}

.arc-cp .arc-cp__voucher-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.arc-cp .arc-cp__voucher-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid var(--arc-cp-voucher-line, #d5d5d5);
  border-radius: var(--arc-cp-voucher-radius, 0px);
  background: var(--arc-cp-voucher-bg, transparent);
  color: var(--arc-cp-voucher-fg, #000000);
  line-height: 1.4;
}

.arc-cp .arc-cp__voucher-code {
  text-transform: uppercase;
}

/* Tombol x. Sengaja tombol <button> betulan, bukan ikon yang bisa
   diklik: pembaca layar mengumumkannya sebagai tombol, dan bisa
   dijangkau lewat keyboard. */
.arc-cp .arc-cp__voucher-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.arc-cp .arc-cp__voucher-remove:hover:not(:disabled) {
  opacity: 1;
}

.arc-cp .arc-cp__voucher-remove:disabled {
  cursor: default;
  opacity: 0.3;
}

/* Chip bawaan WooCommerce disembunyikan HANYA kalau baris di atas
   berhasil digambar - kelas arc-cp--own-vouchers dipasang oleh JS tepat
   setelah baris itu jadi. Kalau JS menyerah (wp.data tidak ada), kelas
   ini tidak pernah muncul dan chip bawaan tetap tampil apa adanya, jadi
   pembeli tidak pernah kehilangan cara melepas kuponnya. */
.arc-cp--own-vouchers .wp-block-woocommerce-cart-totals-block .wc-block-components-chip {
  display: none;
}

/* ============================================================
   5. KUPON
   ============================================================ */

/* Kotak kupon TIDAK menggambar garis sama sekali - baik atas maupun
   bawah. Satu-satunya garis di kotak totals adalah garis pembuka baris
   "Estimated total". Pemisah antar bagian di sini cukup pakai jarak.

   Kalau kotak kupon ikut menggambar garis, garis itu selalu berdiri
   berdempetan dengan garis pembungkus di sebelahnya - jaraknya cuma
   belasan piksel, dan justru itu yang bikin kelihatan berantakan. */
.arc-cp.arc-cp .wc-block-components-totals-coupon {
  border: none;
  padding: 12px 0;
}

.arc-cp.arc-cp .wc-block-components-panel__button {
  color: var(--arc-cp-totals-value, #000000);
  padding-left: 0;
  padding-right: 0;
}

.arc-cp.arc-cp .wc-block-components-totals-coupon__form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.arc-cp.arc-cp .wc-block-components-totals-coupon__input {
  flex: 1 1 auto;
  margin: 0;
}

.arc-cp.arc-cp .wc-block-components-totals-coupon__input input,
.arc-cp.arc-cp .wc-block-components-text-input input {
  background: var(--arc-cp-coupon-bg, #ffffff);
  border: 1px solid var(--arc-cp-coupon-line, #d5d5d5);
  border-radius: var(--arc-cp-coupon-radius, 0px);
  color: var(--arc-cp-coupon-fg, #000000);
}

.arc-cp.arc-cp .wc-block-components-totals-coupon__input input:focus,
.arc-cp.arc-cp .wc-block-components-text-input input:focus {
  border-color: var(--arc-cp-coupon-fg, #000000);
  box-shadow: none;
  outline: none;
}

/* -------- Tombol Apply --------
   Sebelum kode kupon diketik, WooCommerce menandai tombol ini disabled
   dan meredupkan teksnya - itu yang bikin tulisan "Apply" kelihatan
   gelap di atas latar hitam. Di sini warna teks dipaksa tetap terang di
   SEMUA keadaan (normal/disabled/focus), dan efek visualnya dipindah ke
   hover saja.

   Ini murni tampilan: atribut disabled milik WooCommerce TIDAK dihapus,
   jadi tombol tetap tidak bisa ditekan sampai kodenya diisi - perilaku
   aslinya tidak berubah. */

/* Ditarget lewat "button apa pun di dalam kotak kupon, KECUALI tombol
   pembuka panel (Add coupons)". Cara ini tidak bergantung pada nama class
   tombol Apply, yang bisa berbeda antar versi WooCommerce - satu-satunya
   yang perlu dikecualikan memang cuma tombol pembuka panelnya. */

.arc-cp.arc-cp .wc-block-components-totals-coupon button:not(.wc-block-components-panel__button),
.arc-cp.arc-cp .wc-block-components-totals-coupon button:not(.wc-block-components-panel__button):disabled,
.arc-cp.arc-cp .wc-block-components-totals-coupon button:not(.wc-block-components-panel__button)[disabled] {
  background: var(--arc-cp-coupon-btn-bg, #000000);
  color: var(--arc-cp-coupon-btn-fg, #ffffff);
  border: none;
  border-radius: var(--arc-cp-coupon-radius, 0px);
  font-weight: 600;
  opacity: 1;
}

/* Semua isi di dalam tombol (span teks, dsb) ikut diwarnai - sebagian
   versi WooCommerce menaruh warna di anak elemennya, bukan di tombolnya. */
.arc-cp.arc-cp .wc-block-components-totals-coupon button:not(.wc-block-components-panel__button) * {
  color: var(--arc-cp-coupon-btn-fg, #ffffff);
  opacity: 1;
}

/* Efek gelap HANYA saat hover, sesuai permintaan - bukan terus-terusan. */
.arc-cp.arc-cp .wc-block-components-totals-coupon button:not(.wc-block-components-panel__button):not(:disabled):hover {
  background: var(--arc-cp-coupon-btn-bg-h, #2b2b2b);
  color: var(--arc-cp-coupon-btn-fg-h, #ffffff);
}

.arc-cp.arc-cp .wc-block-components-totals-coupon button:not(.wc-block-components-panel__button):not(:disabled):hover * {
  color: var(--arc-cp-coupon-btn-fg-h, #ffffff);
}

/* Chip kupon yang sudah dipakai. */
.arc-cp.arc-cp .wc-block-components-chip {
  border-radius: var(--arc-cp-coupon-radius, 0px);
}

/* ============================================================
   6. TOMBOL CHECKOUT
   ============================================================ */

.arc-cp.arc-cp .wc-block-cart__submit-container {
  padding: 0;
}

.arc-cp.arc-cp .wc-block-cart__submit-button,
.arc-cp.arc-cp a.wc-block-cart__submit-button,
.arc-cp.arc-cp .wc-block-cart__submit-button.wc-block-components-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--arc-cp-checkout-bg, #000000);
  color: var(--arc-cp-checkout-fg, #ffffff);
  border: none;
  border-radius: var(--arc-cp-checkout-radius, 0px);
  padding: var(--arc-cp-checkout-pad, 16px 20px);
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.arc-cp.arc-cp .wc-block-cart__submit-button:hover,
.arc-cp.arc-cp a.wc-block-cart__submit-button:hover,
.arc-cp.arc-cp .wc-block-cart__submit-button.wc-block-components-button:hover {
  background: var(--arc-cp-checkout-bg-h, #2b2b2b);
  color: var(--arc-cp-checkout-fg-h, #ffffff);
}

/* ============================================================
   6B. KERANJANG KOSONG (tambahan widget)
   Ikon + satu kalimat + satu tombol, semuanya rata tengah.
   Grid produk bawaan WooCommerce sengaja tidak dipakai.
   ============================================================ */

.arc-cp .arc-cp__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: 60px 20px;
  /* width 100% + margin auto: rata tengah tetap jalan baik kalau
     induknya blok biasa maupun kalau WooCommerce membungkusnya dengan
     wadah flex/grid. Tanpa margin auto, di wadah flex kotak ini bisa
     menempel ke kiri dan isinya jadi tidak tepat di tengah halaman. */
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.arc-cp .arc-cp__empty-icon {
  display: inline-flex;
  color: #000000;
}

.arc-cp .arc-cp__empty-icon .arc-icon {
  width: 56px;
  height: 56px;
  stroke-width: 1.2;
}

.arc-cp .arc-cp__empty-text {
  margin: 0;
}

.arc-cp .arc-cp__empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  background: #000000;
  color: #ffffff;
  border-radius: 0;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Kalau blok keranjang kosong dirender, isinya dibuat rata tengah penuh -
   termasuk kalau WooCommerce membungkusnya dengan wadah sendiri. */
.arc-cp .wp-block-woocommerce-empty-cart-block {
  width: 100%;
  text-align: center;
}

/* ============================================================
   7. TOMBOL CONTINUE SHOPPING (tambahan widget)
   ============================================================ */

.arc-cp__continue-wrap {
  margin-top: 10px;
}

.arc-cp__continue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid #000000;
  border-radius: 0;
  padding: 15px 20px;
  color: #000000;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ============================================================
   8. SHORTCODE KLASIK [woocommerce_cart]
   Dipakai hanya kalau Cart Type di-set ke "Classic Shortcode".
   Nama class-nya beda total dari Cart block di atas.
   ============================================================ */

.arc-cp--classic.arc-cp--classic table.shop_table {
  border: none;
  border-collapse: collapse;
  width: 100%;
}

.arc-cp--classic.arc-cp--classic.arc-cp--hide-header.arc-cp--hide-header table.shop_table thead {
  display: none;
}

.arc-cp--classic.arc-cp--classic table.shop_table td {
  border: none;
  border-bottom: 1px solid var(--arc-cp-line, #e5e5e5);
  padding: var(--arc-cp-row-pad, 20px) 8px;
}

.arc-cp--classic.arc-cp--classic table.shop_table td.product-thumbnail img {
  width: var(--arc-cp-thumb-w, 90px);
  background: var(--arc-cp-thumb-bg, #f3f3f3);
  border-radius: var(--arc-cp-thumb-radius, 0px);
}

.arc-cp--classic.arc-cp--classic table.shop_table td.product-name a {
  color: #000000;
  font-weight: 700;
  text-decoration: none;
}

.arc-cp--classic.arc-cp--classic table.shop_table td.product-quantity .qty {
  border: 1px solid var(--arc-cp-qty-line, #d5d5d5);
  border-radius: var(--arc-cp-qty-radius, 0px);
  background: var(--arc-cp-qty-bg, #ffffff);
  color: var(--arc-cp-qty-fg, #000000);
}

.arc-cp--classic.arc-cp--classic .cart-collaterals,
.arc-cp--classic.arc-cp--classic .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
}

.arc-cp--classic.arc-cp--classic .cart_totals table th {
  color: var(--arc-cp-totals-label, #6b6b6b);
  font-weight: 400;
}

.arc-cp--classic.arc-cp--classic .cart_totals table td {
  color: var(--arc-cp-totals-value, #000000);
}

.arc-cp--classic.arc-cp--classic .cart_totals table th,
.arc-cp--classic.arc-cp--classic .cart_totals table td {
  border: none;
  border-bottom: 1px solid var(--arc-cp-line, #e5e5e5);
}

.arc-cp--classic.arc-cp--classic .cart_totals .order-total th,
.arc-cp--classic.arc-cp--classic .cart_totals .order-total td {
  color: var(--arc-cp-totals-final, #000000);
}

.arc-cp--classic.arc-cp--classic #coupon_code {
  background: var(--arc-cp-coupon-bg, #ffffff);
  border: 1px solid var(--arc-cp-coupon-line, #d5d5d5);
  border-radius: var(--arc-cp-coupon-radius, 0px);
  color: var(--arc-cp-coupon-fg, #000000);
}

.arc-cp--classic.arc-cp--classic .coupon .button,
.arc-cp--classic.arc-cp--classic input.button[name="apply_coupon"] {
  background: var(--arc-cp-coupon-btn-bg, #000000);
  color: var(--arc-cp-coupon-btn-fg, #ffffff);
  border: none;
  border-radius: var(--arc-cp-coupon-radius, 0px);
}

.arc-cp--classic.arc-cp--classic .checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--arc-cp-checkout-bg, #000000);
  color: var(--arc-cp-checkout-fg, #ffffff);
  border: none;
  border-radius: var(--arc-cp-checkout-radius, 0px);
  padding: var(--arc-cp-checkout-pad, 16px 20px);
  text-decoration: none;
}

.arc-cp--classic.arc-cp--classic .checkout-button:hover {
  background: var(--arc-cp-checkout-bg-h, #2b2b2b);
  color: var(--arc-cp-checkout-fg-h, #ffffff);
}

/* ============================================================
   9. PERBAIKAN TAMPILAN MOBILE

   Dua hal yang datang dari CSS bawaan blok Cart WooCommerce
   (assets/client/blocks/cart.css), bukan dari file ini.
   ============================================================ */

@media (max-width: 782px) {

  /* -------- Tombol checkout jangan menempel di bawah --------

     WooCommerce memasang ini di lebar <= 782px:

       .wc-block-cart .wc-block-cart__submit-container--sticky {
         position: fixed; bottom: 0; left: 0; width: 100%;
         padding: 16px; background: #fff; z-index: 9999
       }

     Akibatnya tombol "Proceed to Checkout" melayang menutupi isi
     halaman - di keranjang pendek dia menimpa kolom kupon.

     JANGAN di-display:none. Di cart-frontend.js kelas --sticky cuma
     DITAMBAHKAN ke container yang sama:

       classNames("wc-block-cart__submit-container",
                  {"wc-block-cart__submit-container--sticky": y})

     jadi tidak ada tombol cadangan di alur normal; menyembunyikannya
     berarti menghilangkan satu-satunya tombol checkout. Yang dinolkan
     posisinya saja, elemennya tetap ada di tempatnya. */

  .arc-cp.arc-cp .wc-block-cart__submit-container--sticky {
    position: static;
    width: auto;
    padding: 0;
    background: none;
    z-index: auto;
  }

  /* Bayangan garis atas milik bar menempel itu - tidak ada gunanya lagi
     begitu tombolnya kembali ke alur normal. */
  .arc-cp.arc-cp .wc-block-cart__submit-container--sticky::before {
    display: none;
  }

  /* -------- Tabel item jangan melar melewati layar --------

     Tabelnya width:100% TAPI table-layout-nya auto, dan "auto" tidak
     boleh menyempitkan kolom di bawah lebar min-content-nya. Di dalam
     satu baris ada tiga lebar mati sekaligus:

       kolom foto            var(--arc-cp-thumb-w), bawaan 90px
       quantity selector     width:107px  (cart.css)
       harga                 white-space:nowrap  (cart.css)

     Di layar 430px jumlahnya lewat, tabel melar, dan seluruh halaman
     jadi bisa digeser ke kiri-kanan - harga di kolom kanan kepotong
     tepi layar.

     table-layout:fixed membuat lebar kolom dihitung dari lebar tabel,
     bukan dari isinya, jadi isinya yang menyesuaikan. */

  .arc-cp.arc-cp table.wc-block-cart-items {
    table-layout: fixed;
    width: 100%;
  }

  /* Sel yang isinya panjang harus boleh menyusut. Tanpa min-width:0,
     elemen flex/grid di dalam sel memakai min-content sebagai batas
     bawah dan melawan table-layout:fixed. */
  .arc-cp.arc-cp .wc-block-cart-items__row > td,
  .arc-cp.arc-cp .wc-block-cart-item__wrap {
    min-width: 0;
  }

  /* Nama produk seperti "Hoodie test (Copy) (Copy) (Copy)" tidak punya
     spasi di tempat yang menolong; dipatahkan di mana pun kalau perlu. */
  .arc-cp.arc-cp .wc-block-components-product-name {
    overflow-wrap: anywhere;
  }

  /* -------- Baris harga harus boleh turun baris --------

     Isi baris harga (harga coret, harga jual, badge "Save ...") ditata
     WooCommerce sebagai flex dengan flex-wrap:nowrap. Aturan yang
     mengizinkannya turun baris ADA, tapi dipasang di container query:

       @container (max-width: 399px) { ... .wc-block-cart-item__prices {
         flex-wrap: wrap } }

     Container-nya .wp-block-woocommerce-cart - yaitu seluruh blok cart,
     bukan sel harganya. Di layar 430px lebar blok itu sekitar 406px, jadi
     ambang 399px tidak pernah terlewat dan baris harga tetap nowrap -
     padahal selnya sendiri jauh lebih sempit sejak table-layout:fixed di
     atas. Hasilnya badge "Save" menabrak harga jual.

     Diputuskan dari media query supaya tidak bergantung pada lebar blok. */

  .arc-cp.arc-cp .wc-block-cart-items__row .wc-block-cart-item__prices {
    flex-wrap: wrap;
  }

  /* Badge jangan ikut dikecilkan saat baris sempit - lebarnya sudah
     fit-content, biarkan utuh dan turun baris kalau tidak muat. */
  .arc-cp.arc-cp .wc-block-components-product-sale-badge {
    flex: 0 0 auto;
  }
}