/* NXXS Flow — the WooCommerce layer.
   Every value used below is declared once, here or in nxxs-flow.css, and
   referenced with var(). Flexbox only. No grid, no absolute positioning,
   no pseudo-element carries anything visible. */

:root {
  --h-size-add:   58px;
  --w-size-add:   84px;
  --h-woo-plate:  190px;
  --w-woo-side:   360px;
  --w-woo-nav:    220px;
  --h-woo-gallery: 420px;
  --d-size-dot:   7px;
  --fs-woo-price: 1.5rem;
  --o-quiet:      0.55;
  --card-woo-3up: calc((100% - (var(--card-gap) * 2)) / 3);
  --card-woo-4up: calc((100% - (var(--card-gap) * 3)) / 4);
}

/* ---- Shell ------------------------------------------------------------- */

.stage-woo {
  justify-content: flex-start;
  padding-block: var(--s-8);
}

.stage-woo .stage-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  width: 100%;
}

.woocommerce-products-header,
.woocommerce-breadcrumb { margin: var(--s-0); }

.woocommerce-products-header__title,
.stage-woo .product_title,
.stage-woo .entry-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--c-text);
  margin: var(--s-0);
}

.woocommerce-result-count,
.woocommerce-ordering {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  margin: var(--s-0);
}

.term-description { color: var(--c-text-2); }

/* ---- Notices ----------------------------------------------------------- */

.woocommerce-notices-wrapper { display: flex; flex-direction: column; gap: var(--s-3); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-0);
  padding: var(--s-4);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  background-color: var(--c-raised);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  list-style: none;
}

.woocommerce-message { border-color: var(--c-ok); }
.woocommerce-error { border-color: var(--c-wait); }
.woocommerce-error li { list-style: none; }

/* ---- The shop loop ----------------------------------------------------- */

.stage-woo ul.products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-gap);
  margin: var(--s-0);
  padding: var(--s-0);
  list-style: none;
  width: 100%;
}

.stage-woo ul.products li.tile { flex: 1 1 var(--w-narrow); }

.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-0);
  padding: var(--s-0);
  list-style: none;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--h-tap);
  min-height: var(--h-tap);
  padding-inline: var(--s-3);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-surface);
  color: var(--c-text-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.woocommerce-pagination span.current {
  border-color: var(--c-cold);
  color: var(--c-text);
}

/* ---- Size buttons on a tile -------------------------------------------- */

.chip-row,
.size-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.size-add {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s-1);
  flex: 0 1 var(--w-size-add);
  min-height: var(--h-size-add);
  padding: var(--s-2) var(--s-3);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  background-color: var(--c-sunken);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.size-add:hover,
.size-add:focus-visible {
  border-color: var(--c-cold);
  background-color: var(--c-raised);
}

.size-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}

.size-money {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

.size-money .woocommerce-Price-amount { color: var(--c-text); }

.size-dot {
  display: block;
  width: var(--d-size-dot);
  height: var(--d-size-dot);
  border-radius: var(--d-size-dot);
  background-color: var(--c-off);
}

.size-dot-ok { background-color: var(--c-ok); }
.size-dot-wait { background-color: var(--c-wait); }
.size-dot-off { background-color: var(--c-off); }

/* ---- One product ------------------------------------------------------- */

.stage-woo div.product {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-8);
}

.stage-woo div.product .woocommerce-product-gallery {
  flex: 1 1 var(--w-narrow);
  min-width: 0;
  padding: var(--s-4);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-plate);
}

.stage-woo div.product .woocommerce-product-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.stage-woo div.product .summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1 1 var(--w-woo-side);
  min-width: 0;
}

.stage-woo div.product .price,
.stage-woo .woocommerce-variation-price {
  font-family: var(--font-mono);
  font-size: var(--fs-woo-price);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  margin: var(--s-0);
}

.stage-woo div.product .price del { color: var(--c-text-3); }

.woocommerce-product-details__short-description,
.stage-woo .woocommerce-Tabs-panel {
  color: var(--c-text-2);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.stage-woo .woocommerce-Tabs-panel h2,
.stage-woo .woocommerce-Tabs-panel h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  color: var(--c-text);
}

.product_meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

.lot-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

/* The variation picker: a table in WooCommerce markup, laid out as flex. */

.stage-woo table.variations,
.stage-woo table.variations tbody,
.stage-woo table.variations tr {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  margin: var(--s-0);
  border: var(--s-0);
}

.stage-woo table.variations th,
.stage-woo table.variations td {
  display: block;
  padding: var(--s-0);
  text-align: left;
}

.stage-woo table.variations label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
}

.stage-woo .reset_variations {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

.woocommerce-variation-description { color: var(--c-text-2); }

.woocommerce-variation-availability { font-size: var(--fs-sm); color: var(--c-text-3); }

.stage-woo .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-0) var(--s-0) var(--s-4);
  padding: var(--s-0);
  list-style: none;
}

.stage-woo .woocommerce-tabs ul.tabs li a {
  display: flex;
  align-items: center;
  min-height: var(--h-tap);
  padding-inline: var(--s-4);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-surface);
  color: var(--c-text-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.stage-woo .woocommerce-tabs ul.tabs li.active a {
  border-color: var(--c-cold);
  color: var(--c-text);
}

.stage-woo .woocommerce-tabs { flex: 1 1 100%; }

/* ---- Forms and buttons ------------------------------------------------- */

.stage-woo form.cart,
.stage-woo form.variations_form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: 100%;
}

.stage-woo .woocommerce-variation-add-to-cart,
.stage-woo form.cart .quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.stage-woo input[type="text"],
.stage-woo input[type="email"],
.stage-woo input[type="tel"],
.stage-woo input[type="url"],
.stage-woo input[type="password"],
.stage-woo input[type="number"],
.stage-woo input[type="search"],
.stage-woo textarea,
.stage-woo select {
  min-height: var(--h-tap);
  padding: var(--s-2) var(--s-3);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius);
  background-color: var(--c-sunken);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  width: 100%;
  max-width: var(--w-form);
}

.stage-woo input:focus-visible,
.stage-woo textarea:focus-visible,
.stage-woo select:focus-visible {
  outline: var(--bw-2) solid var(--c-focus);
  outline-offset: var(--bw-2);
}

.stage-woo form.cart .quantity input { max-width: var(--w-size-add); }

.stage-woo label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

.stage-woo .button,
.stage-woo button.button,
.stage-woo input.button,
.stage-woo a.button,
.stage-woo .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--h-tap);
  padding-inline: var(--s-6);
  border: var(--bw-1) solid var(--c-action);
  border-radius: var(--radius);
  background-color: var(--c-action);
  color: var(--c-on-action);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.stage-woo .button:hover,
.stage-woo button.button:hover,
.stage-woo input.button:hover,
.stage-woo a.button:hover {
  background-color: var(--c-action-hover);
  border-color: var(--c-action-hover);
}

.stage-woo .button:disabled,
.stage-woo button.button:disabled,
.stage-woo .disabled {
  opacity: var(--o-quiet);
  cursor: not-allowed;
}

.stage-woo .button.alt { background-color: var(--c-action); }

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

.woocommerce-account .woocommerce {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-7);
  width: 100%;
}

.woocommerce-MyAccount-navigation {
  flex: 0 1 var(--w-woo-nav);
  min-width: 0;
}

.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: var(--s-0);
  padding: var(--s-0);
  list-style: none;
}

.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: var(--h-tap);
  padding-inline: var(--s-4);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-surface);
  color: var(--c-text-2);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a {
  border-color: var(--c-cold);
  background-color: var(--c-raised);
  color: var(--c-text);
}

.woocommerce-MyAccount-content {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1 1 var(--w-woo-side);
  min-width: 0;
  color: var(--c-text-2);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  color: var(--c-text);
  margin: var(--s-0);
}

.woocommerce-form,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-6);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-surface);
}

.woocommerce-form-row,
.woocommerce-form__row,
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-0);
}

.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.woocommerce-form-login__rememberme input,
.woocommerce-form__input-checkbox {
  width: auto;
  min-height: var(--s-0);
}

/* ---- Tables (orders, downloads, addresses) ----------------------------- */

.stage-woo table.shop_table,
.stage-woo table.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

.stage-woo table.shop_table th,
.stage-woo table.shop_table td {
  padding: var(--s-3);
  border-bottom: var(--bw-1) solid var(--c-line);
  text-align: left;
}

.stage-woo table.shop_table th {
  color: var(--c-text-3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-size: var(--fs-2xs);
}

.stage-woo table.shop_table .woocommerce-Price-amount {
  font-family: var(--font-mono);
  color: var(--c-text);
}

.woocommerce-Address {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-surface);
}

.woocommerce-customer-details,
.u-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}

.u-column1,
.u-column2 { flex: 1 1 var(--w-narrow); min-width: 0; }

/* ---- Block cart and block checkout ------------------------------------- */
/* WooCommerce ships its own layout for these two. What follows re-points its
   surfaces, type and controls at the NXXS tokens; the layout is left alone. */

.wc-block-components-main,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  color: var(--c-text);
  font-family: var(--font-body);
}

.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-cart h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-form select,
.wc-block-components-combobox input {
  background-color: var(--c-sunken);
  border-color: var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-text);
  font-family: var(--font-body);
}

.wc-block-components-text-input label,
.wc-block-components-checkout-step__description,
.wc-block-components-product-metadata,
.wc-block-components-totals-item__label {
  color: var(--c-text-2);
}

.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary,
.wc-block-components-radio-control-accordion-option,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
  background-color: var(--c-surface);
  border-color: var(--c-line);
  border-radius: var(--radius);
  color: var(--c-text-2);
}

.wc-block-components-totals-item__value,
.wc-block-components-product-price,
.wc-block-formatted-money-amount {
  font-family: var(--font-mono);
  color: var(--c-text);
}

.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background-color: var(--c-action);
  border-color: var(--c-action);
  border-radius: var(--radius);
  color: var(--c-on-action);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  min-height: var(--h-tap);
}

.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--c-action-hover);
  border-color: var(--c-action-hover);
}

.wc-block-components-product-name,
.wc-block-components-order-summary-item__description a {
  color: var(--c-text);
  text-decoration: none;
}

/* ---- Screens ----------------------------------------------------------- */

@media (min-width: 768px) {
  :root { --w-size-add: 96px; --h-size-add: 62px; }

  .stage-woo ul.products li.tile { flex: 0 1 var(--card-woo-3up); }
  .woocommerce-form-row-first,
  .woocommerce-form-row-last { flex: 1 1 var(--card-2up); }
}

@media (min-width: 1024px) {
  .stage-woo ul.products li.tile { flex: 0 1 var(--card-woo-4up); }
  .stage-woo div.product .woocommerce-product-gallery { flex: 1 1 var(--split-2up); }
}

@media (prefers-reduced-motion: reduce) {
  .size-add { transition: none; }
  .stage-woo .button { transition: none; }
}