/* ============================================
   OK SHOP STYLES
   Dark-cinematic styling for WooCommerce surfaces:
   single product, shop loop cards, cart, checkout,
   and account pages. Loaded only on WooCommerce
   pages (see ok_enqueue_shop_styles in functions.php).
   Uses the existing CSS variables from style.css so
   the dark/light toggle keeps working.
   ============================================ */

/* ---- Product loop cards (shop grid) ---- */
.woocommerce ul.products li.product {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 20px;
  text-align: left;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ok-text, #fff);
}
.woocommerce ul.products li.product .price {
  font-family: Inter, sans-serif;
  font-weight: 600;
  color: var(--ok-red, #E63946);
}

/* ---- Buttons: brand accent everywhere Woo renders one ---- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.wc-block-components-button {
  background: var(--ok-red, #E63946);
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 600;
  border-radius: 6px;
  border: none;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover {
  background: #c92e3b;
  color: #fff;
}

/* ---- Single product layout ---- */
.ok-product-single .product .summary .product_title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--ok-text, #fff);
}
.ok-product-single .product .summary .price {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ok-red, #E63946);
}
.ok-product-single .woocommerce-product-details__short-description {
  font-family: Inter, sans-serif;
  font-weight: 300;
  line-height: 1.7;
  opacity: 0.85;
}
.ok-product-single .woocommerce-tabs ul.tabs li {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.ok-product-single .woocommerce-tabs ul.tabs li.active {
  background: rgba(255, 255, 255, 0.1);
}
.ok-product-single .woocommerce-tabs ul.tabs li a {
  color: var(--ok-text, #fff);
  font-family: Inter, sans-serif;
}
.ok-product-single .woocommerce-tabs .panel {
  font-family: Inter, sans-serif;
  font-weight: 300;
  line-height: 1.8;
}
.ok-product-single .woocommerce-tabs .panel h2,
.ok-product-single .related.products > h2 {
  font-family: Inter, sans-serif;
  font-weight: 700;
  color: var(--ok-text, #fff);
}

/* ---- Cart / checkout (classic + block) on dark bg ---- */
.ok-page-generic .woocommerce table.shop_table {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ok-text, #fff);
}
.ok-page-generic .woocommerce table.shop_table td,
.ok-page-generic .woocommerce table.shop_table th {
  border-color: rgba(255, 255, 255, 0.08);
}
.ok-page-generic .woocommerce form .form-row input.input-text,
.ok-page-generic .woocommerce form .form-row textarea,
.ok-page-generic .wc-block-components-text-input input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--ok-text, #fff);
  border-radius: 6px;
  padding: 10px 12px;
}
.ok-page-generic .woocommerce form .form-row label {
  color: var(--ok-text, #fff);
  font-family: Inter, sans-serif;
  opacity: 0.85;
}

/* Light theme adjustments via the data-theme toggle */
html[data-theme="light"] .woocommerce ul.products li.product {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .ok-page-generic .woocommerce form .form-row input.input-text,
html[data-theme="light"] .ok-page-generic .woocommerce form .form-row textarea {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--ok-text, #1A1A2E);
}