/* ==========================================================================
   PADI Los Angeles - WooCommerce via Elementor
   Dipakai bersama pendekatan Elementor-first: Loop Grid, Loop Item template,
   dan widget WooCommerce Elementor Pro (Cart, Checkout, Menu Cart, dll).
   WAJIB di-load SESUDAH padi-global.css (butuh var --padi-*).

   FILOSOFI FILE INI
   -----------------
   Dengan Elementor, sebagian besar styling seharusnya diatur di tab Style
   masing-masing widget sambil menunjuk Global Colors / Global Fonts, supaya
   nanti masih bisa diubah lewat editor tanpa sentuh kode.

   CSS di bawah HANYA untuk hal yang tidak punya control di Elementor:
     - markup internal WooCommerce yang dirender di dalam widget Cart/Checkout
       (tabel, notice, payment box, select2, dsb)
     - detail kecil yang controlnya tidak tersedia (dotted leader, badge, dll)
     - fallback kalau ada halaman yang masih memakai template/shortcode Woo bawaan

   Jangan tambahkan CSS untuk hal yang sudah bisa diatur di widget.
   ========================================================================== */

/* ---------- 1. DASAR ---------------------------------------------------- */
.woocommerce, .woocommerce-page{
  color: var(--padi-cream);
  font-family: var(--padi-font-body);
}
/* Design tidak punya sudut membulat sama sekali */
.woocommerce *, .woocommerce-page *,
.elementor-widget-woocommerce-cart *,
.elementor-widget-woocommerce-checkout-page *,
.elementor-widget-woocommerce-my-account *{ border-radius: 0 !important; }

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3{
  font-family: var(--padi-font-display);
  font-weight: 400;
  color: var(--padi-cream);
}

/* ---------- 2. LOOP GRID / LOOP ITEM ------------------------------------ */
/*
   Kartu produk dibangun di template Loop Item, bukan di sini.
   Class di bawah dipasang lewat: widget > Advanced > CSS Classes.

   .padi-loop-card  -> container terluar Loop Item
   .padi-loop-media -> container gambar (biar nempel ke tepi kartu)

   Sisanya (judul, harga, deskripsi, tombol) pakai class dari padi-global.css:
   .padi-item-name  .padi-price  .padi-body-s  .padi-btn.padi-btn--sm  .padi-tag--boxed
*/
.padi-loop-card{
  border: 1px solid var(--padi-line-14);
  background: var(--padi-green-surface);
  padding: 22px;
  transition: border-color .25s;
  height: 100%;
}
.padi-loop-card:hover{ border-color: rgba(224,164,78,.5); }

/* Gambar menempel ke tepi kartu, rasio 3:2 seperti kartu di design Order */
.padi-loop-media{
  margin: -22px -22px 16px;
  border-bottom: 1px solid var(--padi-line-14);
  overflow: hidden;
}
.padi-loop-media img{
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  filter: saturate(.94);
}

/* Baris "nama .... harga" dengan garis titik, seperti halaman Menu */
.padi-loop-row{
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.padi-loop-row .padi-leader{ flex: 1; border-bottom: 1px dotted var(--padi-line-30); }

/* Gap grid mengikuti design; atur juga di control Loop Grid > Layout > Gap */
.elementor-widget-loop-grid .elementor-loop-container{ gap: 16px; }

/* ---------- 3. WIDGET WOO ELEMENTOR ------------------------------------- */
/* Harga: widget Product Price */
.elementor-widget-woocommerce-product-price .price,
.elementor-widget-woocommerce-product-price .amount{
  font-family: var(--padi-font-display);
  color: var(--padi-gold);
}
.elementor-widget-woocommerce-product-price del{ opacity: .5; }
.elementor-widget-woocommerce-product-price ins{ text-decoration: none; }

/* Stepper qty pada Add To Cart (tidak ada control-nya di Elementor) */
.woocommerce .quantity .qty,
.elementor-widget-woocommerce-product-add-to-cart .quantity .qty{
  background: var(--padi-green-surface);
  border: 1px solid var(--padi-line-35);
  color: var(--padi-cream);
  font-family: var(--padi-font-body);
  font-size: 14px;
  height: 46px;
  padding: 0 8px;
  text-align: center;
}
.woocommerce .quantity input[type=number]::-webkit-inner-spin-button{ opacity: .35; }

/* Badge "Sale" -> tag kotak amber, bukan lingkaran */
.woocommerce span.onsale,
.elementor-widget-woocommerce-product-images span.onsale{
  background: transparent;
  border: 1px solid rgba(224,164,78,.45);
  color: var(--padi-cream);
  font-family: var(--padi-font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 10px 5px;
  min-height: 0;
  min-width: 0;
  top: 14px;
  left: 14px;
  right: auto;
  margin: 0;
}

/* Menu Cart */
.elementor-menu-cart__container{ background: var(--padi-green-surface); color: var(--padi-cream); }
.elementor-menu-cart__product{ border-bottom: 1px solid var(--padi-line-10); }
.elementor-menu-cart__product-name a{
  font-family: var(--padi-font-display);
  font-size: 17px;
  color: var(--padi-cream);
}
.elementor-menu-cart__product-price{ font-family: var(--padi-font-display); color: var(--padi-gold); }
.elementor-menu-cart__subtotal{
  font-family: var(--padi-font-display);
  font-size: 18px;
  color: var(--padi-cream);
  border-top: 1px solid var(--padi-line-14);
}

/* Tab data produk (widget Product Data Tabs) */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  border-bottom: 1px solid var(--padi-line-14);
  padding: 0;
  margin: 0 0 32px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  margin: 0 28px 0 0;
  padding: 0 0 12px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family: var(--padi-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--padi-cream);
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color: var(--padi-gold); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-bottom-color: var(--padi-gold); }

/* ---------- 4. TOMBOL WOO ----------------------------------------------- */
/*
   Tombol di dalam widget Add To Cart / Cart / Checkout punya control Style
   sendiri di Elementor - atur di sana lebih dulu. Aturan di bawah menangani
   tombol yang muncul dari markup Woo internal (Apply coupon, Update cart,
   Return to shop, tombol di notice) yang tidak punya control.
*/
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  font-family: var(--padi-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 30px;
  border: 1px solid var(--padi-line-45);
  background: transparent;
  color: var(--padi-cream);
  transition: background .25s, border-color .25s, color .25s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background: var(--padi-gold);
  border-color: var(--padi-gold);
  color: var(--padi-green);
}
/* .alt = aksi utama (Proceed to checkout, Place order) */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background: var(--padi-green-deep);
  border-color: var(--padi-green-deep);
}
.woocommerce .button:disabled,
.woocommerce .button[disabled]{ opacity: .45; cursor: not-allowed; }

/* ---------- 5. FIELD & FORM --------------------------------------------- */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label{
  font-family: var(--padi-font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--padi-cream);
  margin-bottom: 8px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.select2-container--default .select2-selection--single{
  background: var(--padi-green-surface);
  border: 1px solid var(--padi-line-35);
  color: var(--padi-cream);
  font-family: var(--padi-font-body);
  font-size: 14px;
  padding: 13px 14px;
  height: auto;
  line-height: 1.4;
  box-shadow: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus{
  border-color: var(--padi-gold);
  outline: none;
  box-shadow: none;
}
.woocommerce form .form-row ::placeholder{ color: rgba(241,234,217,.55); }
.woocommerce form .form-row.woocommerce-invalid input.input-text{ border-color: var(--padi-amber); }
.woocommerce form .form-row .required{ color: var(--padi-gold); text-decoration: none; }

/* select2 (dropdown negara / state) */
.select2-container--default .select2-selection--single .select2-selection__rendered{ color: var(--padi-cream); line-height: 1.4; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height: 100%; }
.select2-dropdown{
  background: var(--padi-green-surface);
  border: 1px solid var(--padi-line-35);
  color: var(--padi-cream);
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background: var(--padi-green-deep);
  color: var(--padi-gold);
}

/* ---------- 6. WIDGET CART (Elementor Pro) ------------------------------ */
.elementor-widget-woocommerce-cart table.shop_table,
.woocommerce table.shop_table{
  border: 1px solid var(--padi-line-16);
  border-collapse: collapse;
  background: var(--padi-green-surface);
}
.woocommerce table.shop_table th{
  font-family: var(--padi-font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--padi-cream);
  border-bottom: 1px solid var(--padi-line-14);
  padding: 18px 22px;
}
.woocommerce table.shop_table td{
  border-top: 1px solid var(--padi-line-10);
  padding: 18px 22px;
  font-size: 14px;
  color: var(--padi-cream);
}
.woocommerce table.shop_table .product-name a{
  font-family: var(--padi-font-display);
  font-size: 17px;
  line-height: 1.25;
  color: var(--padi-cream);
}
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal,
.woocommerce table.shop_table .amount{
  font-family: var(--padi-font-display);
  font-size: 16px;
  color: var(--padi-gold);
}
.woocommerce a.remove{ color: var(--padi-cream) !important; font-size: 20px; line-height: 1; }
.woocommerce a.remove:hover{ background: transparent; color: var(--padi-gold) !important; }

.woocommerce .cart-collaterals .cart_totals,
.elementor-widget-woocommerce-cart .cart_totals{
  border: 1px solid var(--padi-line-16);
  background: var(--padi-green-surface);
  padding: 22px;
}
.woocommerce .cart_totals h2{
  font-family: var(--padi-font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--padi-cream);
  margin-bottom: 18px;
}
.woocommerce .cart_totals table.shop_table{ border: 0; background: transparent; }
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th{ padding: 12px 0; }
.woocommerce .cart_totals .order-total .amount{
  font-family: var(--padi-font-display);
  font-size: 22px;
  color: var(--padi-gold);
}

/* ---------- 7. WIDGET CHECKOUT (Elementor Pro) -------------------------- */
.elementor-widget-woocommerce-checkout-page h3,
.woocommerce-checkout #order_review_heading{
  font-family: var(--padi-font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--padi-cream);
}
.elementor-widget-woocommerce-checkout-page #order_review,
.woocommerce-checkout #order_review{
  border: 1px solid var(--padi-line-16);
  background: var(--padi-green-surface);
  padding: 22px;
}
.woocommerce-checkout #payment{
  background: transparent;
  border-top: 1px solid var(--padi-line-14);
  padding-top: 18px;
}
.woocommerce-checkout #payment ul.payment_methods{ border: 0; padding: 0; }
.woocommerce-checkout #payment ul.payment_methods li{
  border: 1px solid var(--padi-line-35);
  padding: 14px 16px;
  margin-bottom: 10px;
  list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods label{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--padi-cream);
}
.woocommerce-checkout #payment div.payment_box{
  background: var(--padi-green-deep);
  color: var(--padi-cream);
  font-size: 13px;
  line-height: 1.6;
}
.woocommerce-checkout #payment div.payment_box::before{ border-bottom-color: var(--padi-green-deep); }

/* Tombol Place Order: widget Checkout punya control-nya, ini cadangan */
.woocommerce-checkout #payment #place_order{
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  padding: 18px 24px;
  background: var(--padi-green-deep);
  border-color: var(--padi-green-deep);
}
.woocommerce-checkout #payment #place_order:hover{
  background: var(--padi-gold);
  border-color: var(--padi-gold);
  color: var(--padi-green);
}

/* ---------- 8. PURCHASE SUMMARY / ORDER RECEIVED ------------------------ */
.woocommerce ul.order_details{
  border: 1px solid var(--padi-line-30);
  padding: 22px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 0 0 40px;
  list-style: none;
}
.woocommerce ul.order_details li{
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--padi-cream);
}
.woocommerce ul.order_details li strong{
  display: block;
  margin-top: 8px;
  font-family: var(--padi-font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--padi-gold);
}

/* My Account */
.woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li{ border-bottom: 1px solid var(--padi-line-10); }
.woocommerce-MyAccount-navigation li a{
  display: block;
  padding: 12px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--padi-cream);
}
.woocommerce-MyAccount-navigation li.is-active a{ color: var(--padi-gold); }

/* ---------- 9. NOTICE ---------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background: var(--padi-green-surface);
  border-top: 0;
  border-left: 2px solid var(--padi-gold);
  color: var(--padi-cream);
  font-size: 14px;
  line-height: 1.6;
  padding: 16px 20px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{ color: var(--padi-gold); }
.woocommerce-error{ border-left-color: var(--padi-amber); }
.woocommerce-error::before{ color: var(--padi-amber); }
.woocommerce-message .button,
.woocommerce-info .button{ font-size: 10.5px; letter-spacing: .22em; padding: 10px 18px; }

/* ---------- 10. FALLBACK: template Woo bawaan --------------------------- */
/*
   Hanya berlaku kalau ada halaman yang MASIH memakai loop katalog bawaan
   WooCommerce (bukan Loop Grid Elementor). Kalau semua archive sudah pakai
   Loop Grid, blok ini tidak pernah aktif dan aman dibiarkan.
*/
.woocommerce ul.products{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px;
  margin: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content: none; }
.woocommerce ul.products li.product{
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  border: 1px solid var(--padi-line-14);
  background: var(--padi-green-surface);
  padding: 22px;
}
.woocommerce ul.products li.product a img{
  margin: -22px -22px 16px;
  width: calc(100% + 44px);
  max-width: none;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-bottom: 1px solid var(--padi-line-14);
  filter: saturate(.94);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--padi-font-display);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--padi-cream);
  padding: 0;
  margin: 0 0 8px;
}
.woocommerce ul.products li.product .price{
  font-family: var(--padi-font-display);
  font-size: 16px;
  color: var(--padi-gold);
  margin: 0;
}

/* ---------- 11. RESTOPICK ------------------------------------------------ */
/*
  CATATAN JUJUR: saya belum bisa memverifikasi struktur markup & nama class
  RestoPick dari folder design ini. Blok di bawah adalah KERANGKA - isi
  selectornya setelah plugin terpasang:

    1. Buka halaman order di browser -> klik kanan -> Inspect
    2. Catat class pembungkus utama (mis. .restopick-menu, .rp-cart, .rp-item)
    3. Ganti selector placeholder di bawah dengan class asli
    4. Nilai style-nya TIDAK perlu diubah - sudah memakai token PADI

  Kalau RestoPick menyediakan template override (folder templates/ di plugin),
  lebih baik override template-nya di child theme daripada menimpa lewat CSS.
*/
/*
.restopick-wrapper{ font-family: var(--padi-font-body); color: var(--padi-cream); }
.restopick-wrapper *{ border-radius: 0 !important; }

.restopick-item{
  border: 1px solid var(--padi-line-14);
  background: var(--padi-green-surface);
  padding: 22px;
}
.restopick-item__title{
  font-family: var(--padi-font-display);
  font-size: 18px;
  line-height: 1.35;
  color: var(--padi-cream);
}
.restopick-item__price{
  font-family: var(--padi-font-display);
  font-size: 16px;
  color: var(--padi-gold);
}
.restopick-item__button,
.restopick-cart__checkout{
  font-family: var(--padi-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid var(--padi-line-35);
  background: transparent;
  color: var(--padi-cream);
  transition: background .25s, border-color .25s, color .25s;
}
.restopick-item__button:hover{
  background: var(--padi-green);
  border-color: var(--padi-green);
  color: var(--padi-cream);
}
.restopick-cart{ border: 1px solid var(--padi-line-16); background: var(--padi-green-surface); }
.restopick-cart__total{ font-family: var(--padi-font-display); font-size: 22px; color: var(--padi-gold); }
*/

/* ---------- 12. RESPONSIVE ---------------------------------------------- */
@media (max-width: 1024px){
  .woocommerce ul.products{ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td{ padding: 14px 16px; }
}
@media (max-width: 767px){
  .woocommerce ul.products{ grid-template-columns: 1fr; }
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button{ padding: 13px 24px; }
}