/* The product card, shared by the shop archive and the product-grid block.
   Enqueued globally at priority 20 — after woocommerce.css — so it wins on
   source order and never needs !important. */

/* WooCommerce core adds ::before/::after clearfix pseudo-elements for its old
   float layout. In a grid they become grid items and steal the first cell, so
   every card shifts along by one. This must stay. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
  content: none !important;
  display: none !important;
}

/* Woo's own loop styles are scoped to `.woocommerce ul.products li.product`,
   which does not match on a page whose body has no .woocommerce class. Every
   rule below is therefore written twice — once bare, once scoped — so the card
   is identical on the homepage and in the shop. */
ul.products,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(var(--contener-cols, 3), minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.products.columns-1, .woocommerce ul.products.columns-1 { --contener-cols: 1; }
ul.products.columns-2, .woocommerce ul.products.columns-2 { --contener-cols: 2; }
ul.products.columns-3, .woocommerce ul.products.columns-3 { --contener-cols: 3; }
ul.products.columns-4, .woocommerce ul.products.columns-4 { --contener-cols: 4; }
ul.products.columns-5, .woocommerce ul.products.columns-5 { --contener-cols: 5; }

/* Woo sizes cards with `.woocommerce ul.products.columns-N li.product{width:30.75%}`
   — four classes deep. A three-class rule here loses no matter how late it
   loads, and the cards come out at 30% of an already-thirded grid track: about
   80px, one word per line. Matching the attribute form gives equal specificity,
   and being later in source order settles it without !important. */
ul.products[class*="columns-"] li.product,
.woocommerce ul.products[class*="columns-"] li.product,
ul.products li.product,
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--contener-border);
  border-radius: var(--contener-radius);
  background: var(--contener-card-bg);
  text-align: center;
  float: none;
}

ul.products li.product img,
.woocommerce ul.products li.product img {
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0;
  margin: 0 0 8px;
  color: var(--contener-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

/* A fixed margin, not `auto`. A two-line title collapses an auto margin and the
   button jumps up to meet the price. */
ul.products li.product .price,
.woocommerce ul.products li.product .price {
  margin: 0 0 14px;
  color: var(--contener-brand-dark);
  font-size: 1.05rem;
  font-weight: 600;
}

/* This is the one that needs auto — it pushes the button to the card bottom so
   cards in a row line up whatever their title length. */
ul.products li.product .button,
.woocommerce ul.products li.product .button {
  margin-top: auto;
  padding: .7em 1.2em;
  border-radius: var(--contener-radius);
  background: var(--contener-brand);
  color: var(--contener-text-invert);
  font-size: .9rem;
  font-weight: 600;
}
ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
  background: var(--contener-brand-dark);
  color: var(--contener-text-invert);
}

@media (max-width: 900px) {
  ul.products, .woocommerce ul.products { --contener-cols: 2 !important; }
}
@media (max-width: 520px) {
  ul.products, .woocommerce ul.products { --contener-cols: 1 !important; }
}

/* --------------------------------------------------------------------------
   Woo buttons, site-wide.

   Woo's `.alt` buttons (add-to-cart, place-order, proceed-to-checkout) are
   lavender by default, from `.woocommerce button.button.alt` — (0,3,1) once the
   `:where()` wrappers are discounted, since :where() contributes nothing. A
   `.woocommerce .button` rule is (0,2,0) and never wins. These mirror Woo's own
   selectors and rely on source order.
   -------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  padding: .8em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--contener-radius);
  background: var(--contener-brand);
  color: var(--contener-text-invert);
  font-weight: 600;
  line-height: 1.2;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background: var(--contener-brand-dark);
  color: var(--contener-text-invert);
}

/* "Select a variation first" uses the .disabled CLASS, not the attribute, and
   Woo colours it with `.woocommerce button.button.alt.disabled` — (0,4,1),
   which outranks the (0,3,1) rules above and keeps it lavender. Matched here,
   in grey rather than brand, so a button you cannot press does not look live. */
.woocommerce a.button.disabled,
.woocommerce a.button.alt.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce input.button.disabled,
.woocommerce input.button.alt.disabled,
.woocommerce a.button.disabled:hover,
.woocommerce a.button.alt.disabled:hover,
.woocommerce button.button.disabled:hover,
.woocommerce button.button.alt.disabled:hover {
  background: #d5d8dc;
  color: #6b7178;
  cursor: not-allowed;
  opacity: 1;
}

.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled,
.woocommerce input.button:disabled { opacity: .55; }

/* A one-column loop is a sidebar list, not a grid of cards: shrink it so three
   featured products do not fill the viewport. */
ul.products.columns-1 li.product,
.woocommerce ul.products.columns-1 li.product {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px;
  text-align: left;
}
ul.products.columns-1 li.product img,
.woocommerce ul.products.columns-1 li.product img { width: 56px; margin: 0; flex: 0 0 56px; }
ul.products.columns-1 li.product .woocommerce-loop-product__title,
.woocommerce ul.products.columns-1 li.product .woocommerce-loop-product__title { margin: 0 0 2px; font-size: .875rem; }
ul.products.columns-1 li.product .price,
.woocommerce ul.products.columns-1 li.product .price { margin: 0; font-size: .875rem; }
ul.products.columns-1 li.product .button,
.woocommerce ul.products.columns-1 li.product .button { display: none; }