/* ==========================================================================
   woo.css — WooCommerce's own pages, wearing the toqosaki design system.

   Loaded only when WooCommerce is active. It restyles cart, checkout, account
   and notices rather than overriding templates, so WooCommerce updates keep
   working and payment gateways keep rendering their own fields.
   ========================================================================== */

.woo-wrap { padding-block: clamp(2rem, 5vw, 4rem); }

/* ----------------------------------------------------------------- notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
  background: var(--paper-2);
  border: 0;
  border-left: 3px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-size: var(--t-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.woocommerce-error { border-left-color: var(--red); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-error li { list-style: none; }

/* ----------------------------------------------------------------- buttons */
.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,
.wc-block-components-button {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-height: 54px;
  padding: 0 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.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,
.wc-block-components-button:hover {
  background: var(--acid);
  color: var(--acid-ink);
  border-color: var(--acid);
}
.woocommerce .button.disabled,
.woocommerce .button:disabled { opacity: .38; }

/* checkout place-order gets the full-width treatment */
.woocommerce #payment #place_order,
.wc-block-components-checkout-place-order-button { width: 100%; min-height: 62px; font-size: .95rem; }

/* ------------------------------------------------------------------ tables */
.woocommerce table.shop_table {
  border: 1px solid var(--line);
  border-radius: 0;
  border-collapse: collapse;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--line);
  padding: 1rem;
  font-size: var(--t-sm);
}
.woocommerce table.shop_table th {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 500;
}
.woocommerce table.shop_table .product-name a {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.woocommerce table.cart img { width: 78px; height: auto; }
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2,
.woocommerce .cross-sells h2 {
  font-family: var(--display);
  font-size: var(--t-lg);
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* the variation meta we attach to custom lines */
.woocommerce .variation,
.woocommerce dl.variation {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: .35rem;
}
.woocommerce dl.variation dt, .woocommerce dl.variation dd { display: inline; margin: 0; }
.woocommerce dl.variation dd { margin-right: .5rem; }
.woocommerce dl.variation p { margin: 0; }

/* ------------------------------------------------------------------ forms */
.woocommerce form .form-row { padding: 0; margin-bottom: 1rem; }
.woocommerce form .form-row label,
.woocommerce-billing-fields label,
.wc-block-components-text-input label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: .4rem;
  display: block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.wc-block-components-text-input input {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  padding: .85rem .9rem;
  font-size: .9375rem;
  height: auto;
  min-height: 48px;
  box-shadow: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--ink); outline: none; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--red); }
.woocommerce-input-wrapper { display: block; }

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 1.25rem;
}

/* --------------------------------------------------------------- checkout */
.woocommerce-checkout #payment {
  background: var(--paper-2);
  border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--line);
  padding: 1.25rem;
}
.woocommerce-checkout #payment div.form-row { padding: 1.25rem; }
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  font-size: var(--t-sm);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout-review-order-table tfoot th { text-align: left; }
.woocommerce-checkout-review-order-table tfoot .order-total td,
.woocommerce-checkout-review-order-table tfoot .order-total th {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}

/* ---------------------------------------------------------------- account */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 230px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: grid;
  gap: 1px;
  background: var(--line);
  outline: 1px solid var(--line);
  margin: 0;
  padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { list-style: none; background: var(--paper); }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: .9rem 1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { background: var(--ink); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--paper); }
.woocommerce-account .woocommerce-MyAccount-content { width: calc(100% - 260px); }
@media (max-width: 860px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 1.5rem; }
}

/* ------------------------------------------------------------ price bits */
.woocommerce .price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
}
.woocommerce .price del { color: var(--grey); font-weight: 400; }
.woocommerce .quantity .qty {
  border: 1px solid var(--line);
  border-radius: 0;
  min-height: 44px;
  font-family: var(--mono);
}

/* Cart/checkout blocks (the newer block-based pages) */
.wc-block-components-title,
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-title {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.wc-block-cart-item__wrap .wc-block-components-product-name {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
}
.wc-block-components-totals-item__label { font-size: var(--t-sm); }