/* ============================================================
   OSJ Sharp — WooCommerce, non-block surfaces
   ------------------------------------------------------------
   Woo's own woocommerce-general / -layout / -smallscreen sheets are
   dequeued in inc/enqueue.php, so this file is the whole treatment for
   everything the theme does not template directly: My Account, order
   received, forms and buttons Woo prints itself.
   ============================================================ */

/* ============================================================
   Buttons Woo renders outside our templates
   ============================================================ */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--control-h-md);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--text-on-brand);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 14.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  transition: background var(--dur-base) var(--ease-out);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--brand-hover);
  color: var(--text-on-brand);
  text-decoration: none;
}
.woocommerce .button.alt { background: var(--brand); }
.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity: 0.45; cursor: not-allowed; }

/*
 * The loop add-to-cart on cross-sell cards is a quiet outline button — the
 * card's own title is the primary action there, not the cart.
 */
.osj-card .add_to_cart_button,
.osj-card .added_to_cart {
  min-height: auto;
  padding: 7px 12px;
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.osj-card .add_to_cart_button:hover,
.osj-card .added_to_cart:hover { background: var(--surface-sunken); color: var(--text-strong); }
.osj-card .add_to_cart_button.loading { opacity: 0.6; }
.osj-card .added_to_cart { margin-left: var(--space-2); }

/*
 * Quick view: Woo's own loop button, styled by context. It is never given a
 * class argument, because that would replace add_to_cart_button and
 * ajax_add_to_cart rather than adding to them.
 */
/*
 * Every property is restated rather than inherited. The quick-view markup is
 * injected by AJAX and has no .woocommerce ancestor, so the .woocommerce .button
 * rules above never match it — without this the button renders in the body font
 * at a different width to the one beside it.
 */
.osj-quick__actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: var(--control-h-lg);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--text-on-brand);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  transition: background var(--dur-base) var(--ease-out);
}
.osj-quick__actions .button:hover { background: var(--brand-hover); }
.osj-quick__actions .button.loading { opacity: 0.6; }
/* Woo appends a "View cart" link after a successful AJAX add. */
.osj-quick__actions .added_to_cart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h-lg);
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-link);
}

/* ============================================================
   Forms
   ============================================================ */
.woocommerce form .form-row { margin-bottom: var(--space-4); }
.woocommerce form .form-row label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-strong);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-glow);
}
/*
 * iOS zoom protection, again — base.css has the 16px rule but it is
 * `input[type="text"]` at (0,1,1) and the block above is (0,3,1), so the
 * protection lost on specificity, not just source order. Every classic Woo
 * form on this site (login, register, lost password, edit address, account
 * details) was therefore 15px and zoomed on focus without zooming back.
 * Restated here at matching specificity because that is where the 15px lives.
 *
 * Keyed on pointer as well as width, not width alone: an iPad in portrait is
 * 768px and zooms exactly the same way, which is the same reason §0a moved the
 * drawer's search field to 1120px rather than 760px.
 */
@media (max-width: 760px), (pointer: coarse) {
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select { font-size: 16px; }
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password,
.woocommerce-EditAccountForm {
  max-width: 520px;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

/*
 * Woo chrome that lost its styling with woocommerce-general.css.
 *
 * inc/enqueue.php dequeues Woo's three stylesheets because they fight the
 * theme's grids. These few elements were relying on them, so they had fallen
 * back to browser defaults: <mark> as a yellow highlighter, <fieldset> with a
 * 3D groove border, <address> in italics, and the show-password toggle as a
 * 16x6px button with no icon at all.
 */
.woocommerce mark,
.woocommerce-MyAccount-content mark {
  background: none;
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}

.woocommerce fieldset {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.woocommerce fieldset legend {
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.woocommerce address {
  font-style: normal;
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

/* The toggle sits inside the field; the input needs room so text never runs under it. */
.woocommerce .password-input {
  position: relative;
  display: block;
}
.woocommerce .password-input input.input-text { padding-right: 52px; }
.woocommerce .show-password-input {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent no-repeat center / 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7C63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  cursor: pointer;
}
.woocommerce .show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314110B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E");
}
.woocommerce .show-password-input:focus-visible {
  outline: var(--focus-ring-width) solid var(--brand);
  outline-offset: -3px;
}

/* ============================================================
   My Account
   ============================================================ */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.woocommerce-MyAccount-navigation ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 14.5px;
  /*
   * Navigation, not prose. The header, footer and drawer menus are all
   * undecorated; this was the only underlined nav in the theme, and its own
   * :hover rule below already turns the underline off — so at rest it was
   * underlined and on hover it was not, which is backwards.
   */
  text-decoration: none;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--surface-sunken); color: var(--text-strong); text-decoration: none; }
.woocommerce-MyAccount-navigation .is-active a {
  background: var(--ink-900);
  color: var(--sand-50);
  font-weight: var(--weight-semibold);
}
.woocommerce-MyAccount-content { min-width: 0; }

@media (min-width: 1001px) {
  .woocommerce-account .woocommerce { grid-template-columns: 244px minmax(0, 1fr); gap: 44px; }
  .woocommerce-MyAccount-navigation { position: sticky; top: var(--sticky-offset); }
}

/* ============================================================
   Tables — orders, downloads, order received
   ============================================================ */
.woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface-card);
  font-size: 14.5px;
}
.woocommerce table.shop_table th {
  padding: 14px 18px;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
}
.woocommerce table.shop_table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-body);
}
.woocommerce table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce table.shop_table .amount {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

/*
 * Order status reads as a value, not as prose.
 *
 * Deliberately NOT colour-coded. Woo writes a --status-* class on the row, so
 * keying colour off it is easy, but --success / --danger / --info are 2.9:1,
 * 3.9:1 and 3.4:1 on --surface-card and all three fail AA for body text. The
 * status is information a customer needs to read, so tinting it makes the word
 * harder to read in exchange for a cue the word itself already gives. Add
 * AA-contrast status tokens first if this is wanted.
 *
 * (Note the specificity if it ever is: `.woocommerce table.shop_table td` is
 * (0,2,1), so a two-class rule here loses and silently does nothing.)
 */
.woocommerce table.shop_table td.woocommerce-orders-table__cell-order-status {
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}

/* ------------------------------------------------------------
   Phone: reflow the labelled tables into cards.

   A five-column order history is 525px of content in a 348px box. It used to
   be declared `display: block; overflow-x: auto`, but `.woocommerce-orders-table`
   is (0,1,0) and the base rule above is `.woocommerce table.shop_table` at
   (0,2,1) — so `overflow: hidden` won and only the `display` half landed. The
   result was 177px of hard-clipped table with no way to scroll to it: the Total
   was cut mid-figure and the entire Actions column, the View button included,
   was unreachable. A customer on a phone could not open an order.

   Reflowing beats scrolling here because every cell carries a `data-title`,
   so the header text survives as a label per row. Scoped to the two tables Woo
   labels that way — order-details has no data-title and its tfoot is already
   label/value pairs, so it is left as a two-column table below.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .woocommerce table.woocommerce-orders-table,
  .woocommerce table.woocommerce-table--downloads {
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .woocommerce table.woocommerce-orders-table thead,
  .woocommerce table.woocommerce-table--downloads thead { display: none; }

  .woocommerce table.woocommerce-orders-table tbody,
  .woocommerce table.woocommerce-table--downloads tbody {
    display: grid;
    gap: var(--space-4);
  }
  .woocommerce table.woocommerce-orders-table tbody tr,
  .woocommerce table.woocommerce-table--downloads tbody tr {
    display: block;
    padding: 2px var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
  }
  .woocommerce table.woocommerce-orders-table tbody th,
  .woocommerce table.woocommerce-orders-table tbody td,
  .woocommerce table.woocommerce-table--downloads tbody th,
  .woocommerce table.woocommerce-table--downloads tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 13px 0;
    border-bottom: 1px solid var(--border-subtle);
    text-align: right;
    /*
     * The row cells are <th scope="row">, so they pick up the column-header
     * background from the desktop rule and drew a beige band across one row of
     * an otherwise white card, inset by the card's own padding.
     */
    background: none;
  }
  .woocommerce table.woocommerce-orders-table tbody tr > :last-child,
  .woocommerce table.woocommerce-table--downloads tbody tr > :last-child { border-bottom: none; }

  /* Only where Woo supplied one — an empty ::before would still reserve a gap. */
  .woocommerce table.woocommerce-orders-table tbody [data-title]::before,
  .woocommerce table.woocommerce-table--downloads tbody [data-title]::before {
    content: attr(data-title);
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
  }

  /*
   * The order number leads the card, and it is a link to the same place as the
   * View button. Padding moves off the cell and onto the link so the target
   * clears 44px without the row growing to 70.
   */
  .woocommerce table.woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-number {
    padding-block: 3px;
    font-family: var(--font-mono);
    font-weight: var(--weight-semibold);
    font-size: 15px;
  }
  .woocommerce table.woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-number a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * Actions is a full-width button rather than a labelled row. It is the one
   * cell holding a control instead of a value, and "ACTIONS  View" wastes the
   * line that has to clear 44px anyway.
   */
  .woocommerce table.woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-actions {
    display: block;
    padding-bottom: var(--space-4);
  }
  .woocommerce table.woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-actions::before { content: none; }
  .woocommerce table.woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-actions .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }

  /*
   * Everything else that is still a real table gets a scroll container that
   * actually works — matching the base rule's specificity so `overflow: hidden`
   * cannot win again. Belt and braces for the payment-methods table and
   * anything a plugin adds later.
   */
  .woocommerce table.shop_table:not(.woocommerce-orders-table):not(.woocommerce-table--downloads) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /*
   * A long product name must wrap rather than force the table wide.
   *
   * break-word, not anywhere: `anywhere` also counts toward min-content, so the
   * Total column collapsed to about 60px and the order-details table started
   * splitting figures across lines — "$944.0 / 0", "Credit Ca / rd (Strip / e)".
   * break-word breaks only as a last resort and leaves intrinsic sizing alone.
   */
  .woocommerce table.shop_table td,
  .woocommerce table.shop_table th { overflow-wrap: break-word; }
  .woocommerce table.woocommerce-table--order-details { font-size: 14px; }
  .woocommerce table.woocommerce-table--order-details td,
  .woocommerce table.woocommerce-table--order-details th { padding: 12px 14px; }
}

/* ============================================================
   Order received
   ============================================================ */
.woocommerce-order {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--space-8);
}
.woocommerce-thankyou-order-received {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}
.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.woocommerce-order-overview li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-strong);
}

/* ============================================================
   Price formatting, everywhere Woo prints it
   ============================================================ */
.woocommerce .price,
.woocommerce .amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--price);
}
/*
 * A single figure must never break across lines, however narrow the column
 * gets — "$944.0 / 0" is unreadable. Scoped to .amount rather than .price
 * because a variable product's .price holds a whole range and still needs to
 * be able to wrap between its two amounts.
 */
.woocommerce .amount { white-space: nowrap; }
.woocommerce del { opacity: 0.5; }
.woocommerce ins { text-decoration: none; color: var(--price-sale); }

/* ============================================================
   Password strength
   ============================================================ */
.woocommerce-password-strength {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-align: center;
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { background: #F7E5E0; color: #8A2F1B; }
.woocommerce-password-strength.good { background: #E6EEF4; color: #2C5470; }
.woocommerce-password-strength.strong { background: #E4F0E8; color: #2C6642; }