/* Cupcup, halaman WooCommerce
   Cart, Checkout, My account, Order tracking, dan seluruh notice.
   Halaman ini dirender WooCommerce, bukan Elementor, jadi tidak bisa
   disentuh dari editor dan harus distyling dari sini.
   Menangani dua bentuk markup sekaligus: shortcode klasik (.woocommerce)
   dan blok WooCommerce baru (.wc-block-*). */

:root {
  --cc-ws-bone: var(--cc-bone, #F3F0E9);
  --cc-ws-surface: var(--cc-surface, #FFFFFF);
  --cc-ws-ink: var(--cc-ink, #1A1815);
  --cc-ws-deep: var(--cc-deep, #100F0C);
  --cc-ws-dim: var(--cc-dim, #6B655B);
  --cc-ws-faint: var(--cc-faint, #A39C8F);
  --cc-ws-accent: var(--cc-accent, #8C2F39);
  --cc-ws-hair: var(--cc-hairline, rgba(26, 24, 21, 0.14));
  --cc-ws-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Teks khusus pembaca layar.
   WooCommerce menyisipkan kalimat "Original price was" dan "Current
   price is" ke dalam markup harga coret. Kalau kelas ini tidak dijepit
   dengan benar, kalimat itu ikut menghitung lebar minimum kolom dan
   membuat halaman meleber ke samping. Terukur: 4px overflow di layar
   390px, datang persis dari dua span ini pada kartu produk diskon.
   Aturan di bawah menyembunyikannya secara visual tanpa menghapusnya
   dari pembaca layar. */
.screen-reader-text,
.wc-block-components-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.woocommerce-order-received,
.woocommerce-order-tracking {
  background-color: var(--cc-ws-bone);
}

/* Lebar dan napas halaman. Hello Elementor merender konten tanpa
   pembungkus berlebar tetap, jadi diberikan di sini. */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main,
.woocommerce-order-received .site-main,
.page-id-145 .site-main,
.page-id-146 .site-main {
  max-width: 1180px;
  margin-inline: auto;
  padding: 72px 48px 104px;
  background-color: var(--cc-ws-bone);
  font-family: 'Switzer', system-ui, sans-serif;
  color: var(--cc-ws-ink);
}

@media (max-width: 1024px) {
  .woocommerce-cart .site-main,
  .woocommerce-checkout .site-main,
  .woocommerce-account .site-main,
  .woocommerce-order-received .site-main,
  .page-id-145 .site-main,
  .page-id-146 .site-main { padding: 52px 26px 72px; }
}

@media (max-width: 767px) {
  .woocommerce-cart .site-main,
  .woocommerce-checkout .site-main,
  .woocommerce-account .site-main,
  .woocommerce-order-received .site-main,
  .page-id-145 .site-main,
  .page-id-146 .site-main { padding: 38px 18px 56px; }
}

/* Judul halaman */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.page-id-145 .entry-title,
.page-id-146 .entry-title {
  font-family: 'Gambetta', Georgia, serif;
  font-weight: 300;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--cc-ws-ink);
  margin: 0 0 44px;
}

/* Judul di dalam konten WooCommerce */
.woocommerce h2,
.woocommerce h3,
.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
  font-family: 'Gambetta', Georgia, serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.01em;
  color: var(--cc-ws-ink);
  text-transform: none !important;
}

.wc-block-components-title,
.wc-block-cart__totals-title {
  font-size: 22px !important;
}

/* Tombol, satu bentuk untuk semua varian WooCommerce */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wp-element-button {
  font-family: 'Switzer', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cc-ws-bone) !important;
  background-color: var(--cc-ws-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 18px 38px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition: background-color 0.45s var(--cc-ws-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover,
.wp-element-button:hover {
  background-color: var(--cc-ws-accent) !important;
  color: var(--cc-ws-bone) !important;
}

/* Tombol sekunder, misalnya Update cart dan Apply coupon */
.woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"],
.wc-block-components-button.outlined {
  color: var(--cc-ws-ink) !important;
  background-color: transparent !important;
  border: 1px solid var(--cc-ws-hair) !important;
}

.woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover,
.wc-block-components-button.outlined:hover {
  color: var(--cc-ws-bone) !important;
  background-color: var(--cc-ws-ink) !important;
  border-color: var(--cc-ws-ink) !important;
}

.woocommerce button.button:disabled,
.wc-block-components-button:disabled {
  opacity: 0.4;
}

/* Field */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox input {
  font-family: 'Switzer', system-ui, sans-serif !important;
  font-size: 15px !important;
  color: var(--cc-ws-ink) !important;
  background-color: var(--cc-ws-bone) !important;
  border: 1px solid var(--cc-ws-hair) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  min-height: 52px;
  box-shadow: none !important;
  transition: border-color 0.35s var(--cc-ws-ease);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus {
  border-color: var(--cc-ws-ink) !important;
  outline: none !important;
}

.woocommerce form .form-row label,
.wc-block-components-text-input label,
.wc-block-components-checkout-step__description {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cc-ws-dim);
}

/* Tabel keranjang, hanya hairline, tanpa border tebal dan tanpa radius */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-account table.shop_table {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

.woocommerce table.shop_table {
  border-collapse: collapse !important;
  width: 100%;
}

.woocommerce table.shop_table thead th {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cc-ws-faint);
  padding: 0 0 16px !important;
  border-bottom: 1px solid var(--cc-ws-hair) !important;
  text-align: left;
}

.woocommerce table.shop_table tbody td {
  padding: 26px 0 !important;
  border-bottom: 1px solid var(--cc-ws-hair) !important;
  font-size: 15px;
  color: var(--cc-ws-ink);
  vertical-align: middle;
}

.woocommerce table.shop_table td.product-name a,
.wc-block-components-product-name {
  color: var(--cc-ws-ink) !important;
  text-decoration: none;
  font-size: 16px;
}

.woocommerce table.shop_table td.product-name a:hover,
.wc-block-components-product-name:hover {
  color: var(--cc-ws-accent) !important;
}

.woocommerce table.shop_table img,
.wc-block-cart-item__image img {
  border-radius: 0 !important;
  width: 92px;
  height: auto;
}

.woocommerce .quantity input.qty,
.wc-block-components-quantity-selector {
  border: 1px solid var(--cc-ws-hair) !important;
  border-radius: 0 !important;
  background-color: var(--cc-ws-bone) !important;
  font-family: 'Switzer', system-ui, sans-serif;
  color: var(--cc-ws-ink);
}

.woocommerce a.remove,
.wc-block-cart-item__remove-link {
  color: var(--cc-ws-faint) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.35s var(--cc-ws-ease);
}

.woocommerce a.remove:hover,
.wc-block-cart-item__remove-link:hover {
  color: var(--cc-ws-accent) !important;
  background: transparent !important;
}

/* Total keranjang dan ringkasan pesanan */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar {
  background-color: var(--cc-ws-surface);
  border: 1px solid var(--cc-ws-hair);
  border-radius: 0 !important;
  padding: 34px 32px 36px;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
  font-size: 24px !important;
  margin-top: 0;
}

.woocommerce .order-total .amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: 'Gambetta', Georgia, serif;
  font-weight: 300;
  font-size: 26px;
  color: var(--cc-ws-ink);
}

/* Harga */
.woocommerce .amount,
.woocommerce span.woocommerce-Price-amount,
.wc-block-components-formatted-money-amount {
  font-family: 'Switzer', system-ui, sans-serif;
  color: var(--cc-ws-ink);
}

.woocommerce del,
.woocommerce del .amount {
  color: var(--cc-ws-faint);
  opacity: 1;
}

/* Notice, tanpa warna cerah bawaan WooCommerce */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  background-color: var(--cc-ws-surface) !important;
  border: 1px solid var(--cc-ws-hair) !important;
  border-top: 0 !important;
  border-left: 2px solid var(--cc-ws-ink) !important;
  border-radius: 0 !important;
  color: var(--cc-ws-ink) !important;
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: 15px;
  padding: 18px 22px !important;
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
  border-left-color: var(--cc-ws-accent) !important;
}

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

/* Navigasi My account */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cc-ws-hair);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--cc-ws-hair);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 16px 0;
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cc-ws-dim);
  text-decoration: none;
  transition: color 0.35s var(--cc-ws-ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--cc-ws-ink);
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  border: 1px solid var(--cc-ws-hair) !important;
  border-radius: 0 !important;
  background-color: var(--cc-ws-surface);
  padding: 36px 34px 40px !important;
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-ws-faint);
  margin-bottom: 28px;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--cc-ws-dim);
  text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover { color: var(--cc-ws-accent); }

/* Form pelacakan pesanan */
.woocommerce form.track_order .form-row { margin-bottom: 18px; }
.woocommerce form.track_order { max-width: 560px; }

/* Hilangkan sudut membulat dan bayangan bawaan di mana pun */
.woocommerce .woocommerce-checkout-review-order-table,
.wc-block-components-panel,
.wc-block-components-radio-control__option {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---- PAGINASI SHOP ----
   Elementor 4.3.0-beta2 TIDAK merender anak dari e-pagination-prev dan
   e-pagination-next, meskipun skema widgetnya bilang can_have_children.
   Akibatnya <a>-nya keluar benar benar kosong dan tombolnya tak terlihat,
   cuma kotak 25x17 tanpa isi. Labelnya dipasang lewat ::after di sini.
   Jangan hapus sebelum memastikan versi Elementor baru sudah merender
   anaknya. */
.e-pagination-prev-base::after { content: 'Prev'; }
.e-pagination-next-base::after { content: 'Next'; }

.e-pagination-prev-base,
.e-pagination-next-base {
  border: 0 !important;
  padding: 6px 2px !important;
  min-width: 0;
  text-decoration: none;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.45s var(--cc-ws-ease), opacity 0.45s var(--cc-ws-ease);
}

.e-pagination-prev-base:hover,
.e-pagination-next-base:hover {
  border-bottom-color: currentColor !important;
}

.e-pagination-prev-base.e--disabled,
.e-pagination-next-base.e--disabled {
  opacity: 0.28;
  pointer-events: none;
}


/* ------------------------------------------------------------------
   CHECKOUT BLOK: label mengambang menimpa nilai yang diketik.

   WooCommerce blok memakai floating label: label diposisikan absolut di
   dalam kotak input, lalu naik ke atas begitu kolomnya terisi. Ruang
   untuk label yang naik itu datang dari padding atas input. Aturan
   field di atas memaksa padding 14px dengan !important, jadi ruangnya
   hilang dan label mendarat tepat di atas nilainya. Terlihat jelas di
   Email address, First name, dan Address.

   Perbaikannya: padding atas diperbesar, dan label dikunci kecil di
   bagian atas kotak sehingga posisinya sama baik kolom kosong maupun
   terisi, tidak bergantung pada kelas status milik WooCommerce.
   ------------------------------------------------------------------ */
.wc-block-components-text-input input,
.wc-block-components-combobox input{
  padding:14px 16px!important;
  min-height:52px!important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox label{
  font-size:10.5px!important;
  line-height:1.2!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:var(--cc-ws-dim)!important;
  transition:none!important;
}


/* ------------------------------------------------------------------
   BLOK WOOCOMMERCE ALIGNWIDE TERGESER KE KIRI.

   Tema Hello Elementor memberi .alignwide margin-inline:-80px. Blok
   Cart dan Checkout memakai kelas itu, jadi seluruh isinya melompat
   80px ke kiri. Di desktop masih termaafkan, di layar 375px teksnya
   terpotong di tepi kiri (Estimated total terbaca "ed total").

   Ini REGRESI: sudah pernah diperbaiki 2026-09-12 lalu hilang saat isi
   woocommerce.css sempat terhapus. Jangan dihapus lagi.
   ------------------------------------------------------------------ */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.woocommerce .alignwide,
.woocommerce-page .alignwide{
  margin-inline:0!important;
  max-width:100%!important;
}

/* Gutter grid produk di blok keranjang kosong ikut meleber 8px. */
.wc-block-grid__products{
  margin-inline:0!important;
}


/* ------------------------------------------------------------------
   LATAR BONE DI SELURUH SITUS.

   Body default tema berwarna putih. Di halaman yang isinya lebih sempit
   dari layar (Order Tracking, Shipping and Returns, FAQ) putih itu
   bocor sebagai pita di kiri dan kanan, padahal seluruh desain memakai
   bone. Section gelap tetap mengecat latarnya sendiri, jadi aturan ini
   aman untuk semua halaman.
   ------------------------------------------------------------------ */
body{background-color:var(--cc-ws-bone);}

/* ------------------------------------------------------------------
   TOMBOL DAN TAUTAN DI BLOK KERANJANG.

   Blok WooCommerce membawa tombol pil abu abu (border-radius 9999px,
   latar rgb(50,55,60)) dan tautan bergaris bawah. Itu bahasa desain
   WooCommerce, bukan Cupcup, yang memakai tombol persegi tinta.
   ------------------------------------------------------------------ */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-button{
  border-radius:0!important;
  background-color:var(--cc-ws-ink)!important;
  color:var(--cc-ws-bone)!important;
  font-family:'Switzer',system-ui,sans-serif!important;
  font-size:11px!important;
  font-weight:500!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  box-shadow:none!important;
}
.wc-block-components-button:hover{background-color:var(--cc-ws-deep)!important;}
.wc-block-components-product-name,
.wc-block-cart-item__product a,
.wc-block-grid__product-link{text-decoration:none!important;}

/* My account: kotak centang Remember me tidak sebaris dengan labelnya. */
.woocommerce-form-login__rememberme{
  display:flex!important;
  align-items:center;
  gap:8px;
}
.woocommerce-form-login__rememberme input[type="checkbox"]{margin:0!important;}


/* ------------------------------------------------------------------
   CHECKOUT BLOK, REVISI: label dijadikan statis di atas kotak.

   Percobaan sebelumnya mempertahankan floating label dan menggesernya
   dengan transform tetap. Itu rapuh: nilai geser yang pas di satu
   ukuran font justru melempar label keluar kotak di perangkat lain,
   dan itu yang terjadi di HP Vico (FIRST NAME melayang di atas kotak).

   Sekarang label dilepas dari posisi absolut dan diletakkan sebagai
   blok biasa di atas fieldnya, dengan gaya micro-label yang sama
   seperti bagian lain situs. Tidak ada tumpang tindih yang mungkin,
   apa pun ukuran font atau zoom perangkatnya.
   ------------------------------------------------------------------ */
.wc-block-components-text-input,
.wc-block-components-combobox{
  position:relative;
  display:flex!important;
  flex-direction:column!important;
}
/* Di markup WooCommerce label ditulis SESUDAH input, jadi tanpa ini
   label statis mendarat di bawah kotaknya. */
.wc-block-components-text-input label,
.wc-block-components-combobox label{order:-1!important;}
.wc-block-components-text-input label,
.wc-block-components-combobox label{
  position:static!important;
  transform:none!important;
  display:block!important;
  margin:0 0 6px!important;
  padding:0!important;
  max-width:none!important;
  font-size:10.5px!important;
  line-height:1.3!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:var(--cc-ws-dim)!important;
  overflow:visible!important;
}
.wc-block-components-text-input input,
.wc-block-components-combobox input{
  padding:14px 16px!important;
  min-height:52px!important;
  background-color:var(--cc-ws-bone)!important;
  border:1px solid var(--cc-ws-hair)!important;
  border-radius:0!important;
}


/* ------------------------------------------------------------------
   PANEL ORDER SUMMARY (checkout dan cart).

   Bawaannya: panel putih dengan padding NOL, sehingga judul dan angka
   menempel ke tepi panel, plus pita putih kosong di atas judul karena
   panel mengecat latar putihnya sendiri di atas border judul. Di
   halaman bone hasilnya terbaca seperti kotak yang belum selesai.

   Panel disamakan dengan bahasa desain situs: latar bone, satu garis
   hairline, sudut siku, dan padding yang layak.
   ------------------------------------------------------------------ */
.wc-block-components-sidebar,
.wc-block-checkout__sidebar{
  background-color:transparent!important;
  border:0!important;
  padding:0!important;
}

/* Kotak berborder yang sebenarnya adalah *-order-summary-block-fill.
   Di lebar HP blok ringkasan pindah dari sidebar ke kolom utama, jadi
   memberi padding pada sidebar tidak berpengaruh sama sekali di HP dan
   isinya menempel ke garis border. Padding dipasang di kotaknya sendiri
   supaya berlaku di kedua tata letak. */
[class*="order-summary-block-fill"]{
  border:1px solid var(--cc-ws-hair)!important;
  border-radius:0!important;
  background-color:transparent!important;
  padding:20px!important;
}
.wc-block-components-checkout-order-summary__title{
  border-top:0!important;
  padding:0 0 14px!important;
}
.wc-block-components-checkout-order-summary__title-text{
  font-family:'Gambetta',serif!important;
  font-size:19px!important;
  letter-spacing:.01em!important;
}


/* Dropdown Country/Region dan Province memakai komponen select milik
   WooCommerce dengan pola floating label yang sama, jadi diperlakukan
   sama: label statis di atas, kotak bone bersudut siku. */
.wc-blocks-components-select{
  display:flex!important;
  flex-direction:column!important;
}
.wc-blocks-components-select__label{
  position:static!important;
  order:-1!important;
  transform:none!important;
  margin:0 0 6px!important;
  padding:0!important;
  font-size:10.5px!important;
  line-height:1.3!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:var(--cc-ws-dim)!important;
}
.wc-blocks-components-select__select{
  background-color:var(--cc-ws-bone)!important;
  border:1px solid var(--cc-ws-hair)!important;
  border-radius:0!important;
  padding:14px 16px!important;
  min-height:52px!important;
  font-family:'Switzer',system-ui,sans-serif!important;
  font-size:15px!important;
  color:var(--cc-ws-ink)!important;
}