/* 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;
}
/* Shop grid card: quantity sits above the button as its own pill-shaped
 * stepper -- the same bordered-pill treatment already used for the real
 * quantity control on the Cart page (.wc-block-components-quantity-
 * selector below), so both places feel like the same control rather than
 * two different designs. -/+ and the number are evenly spaced inside one
 * rounded, bordered unit instead of loose glyphs floating next to a plain
 * number. */
.wacts-qty { flex-direction: column; align-items: center; gap: 6px; }
.wacts-qty .quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--stone3);
  border-radius: 50px;
  background: var(--stone);
  padding: 4px 10px;
}
.wacts-qty .wqty {
  width: 20px;
  height: auto;
  padding: 0;
  text-align: center;
  border: none;
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
}
.wacts-qty .wqty:focus { outline: none; }
.wacts-qty .quantity:focus-within { outline: 2px solid var(--forest2); outline-offset: 2px; }
.wacts-qty input[type=number]::-webkit-inner-spin-button,
.wacts-qty input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wacts-qty input[type=number] { -moz-appearance: textfield; }
.wqty-btn {
  background: none;
  border: none;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: var(--ink3);
  cursor: pointer;
  transition: color .15s;
  flex-shrink: 0;
}
.wqty-btn:hover { color: var(--forest2); }
.wacts-qty .wadd { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 20px; }
/* The [add_to_cart] shortcode applies the "wadd" class we pass it to its
 * own OUTER wrapping <p>, not just the inner <a> button -- so the pill
 * background/radius from .wadd was rendering on both, at slightly
 * different sizes, showing as a lighter green "halo" bleeding past the
 * real button on both ends. The wrapper only ever needs to be an
 * invisible layout box around the real button. */
p.wadd { background: none; padding: 0; border-radius: 0; }
/* WooCommerce's [add_to_cart] shortcode also has its own hardcoded default
 * style="border:4px solid #ccc; padding:12px" applied inline to this same
 * wrapping <p> unless a "style" attribute is explicitly passed to override
 * it -- that grey debug-looking box around the button. Passing style=""
 * in the shortcode call (archive-product.php) removes it at the source;
 * !important here is a safety net in case any future call forgets to. */
p.add_to_cart_inline { border: none !important; padding: 0 !important; }
/* After a successful AJAX add, WooCommerce injects a "View cart" link right
 * next to the button as an inline sibling. The floating cart button
 * (bottom-right, wc-fab) already covers "view your cart" everywhere on the
 * site, so this would just be a redundant, cluttering second link -- hidden
 * entirely rather than given its own line, keeping the button the one
 * clean, fixed-size element in the row before and after adding.
 * !important is required here: WooCommerce's own core stylesheet ships
 * ".woocommerce a.added_to_cart { display: inline-block }", which beats
 * this rule on raw specificity (it includes the "a" element type, this
 * selector doesn't) regardless of which stylesheet loads later -- confirmed
 * live via computed style, not just visual inspection, after an earlier
 * fix looked right in one screenshot but wasn't actually winning the
 * cascade. */
.wacts-qty .added_to_cart { display: none !important; }

/* 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); }

/* Cart + checkout-order-summary thumbnails -- the bottle photos are tall
 * and narrow, but these boxes are small squares with no object-fit set, so
 * the browser defaults to cropping into the center (just a sliver of
 * background + the cap). object-fit:contain shows the whole bottle instead,
 * with a light backdrop so the leftover space reads as a deliberate frame
 * rather than empty gaps -- matching how bottles already sit on their own
 * cards in the shop grid. */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  object-fit: contain;
  background: var(--stone2);
  border-radius: 8px;
  padding: 6px;
}

/* 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); }

/* ============================================================
   CART (WooCommerce Blocks) -- the page every buyer sees at the
   moment of purchase. Previously 100% plugin default: a stock
   crying-face icon on empty, unstyled blue cross-sell links, and
   a bare product list with no card treatment.
   ============================================================ */

/* --- Empty-cart state --- */
.wc-block-cart .wp-block-woocommerce-empty-cart-block {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
/* Remove WooCommerce's stock sad-face glyph entirely -- it renders as a
   background-image on the heading itself, reserving space above the text. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon {
  background-image: none !important;
  padding-top: 0 !important;
}
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.wc-block-cart__empty-cart__title.with-empty-cart-icon::after {
  display: none !important;
  content: none !important;
}
.wc-block-cart .wp-block-woocommerce-empty-cart-block h2.wc-block-cart__empty-cart__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 34px);
  color: var(--ink);
  margin: 0 0 12px;
}
.wc-block-cart .wp-block-woocommerce-empty-cart-block > p {
  color: var(--ink3);
  font-size: 14.5px;
}
.wc-block-cart .wp-block-separator.is-style-dots {
  color: var(--gold);
  margin: 28px auto;
}
.wc-block-cart .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  color: var(--ink);
  font-size: 22px;
  text-align: center;
  margin: 0 0 28px;
}

/* Cross-sell "New in store" grid on the empty-cart page -- give it the
   same card treatment as the real Collections grid instead of bare
   WooCommerce block defaults. */
.wc-block-grid.wp-block-product-new {
  max-width: 980px;
  margin: 0 auto;
}
/* Deliberately not touching display/grid-template-columns here -- WooCommerce
   Blocks already lays this grid out (via its own has-N-columns flex/grid
   system); overriding it fought that system and broke column widths. Only
   cosmetic properties below. */
.wc-block-grid__product {
  background: var(--stone2);
  border: 1px solid var(--stone3);
  border-radius: 14px;
  padding: 18px 16px 20px;
  text-align: center;
  transition: box-shadow .3s ease, transform .3s ease;
  box-sizing: border-box;
}
.wc-block-grid__product:hover {
  box-shadow: 0 14px 32px rgba(26,21,18,.1);
  transform: translateY(-2px);
}
.wc-block-grid__product-image {
  margin-bottom: 12px;
}
.wc-block-grid__product-image img {
  border-radius: 6px;
}
.wc-block-grid__product-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink) !important;
  text-decoration: none !important;
}
.wc-block-grid__product-link:hover .wc-block-grid__product-title { color: var(--forest2) !important; }
.wc-block-grid__product-price {
  display: block;
  font-size: 13.5px;
  color: var(--ink3);
  margin: 4px 0 14px;
}
.wc-block-grid__product .wp-block-button__link.add_to_cart_button {
  background: var(--ink) !important;
  color: var(--stone) !important;
  border-radius: 30px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  border: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  width: auto !important;
  display: inline-block !important;
}
.wc-block-grid__product .wp-block-button__link.add_to_cart_button:hover { background: var(--forest) !important; }

/* --- Populated cart: item rows --- */
.wc-block-cart-items__row,
.wc-block-cart-item__wrap {
  border-color: var(--stone3) !important;
}
.wc-block-cart-items__header {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink3);
}
.wc-block-components-product-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--forest2) !important;
  text-decoration: none !important;
}
.wc-block-components-product-name:hover { color: var(--gold) !important; }
.wc-block-components-product-metadata__description {
  font-size: 13px;
  color: var(--ink3);
}
.wc-block-components-quantity-selector {
  border: 1px solid var(--stone3) !important;
  border-radius: 30px !important;
  overflow: hidden;
}
.wc-block-components-quantity-selector__button {
  color: var(--ink2) !important;
}
.wc-block-components-quantity-selector__button:hover {
  background: var(--stone2) !important;
  color: var(--forest2) !important;
}
.wc-block-cart-item__remove-link {
  color: var(--ink3) !important;
  font-size: 12.5px !important;
}
.wc-block-cart-item__remove-link:hover { color: #a23b2e !important; }

/* --- Cart totals sidebar --- */
.wc-block-cart__totals-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  color: var(--ink);
}
.wc-block-components-sidebar.wc-block-cart__sidebar {
  background: var(--stone2);
  border-radius: 14px;
  padding: 28px 26px;
}
.wc-block-cart__submit-button {
  background: var(--forest) !important;
  border-radius: 30px !important;
}
.wc-block-cart__submit-button:hover { background: var(--forest2) !important; }

/* ============================================================
   PRODUCT REVIEWS (single-product.php's .wd-reviews block).
   Wraps WooCommerce's own comments_template() output -- the
   standard Reviews tab markup, not a custom-built form, so
   submission/moderation/spam handling all stay 100% WooCommerce-
   native. Only re-skinning that output here to match the wd-*
   product-detail language (Cormorant headings, forest/gold
   palette, card treatment) instead of the plugin's plain default.
   ============================================================ */

/* Rating summary badge under the product title */
.wd-rating-summary { display: flex; align-items: center; gap: 10px; margin: 10px 0 20px; }
.wd-rating-summary .star-rating { margin: 0; }
.wd-rating-summary .star-rating::before { color: var(--stone3); }
.wd-rating-summary .star-rating span { color: var(--gold); }
.wd-rating-count {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink3);
  text-decoration: none;
  border-bottom: 1px solid var(--stone3);
  padding-bottom: 1px;
}
.wd-rating-count:hover { color: var(--forest2); border-color: var(--forest2); }
.wd-rating-count-empty { color: var(--forest2); border-color: var(--gold); }

/* Section wrapper -- the .section-label above this in the markup already
   supplies the "Reviews" heading (matching wd-specs/wd-story), so
   WooCommerce's own duplicate title is hidden rather than shown twice. */
.wd-reviews { margin-bottom: 40px; }
.wd-reviews .woocommerce-Reviews-title { display: none; }
.wd-reviews #reviews { margin: 0; }
.wd-reviews .clear { display: none; }

.wd-reviews .woocommerce-noreviews {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink2);
  background: var(--stone2);
  border: 0.5px solid var(--stone3);
  border-radius: 16px;
  padding: 24px;
  margin: 0 0 24px;
}

/* Review list */
.wd-reviews ol.commentlist { list-style: none; margin: 0 0 32px; padding: 0; }
.wd-reviews ol.commentlist li { margin: 0 0 16px; }
.wd-reviews ol.commentlist li img.avatar {
  position: static;
  float: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--stone2);
  border: 1px solid var(--stone3);
  padding: 0;
}
.wd-reviews ol.commentlist li .comment-text {
  margin: 10px 0 0;
  border: 0.5px solid var(--stone3);
  border-radius: 16px;
  background: #FFFDF8;
  padding: 18px 20px;
}
.wd-reviews ol.commentlist li .star-rating {
  float: none;
  display: block;
  margin: 0 0 8px;
}
.wd-reviews ol.commentlist li .star-rating::before { color: var(--stone3); }
.wd-reviews ol.commentlist li .star-rating span { color: var(--gold); }
.wd-reviews .comment-text p.meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink3);
  margin-bottom: 10px !important;
}
.wd-reviews strong.woocommerce-review__author {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: var(--ink);
}
.wd-reviews em.woocommerce-review__dash { display: none; }
.wd-reviews .woocommerce-review__verified {
  color: var(--forest2);
  font-style: normal;
  font-weight: 600;
}
.wd-reviews .woocommerce-review__verified::before { content: '\2713\0020'; }
.wd-reviews .comment-text .description {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink2);
  font-weight: 300;
}
.wd-reviews .comment-text .description p:last-child { margin-bottom: 0 !important; }

/* "Leave a review" form card */
.wd-reviews #review_form_wrapper {
  background: var(--stone2);
  border: 0.5px solid var(--stone3);
  border-radius: 16px;
  padding: 24px 24px 8px;
}
.wd-reviews #reply-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--forest);
  display: block;
  margin-bottom: 4px;
}
.wd-reviews .comment-notes {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--ink3);
  margin-bottom: 18px;
}
.wd-reviews .comment-form-rating label,
.wd-reviews .comment-form-comment label,
.wd-reviews .comment-form-author label,
.wd-reviews .comment-form-email label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 8px;
}
.wd-reviews .comment-form-rating { margin-bottom: 18px; }
/* WooCommerce's own wc-single-product.js progressively enhances this
   select into a clickable p.stars widget on page load -- hide the raw
   select once JS has run, but keep it as the accessible/no-JS fallback. */
.wd-reviews .comment-form-rating select { max-width: 220px; }
.wd-reviews .comment-form-rating.rating-given select,
.wd-reviews p.stars ~ select { display: none; }
.wd-reviews p.stars { margin: 0 0 4px; }
.wd-reviews p.stars a {
  font-family: WooCommerce;
  color: var(--gold);
  text-decoration: none;
}
.wd-reviews p.stars a::before { font-size: 22px; }
.wd-reviews p.stars a.active::before,
.wd-reviews p.stars a:hover::before,
.wd-reviews p.stars a:hover ~ a::before { color: var(--gold); }
.wd-reviews textarea,
.wd-reviews .comment-form-author input,
.wd-reviews .comment-form-email input {
  width: 100%;
  border: 1px solid var(--stone3);
  border-radius: 9px;
  background: #fff;
  padding: 11px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink);
  box-sizing: border-box;
}
.wd-reviews textarea:focus,
.wd-reviews .comment-form-author input:focus,
.wd-reviews .comment-form-email input:focus {
  border-color: var(--forest2);
  background: #fff;
  outline: none;
}
.wd-reviews .required { color: var(--red); }
.wd-reviews .form-submit { margin: 4px 0 24px; }
.wd-reviews .form-submit input#submit {
  background: var(--forest) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 28px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background .15s;
}
.wd-reviews .form-submit input#submit:hover { background: var(--forest2) !important; }

@media (max-width: 720px) {
  .wd-reviews #review_form_wrapper { padding: 20px 18px 4px; }
  .wd-reviews ol.commentlist li .comment-text { padding: 16px; }
  .wd-reviews ol.commentlist li img.avatar { width: 36px; height: 36px; }
}