/**
 * SalesFision WooCommerce — frontend styling.
 *
 * Legt de SF design-tokens (--sf-color-primary/secondary/accent,
 * --sf-font-heading/body) over de standaard WooCommerce-classes heen.
 * Geen template-overrides nodig: WC's eigen markup + deze laag.
 * Werkt voor zowel shortcode- als block-based cart/checkout.
 */

/* ── Basis ─────────────────────────────────────────────────────────────── */
.woocommerce,
.woocommerce-page {
  font-family: var(--sf-font-body, inherit);
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--sf-font-heading, inherit);
}

/* ── Knoppen ───────────────────────────────────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.button.alt.single_add_to_cart_button,
.wc-block-components-button:not(.is-link) {
  background-color: var(--sf-color-primary, #111);
  color: #fff;
  border-radius: 8px;
  padding: 0.75em 1.75em;
  font-weight: 600;
  transition: filter 0.2s ease, transform 0.2s 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:not(.is-link):hover {
  background-color: var(--sf-color-primary, #111);
  color: #fff;
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled[disabled] {
  background-color: var(--sf-color-primary, #111);
  opacity: 0.5;
}

/* ── Productgrid ───────────────────────────────────────────────────────── */
.woocommerce ul.products li.product {
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  padding-bottom: 1rem;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.woocommerce ul.products li.product a img {
  margin-bottom: 0.75rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .star-rating {
  margin-left: 1rem;
  margin-right: 1rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem;
  font-weight: 600;
}

.woocommerce ul.products li.product .price {
  color: var(--sf-color-primary, #111);
  font-weight: 600;
}

.woocommerce ul.products li.product .price del {
  opacity: 0.5;
  font-weight: 400;
}

/* ── Sale-badge ────────────────────────────────────────────────────────── */
.woocommerce span.onsale {
  background-color: var(--sf-color-accent, #e63946);
  border-radius: 8px;
  line-height: 2.6;
  min-height: 2.6em;
  min-width: 2.6em;
  font-weight: 600;
}

/* ── Sterren ───────────────────────────────────────────────────────────── */
.woocommerce .star-rating span::before,
.woocommerce p.stars a {
  color: var(--sf-color-accent, #e63946);
}

/* ── Single product ────────────────────────────────────────────────────── */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--sf-color-primary, #111);
  font-size: 1.5rem;
  font-weight: 700;
}

.woocommerce div.product .woocommerce-product-gallery img {
  border-radius: 0.75rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--sf-color-primary, #111);
}

.woocommerce div.product form.cart div.quantity .qty {
  border-radius: 8px;
  padding: 0.6em;
}

/* ── Notices ───────────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--sf-color-primary, #111);
  border-radius: 0.5rem;
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--sf-color-primary, #111);
}

.woocommerce-error {
  border-radius: 0.5rem;
}

/* ── Formulieren (cart/checkout/account) ───────────────────────────────── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.6em 0.9em;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--sf-color-primary, #111);
  outline: none;
}

.woocommerce table.shop_table {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  border-collapse: separate;
  border-spacing: 0;
}

/* ── Paginering ────────────────────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul {
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none;
  margin: 0 0.15em;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 8px;
  min-width: 2.25em;
  line-height: 2.25em;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--sf-color-primary, #111);
  color: #fff;
}

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.woocommerce .woocommerce-breadcrumb {
  font-size: 0.85rem;
  opacity: 0.7;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--sf-color-primary, #111);
}