/* ============================================================
   WOOCOMMERCE MARKUP RECONCILIATION (cart / checkout / account)
   Styles Woo's real (classic-shortcode) output to the Warm
   Heritage design without brittle full-template rewrites.
   ============================================================ */

/* --- cart --- */

.woocommerce-cart-form .actions {
  padding-top: 1.375rem;
  border-bottom: 0;
  text-align: left;
}
.woocommerce-cart-form .actions .button[name="update_cart"] {
  background: none;
  border: 1px solid var(--line-gold);
  color: var(--ink-body);
  margin-left: 0.625rem;
}

.wc-proceed-to-checkout {
  margin-top: 1.375rem;
}
.wc-proceed-to-checkout .button,
.wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
}

/* --- checkout (Woo default markup) --- */
.woocommerce-checkout form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: 1fr 25rem;
  gap: 2.875rem;
  align-items: start;
}
.woocommerce-checkout #customer_details {
  min-width: 0;
}
.woocommerce-checkout h3 {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-size: 1.375rem;
  margin: 0 0 1.375rem;
  color: var(--ink-heading);
}
.woocommerce form .form-row label,
.woocommerce-checkout .form-row label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.4375rem;
}
.woocommerce form .form-row {
  margin-bottom: 1.125rem;
  padding: 0;
}
.woocommerce .col2-set {
  width: 100%;
  float: none;
}
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
  width: 100%;
  float: none;
}
.woocommerce form .input-text,
.woocommerce form textarea,
.woocommerce .select2-container .select2-selection,
.woocommerce-checkout select {
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--line-gold);
  padding: 0.875rem 0.9375rem;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  color: var(--ink-heading);
  border-radius: 0;
  box-shadow: none;
}
.woocommerce form .input-text:focus {
  border-color: var(--maroon);
  outline: none;
}
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
  background: var(--cream-warm);
  border: 1px solid var(--line);
}
.woocommerce-checkout #order_review_heading {
  margin: 0;
  padding: 1.875rem 1.875rem 0;
  border-bottom: 0;
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--ink-heading);
}
.woocommerce-checkout #order_review {
  padding: 1.25rem 1.875rem 1.875rem;
  position: sticky;
  top: 1.25rem;
}
.woocommerce-checkout #order_review .shop_table {
  border: 0;
}
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
  font-size: 1.125rem;
  color: var(--ink-heading);
  border-bottom: 0;
}
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  border: 1px solid var(--line);
  padding: 0.5rem 1.25rem;
  background: var(--cream);
}
.woocommerce-checkout #payment div.form-row.place-order {
  padding: 1.125rem 0 0;
}
.woocommerce-checkout #payment #place_order {
  width: 100%;
}

/* --- account (login / register / dashboard) --- */

/* Login / Register as a tab choice (form-login.php override).
   The visitor picks one; only that form shows. CSS-only: a hidden radio per
   tab drives visibility through :checked sibling selectors — no JS, and the
   native WooCommerce forms/fields are untouched. */
.woocommerce-account .account-auth {
  max-width: 28.75rem;
  margin: 0 auto;
}
/* breathing room before the footer on the account pages (login/register and the
   logged-in dashboard); main > .woocommerce only sets horizontal padding. */
.woocommerce-account main > .woocommerce {
  padding-bottom: 5rem;
}
.woocommerce-account .account-auth__radio {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
  pointer-events: none;
}
.woocommerce-account .account-auth__tabs {
  display: flex;
}
.woocommerce-account .account-auth__tab {
  flex: 1;
  text-align: center;
  padding: 0.9375rem 1.25rem;
  cursor: pointer;
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--cream);
  border: 1px solid var(--line);
  border-bottom: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-account .account-auth__tab--register {
  border-left: 0;
}
.woocommerce-account .account-auth__tab:hover {
  color: var(--maroon);
}
/* active tab follows the checked radio */
.woocommerce-account #account-auth--login:checked ~ .account-auth__tabs .account-auth__tab--login,
.woocommerce-account #account-auth--register:checked ~ .account-auth__tabs .account-auth__tab--register {
  background: var(--maroon);
  color: var(--cream);
}
/* keyboard focus ring on the active tab */
.woocommerce-account #account-auth--login:focus-visible ~ .account-auth__tabs .account-auth__tab--login,
.woocommerce-account #account-auth--register:focus-visible ~ .account-auth__tabs .account-auth__tab--register {
  outline: 2px solid var(--maroon);
  outline-offset: 0.125rem;
}
/* only the chosen panel is shown */
.woocommerce-account .account-auth__panel {
  display: none;
}
.woocommerce-account #account-auth--login:checked ~ .account-auth__panels .account-auth__panel--login,
.woocommerce-account #account-auth--register:checked ~ .account-auth__panels .account-auth__panel--register {
  display: block;
}
/* tabs are the visible headings; keep the <h2> for screen readers only */
.woocommerce-account .account-auth__heading {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register {
  background: var(--cream-warm);
  border: 1px solid var(--line);
  padding: 2.5rem;
  margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.9375rem 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: var(--cream-warm);
  color: var(--maroon);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--maroon);
  color: var(--cream);
}
.woocommerce-account .woocommerce-MyAccount-content {
  min-width: 0;
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: "Marcellus", serif;
  font-weight: 400;
  color: var(--ink-heading);
}
@media (min-width: 769px) {
  /* Direct-child match only: page.php wraps the shortcode output in its own
     .woocommerce, and [woocommerce_my_account] emits a second .woocommerce
     around the nav + content. A descendant :has() would also match the outer
     wrapper and collapse the whole UI into the 14.375rem column, so scope the grid
     to the wrapper that is the nav's direct parent. */
  .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 14.375rem 1fr;
    gap: 2.875rem;
    align-items: start;
  }
}

/* contact form: honeypot (spam trap) + status notices */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
}
.form-notice {
  border-radius: 0.5rem;
  padding: 0.875rem 1.125rem;
  margin: 0 0 1.375rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.form-notice--ok {
  background: color-mix(in srgb, var(--green) 12%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
  color: var(--green);
}
.form-notice--err {
  background: color-mix(in srgb, #b3261e 8%, var(--cream));
  border: 1px solid color-mix(in srgb, #b3261e 26%, var(--line));
  color: #8a1c16;
}

/* Social login (miniOrange SSO) on the account login/register forms. The wrapper
   is only emitted when the plugin returns buttons (see tripti_render_social_login),
   so this styling never leaves an orphan divider. We style only our own wrapper —
   the buttons themselves keep the plugin's own theme/skin. */
.account-social {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line);
  position: relative;
}
.account-social__divider {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 0.75rem;
  background: var(--cream-warm); /* masks the border line behind the label */
}
.account-social__divider span {
  font-family: "DM Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.account-social__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}