/* ==========================================================================
   WooCommerce overrides.

   Kept out of style.css so the design system stays byte-identical to the
   approved prototype and every Woo-specific rule lives in one place.
   ========================================================================== */

/* ---- variation form ------------------------------------------------------ */
.woocommerce-variation-add-to-cart,
form.cart { display: block; }

table.variations { width: 100%; border-collapse: collapse; margin-top: 24px; }
table.variations tr { display: block; }
table.variations tr + tr { margin-top: 20px; }
table.variations th,
table.variations td { display: block; padding: 0; text-align: left; border: 0; }

table.variations th.label label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; display: block;
}

table.variations td.value { position: relative; }

table.variations select {
  appearance: none; width: 100%; height: 46px; padding: 0 40px 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff;
  font-size: .9375rem; color: var(--ink); cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  transition: border-color .16s var(--ease);
}
table.variations select:hover { border-color: var(--ink); }
table.variations select:focus { outline: 2px solid var(--ink); outline-offset: 2px; }

.reset_variations {
  display: inline-block; margin-top: 10px; font-size: .8125rem;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.reset_variations:hover { color: var(--ink); }

.woocommerce-variation-price { margin: 22px 0 0; }
.woocommerce-variation-price .price {
  font-size: 1.75rem; font-weight: 620; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.woocommerce-variation-availability { margin-top: 8px; font-size: .8125rem; color: var(--muted); }

/* ---- quantity + submit --------------------------------------------------- */
form.cart .quantity { display: inline-flex; align-items: center; }
form.cart .quantity input.qty,
.woocommerce-cart-form .quantity input.qty {
  width: 88px; height: 46px; padding: 0 10px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .9375rem;
}
form.cart .quantity input.qty:focus { outline: 2px solid var(--ink); outline-offset: 2px; }

.single_add_to_cart_button,
.woocommerce-cart-form button,
.checkout-button,
#place_order,
.wc-forward,
button.button,
a.button,
input.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding-inline: 22px; border: 1px solid var(--ink);
  border-radius: var(--r-sm); background: var(--ink); color: #fff;
  font-size: .9375rem; font-weight: 550; letter-spacing: -.01em; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover,
button.button:hover,
a.button:hover { background: #26262b; border-color: #26262b; color: #fff; }

button.button:disabled,
.single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; }

/* the buy row on the product page */
form.cart { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
form.variations_form.cart { display: block; }
form.variations_form .woocommerce-variation-add-to-cart {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px;
}
form.cart .single_add_to_cart_button { flex: 1 1 200px; }

/* ---- notices ------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border: 1px solid var(--line); border-left: 3px solid var(--ink);
  border-radius: var(--r-sm); background: var(--band);
  padding: 14px 18px; margin-bottom: 20px; font-size: .875rem; list-style: none;
}
.woocommerce-error { border-left-color: var(--alert); }
.woocommerce-message a, .woocommerce-info a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- cart & checkout ----------------------------------------------------- */
.woocommerce-cart-form table.shop_table,
.woocommerce-checkout-review-order table.shop_table,
.woocommerce table.shop_table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.woocommerce table.shop_table th {
  text-align: left; padding: 13px 20px; background: var(--band);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.woocommerce table.shop_table td {
  padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.woocommerce table.shop_table td.product-remove a {
  color: var(--faint); font-size: 1.125rem; text-decoration: none;
}
.woocommerce table.shop_table td.product-remove a:hover { color: var(--alert); }
.woocommerce table.shop_table img { width: 56px; height: auto; border-radius: var(--r-sm); }

.cart_totals h2, .woocommerce-billing-fields h3, #order_review_heading,
.woocommerce-additional-fields h3 {
  font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; margin-bottom: 14px;
}

.woocommerce form .form-row { display: grid; gap: 7px; margin-bottom: 16px; }
.woocommerce form .form-row label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection {
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff;
  padding: 12px 14px; font-size: 1rem; width: 100%; min-height: 46px; outline: 0;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--ink); }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }

@media (min-width: 641px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: calc(50% - 8px); display: inline-grid; vertical-align: top; }
  .woocommerce form .form-row-first { margin-right: 16px; }
}

.woocommerce-checkout #payment {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--band); padding: 20px; margin-top: 20px;
}
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 16px; }
.woocommerce-checkout #payment ul.payment_methods li + li { margin-top: 12px; }
.woocommerce-checkout #payment div.payment_box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px; margin-top: 10px; font-size: .875rem; color: var(--muted);
}

.woocommerce .cart-collaterals { margin-top: 34px; }
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td { font-weight: 600; }
.order-total .amount { font-size: 1.25rem; letter-spacing: -.02em; }

/* Woo's own price markup inside our card */
.card .price del { color: var(--faint); font-weight: 450; margin-right: 6px; }
.card .price ins { text-decoration: none; }
.card .price .woocommerce-Price-amount { white-space: nowrap; }
.card .price { font-size: 1.0625rem; }
@media (min-width: 641px) { .card .price { font-size: 1.1875rem; } }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- responsive cart table ----------------------------------------------
   Woo's own stylesheet is dequeued, so its shop_table_responsive stacking
   comes with it. Same card treatment as the COA chart.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .woocommerce table.shop_table_responsive,
  .woocommerce table.shop_table_responsive tbody,
  .woocommerce table.shop_table_responsive tr,
  .woocommerce table.shop_table_responsive td { display: block; width: 100%; }

  .woocommerce table.shop_table_responsive thead { display: none; }

  .woocommerce table.shop_table_responsive tr {
    position: relative;
    border-bottom: 1px solid var(--line);
    padding: 16px var(--gut) 18px;
  }
  .woocommerce table.shop_table_responsive tr:last-child { border-bottom: 0; }

  .woocommerce table.shop_table_responsive td {
    border: 0;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: .875rem;
    text-align: right;
  }
  .woocommerce table.shop_table_responsive td::before {
    content: attr(data-title);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    flex: none;
    text-align: left;
  }
  /* these carry no label and should not reserve a column */
  .woocommerce table.shop_table_responsive td.product-remove,
  .woocommerce table.shop_table_responsive td.product-thumbnail,
  .woocommerce table.shop_table_responsive td.actions { justify-content: flex-start; }
  .woocommerce table.shop_table_responsive td.product-remove::before,
  .woocommerce table.shop_table_responsive td.product-thumbnail::before,
  .woocommerce table.shop_table_responsive td.actions::before { content: none; }

  .woocommerce table.shop_table_responsive td.product-remove {
    position: absolute; top: 12px; right: var(--gut); padding: 0;
  }
  .woocommerce table.shop_table_responsive td.actions { display: grid; gap: 10px; margin-top: 12px; }
  .woocommerce table.shop_table_responsive td.actions .coupon { display: grid; gap: 10px; }
  .woocommerce table.shop_table_responsive td.actions button { width: 100%; }

  /* The shipping row holds a list of choices, not a single value — side by
     side with its own label it collapses to one character per line. */
  .woocommerce table.shop_table_responsive tr.woocommerce-shipping-totals td,
  .woocommerce table.shop_table_responsive tr.shipping td {
    flex-direction: column; align-items: stretch; text-align: left; gap: 6px;
  }

  .woocommerce .cart_totals table.shop_table th,
  .woocommerce .cart_totals table.shop_table td { padding: 12px 16px; }

  .woocommerce-cart-form table.shop_table { border-radius: var(--r); }
}

/* ---- tap targets in the cart -------------------------------------------- */
.woocommerce table.shop_table td.product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 1.25rem; line-height: 1; color: var(--faint);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.woocommerce table.shop_table td.product-remove a.remove:hover {
  background: var(--band); color: var(--alert);
}
.woocommerce table.shop_table td.product-name a {
  display: inline-block; padding-block: 6px; font-weight: 550;
}
.woocommerce form.checkout_coupon .input-text,
.woocommerce td.actions .coupon input#coupon_code {
  height: 46px; padding: 0 14px; font-size: 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.woocommerce td.actions .coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.woocommerce td.actions .coupon input#coupon_code { flex: 1 1 200px; min-width: 0; }

/* the header badge sits at the legibility floor */
.cart-badge { font-size: 10.5px; }

/* ---- cart totals + shipping ---------------------------------------------
   .cart_totals is a plain table. Rather than forcing it into flex — which
   fights the table layout and overflows worse — let it stay a table and make
   it incapable of exceeding its container.
   ------------------------------------------------------------------------ */
.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout-review-order-table {
  table-layout: fixed;
  width: 100%;
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  overflow-wrap: anywhere;
}
.woocommerce .cart_totals table.shop_table td { text-align: right; }

.woocommerce tr.shipping ul#shipping_method,
.woocommerce tr.shipping ul {
  list-style: none; margin: 0; padding: 0; text-align: left;
}
.woocommerce tr.shipping ul li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.woocommerce tr.shipping ul li label { margin: 0; font-size: .875rem; }
.woocommerce tr.shipping .woocommerce-shipping-destination { font-size: .8125rem; color: var(--muted); }

.woocommerce form.woocommerce-shipping-calculator { margin-top: 12px; max-width: 100%; }
.woocommerce form.woocommerce-shipping-calculator p { margin-bottom: 10px; }
.woocommerce .shipping-calculator-button { display: inline-block; padding-block: 8px; }

@media (max-width: 640px) {
  .woocommerce .cart_totals table.shop_table th,
  .woocommerce .cart_totals table.shop_table td { padding: 12px 14px; font-size: .875rem; }
}

/* Never let the method list shrink below its own text. */
.woocommerce tr.shipping ul,
.woocommerce ul#shipping_method,
.woocommerce .woocommerce-shipping-methods { flex: 1 1 auto; min-width: 0; width: 100%; }
.woocommerce ul#shipping_method li label,
.woocommerce .woocommerce-shipping-methods li label,
.woocommerce tr.shipping ul li label { flex: 1 1 auto; min-width: 0; padding-block: 7px; }

/* ---- radios and checkboxes ----------------------------------------------
   Woo renders these at the browser default 13px, well under the tap floor.
   ------------------------------------------------------------------------ */
.woocommerce input[type="radio"],
.woocommerce input[type="checkbox"],
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
  width: 24px; height: 24px; flex: none; margin-right: 4px;
  accent-color: var(--ink); cursor: pointer;
}
.woocommerce ul#shipping_method li,
.woocommerce .woocommerce-shipping-methods li {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
}
.woocommerce ul#shipping_method li label,
.woocommerce .woocommerce-shipping-methods li label { cursor: pointer; margin: 0; }
.woocommerce-form__label-for-checkbox {
  display: flex; align-items: center; gap: 10px; cursor: pointer; padding-block: 6px;
}