/*
 * The same reasoning applies to the `.woocommerce` namespace class itself: it
 * is wrapped in :where() throughout, so these rules weigh only what their
 * structure weighs.
 *
 * Variant flags are wrapped in :where() so they contribute no specificity. The
 * weight of each rule then comes only from the WooCommerce structure it targets
 * — the same weight a site's own commerce CSS uses — so a site that styles its
 * product cards still wins.
 */

/*
 * Optional product presentation.
 *
 * Loaded only when WooCommerce is active. Layout and colour only — this sheet
 * has no opinion about price, stock, delivery or checkout behaviour.
 */

:where(.woocommerce) ul.products {
  display: grid;
  grid-template-columns: repeat(var(--ds-shop-columns, 3), minmax(0, 1fr));
  gap: var(--ds-gap-grid);
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.woocommerce) ul.products::before,
:where(.woocommerce) ul.products::after { content: none; }

:where(.woocommerce) ul.products li.product {
  inline-size: auto;
  margin: 0;
  float: none;
  background: var(--ds-surface-card);
  color: var(--ds-ink-on-card);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  padding: var(--ds-card-padding);
}

:where(.ds-shop-cards-raised) ul.products li.product { box-shadow: var(--ds-card-shadow); }
:where(.ds-shop-cards-outlined) ul.products li.product { border-color: var(--ds-border); }
:where(.ds-shop-cards-flat) ul.products li.product { background: transparent; padding-inline: 0; }

:where(.woocommerce) ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ds-font-heading);
  font-size: var(--ds-step-1);
  line-height: var(--ds-leading-heading);
  padding: 0;
  margin-block: var(--ds-space-2);
}

:where(.woocommerce) ul.products li.product .price,
:where(.woocommerce) div.product p.price {
  color: var(--ds-text-primary);
  font-weight: var(--ds-weight-strong);
  font-variant-numeric: tabular-nums;
}

:where(.woocommerce) ul.products li.product .price del { color: var(--ds-text-muted); font-weight: 400; }

/* Sale badges read as state, not decoration. */
:where(.woocommerce) span.onsale {
  background: var(--ds-brand-accent);
  color: var(--ds-text-on-accent);
  font-weight: var(--ds-weight-strong);
  line-height: 1.6;
  min-block-size: 0;
  min-inline-size: 0;
  padding: 0 var(--ds-space-3);
  inset-block-start: var(--ds-space-2);
  inset-inline-start: var(--ds-space-2);
  inset-inline-end: auto;
  border-radius: var(--ds-radius-pill);
}
:where(.ds-shop-badge-corner) span.onsale { border-radius: 0 0 var(--ds-radius-md) 0; inset-block-start: 0; inset-inline-start: 0; padding: var(--ds-space-1) var(--ds-space-3); }
:where(.ds-shop-badge-none) span.onsale { display: none; }

:where(.woocommerce) a.button,
:where(.woocommerce) button.button,
:where(.woocommerce) .button.alt,
:where(.woocommerce) #respond input#submit {
  background: var(--ds-brand-accent);
  color: var(--ds-text-on-accent);
  border-radius: var(--ds-button-radius);
  font-weight: var(--ds-button-weight);
  padding: var(--ds-button-padding);
  line-height: 1.2;
}
:where(.woocommerce) a.button:hover,
:where(.woocommerce) button.button:hover { background: var(--ds-link-hover); color: var(--ds-text-on-accent); }

:where(.woocommerce) .woocommerce-message,
:where(.woocommerce) .woocommerce-info,
:where(.woocommerce) .woocommerce-error {
  background: var(--ds-surface-card);
  color: var(--ds-ink-on-card);
  border-block-start: 0;
  border-inline-start: 3px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
}
:where(.woocommerce) .woocommerce-message { border-inline-start-color: var(--ds-success); }
:where(.woocommerce) .woocommerce-info    { border-inline-start-color: var(--ds-brand-accent); }
:where(.woocommerce) .woocommerce-error   { border-inline-start-color: var(--ds-error); }

:where(.ds-shop-gallery-stacked) .woocommerce-product-gallery__wrapper { display: grid; gap: var(--ds-gap-card); }

@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(min(var(--ds-shop-columns, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 600px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }