/*
 * 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,
a.added_to_cart {
  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,
  a.added_to_cart {
    font-size: .9rem;
  }
}

/*
 * WooCommerce's post-AJAX "View cart" link (a.added_to_cart.wc-forward). It's
 * built with hardcoded classes in add-to-cart.js so we can't add `.button` to
 * it; instead we style it as the theme's secondary button. It picks up the base
 * `.button` box from the re-apply above; here we add the .is-secondary colors
 * (csf2.css:427) and its hover.
 */
.product-action {
  flex-wrap: wrap;
  gap: var(--space--1rem);
}
a.added_to_cart {
  padding: var(--space--0-5rem) var(--space--1-5rem);
  border-color: var(--swatch--white);
  background-color: var(--swatch--white);
  color: var(--_theme---button-secondary--text);
  box-shadow: none;
}

a.added_to_cart:hover {
  border-color: var(--_theme---button-secondary--border-hover);
  background-color: var(--_theme---button-secondary--background-hover);
  color: var(--_theme---button-secondary--text-hover);
}



/*
 * Classic WooCommerce notices.
 *
 * Core WooCommerce stylesheets are disabled globally, so success/error/info
 * notices on classic templates (like the custom single product page) lose their
 * wrapper spacing and background. Restore only the notice box treatment; leave
 * fonts and buttons to the theme rules above.
 */
.woocommerce-notices-wrapper {
  margin: 0 0 var(--_spacing---space--6);
}

.woocommerce-notices-wrapper:empty {
  margin: 0;
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  position: relative;
  width: auto;
  margin: 0 0 var(--_spacing---space--6);
  padding: var(--_spacing---space--5) var(--_spacing---space--5) var(--_spacing---space--4);
  border-top: 3px solid var(--swatch--accent-1, #7f54b3);
  background-color: var(--_theme---misc--card-wrap-bg);
  list-style: none outside;
  word-wrap: break-word;
}

.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message {
  margin-bottom: 0;
}

.woocommerce-notices-wrapper .woocommerce-error + .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error + .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error + .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info + .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info + .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-info + .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message + .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message + .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message + .woocommerce-message {
  margin-top: var(--_spacing---space--6);
}

.woocommerce-message {
  border-top-color: #8fae1b;
}

.woocommerce-info {
  border-top-color: #1e85be;
}

.woocommerce-error {
  border-top-color: #b81c23;
}

.woocommerce-error li {
  list-style: none outside;
}

.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message .button {
  display: block;
  max-width: fit-content;
  margin-top: var(--_spacing---space--4);
  padding: var(--_spacing---space--1) var(--_spacing---space--5);
}



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



/*
 * Normalize WooCommerce Cart & Checkout block typography.
 *
 * The `.csf2-woo` wrapper is added around the Cart/Checkout blocks by the
 * render_block filter in library/woocommerce.php. WooCommerce Blocks ship their
 * own font family, size, weight and line-height on dozens of component classes,
 * which makes these pages look like a different site. Rather than chase each
 * class, force everything inside the wrapper to inherit the theme's typography.
 * (!important is used deliberately to beat WooCommerce's more specific selectors
 * without duplicating them all.)
 */
.csf2-woo {
  font-family: var(--_typography---fonts--body-font);
  font-size: var(--_typography---font-size--text-mai);
  font-weight: 400;
  line-height: var(--_typography---line-height--1-5);
}

.csf2-woo *:not(:where(.csf2-wc-grid, .csf2-wc-grid *)) {
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
}

/* Text uses the theme's size for readability — but NOT the floating field
   labels. WooCommerce sizes those in a coordinated way (a 16px text-input label
   shrunk with transform:scale to match the 13px select label); a blanket size
   reset makes them mismatch. Every floating label is a <label>, so skip those. */
.csf2-woo *:not(label):not(:where(.csf2-wc-grid, .csf2-wc-grid *)) {
  font-size: inherit !important;
}

/* Checkbox option labels (e.g. "Add a note to your order") are wrapped in a
   <label>, so the rule above skips them and they keep WooCommerce's small size.
   They aren't floating labels, so restore them to the normal body size. */
.csf2-woo .wc-block-components-checkbox label {
  font-size: inherit !important;
}

/* Restore hierarchy: headings use the heading font and read larger; the order
   total stays emphasized. */
.csf2-woo :is(h1, h2, h3, h4, h5, h6, .wc-block-components-title):not(:where(.csf2-wc-grid, .csf2-wc-grid *)) {
  font-family: var(--_typography---fonts--heading-font) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.csf2-woo .wc-block-components-totals-item__value {
  font-weight: 600 !important;
}

/* Buttons: give the WooCommerce block buttons (cart "Proceed to Checkout",
   checkout "Place Order") the theme's regular .button design. Mirrors the theme
   `.button` rules re-applied to a.button/button.button/input.button above. */
.csf2-woo .wc-block-components-button {
  box-sizing: border-box !important;
  max-width: 100% !important;
  padding: var(--_spacing---space--1) var(--_spacing---space--5) !important;
  border: 2px solid var(--_theme---button--border) !important;
  border-radius: var(--radius--small) !important;
  background: var(--_theme---button--background) !important;
  color: var(--_theme---button--text) !important;
  font-family: var(--_typography---fonts--heading-font) !important;
  font-size: var(--space--1rem) !important;
  line-height: var(--_text-styles---line-height) !important;
  font-weight: 500 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  -webkit-text-stroke-color: var(--_theme---button--border) !important;
  transition: all .25s !important;
}

/* The label sits in a child span; the blanket reset neutralizes letter-spacing,
   so re-assert the button's spacing/casing on it. */
.csf2-woo .wc-block-components-button__text {
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
}

.csf2-woo .wc-block-components-button:hover {
  border-color: var(--_theme---button--border-hover) !important;
  background-color: var(--_theme---button--background-hover) !important;
  background-image: none !important;
  color: var(--_theme---button--text-hover) !important;
  -webkit-text-stroke-color: var(--_theme---button--border-hover) !important;
  box-shadow: 0 10px 40px #0003 !important;
}

@media screen and (max-width: 479px) {
  .csf2-woo .wc-block-components-button {
    font-size: .9rem !important;
  }
}

/* Secondary copy — product short-descriptions (cart line items / order summary)
   and payment-method descriptions — use the theme's small-text style
   (.u-text-small) so they read as secondary text. */
.csf2-woo .wc-block-components-product-metadata__description,
.csf2-woo .wc-block-components-product-metadata__description p,
.csf2-woo .wc-block-components-radio-control-accordion-content,
.csf2-woo .wc-block-components-radio-control-accordion-content p {
  font-size: .9rem !important;
  line-height: 1.5rem !important;
}



/*
 * Order confirmation (thank-you) page.
 *
 * The order-received endpoint renders WooCommerce's *classic* order overview,
 * details table and customer addresses. WC core stylesheets are dequeued
 * site-wide (see top of file) and wc-blocks.css doesn't cover these classic
 * elements, so they'd render as bare bullets + an unstyled table. Give them
 * theme-aligned styling. Scoped to .csf2-woo (the checkout block wrapper).
 */
.csf2-woo .woocommerce {
  width: 100%;
  max-width: 100%;
}

.csf2-woo .woocommerce-thankyou-order-received {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Overview: order #, date, email, total, payment method. */
.csf2-woo .woocommerce-order-overview {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  margin: 0 0 2.5rem;
  padding: 1.5rem;
  list-style: none;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: var(--radius--small);
}

.csf2-woo .woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: 0;
  padding: 0;
  border: 0;
  text-transform: none;
}

.csf2-woo .woocommerce-order-overview li:before {
  display: none;
}

.csf2-woo .woocommerce-order-overview li strong {
  font-weight: 700 !important;
}

/* Order details table. */
.csf2-woo .woocommerce-order-details__title {
  margin: 0 0 1rem;
}

.csf2-woo .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2.5rem;
}

.csf2-woo .woocommerce-table--order-details th,
.csf2-woo .woocommerce-table--order-details td {
  padding: .85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

/* <th> (product headers + row labels like "Subtotal:", "Total:") stay bold —
   the blanket font-weight reset above would otherwise flatten them to 400. */
.csf2-woo .woocommerce-table--order-details th {
  font-weight: 700 !important;
}

.csf2-woo .woocommerce-table--order-details thead th {
  font-family: var(--_typography---fonts--heading-font);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .85rem;
}

.csf2-woo .woocommerce-table--order-details th:last-child,
.csf2-woo .woocommerce-table--order-details td:last-child {
  text-align: right;
  white-space: nowrap;
}

/* Customer addresses. */
.csf2-woo .woocommerce-customer-details .woocommerce-column__title {
  margin: 0 0 1rem;
}

.csf2-woo .woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 0;
}

.csf2-woo .woocommerce-customer-details address {
  font-style: normal;
  line-height: 1.6;
  padding: 1.25rem;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: var(--radius--small);
}

@media screen and (max-width: 767px) {
  .csf2-woo .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
  }
}



/*
 * Theme product grids injected into WooCommerce block pages (see the
 * render_block handler in library/woocommerce.php). Their Webflow IX2 reveal /
 * hover interactions are (re-)bound by the ix2 re-init in js/wp.js once the
 * cart/checkout block injects them. Here we only fix alignment: the empty-cart
 * block centers its text, which the cards would otherwise inherit.
 */
.csf2-wc-grid {
  text-align: left;
}



/*
 * My Account page (classic [woocommerce_my_account] shortcode).
 *
 * WooCommerce's own layout (woocommerce-layout.css, dequeued site-wide) floats
 * the navigation left (30%) and content right (68%) and stacks them on small
 * screens. We reproduce that as flexbox and style the nav + tables to match the
 * theme. Scoped to the account body class so it can't touch cart/checkout.
 */
.woocommerce-account .csf2-woo .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.woocommerce-account .csf2-woo .woocommerce-MyAccount-navigation {
  flex: 0 0 26%;
}

.woocommerce-account .csf2-woo .woocommerce-MyAccount-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Navigation: a clean bordered menu instead of raw bullets. */
.csf2-woo .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: var(--radius--small);
  overflow: hidden;
}

.csf2-woo .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
}

.csf2-woo .woocommerce-MyAccount-navigation li:before {
  display: none;
}
.csf2-woo .woocommerce-MyAccount-navigation li + li {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.csf2-woo .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: .85rem 1.25rem;
  font-family: var(--_typography---fonts--heading-font);
  text-decoration: none;
}

.csf2-woo .woocommerce-MyAccount-navigation li a:hover,
.csf2-woo .woocommerce-MyAccount-navigation li.is-active a {
  background-color: rgba(0, 0, 0, .04);
}

.csf2-woo .woocommerce-MyAccount-navigation li.is-active a {
  font-weight: 600;
}

/* Account tables (orders, downloads) + address columns. */
.csf2-woo .woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.csf2-woo .woocommerce-MyAccount-content table.shop_table th,
.csf2-woo .woocommerce-MyAccount-content table.shop_table td {
  padding: .85rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.csf2-woo .woocommerce-MyAccount-content table.shop_table th {
  font-weight: 700 !important;
}

.csf2-woo .addresses .col2-set,
.csf2-woo .woocommerce-Addresses.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.csf2-woo .addresses .col2-set .col-1,
.csf2-woo .addresses .col2-set .col-2 {
  width: auto;
  float: none;
}

@media screen and (max-width: 767px) {
  .woocommerce-account .csf2-woo .woocommerce:has(.woocommerce-MyAccount-navigation) {
    flex-direction: column;
  }

  .woocommerce-account .csf2-woo .woocommerce-MyAccount-navigation {
    flex-basis: auto;
    width: 100%;
  }

  .csf2-woo .addresses .col2-set,
  .csf2-woo .woocommerce-Addresses.col2-set {
    grid-template-columns: 1fr;
  }
}



.card-wrap.is-add-to-cart.variations_form {
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
}

.card-wrap.is-add-to-cart.variations_form .reset_variations {
  flex: 0 auto;
  font-size: .9rem;
  line-height: 1.5rem;
}

.card-wrap.is-add-to-cart.variations_form .woocommerce-variation-add-to-cart {
  position: relative;
  width: 100%;
  display: inline-flex;
  flex-flow: row;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
  grid-column-gap: var(--space--1rem);
  grid-row-gap: var(--space--1rem);
}