/* ============================================
   客信新材料 KeXinMaterials — WooCommerce Integration Styles
   Maps WooCommerce default markup onto the brand design system.
   Loaded only on WooCommerce pages.
   ============================================ */

/* ── Shop / Archive grid ── */
.woocommerce .products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}
.woocommerce .products::before,
.woocommerce .products::after { content: none; display: none; }

.woocommerce-result-count,
.woocommerce-ordering {
  margin-bottom: var(--space-6);
  color: var(--color-gray-500);
  font-size: var(--text-sm);
}
.woocommerce-ordering select {
  background: var(--color-dark-2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/* ── Product card ── */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-dark);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.pcard:hover {
  transform: translateY(-6px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
}
.pcard__link { display: block; color: inherit; text-decoration: none; }
.pcard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-dark-2);
  overflow: hidden;
}
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: .08em; padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--color-accent); color: #fff;
}
.pcard__body { padding: var(--space-4) var(--space-5) var(--space-3); }
.pcard__title {
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  margin: 0 0 6px; color: #fff; line-height: 1.35;
}
.pcard__meta { margin-bottom: 8px; }
.pcard__sku { font-size: 12px; color: var(--color-gray-500); letter-spacing: .04em; }
.pcard__price { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-accent); }
.pcard__price del { color: var(--color-gray-500); font-weight: 400; margin-right: 8px; }
.pcard__price ins { text-decoration: none; color: var(--color-accent); }
.pcard__actions { padding: 0 var(--space-5) var(--space-5); margin-top: auto; }
.pcard__actions .button { width: 100%; justify-content: center; }

/* ── Buttons (WC) ── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px;
  font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  border: none; border-radius: var(--radius-full);
  background: var(--color-accent); color: #fff;
  cursor: pointer; text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover { background: var(--color-accent-dark); transform: translateY(-2px); }

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt { background: var(--color-accent); color: #fff; }
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--color-accent-dark); }

.woocommerce .button.disabled,
.woocommerce .button:disabled { opacity: .55; cursor: not-allowed; }

/* ── Single product ── */
.single-product__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 900px) { .single-product__main { grid-template-columns: 1fr; gap: var(--space-8); } }

.single-product__gallery .woocommerce-product-gallery { width: 100%; }
.single-product__gallery img { border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.08); }
.single-product__summary .product_title { font-size: var(--text-3xl); color: #fff; margin: 0 0 var(--space-3); }
.single-product__summary .price { font-size: var(--text-2xl); color: var(--color-accent); font-weight: var(--weight-bold); margin: 0 0 var(--space-5); }
.single-product__summary .price del { color: var(--color-gray-500); font-weight: 400; }
.single-product__summary .woocommerce-product-details__short-description { color: var(--color-gray-300); margin-bottom: var(--space-6); line-height: 1.8; }
.single-product__summary .sku_wrapper,
.single-product__summary .posted_in { color: var(--color-gray-500); font-size: var(--text-sm); }
.single-product__summary .sku_wrapper a,
.single-product__summary .posted_in a { color: var(--color-accent); }

.single-product .cart { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-6) 0; }
.single-product .quantity { display: inline-flex; }
.single-product .quantity .qty {
  width: 64px; padding: 12px; text-align: center;
  background: var(--color-dark-2); color: #fff;
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm);
}
.single-product button.single_add_to_cart_button { flex: 0 0 auto; }

.woocommerce-tabs { margin-top: var(--space-12); }
.woocommerce-tabs ul.tabs { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-6); border: none; }
.woocommerce-tabs ul.tabs li { background: var(--color-dark-2); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-full); padding: 8px 22px; }
.woocommerce-tabs ul.tabs li.active { background: var(--color-accent); border-color: var(--color-accent); }
.woocommerce-tabs ul.tabs li a { color: #fff; text-decoration: none; font-size: var(--text-sm); }
.woocommerce-tabs .panel { color: var(--color-gray-300); line-height: 1.85; }
.woocommerce-tabs .panel h2 { color: #fff; font-size: var(--text-xl); margin-bottom: var(--space-4); }

.related.products { margin-top: var(--space-14); }
.related.products h2 { color: #fff; font-size: var(--text-2xl); margin-bottom: var(--space-6); }

/* ── Notices ── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 14px 18px; border-radius: var(--radius-md); margin: 0 0 var(--space-6);
  font-size: var(--text-sm); border: 1px solid transparent;
}
.woocommerce-message { background: rgba(46,160,67,0.15); border-color: rgba(46,160,67,0.4); color: #b6f0c2; }
.woocommerce-info { background: rgba(60,130,246,0.15); border-color: rgba(60,130,246,0.4); color: #bcd3ff; }
.woocommerce-error { background: rgba(220,38,38,0.15); border-color: rgba(220,38,38,0.4); color: #ffc3c3; list-style: none; }
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a { color: var(--color-accent); }

/* ── Cart ── */
.woocommerce-cart-form table.cart,
.woocommerce table.shop_table {
  width: 100%; border-collapse: collapse; color: var(--color-gray-300);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.woocommerce table.shop_table th { color: #fff; font-weight: var(--weight-semibold); }
.woocommerce-cart-form table.cart img { width: 72px; border-radius: var(--radius-sm); }
.woocommerce .cart_totals { margin-top: var(--space-8); }
.woocommerce .cart_totals h2 { color: #fff; font-size: var(--text-xl); margin-bottom: var(--space-4); }
.woocommerce .cart_totals table th { color: var(--color-gray-500); font-weight: 400; }
.woocommerce .cart_totals .order-total { color: var(--color-accent); font-weight: var(--weight-bold); }
.woocommerce .coupon { display: flex; gap: var(--space-2); }
.woocommerce .coupon .input-text {
  padding: 12px; background: var(--color-dark-2); color: #fff;
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm); min-width: 160px;
}

/* ── Checkout ── */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); }
@media (max-width: 900px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr; } }
.woocommerce form .form-row { margin-bottom: var(--space-4); }
.woocommerce form .form-row label { display: block; color: var(--color-gray-300); font-size: var(--text-sm); margin-bottom: 6px; }
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%; padding: 12px 14px; background: var(--color-dark-2); color: #fff;
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm); font-family: var(--font-body);
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus { outline: none; border-color: var(--color-accent); }
.woocommerce form .form-row.woocommerce-invalid .input-text { border-color: #e25555; }

.woocommerce #payment,
.woocommerce-checkout #payment {
  background: var(--color-dark); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-4);
}
.woocommerce #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.woocommerce #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.woocommerce #payment ul.payment_methods li label,
.woocommerce-checkout #payment ul.payment_methods li label { color: #fff; cursor: pointer; }
.woocommerce #payment .payment_box,
.woocommerce-checkout #payment .payment_box { color: var(--color-gray-300); font-size: var(--text-sm); padding: 10px 0; }
.woocommerce #payment .payment_box p { margin: 0; }
.woocommerce #payment .button.alt,
.woocommerce-checkout #payment .button.alt { width: 100%; margin-top: var(--space-4); padding: 16px; font-size: var(--text-base); }

/* ── My account ── */
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 100%; margin-bottom: var(--space-6); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { background: var(--color-dark-2); border-radius: var(--radius-full); padding: 8px 20px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { background: var(--color-accent); }
.woocommerce-account .woocommerce-MyAccount-navigation a { color: #fff; text-decoration: none; font-size: var(--text-sm); }
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; color: var(--color-gray-300); }

/* ── Breadcrumb & pagination ── */
.woocommerce .woocommerce-breadcrumb { color: var(--color-gray-500); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.woocommerce .woocommerce-breadcrumb a { color: var(--color-accent); }
.woocommerce nav.woocommerce-pagination { margin-top: var(--space-10); text-align: center; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 6px; list-style: none; padding: 0; border: none; }
.woocommerce nav.woocommerce-pagination li { border: none; }
.woocommerce nav.woocommerce-pagination a,
.woocommerce nav.woocommerce-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  background: var(--color-dark-2); color: #fff; border-radius: var(--radius-sm);
  text-decoration: none; font-size: var(--text-sm);
}
.woocommerce nav.woocommerce-pagination li span.current,
.woocommerce nav.woocommerce-pagination a:hover { background: var(--color-accent); }

/* ── On-sale / stock ── */
.woocommerce .onsale { background: var(--color-accent); color: #fff; border-radius: var(--radius-full); padding: 4px 12px; font-size: 11px; font-weight: var(--weight-bold); }
.woocommerce .stock { color: #6fcf7f; font-size: var(--text-sm); }
.woocommerce .stock.out-of-stock { color: #e25555; }