/* ============================================================
   maswebsite WIDGET
   Semua nilai yang bisa diatur dari panel Style Elementor ditulis
   sebagai CSS custom property dengan nilai cadangan di sini. Jadi
   kalau kontrolnya belum pernah disentuh, tampilannya tetap benar
   (hitam-putih), dan begitu diatur, Elementor cukup menimpa
   variabelnya saja - tidak perlu selector yang saling berebut
   spesifisitas.
   ============================================================ */

:root,
body {
  --maswebsite-panel-w: 460px;
  --maswebsite-panel-bg: #ffffff;
  --maswebsite-panel-fg: #000000;
  --maswebsite-panel-muted: #6b6b6b;
  --maswebsite-panel-line: #e5e5e5;
  --maswebsite-panel-pad: 24px;
  --maswebsite-overlay: rgba(0, 0, 0, 0.5);
  --maswebsite-speed: 420ms;

  --maswebsite-btn-bg: #000000;
  --maswebsite-btn-fg: #ffffff;
  --maswebsite-btn-bg-h: #2b2b2b;
  --maswebsite-btn-fg-h: #ffffff;

  --maswebsite-thumb-w: 110px;
  --maswebsite-thumb-ratio: 1;
  --maswebsite-thumb-bg: #f3f3f3;
  --maswebsite-thumb-radius: 0px;

  --maswebsite-cross-w: 120px;

  --maswebsite-tab-fg: #9a9a9a;
  --maswebsite-tab-fg-active: #000000;
  --maswebsite-tab-line: #000000;

  --maswebsite-field-fg: #000000;
  --maswebsite-field-bg: #ffffff;
  --maswebsite-field-line: #d5d5d5;
  --maswebsite-field-line-focus: #000000;
  --maswebsite-field-radius: 0px;
}

.maswebsite-icon {
  display: block;
  flex: none;
}

/* ============================================================
   TOMBOL IKON (TRIGGER)
   ============================================================ */

.maswebsite-trigger-wrap {
  display: flex;
  align-items: center;
}

.maswebsite-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  /* PENYEBAB TOMBOL "JEDAK-JEDUK" PAS HOVER:
     Sebelumnya di sini "border: 0" - artinya TIDAK ADA ruang border
     yang disiapkan sama sekali. Kontrol Style > Icon Button > Hover >
     Border Color di Elementor cuma mengganti WARNA border, tapi kalau
     di keadaan Normal border-nya memang belum ada (lebar 0), begitu
     hover aktif dan lebar border ikut muncul, ukuran kotak tombolnya
     jadi berubah - itu yang kelihatan seperti melompat/berdenyut.

     Diperbaiki dengan menyiapkan border 1px TRANSPARAN dari awal (jadi
     tidak kelihatan, tampilannya sama seperti border:0 sebelumnya) dan
     box-sizing:border-box supaya lebar border itu tidak pernah menambah
     ukuran luar tombol - baik di keadaan normal maupun hover, ukurannya
     sudah pasti sama persis. Hover jadi murni ganti warna, tidak pernah
     ganti ukuran lagi. */
  border: 1px solid transparent;
  box-sizing: border-box;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.maswebsite-trigger__icon {
  position: relative;
  display: inline-flex;
}

.maswebsite-trigger__label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.maswebsite-trigger__badge {
  position: absolute;
  top: -8px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

/* Badge disembunyikan waktu keranjang kosong - tapi cuma kalau
   opsinya dinyalakan (class ada di pembungkus, lihat catatan di
   class-maswebsite-cart-widget.php). */
.maswebsite-trigger-wrap--hide-empty .maswebsite-trigger__badge[data-maswebsite-empty="1"] {
  display: none;
}

/* ============================================================
   PANEL (CANGKANG)
   ============================================================ */

.maswebsite-panel {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: block;
}

.maswebsite-panel[hidden] {
  display: none;
}

.maswebsite-panel__overlay {
  position: absolute;
  inset: 0;
  background: var(--maswebsite-overlay);
  opacity: 0;
  transition: opacity var(--maswebsite-speed) ease;
}

.maswebsite-panel__sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(var(--maswebsite-panel-w), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--maswebsite-panel-bg);
  color: var(--maswebsite-panel-fg);
  transition: transform var(--maswebsite-speed) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  outline: none;
}

.maswebsite-panel--right .maswebsite-panel__sheet {
  right: 0;
  transform: translateX(100%);
}

.maswebsite-panel--left .maswebsite-panel__sheet {
  left: 0;
  transform: translateX(-100%);
}

.maswebsite-panel.is-open .maswebsite-panel__overlay {
  opacity: 1;
}

.maswebsite-panel.is-open .maswebsite-panel__sheet {
  transform: translateX(0);
}

/* Kalau pengunjung menyalakan "kurangi animasi" di sistem operasinya,
   panel langsung muncul tanpa geser. */
@media (prefers-reduced-motion: reduce) {
  .maswebsite-panel__overlay,
  .maswebsite-panel__sheet {
    transition-duration: 0.01ms;
  }
}

.maswebsite-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--maswebsite-panel-pad);
  border-bottom: 1px solid var(--maswebsite-panel-line);
}

.maswebsite-panel__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
}

.maswebsite-panel__close {
  display: inline-flex;
  padding: 4px;
  margin: -4px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.maswebsite-panel__close:hover,
.maswebsite-panel__close:focus,
.maswebsite-panel__close:active {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.maswebsite-panel__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.maswebsite-panel__loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--maswebsite-panel-bg) 70%, transparent);
}

.maswebsite-panel__loader[hidden] {
  display: none;
}

.maswebsite-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--maswebsite-panel-line);
  border-top-color: var(--maswebsite-panel-fg);
  border-radius: 50%;
  animation: maswebsite-spin 0.7s linear infinite;
}

@keyframes maswebsite-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Kunci scroll halaman waktu panel terbuka.
   CATATAN: di situs ini elemen yang benar-benar men-scroll adalah
   <body>, bukan <html> - jadi dua-duanya dikunci sekaligus supaya
   aman apa pun strukturnya. */
body.maswebsite-panel-open,
html.maswebsite-panel-open {
  overflow: hidden !important;
}

/* ============================================================
   TOMBOL
   ============================================================ */

.maswebsite-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: var(--maswebsite-btn-bg);
  color: var(--maswebsite-btn-fg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.maswebsite-btn:hover,
.maswebsite-btn:focus-visible {
  background: var(--maswebsite-btn-bg-h);
  color: var(--maswebsite-btn-fg-h);
}

.maswebsite-btn--ghost {
  background: transparent;
  color: var(--maswebsite-panel-fg);
  border: 1px solid var(--maswebsite-panel-line);
}

.maswebsite-btn--ghost:hover {
  background: transparent;
  color: var(--maswebsite-panel-fg);
  border-color: var(--maswebsite-panel-fg);
}

.maswebsite-btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* ============================================================
   ISI PANEL KERANJANG
   ============================================================ */

.maswebsite-cart__empty {
  padding: calc(var(--maswebsite-panel-pad) * 2) var(--maswebsite-panel-pad);
  text-align: center;
}

.maswebsite-cart__empty-text {
  margin: 0 0 20px;
  color: var(--maswebsite-panel-muted);
  font-size: 14px;
}

.maswebsite-cart__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.maswebsite-cart__item {
  display: flex;
  gap: 16px;
  padding: var(--maswebsite-panel-pad);
  border-bottom: 1px solid var(--maswebsite-panel-line);
}

.maswebsite-cart__thumb {
  flex: none;
  width: var(--maswebsite-thumb-w);
  aspect-ratio: 1 / var(--maswebsite-thumb-ratio);
  overflow: hidden;
  background: var(--maswebsite-thumb-bg);
  border-radius: var(--maswebsite-thumb-radius);
}

.maswebsite-cart__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.maswebsite-cart__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.maswebsite-cart__name {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.maswebsite-cart__name a {
  color: inherit;
  text-decoration: none;
}

.maswebsite-cart__price {
  font-size: 13px;
  font-weight: 600;
}

.maswebsite-cart__price del {
  opacity: 0.5;
  margin-right: 6px;
}

.maswebsite-cart__meta,
.maswebsite-cart__meta p {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--maswebsite-panel-muted);
}

.maswebsite-cart__meta dl,
.maswebsite-cart__meta dt,
.maswebsite-cart__meta dd {
  display: inline;
  margin: 0;
  font-size: inherit;
}

.maswebsite-cart__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

/* -------- Qty stepper --------
   SENGAJA TANPA BORDER/KOTAK di sekelilingnya - cuma "− QTY 1 +" polos
   sejajar, persis seperti referensi desain.

   KOREKSI dari versi sebelumnya: kotak yang kelihatan muncul pas hover
   BUKAN dari "border" - itu terbukti salah tebak. Yang sebenarnya
   muncul adalah OUTLINE, properti CSS yang beda dari border. <button>
   di HTML otomatis dapat outline bawaan browser saat fokus (bisa
   ke-trigger dari klik, bukan cuma Tab keyboard, tergantung browser) -
   dan outline BAWAAN BROWSER ini tidak pernah disentuh border:none
   sama sekali, makanya kotaknya tetap muncul walau border sudah
   dihapus.

   Selector ditulis dobel (.maswebsite-qty.maswebsite-qty) - trik yang sama dipakai
   maswebsite-myaccount-page.css - supaya aturan di sini
   menang specificity-nya berapa pun urutan file CSS lain dimuat. */
.maswebsite-qty.maswebsite-qty {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: none;
  box-shadow: none;
}

.maswebsite-qty__btn.maswebsite-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  box-shadow: none;
  outline: none;
}

.maswebsite-qty__btn .maswebsite-icon {
  width: 14px;
  height: 14px;
}

.maswebsite-qty__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.maswebsite-qty__value {
  min-width: 14px;
  text-align: center;
  font-weight: 600;
}

/* -------- Tombol Remove --------
   Teks polos, TANPA underline dan TANPA latar - persis referensi.
   Sebelumnya ada underline; dibuang di sini karena referensinya polos.
   Dobel class dengan alasan sama seperti .maswebsite-qty di atas. */
.maswebsite-cart__remove.maswebsite-cart__remove {
  padding: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--maswebsite-panel-fg);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}

.maswebsite-cart__remove.maswebsite-cart__remove:hover {
  opacity: 0.6;
}

.maswebsite-cart__totals {
  padding: var(--maswebsite-panel-pad);
  /* Garis pemisah sebelum Subtotal. Dulu 2px --maswebsite-panel-fg (hitam
     pekat) supaya tegas seperti referensi, tapi hasilnya jadi palang
     gelap yang lebih menarik perhatian daripada angka totalnya
     sendiri. Sekarang disamakan dengan garis antar-item: 1px abu
     tipis. */
  border-top: 1px solid var(--maswebsite-panel-line);
}

/* Baris terakhir tidak perlu garis abu-abu sendiri lagi - sudah ada
   garis tebal dari .maswebsite-cart__totals tepat di bawahnya. */
.maswebsite-cart__item:last-child {
  border-bottom: none;
}

.maswebsite-cart__note {
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--maswebsite-panel-muted);
}

.maswebsite-cart__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.maswebsite-cart__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 var(--maswebsite-panel-pad) var(--maswebsite-panel-pad);
}

/* ============================================================
   REKOMENDASI PRODUK
   ============================================================ */

.maswebsite-cross {
  padding: var(--maswebsite-panel-pad);
  border-top: 1px solid var(--maswebsite-panel-line);
}

.maswebsite-cross__title {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.maswebsite-cross__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.maswebsite-cross__card {
  flex: none;
  width: var(--maswebsite-cross-w);
}

.maswebsite-cross__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--maswebsite-thumb-bg);
  border-radius: var(--maswebsite-thumb-radius);
}

.maswebsite-cross__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.maswebsite-cross__add {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  background: #000;
  color: #fff;
  cursor: pointer;
}

.maswebsite-cross__add .maswebsite-icon {
  width: 15px;
  height: 15px;
}

.maswebsite-cross__add.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

.maswebsite-cross__name {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}

.maswebsite-cross__price {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.maswebsite-cross__price del {
  opacity: 0.5;
  margin-right: 4px;
}

/* ============================================================
   PANEL AKUN
   ============================================================ */

.maswebsite-tabs {
  display: flex;
  gap: 24px;
  padding: var(--maswebsite-panel-pad) var(--maswebsite-panel-pad) 0;
}

.maswebsite-tabs__btn {
  position: relative;
  padding: 0 0 12px;
  border: 0;
  background: none;
  color: var(--maswebsite-tab-fg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease;
}

.maswebsite-tabs__btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--maswebsite-tab-line);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.maswebsite-tabs__btn.is-active {
  color: var(--maswebsite-tab-fg-active);
}

.maswebsite-tabs__btn.is-active::after {
  transform: scaleX(1);
}

.maswebsite-form {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: var(--maswebsite-panel-pad);
}

.maswebsite-form.is-active {
  display: flex;
}

.maswebsite-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.maswebsite-field__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--maswebsite-panel-muted);
}

.maswebsite-field__wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.maswebsite-field__wrap .maswebsite-field__input {
  width: 100%;
}

.maswebsite-field__input {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--maswebsite-field-line);
  border-radius: var(--maswebsite-field-radius);
  background: var(--maswebsite-field-bg);
  color: var(--maswebsite-field-fg);
  font-size: 14px;
  line-height: 1.3;
  transition: border-color 0.2s ease;
}

.maswebsite-field__input:focus {
  outline: none;
  border-color: var(--maswebsite-field-line-focus);
}

.maswebsite-field__input--has-icon {
  padding-left: 40px;
}

/* PADDING FIELD HARUS MENANG DARI TEMA.
 *
 * Hello Elementor menata input lewat selector atribut:
 *
 *   input[type="email"], input[type="password"], input[type="text"], ...
 *   { padding: .5rem 1rem }
 *
 * Bobotnya (0,1,1) - lebih tinggi dari .maswebsite-field__input (0,1,0) - dan
 * memakai shorthand `padding`, yang ikut menghapus padding-left:40px milik
 * varian berikon. Akibatnya terukur di /register: padding-left jadi 16px,
 * ikon Instagram berhenti di x=39 sementara teks mulai di x=26, jadi
 * placeholder "@username" menabrak ikonnya.
 *
 * Ditambah satu class di depan supaya bobotnya (0,2,0) dan menang tanpa
 * !important. Nilainya sengaja sama dengan aturan di atas - ini bukan
 * perubahan desain, cuma mengembalikan yang sudah dimaksudkan.
 */
.maswebsite-field .maswebsite-field__input {
  padding: 14px;
}

.maswebsite-field .maswebsite-field__input--has-icon {
  padding-left: 40px;
}

.maswebsite-field__icon {
  position: absolute;
  left: 13px;
  display: inline-flex;
  color: var(--maswebsite-panel-muted);
  pointer-events: none;
}

.maswebsite-field__icon .maswebsite-icon {
  width: 16px;
  height: 16px;
}

.maswebsite-field__toggle {
  position: absolute;
  right: 10px;
  display: inline-flex;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--maswebsite-panel-muted);
  cursor: pointer;
}

.maswebsite-field__toggle .maswebsite-icon {
  width: 17px;
  height: 17px;
}

.maswebsite-field__help {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--maswebsite-panel-muted);
}

.maswebsite-field.has-error .maswebsite-field__input {
  border-color: #c0392b;
}

.maswebsite-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.maswebsite-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--maswebsite-panel-muted);
  cursor: pointer;
}

.maswebsite-link {
  font-size: 12px;
  color: var(--maswebsite-panel-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.maswebsite-form__terms {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--maswebsite-panel-muted);
}

/* Teks kebijakan privasi TIDAK dicetak oleh widget ini - datangnya dari
   WooCommerce lewat do_action('woocommerce_register_form'), jadi dia lolos
   dari .maswebsite-form__terms di atas dan memakai ukuran teks bawaan tema. Di
   antara field yang rapat, paragraf seukuran itu terbaca seperti isi
   halaman, bukan keterangan. Disamakan dengan .maswebsite-field__help supaya
   semua teks penjelas di form ini satu ukuran.

   Selector <p>-nya ikut disebut: WooCommerce membungkus kalimatnya di
   dalam <p>, dan margin bawaan <p> itu yang bikin jaraknya melebar. */
.maswebsite-form .woocommerce-privacy-policy-text,
.maswebsite-form .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--maswebsite-panel-muted);
}

/* Tautannya sendiri dibuat kontras dan digarisbawahi. Warna bawaan tema
   (merah muda) di atas teks abu berukuran 11px nyaris tidak terbaca
   sebagai tautan, dan tanpa garis bawah satu-satunya penanda "ini bisa
   diklik" tinggal warna - yang gagal untuk pembaca buta warna. */
.maswebsite-form .woocommerce-privacy-policy-text a {
  color: #000;
  text-decoration: underline;
}

.maswebsite-auth__msg {
  margin: var(--maswebsite-panel-pad) var(--maswebsite-panel-pad) 0;
  padding: 12px 14px;
  border-left: 3px solid #c0392b;
  background: rgba(192, 57, 43, 0.07);
  font-size: 13px;
  line-height: 1.5;
}

.maswebsite-auth__msg[hidden] {
  display: none;
}

.maswebsite-auth__msg--ok {
  border-left-color: #1e8449;
  background: rgba(30, 132, 73, 0.07);
}

.maswebsite-account__greet {
  padding: var(--maswebsite-panel-pad);
  border-bottom: 1px solid var(--maswebsite-panel-line);
  font-size: 14px;
}

.maswebsite-account__hello {
  color: var(--maswebsite-panel-muted);
  margin-right: 5px;
}

.maswebsite-account__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.maswebsite-account__menu-item a {
  display: block;
  padding: 16px var(--maswebsite-panel-pad);
  border-bottom: 1px solid var(--maswebsite-panel-line);
  color: var(--maswebsite-panel-fg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.maswebsite-account__menu-item a:hover {
  opacity: 0.6;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {
  .maswebsite-panel__sheet {
    width: 100vw;
  }

  .maswebsite-cart__item {
    gap: 12px;
  }

  .maswebsite-cart__thumb {
    width: min(var(--maswebsite-thumb-w), 90px);
  }
}


/* ============================================================
   PEREDAM GAYA TOMBOL GLOBAL ELEMENTOR (KIT)

   MASALAHNYA. Elementor Kit menulis aturan ini ke setiap halaman:

     .elementor-kit-8 button, ... { background-color:#000; color:#fff;
       border:1px solid #000; border-radius:5px; }
     .elementor-kit-8 button:hover, .elementor-kit-8 button:focus { ... }

   Selector itu berbobot 0-2-0 (satu class + satu elemen). Aturan di
   file ini yang ditulis sebagai satu class saja - ".maswebsite-panel__close",
   ".maswebsite-trigger" - berbobot 0-1-0, jadi KALAH telak berapa pun urutan
   pemuatan file-nya. Akibatnya tiap <button> di dalam widget diam-diam
   mewarisi kotak hitam, border, radius 5px, dan hover yang membalik
   warna.

   Itulah asal usul tiga gejala yang kelihatan tidak berhubungan:
   tombol X berlatar hitam, ikon cart/user "kadang" memunculkan border
   kotak (itu state :hover milik Kit), dan tombol-tombol panel yang
   ikut membalik warna saat disentuh.

   PERBAIKANNYA. Class digandakan (0-3-0 bersama pembungkusnya) supaya
   menang telak atas Kit tanpa perlu !important - jadi kontrol Style
   Elementor milik widget ini sendiri tetap bisa menimpa di atasnya
   kalau kamu mengaturnya dari panel.

   Trik penggandaan class ini sudah dipakai sejak awal di .maswebsite-qty__btn
   dan .maswebsite-cart__remove; di sini cuma diseragamkan ke semua tombol.
   ============================================================ */

.maswebsite-panel .maswebsite-panel__close.maswebsite-panel__close,
.maswebsite-panel .maswebsite-qty__btn.maswebsite-qty__btn,
.maswebsite-panel .maswebsite-cart__remove.maswebsite-cart__remove,
.maswebsite-trigger-wrap .maswebsite-trigger.maswebsite-trigger {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
}

/* -------- Tombol tutup (X) --------
   Latar mengikuti panel (putih), BUKAN kotak hitam. Latarnya sengaja
   tidak berubah sama sekali saat hover - yang berubah cuma ikonnya,
   dari abu ke hitam pekat. */
.maswebsite-panel .maswebsite-panel__close.maswebsite-panel__close {
  background: var(--maswebsite-panel-bg);
  color: var(--maswebsite-panel-muted);
  transition: color 0.2s ease;
}

.maswebsite-panel .maswebsite-panel__close.maswebsite-panel__close:hover,
.maswebsite-panel .maswebsite-panel__close.maswebsite-panel__close:focus,
.maswebsite-panel .maswebsite-panel__close.maswebsite-panel__close:active {
  background: var(--maswebsite-panel-bg);
  color: var(--maswebsite-panel-fg);
  border: 0;
  box-shadow: none;
  outline: none;
}

/* -------- Ikon header (cart / user) --------
   Border 1px transparan tetap dipertahankan supaya ukuran kotak tombol
   tidak pernah berubah (lihat catatan panjang di .maswebsite-trigger di atas),
   tapi warnanya dikunci transparan di SEMUA state - termasuk :hover dan
   :focus, dua state yang selama ini dibajak Kit dan memunculkan kotak. */
.maswebsite-trigger-wrap .maswebsite-trigger.maswebsite-trigger {
  border: 1px solid transparent;
}

.maswebsite-trigger-wrap .maswebsite-trigger.maswebsite-trigger:hover,
.maswebsite-trigger-wrap .maswebsite-trigger.maswebsite-trigger:focus,
.maswebsite-trigger-wrap .maswebsite-trigger.maswebsite-trigger:active {
  border-color: transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  outline: none;
}

/* -------- Stepper qty & tombol Remove --------
   Dua-duanya turun satu tingkat jadi abu, lalu menghitam saat hover.
   Sebelumnya keduanya sudah hitam sejak awal, jadi tidak ada tanda
   visual bahwa mereka bisa diklik. */
.maswebsite-panel .maswebsite-qty__btn.maswebsite-qty__btn,
.maswebsite-panel .maswebsite-cart__remove.maswebsite-cart__remove {
  color: var(--maswebsite-panel-muted);
  transition: color 0.2s ease;
}

.maswebsite-panel .maswebsite-qty__btn.maswebsite-qty__btn:hover,
.maswebsite-panel .maswebsite-cart__remove.maswebsite-cart__remove:hover {
  /* opacity tidak dipakai lagi - dulu .maswebsite-cart__remove:hover memakai
     opacity 0.6, yang justru MEMUDARKAN teks saat disentuh. Arah yang
     benar kebalikannya: menuju hitam pekat. */
  opacity: 1;
  color: var(--maswebsite-panel-fg);
}

.maswebsite-panel .maswebsite-qty__btn.maswebsite-qty__btn:disabled:hover {
  color: var(--maswebsite-panel-muted);
}

/* -------- Fokus keyboard --------
   Hover tidak boleh memunculkan garis apa pun; fokus keyboard beda
   perkara. Tanpa penanda ini, orang yang menavigasi pakai Tab tidak
   punya cara tahu sedang di tombol mana. :focus-visible hanya aktif
   untuk navigasi papan ketik, tidak muncul saat diklik mouse. */
.maswebsite-panel .maswebsite-panel__close.maswebsite-panel__close:focus-visible,
.maswebsite-panel .maswebsite-qty__btn.maswebsite-qty__btn:focus-visible,
.maswebsite-panel .maswebsite-cart__remove.maswebsite-cart__remove:focus-visible,
.maswebsite-trigger-wrap .maswebsite-trigger.maswebsite-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* ============================================================
   PANEL AKUN SAAT BELUM LOGIN
   Dua tombol yang mengantar ke halaman /login dan /register.
   Form-nya sendiri sudah tidak tinggal di panel lagi.
   ============================================================ */

.maswebsite-auth-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--maswebsite-panel-pad);
}

.maswebsite-auth-links__intro {
  margin: 0 0 4px;
  color: var(--maswebsite-panel-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================================
   FORM AUTH BERDIRI SENDIRI (widget maswebsite Login / maswebsite Register)

   Panel off-canvas punya cangkang sendiri yang mengurus lebar,
   padding, dan latar. Di halaman biasa cangkang itu tidak ada, jadi
   bagian tersebut dikerjakan di sini. Yang TIDAK diulang: gaya field,
   tombol, tab, dan pesan error - semuanya sudah didefinisikan di atas
   dan dipakai apa adanya, supaya form di halaman dan form di panel
   tidak pernah berbeda tampilan.
   ============================================================ */

.maswebsite-auth {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  color: var(--maswebsite-panel-fg);
}

.maswebsite-auth__title {
  margin: 0 0 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
}

.maswebsite-auth__note {
  margin: 0 0 20px;
  color: var(--maswebsite-panel-muted);
  line-height: 1.6;
}

.maswebsite-auth__alt {
  display: block;
  margin-top: 20px;
  color: var(--maswebsite-panel-muted);
  font-size: 13px;
  text-align: center;
}

/* Di dalam panel, .maswebsite-form sudah diberi padding oleh cangkangnya.
   Di halaman, form ini yang mengatur jaraknya sendiri. */
.maswebsite-auth .maswebsite-form {
  padding: 0;
}

/* Form login & register di panel saling bergantian lewat class
   is-active. Sebagai widget berdiri sendiri cuma ada satu form di
   halaman, jadi dia harus selalu tampil - tanpa aturan ini, widget
   maswebsite Register yang formnya tidak pernah mendapat is-active dari klik
   tab akan terlihat kosong.

   HARUS flex, bukan block: .maswebsite-form mengandalkan flex-direction:column
   + gap untuk jarak antar-field. Diganti block, semua field menempel
   tanpa jarak sama sekali. */
.maswebsite-auth .maswebsite-form {
  display: flex;
}


/* ============================================================
   IKON MENGIKUTI TERANG/GELAP BACKGROUND

   Class maswebsite-on-dark / maswebsite-on-light dipasang oleh JS ke pembungkus
   ikon, berdasarkan section bertanda maswebsite-bg-dark / maswebsite-bg-light yang
   sedang ada di belakangnya. Tidak ada section bertanda = class ini
   tidak pernah dipasang = warna ikon tetap seperti yang kamu atur di
   Elementor.

   Warnanya lewat variabel supaya bisa ditimpa dari Elementor tanpa
   menyentuh file ini.
   ============================================================ */

.maswebsite-trigger-wrap.maswebsite-on-dark {
  color: var(--maswebsite-on-dark-fg, #ffffff);
}

.maswebsite-trigger-wrap.maswebsite-on-light {
  color: var(--maswebsite-on-light-fg, #000000);
}

/* Ikon, teks, dan badge ditulis LANGSUNG, bukan lewat pewarisan.
   
   KENAPA BEGINI JELEK TAPI PERLU. Kontrol Style Elementor menulis warna
   ikon ke tombolnya sendiri dengan selector sepanjang ini:
   
     .elementor-263 .elementor-element.elementor-element-b689dc7 .maswebsite-trigger
   
   Bobotnya 0-4-0, dan file CSS-nya (post-263.css) dimuat SETELAH file
   ini. Dua hal itu berarti: mewarnai pembungkus tidak ada gunanya
   (aturan yang menyasar tombol langsung selalu mengalahkan warna
   warisan), dan bobot 0-4-0 pun masih kalah karena urutan muat.
   
   Jadi class digandakan sampai 0-5-0. Tidak pakai !important supaya
   kalau nanti kamu benar-benar butuh mengunci satu warna, !important
   dari Elementor masih bisa menang di atas ini.
   
   Kalau suatu saat ikon berhenti berubah warna lagi setelah update
   Elementor, di sinilah tempat pertama yang harus dicek: hitung ulang
   bobot selector yang ditulis Elementor. */

.maswebsite-trigger-wrap.maswebsite-on-dark .maswebsite-trigger.maswebsite-trigger.maswebsite-trigger,
.maswebsite-trigger-wrap.maswebsite-on-light .maswebsite-trigger.maswebsite-trigger.maswebsite-trigger {
  color: inherit;
}

/* Badge jumlah keranjang ikut membalik juga - kalau tidak, lingkaran
   putih berisi angka putih jadi tidak terbaca. Bobotnya dinaikkan
   dengan alasan yang sama: Elementor menulis background DAN warna
   badge dari kontrol Style widget cart. */
.maswebsite-trigger-wrap.maswebsite-on-dark .maswebsite-trigger__badge.maswebsite-trigger__badge.maswebsite-trigger__badge {
  background: var(--maswebsite-on-dark-fg, #ffffff);
  color: var(--maswebsite-on-light-fg, #000000);
}

.maswebsite-trigger-wrap.maswebsite-on-light .maswebsite-trigger__badge.maswebsite-trigger__badge.maswebsite-trigger__badge {
  background: var(--maswebsite-on-light-fg, #000000);
  color: var(--maswebsite-on-dark-fg, #ffffff);
}

/* Perpindahan warnanya dihaluskan supaya tidak berkedip saat batas
   antar-section lewat di belakang ikon. */
.maswebsite-trigger-wrap {
  transition: color 0.25s ease;
}