/* WooCommerce reskin -- staging build.
 * Cart/Checkout/My Account use WooCommerce's own default templates (not
 * custom-built like the Shop/single-product pages), so this file re-colors
 * and re-fonts their standard markup to match the rest of the site rather
 * than leaving WooCommerce's stock blue/grey look. A full custom cart and
 * checkout UI (matching the old drawer's exact interaction design) is a
 * larger follow-up, not attempted here.
 */
.woocommerce, .woocommerce table, .woocommerce input, .woocommerce select, .woocommerce textarea {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
}
.woocommerce h1, .woocommerce h2, .woocommerce h3 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--forest);
}
.woocommerce a { color: var(--forest2); }
.woocommerce a:hover { color: var(--gold); }

/* Buttons -- add to cart, checkout, place order, coupon apply, etc. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce .checkout-button {
  background: var(--forest) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 26px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  transition: background .15s !important;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover {
  background: var(--forest2) !important;
  color: #fff !important;
}
/* Reserve gold specifically for the checkout "Place order" button (the
 * one moment gold = "final confirm" makes sense); every other .button.alt
 * -- including the single-product add-to-cart, which WooCommerce marks
 * "alt" by default -- stays forest green to match the archive grid exactly. */
.woocommerce .button.alt { background: var(--forest) !important; }
.woocommerce .button.alt:hover { background: var(--forest2) !important; }
.woocommerce #place_order.button.alt { background: var(--gold) !important; color: var(--ink) !important; }
.woocommerce #place_order.button.alt:hover { background: var(--gold2) !important; }

/* Cart page table */
.woocommerce table.shop_table {
  border: 1px solid var(--stone3);
  border-radius: 12px;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  background: var(--stone2);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink3);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--stone3); }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--stone2);
  border-radius: 16px;
  padding: 20px;
}
.woocommerce .quantity .qty {
  border: 1px solid var(--stone3);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
}

/* Checkout form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select {
  border: 1px solid var(--stone3);
  border-radius: 9px;
  background: var(--stone);
  padding: 11px 14px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout select:focus {
  border-color: var(--forest2);
  background: #fff;
  outline: none;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
  font-family: 'Cormorant Garamond', serif;
  color: var(--forest);
}

/* Payment method box (Mollie methods render inside here) */
.woocommerce-checkout #payment {
  background: var(--stone2);
  border-radius: 12px;
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--stone3); }
.woocommerce-checkout #payment div.payment_box {
  background: #fff;
  border-radius: 8px;
}

/* Free-shipping progress bar (see functions.php woocommerce_before_cart hook) */
.pw-shipping-progress {
  background: var(--stone2);
  border: 1px solid var(--stone3);
  border-radius: 50px;
  padding: 16px 20px;
  margin-bottom: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink2);
}
.pw-shipping-progress-bar {
  height: 6px;
  background: var(--stone3);
  border-radius: 4px;
  margin-top: 8px;
  overflow: hidden;
}
.pw-shipping-progress-fill {
  height: 100%;
  background: var(--forest);
  border-radius: 4px;
  transition: width .3s ease;
}

/* Notices (out of stock, coupon errors, etc.) */
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--forest2) !important;
  background: var(--stone2) !important;
}
.woocommerce-error { border-top-color: var(--red) !important; }

/* ---------------------------------------------------------------------
 * WooCommerce Blocks -- Cart & Checkout.
 * The rules above target the CLASSIC shortcode templates. This store's
 * Cart and Checkout pages actually render as Gutenberg blocks
 * (wc-block-cart / wc-block-checkout), a completely different markup tree
 * that none of the classic selectors above ever match. Confirmed by
 * inspecting the live rendered DOM on staging -- class names below are
 * copied from that, not guessed.
 * ------------------------------------------------------------------- */

/* Cart items table */
.wc-block-cart-items {
  border: 1px solid var(--stone3);
  border-radius: 12px;
  border-collapse: separate;
  overflow: hidden;
}
.wc-block-cart-items__header th {
  background: var(--stone2);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink3);
}
.wc-block-cart-items__row td { border-top: 1px solid var(--stone3); }
.wc-block-components-product-name { color: var(--forest2); font-weight: 600; }
.wc-block-components-product-name:hover { color: var(--gold); }

/* Quantity stepper (Cart + Checkout order summary don't share one, Cart
 * does) -- reskin the plus/minus buttons + number input as one pill unit
 * instead of the browser-default spinner box. */
.wc-block-components-quantity-selector {
  border: 1px solid var(--stone3);
  border-radius: 8px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
.wc-block-components-quantity-selector__input { border: none; }
.wc-block-components-quantity-selector__button {
  background: var(--stone2);
  color: var(--ink2);
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) { background: var(--stone3); }
.wc-block-cart-item__remove-link { color: var(--ink3) !important; }
.wc-block-cart-item__remove-link:hover { color: var(--red) !important; }

/* Sidebar totals box -- Cart and Checkout both use this same component */
.wc-block-components-sidebar {
  background: var(--stone2);
  border-radius: 16px;
  padding: 20px;
}
.wc-block-components-panel__button { color: var(--forest2); font-weight: 600; }
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: 'Inter', sans-serif;
  color: var(--ink2);
}

/* Primary actions -- deliberately scoped to these two specific buttons,
 * NOT the generic .wc-block-components-button class, which is also reused
 * for the tiny notice-dismiss "x" and other incidental controls that
 * shouldn't turn into big pills. */
.wc-block-cart__submit-button {
  background: var(--forest) !important;
  border-radius: 50px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
.wc-block-cart__submit-button:hover { background: var(--forest2) !important; }
/* Gold reserved for the final "Place Order" confirm moment, same reasoning
 * as #place_order.button.alt above for the classic checkout template. */
.wc-block-components-checkout-place-order-button {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-radius: 50px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
.wc-block-components-checkout-place-order-button:hover { background: var(--gold2) !important; }

/* Checkout form fields */
.wc-block-components-text-input input,
.wc-blocks-components-select__select {
  border: 1px solid var(--stone3) !important;
  border-radius: 9px !important;
  background: var(--stone) !important;
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
  border-color: var(--forest2) !important;
  background: #fff !important;
}
.wc-block-checkout__payment-method,
.wc-block-components-checkout-step__content .wc-block-checkout__no-payment-methods-notice {
  background: var(--stone2);
  border-radius: 12px;
  padding: 16px;
}
.wc-block-components-address-card__edit { color: var(--forest2); }