/* ============================================================
   WooCommerce, afgestemd op het Het Balanskantoor design.
   Tokens komen uit main.css (:root). Laadt na main.css.
   ============================================================ */

.woocommerce, .woocommerce-page, .wc-block-components-form, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
  font-family: var(--font-body);
  color: var(--color-ink);
}
.woocommerce a:not(.button), .woocommerce-page a:not(.button) { color: var(--color-accent); }
.woocommerce a:not(.button):hover { color: var(--gold-deep); }

/* ---------- Knoppen ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button.alt,
.wc-block-components-button:not(.is-link), .wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--gradient-gold) !important;
  color: var(--color-accent-ink) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 0.8rem 1.5rem !important;
  min-height: 46px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  line-height: 1.1; text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 18px oklch(58% 0.1 74 / 0.24);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce .button.alt:hover, .wc-block-components-button:not(.is-link):hover, .wp-element-button:hover {
  transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 10px 26px oklch(58% 0.1 74 / 0.32);
}
.woocommerce a.button:active, .wc-block-components-button:not(.is-link):active { transform: translateY(0); }
/* secundaire / ghost knoppen */
.woocommerce .button.wc-backward, .woocommerce a.added_to_cart {
  background: transparent !important; color: var(--color-ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--color-rule) !important;
}
.woocommerce .button.wc-backward:hover, .woocommerce a.added_to_cart:hover {
  box-shadow: inset 0 0 0 1.5px var(--gold-deep) !important; filter: none;
}

/* ---------- Prijzen ---------- */
.woocommerce .price, .woocommerce-Price-amount, .wc-block-components-product-price {
  color: var(--color-ink); font-weight: 700; font-family: var(--font-display);
}
.woocommerce .price del, .wc-block-components-product-price del { color: var(--color-muted); font-weight: 400; }
.woocommerce .price ins, .wc-block-components-product-price ins { color: var(--gold-deep); text-decoration: none; }
.woocommerce span.onsale, .wc-block-components-product-sale-badge {
  background: var(--gradient-gold); color: var(--color-accent-ink);
  border-radius: var(--radius-pill); font-weight: 700; min-height: 0; padding: 0.25rem 0.7rem;
  box-shadow: none;
}

/* ---------- Productgrid (klassiek + blok) ---------- */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.woocommerce ul.products li.product { text-align: left; margin: 0; }
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img, .wc-block-components-product-image img {
  border-radius: var(--radius-md); margin-bottom: var(--space-sm);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title, .wp-block-post-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-ink); padding-top: 0;
}
.wc-block-grid__products, .wp-block-woocommerce-product-template { gap: var(--space-lg) !important; }

/* ---------- Enkel product ---------- */
.woocommerce div.product .product_title { font-family: var(--font-display); font-size: var(--text-3xl); }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: var(--text-2xl); color: var(--gold-deep); }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--radius-lg); }
.woocommerce div.product form.cart div.quantity input.qty {
  border: 1.5px solid var(--color-rule); border-radius: var(--radius-sm); padding: 0.6rem; background: var(--color-paper-2);
}
.woocommerce div.product .woocommerce-tabs ul.tabs { border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--color-paper-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; border: 1px solid var(--color-rule); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--color-paper); border-bottom-color: var(--color-paper); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--color-rule); }

/* ---------- Formuliervelden (checkout, account, coupon) ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-input-wrapper input, .select2-container .select2-selection,
.wc-block-components-text-input input {
  border: 1.5px solid var(--color-rule) !important; border-radius: var(--radius-sm) !important;
  background: var(--color-paper-2) !important; color: var(--color-ink) !important;
  padding: 0.75rem 0.85rem !important; font-family: var(--font-body); font-size: 1rem;
  box-shadow: none !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.wc-block-components-text-input input:focus {
  border-color: var(--gold-deep) !important; outline: none;
  box-shadow: 0 0 0 3px oklch(58% 0.1 74 / 0.18) !important;
}
.woocommerce form .form-row label, .wc-block-components-checkout-step__title { color: var(--color-ink); font-weight: 600; }

/* ---------- Tabellen (winkelmand, account, order) ---------- */
.woocommerce table.shop_table, .woocommerce-orders-table, .woocommerce table.cart {
  border: 1px solid var(--color-rule); border-radius: var(--radius-md); border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--color-paper-2); font-family: var(--font-display); color: var(--color-ink); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 1px solid var(--color-rule); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review {
  background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-lg);
}

/* ---------- Mijn account ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 0.7rem 1rem; color: var(--color-ink); text-decoration: none; font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { background: var(--gradient-gold); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--color-accent-ink); }
.woocommerce-account .woocommerce-MyAccount-navigation li:hover a { color: var(--gold-deep); }
.woocommerce-account .woocommerce-MyAccount-content { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-xl); }

/* ---------- Meldingen ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner {
  border-radius: var(--radius-md); border: 1px solid var(--color-rule);
  border-top: 3px solid var(--gold-deep); background: var(--color-paper-2); color: var(--color-ink);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--gold-deep); }

/* ---------- WooCommerce-pagina's binnen onze layout ---------- */
.woocommerce, .woocommerce-page { max-width: var(--maxw, 76rem); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.page-full .woocommerce, main .woocommerce { padding-block: var(--space-2xl); }

@media (max-width: 48rem) {
  .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------- Pakketten (prijskaarten) ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); }
.price-card { position: relative; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-xl); display: flex; flex-direction: column; transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.price-card--featured { box-shadow: 0 0 0 2px var(--gold-mid), var(--shadow-soft); }
.price-card__badge { position: absolute; top: -0.75rem; left: var(--space-xl); background: var(--gradient-gold); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); }
.price-card__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin: 0 0 var(--space-xs); }
.price-card__price { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.price-card__per { font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; }
.price-card__desc { color: var(--color-ink-2); font-size: var(--text-base); margin: var(--space-sm) 0 var(--space-md); }
.price-card__list { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: var(--space-xs); flex: 1; }
.price-card__list li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--text-sm); color: var(--color-ink); }
.price-card__list li svg { color: var(--gold-deep); flex: none; margin-top: 2px; }
.price-card .btn { justify-content: center; }

/* ---------- Winkel als echte shop ---------- */
.shop-hero { text-align: center; max-width: 52ch; margin: 0 auto var(--space-2xl); }
.shop-hero h1 { font-size: var(--text-3xl); margin-bottom: var(--space-sm); }
.shop-hero p { color: var(--color-ink-2); font-size: var(--text-lg); }
.woocommerce .woocommerce-result-count { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.woocommerce .woocommerce-ordering select { border: 1.5px solid var(--color-rule); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; background: var(--color-paper-2); font-family: var(--font-body); color: var(--color-ink); }
.woocommerce ul.products li.product {
  background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  padding: var(--space-md); display: flex; flex-direction: column;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: color-mix(in oklab, var(--gold-mid) 50%, var(--color-rule)); }
.woocommerce ul.products li.product a img { border-radius: var(--radius-sm); margin-bottom: var(--space-sm); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0 0 0.2rem; font-size: 1.15rem; }
.woocommerce ul.products li.product .loop-short { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; margin-bottom: var(--space-sm); flex: 1; }
.woocommerce ul.products li.product .price { display: block; margin-bottom: var(--space-md); font-size: 1.3rem; }
.woocommerce ul.products li.product .button { margin-top: auto; width: 100%; }
.woocommerce ul.products li.product .added_to_cart { width: 100%; margin-top: var(--space-xs); }

/* WooCommerce klassieke float/width resetten zodat ons raster klopt */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; clear: none !important; }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce .products .woocommerce-result-count,
.woocommerce .woocommerce-ordering { float: none; }
.woocommerce-page .woocommerce-ordering { margin-bottom: var(--space-lg); }