/* EasyWare Store — WooCommerce.
   Memetakan variabel warna WooCommerce ke token tema (otomatis ikut mode gelap),
   lalu mengganti layout float bawaan dengan grid. */

:root,:root[data-theme="dark"]{
  --wc-primary:var(--red); --wc-primary-text:#fff; --woocommerce:var(--red);
  --wc-secondary:var(--surface); --wc-secondary-text:var(--ink);
  --wc-highlight:var(--ink); --wc-highligh-text:var(--bg);
  --wc-content-bg:var(--bg); --wc-subtext:var(--ink-3);
  --wc-form-border-color:var(--line); --wc-form-border-radius:8px;
  --wc-green:var(--ok); --wc-red:var(--red-text); --wc-card-border-radius:12px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--wc-primary:var(--red);--wc-secondary:var(--surface);--wc-secondary-text:var(--ink);--wc-highlight:var(--ink);--wc-content-bg:var(--bg);--wc-subtext:var(--ink-3);--wc-form-border-color:var(--line);--wc-green:var(--ok);--wc-red:var(--red-text)}}

.wc-wrap{padding-bottom:48px}
.crumb{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);padding:22px 0 12px;margin:0}
.crumb a:hover{color:var(--ink)}

/* ---------- tombol ---------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:12px;
  background:var(--surface);color:var(--ink);font:600 15px/1.2 var(--f-body);border:1.5px solid transparent;transition:background .15s}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #respond input#submit:hover{background:var(--surface-2);color:var(--ink)}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce #respond input#submit.alt{background:var(--red);color:#fff}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,.woocommerce #respond input#submit.alt:hover{background:var(--red-press);color:#fff}
.woocommerce a.button:disabled,.woocommerce button.button:disabled,.woocommerce button.button.alt.disabled,.woocommerce button.button.disabled{opacity:.5}

/* ---------- form ---------- */
.woocommerce form .form-row{padding:0;margin:0 0 14px}
.woocommerce form .form-row label{font-size:13px;color:var(--ink-2);margin-bottom:6px;line-height:1.4}
.woocommerce form .form-row .input-text,.woocommerce form .form-row select,.woocommerce-page form .form-row .input-text,.woocommerce .quantity .qty,.ship-f input,.inp,.woocommerce form .form-row textarea{
  min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);padding:0 12px;font-size:15px;width:100%}
.woocommerce form .form-row textarea{padding:10px 12px;min-height:96px}
.woocommerce form .form-row .input-text:focus,.woocommerce form .form-row select:focus,.ship-f input:focus,.inp:focus{outline:none;border-color:var(--ink)}
.select2-container--default .select2-selection--single{height:44px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:42px;color:var(--ink);padding-left:12px}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:42px}
.select2-dropdown{background:var(--bg);border-color:var(--line);color:var(--ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted[data-selected]{background:var(--red)}
.woocommerce form .form-row.woocommerce-invalid .input-text{border-color:var(--red-text)}

/* ---------- notice ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,p.no-comments{
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top-width:1px;border-radius:12px;padding:14px 18px 14px 48px;font-size:14px;margin:0 0 20px}
.woocommerce-message::before{color:var(--ok)}
.woocommerce-info::before{color:var(--ink-2)}
.woocommerce-error::before{color:var(--red-text)}
.woocommerce-error{background:var(--red-soft)}
.woocommerce-message .button,.woocommerce-info .button{float:right;min-height:36px;padding:0 14px;font-size:14px}
.woocommerce-store-notice,p.demo_store{background:var(--ink);color:var(--bg)}

/* ---------- katalog ---------- */
/* Katalog, kartu, dan halaman produk: lihat main.css (desain baru). */

.woocommerce table.shop_table{border:1px solid var(--line);border-radius:18px;border-collapse:separate;overflow:hidden;background:var(--bg);margin:0 0 24px}
.woocommerce table.shop_table th{font:600 13px var(--f-body);color:var(--ink-2);padding:14px 16px;background:var(--surface)}
.woocommerce table.shop_table td{border-top:1px solid var(--line);padding:14px 16px;color:var(--ink)}
.woocommerce table.shop_table td.product-thumbnail img{width:64px;border-radius:10px;border:1px solid var(--line);background:#fff}
.woocommerce table.shop_table .product-name a{font-weight:500}
.woocommerce a.remove{color:var(--ink-3)!important;border-radius:8px}
.woocommerce a.remove:hover{background:var(--red)!important;color:#fff!important}
.woocommerce table.cart td.actions .coupon .input-text{width:180px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);padding:0 12px}
.woocommerce .cart-collaterals .cart_totals{float:none;width:100%;max-width:440px;margin-left:auto}
.woocommerce .cart-collaterals .cart_totals h2{font-size:22px;margin:0 0 12px}
.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button{min-height:52px;font-size:16px;border-radius:12px;background:var(--red);color:#fff}
.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button:hover{background:var(--red-press)}

/* ---------- checkout: lihat main.css (desain baru) ---------- */
/* ---------- akun ---------- */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;align-items:start}
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper{grid-column:1/-1}
.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.woocommerce-MyAccount-navigation a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink-2);font-size:14px}
.woocommerce-MyAccount-navigation a:hover{background:var(--surface);color:var(--ink)}
.woocommerce-MyAccount-navigation .is-active a{background:var(--surface);color:var(--ink);font-weight:600}
.woocommerce-account:not(.logged-in) .woocommerce{display:block}
.woocommerce form.login,.woocommerce form.register{border:1px solid var(--line);border-radius:18px;padding:22px;margin:0}
.woocommerce .col2-set#customer_login{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* ---------- WooCommerce blocks (kalau dipakai) ---------- */
.wc-block-components-button:not(.is-link){background:var(--red);color:#fff;border-radius:12px}
.wc-block-components-button:not(.is-link):hover{background:var(--red-press)}
.wc-block-components-totals-item__value,.wc-block-formatted-money-amount{font-family:var(--f-disp)}

/* ---------- beranda: rail produk ---------- */
.rail-wrap .woocommerce{margin:0}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .woocommerce ul.products,.woocommerce ul.products.columns-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cat-g{grid-template-columns:210px minmax(0,1fr);gap:24px}
}
@media (max-width:860px){
  .cat-g{grid-template-columns:1fr}
  .filters{display:none;position:static;max-height:none;border:1px solid var(--line);border-radius:14px;padding:16px}
  .filters.open{display:grid}
  .fbtn{display:inline-flex;min-height:42px}
  .woocommerce-products-header__title.page-title{font-size:28px}
  .woocommerce ul.products,.woocommerce ul.products.columns-5,.woocommerce ul.products.columns-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rail-wrap ul.products,.single-product .related ul.products,.single-product .upsells ul.products{grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .rail-wrap ul.products li.product,.related ul.products li.product{scroll-snap-align:start}
  .single-product div.product{grid-template-columns:1fr;gap:20px}
  .woocommerce div.product p.price{font-size:34px}
  .perks{grid-template-columns:1fr}
  .woocommerce form.checkout #customer_details,.woocommerce form.checkout #order_review_heading,.woocommerce form.checkout #order_review{grid-column:1;grid-row:auto;position:static}
  .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}
  .woocommerce-account .woocommerce,.woocommerce .col2-set#customer_login{grid-template-columns:1fr}
  .woocommerce table.shop_table_responsive tr td::before{color:var(--ink-3)}
  .woocommerce .cart-collaterals .cart_totals{max-width:none}
}