/* ==========================================================================
   WOOCOMMERCE
   Replaces woocommerce-general, woocommerce-layout and
   woocommerce-smallscreen, which the theme dequeues. Everything Woo
   renders and the theme does not template — buttons, notices, forms,
   quantity, ratings, account, cart, checkout — is styled here so those
   pages are usable rather than raw.
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------
   Woo puts .button on a lot of elements. One rule covers them all, so
   nothing arrives purple. */

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ss-space-2xs);
  min-height: 2.75rem;
  padding: var(--ss-space-xs) var(--ss-space-m);

  border: 2px solid var(--ssp-accent);
  border-radius: var(--ssp-radius);
  background: var(--ssp-accent);
  color: var(--ssp-accent-contrast);

  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: var(--ss-step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;

  transition: background var(--ss-duration) var(--ss-ease),
              border-color var(--ss-duration) var(--ss-ease);
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
  background: var(--ss-accent-hover);
  border-color: var(--ss-accent-hover);
  color: var(--ssp-accent-contrast);
}

/* Secondary actions — "Browse products", "Return to shop", coupon apply. */
.woocommerce .button.wc-backward,
.woocommerce a.button.wc-backward,
.woocommerce .button[name="apply_coupon"],
.woocommerce .button[name="update_cart"] {
  background: transparent;
  border-color: var(--ssp-ink);
  color: var(--ssp-ink);
}

.woocommerce .button.wc-backward:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce .button[name="apply_coupon"]:hover,
.woocommerce .button[name="update_cart"]:hover {
  background: var(--ssp-ink);
  border-color: var(--ssp-ink);
  color: var(--ssp-surface);
}

.woocommerce .button.disabled,
.woocommerce .button:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Notices ------------------------------------------------------------
   Woo's markup is a <ul> with a nested button. Without Woo's CSS the list
   marker reads as a stray checkbox, which is what the Orders page showed. */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ss-space-xs);

  margin-block: var(--ss-space-s);
  padding: var(--ss-space-xs) var(--ss-space-s);
  border-inline-start: 4px solid var(--ssp-ink-muted);
  background: var(--ssp-surface-alt);
  list-style: none;
  font-size: var(--ss-step--1);
}

.woocommerce-message > li,
.woocommerce-info > li,
.woocommerce-error > li { list-style: none; }

.woocommerce-message { border-inline-start-color: var(--ssp-ok); }
.woocommerce-info    { border-inline-start-color: var(--ssp-ink-muted); }
.woocommerce-error   { border-inline-start-color: var(--ssp-danger); }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button { margin-inline-start: auto; }

/* ---- Forms -------------------------------------------------------------- */

.woocommerce form .form-row { display: grid; gap: var(--ss-space-3xs); margin-block-end: var(--ss-space-s); }

.woocommerce form .form-row label,
.woocommerce-form-row label,
.wc-block-components-text-input label {
  font-size: var(--ss-step--1);
  letter-spacing: var(--ss-tracking-label);
  text-transform: uppercase;
  color: var(--ssp-ink-muted);
}

.woocommerce .required { color: var(--ssp-danger); text-decoration: none; }

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce select,
.woocommerce textarea,
.ssc-search__field {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--ss-space-2xs) var(--ss-space-xs);
  border: 1px solid var(--ssp-line-strong);
  border-radius: var(--ssp-radius);
  background: var(--ssp-surface);
  color: var(--ssp-ink);
  font-size: var(--ss-step-0);
}

.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus { border-color: var(--ssp-ink); }

.woocommerce .select2-container .select2-selection--single {
  height: 2.75rem;
  border: 1px solid var(--ssp-line-strong);
  border-radius: var(--ssp-radius);
}

/* ---- Quantity ----------------------------------------------------------- */

.woocommerce .quantity input.qty {
  width: 4.5rem;
  min-height: 2.75rem;
  padding-inline: var(--ss-space-2xs);
  border: 2px solid var(--ssp-line-strong);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Price and stock ---------------------------------------------------- */

.woocommerce .price { font-family: var(--ssp-font-display); }
.woocommerce .price del { color: var(--ssp-ink-muted); text-decoration: line-through; }
.woocommerce .price ins { text-decoration: none; color: var(--ssp-accent); }

.woocommerce .stock { font-size: var(--ss-step--1); }
.woocommerce .stock.in-stock { color: var(--ssp-ok); }
.woocommerce .stock.out-of-stock { color: var(--ssp-danger); }

/* ---- Star ratings -------------------------------------------------------
   Woo renders these as text with a font; without its CSS you get literal
   "Rated 4 out of 5". Rebuilt from characters so no font file is needed. */

.woocommerce .star-rating {
  position: relative;
  display: inline-block;
  width: 5.4em;
  height: 1.2em;
  overflow: hidden;
  font-size: var(--ss-step--1);
  line-height: 1.2;
  color: var(--ssp-accent);
}

.woocommerce .star-rating::before {
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  inset: 0;
  color: var(--ssp-line);
  letter-spacing: .08em;
}

.woocommerce .star-rating span {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  overflow: hidden;
  padding-block-start: 1.5em;
}

.woocommerce .star-rating span::before {
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  letter-spacing: .08em;
}

/* ---- My account --------------------------------------------------------- */

.woocommerce-account .woocommerce {
  display: grid;
  gap: var(--ss-space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .woocommerce-account .woocommerce { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); }
}

.woocommerce-MyAccount-navigation ul { padding: 0; list-style: none; }

.woocommerce-MyAccount-navigation li { border-block-end: 1px solid var(--ssp-line); }

.woocommerce-MyAccount-navigation a {
  display: block;
  padding-block: var(--ss-space-2xs);
  color: var(--ssp-ink);
  text-decoration: none;
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: var(--ss-step--1);
  letter-spacing: var(--ss-tracking-label);
  text-transform: uppercase;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a { color: var(--ssp-accent); }

/* ---- Tables: cart, checkout, orders, addresses --------------------------- */

.woocommerce table.shop_table,
.woocommerce table.woocommerce-orders-table,
.woocommerce table.shop_attributes {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.woocommerce-orders-table th {
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: var(--ss-step--1);
  letter-spacing: var(--ss-tracking-label);
  text-transform: uppercase;
  color: var(--ssp-ink-muted);
  text-align: start;
  border-block-end: 2px solid var(--ssp-ink);
  padding: var(--ss-space-2xs);
}

.woocommerce table.shop_table td,
.woocommerce table.woocommerce-orders-table td {
  padding: var(--ss-space-xs) var(--ss-space-2xs);
  border-block-end: 1px solid var(--ssp-line);
  vertical-align: middle;
}

.woocommerce table.shop_attributes th { width: 34%; }

.woocommerce .cart_item img { width: 4rem; height: auto; }

.woocommerce .cart-collaterals,
.woocommerce .cart_totals { margin-block-start: var(--ss-space-l); }

/* ---- Checkout ----------------------------------------------------------- */

.woocommerce-checkout .col2-set {
  display: grid;
  gap: var(--ss-space-l);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .woocommerce-checkout .col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.woocommerce-checkout #order_review {
  padding: var(--ss-space-m);
  border: 1px solid var(--ssp-line);
  background: var(--ssp-surface-alt);
  margin-block-start: var(--ss-space-l);
}

.woocommerce-checkout .payment_methods { padding: 0; list-style: none; }
.woocommerce-checkout .payment_methods li { padding-block: var(--ss-space-2xs); }

/* ---- Pagination and results ---------------------------------------------- */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { font-size: var(--ss-step--1); }

/* ---- Breadcrumb ---------------------------------------------------------
   Woo's own breadcrumb output, when the theme's wrapper is not used. */
.woocommerce .woocommerce-breadcrumb { font-size: var(--ss-step--1); color: var(--ssp-ink-muted); }