/*
 * Neutralize WooCommerce's default button styling.
 *
 * WooCommerce Blocks' stylesheet (wc-blocks.css) styles `a.button` /
 * `button.button` / `input.button` (element + class, specificity 0,0,1,1),
 * which outranks the theme's `.button` class (0,0,1,0) and overrides it
 * site-wide — header, Gutenberg blocks, etc. Load order alone can't fix this:
 * a more-specific selector wins regardless of order, so the theme's `.button`
 * can never reclaim those properties on its own. This file loads after
 * wc-blocks.css (see the enqueue in library/woocommerce.php) and matches its
 * specificity, so the re-applied theme values win on order.
 *
 * Strategy: on the same selectors WooCommerce uses, `all: revert` wipes EVERY
 * property WooCommerce injected back to the browser default — including stray
 * ones the theme never declares (text-shadow, overflow, margin, white-space,
 * appearance, …) — and then we re-apply the theme's button design on top, at
 * the matching specificity, so it actually shows.
 *
 * This reproduces the theme's class-only `.button` rules from csf2.css
 * (base + :hover + the <480px font-size). Modifier variants like
 * `.button.is-secondary` (two classes) still win on top, and buttons inside
 * `.woocommerce` (cart, checkout, my-account) keep WooCommerce's own styling.
 */

a.button,
button.button,
input.button {
  all: revert;

  /* Re-apply theme globals that `all: revert` wipes but `.button` relies on:
     box-sizing from `* {}` (components.css:40) and max-width from
     `.w-inline-block` (components.css:68). Without border-box, padding + border
     add to the width and stretched buttons overflow their grid cell. */
  box-sizing: border-box;
  max-width: 100%;

  /* Re-apply theme `.button` (csf2.css:397). */
  padding: var(--_spacing---space--1) var(--space--3-5rem) var(--_spacing---space--1) var(--_spacing---space--5);
  grid-column-gap: var(--space--1rem);
  grid-row-gap: var(--space--1rem);
  border: 2px solid var(--_theme---button--border);
  border-radius: var(--radius--small);
  background-color: var(--_theme---button--background);
  font-family: var(--_typography---fonts--heading-font);
  color: var(--_theme---button--text);
  font-size: var(--space--1rem);
  line-height: var(--_text-styles---line-height);
  text-align: center;
  letter-spacing: .5px;
  -webkit-text-stroke-color: var(--_theme---button--border);
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: all .25s;
  display: flex;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
}

a.button:hover,
button.button:hover,
input.button:hover {
  /* Re-apply theme `.button:hover` (csf2.css:418). No `all: revert` here so the
     base button box (padding, border, etc.) is preserved during hover. */
  border-color: var(--_theme---button--border-hover);
  background-color: var(--_theme---button--background-hover);
  background-image: none;
  color: var(--_theme---button--text-hover);
  -webkit-text-stroke-color: var(--_theme---button--border-hover);
  text-decoration: none;
  box-shadow: 0 10px 40px #0003;
}

@media screen and (max-width: 479px) {
  /* Theme responsive override (csf2.css:4753). */
  a.button,
  button.button,
  input.button {
    font-size: .9rem;
  }
}



/*
 * Shop filter dropdowns — active state.
 *
 * Webflow's runtime JS (js/ppm-carson.js) auto-adds `.w--current` to links by
 * matching only the URL host + path and ignoring the query string. Every filter
 * link points to `/shop/`, so the bare "All Categories" link is flagged current
 * even when a `?product_cat=…` is selected. Here we neutralize that stray
 * highlight and drive the active state from the server via `.is-current`
 * (added in blocks/page/shop.php). Listed after `.w--current` so the active
 * link still wins when Webflow also flags it (e.g. no category selected).
 */
.filter-bar-wrap .w-dropdown-link.w--current {
  color: var(--_nav-theme---link--color);
  font-weight: 500;
}

.filter-bar-wrap .w-dropdown-link.is-current {
  font-weight: 700;
}