/* woocommerce/account.css
   Customer account: login, subscriptions, addresses, payment methods.
   Rewind Club - loaded in order by functions.php. */

.woocommerce-account .rc-page{padding-block:clamp(32px,5vw,56px)}

/* --- login / register ---
   With registration off there is only a login form, so the block is centred and
   narrow. With registration on WooCommerce adds .col2-set and the two forms sit
   side by side. Splitting the heading from its form was the bug here. */
.woocommerce-account:not(.logged-in) .woocommerce{
  display:block; max-width:520px; margin-inline:auto;
}

.woocommerce-account:not(.logged-in) .woocommerce:has(.col2-set){max-width:1000px}

.woocommerce-account:not(.logged-in) .woocommerce > h2{text-align:center; margin-bottom:18px}

.woocommerce-account:not(.logged-in) .u-columns.col2-set{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px; align-items:start; width:auto; margin-inline:auto;
}

/* WooCommerce clears this row with ::before/::after. In a grid those pseudos
   become grid items and push the two forms out of column 1. */
.woocommerce-account:not(.logged-in) .u-columns.col2-set::before,
.woocommerce-account:not(.logged-in) .u-columns.col2-set::after{
  content:none; display:none;
}

@media (max-width:760px){
  .woocommerce-account:not(.logged-in) .u-columns.col2-set{grid-template-columns:minmax(0,1fr)}
}

.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2{
  width:auto !important; float:none !important; margin:0 !important;
}

.woocommerce-account:not(.logged-in) .u-column1 > h2,
.woocommerce-account:not(.logged-in) .u-column2 > h2{text-align:left}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password{
  background:var(--card); border:2px solid var(--ink); border-radius:20px;
  box-shadow:6px 6px 0 var(--kraft-2); padding:28px 26px; margin:0;
}

.woocommerce-account h2{font-size:clamp(22px,2.6vw,28px); margin-bottom:6px}

.woocommerce form .form-row{margin-bottom:16px; padding:0}

.woocommerce form .form-row label{display:block; margin-bottom:6px}

.woocommerce form.login .woocommerce-form-login__rememberme,
.woocommerce form .woocommerce-form__label-for-checkbox{
  font-family:var(--font-body); font-size:14px; letter-spacing:0; text-transform:none; color:var(--ink-2);
}

.woocommerce form.login .lost_password{margin:10px 0 0; font-size:14px}

.woocommerce .password-input,
.woocommerce .show-password-input{width:100%}

/* WooCommerce lays this out with floats and percentage widths. We replace it
   with a grid, so those have to be cleared or the columns fight each other. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  float:none !important; width:auto !important; margin-left:0 !important; margin-right:0 !important;
}
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after{content:none !important}

/* --- logged in: sidebar + panel --- */
.woocommerce-account.logged-in .woocommerce{
  display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start;
}

.woocommerce-account .woocommerce-MyAccount-navigation{
  background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:14px;
  position:sticky; top:calc(var(--logo-height) + 46px);
}

.woocommerce-account .woocommerce-MyAccount-navigation a{font-size:15px}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover{background:var(--paper-2); color:var(--ink)}

.woocommerce-account .woocommerce-MyAccount-content{min-width:0}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child{margin-top:0}

/* Subscriptions and orders tables read as cards on small screens. */
.woocommerce table.my_account_subscriptions,
.woocommerce table.woocommerce-orders-table,
.woocommerce table.shop_table_responsive{width:100%}

.woocommerce table.shop_table .button{margin:2px 4px 2px 0}

/* Status pills. Scoped to the CELL - WooCommerce gives the column HEADER the
   same class, and a pill behind the word "Status" reads as a broken button. */
.woocommerce td.subscription-status,
.woocommerce td.order-status,
.woocommerce mark.order-status{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); line-height:1.6; background:none;
}
.woocommerce td.subscription-status > span,
.woocommerce td.order-status > span,
.woocommerce mark.order-status{
  display:inline-block; padding:4px 10px; border-radius:999px; background:var(--paper-2);
}
/* When Woo doesn't wrap the label in a span, the cell itself becomes the pill. */
.woocommerce td.subscription-status{
  display:table-cell;
}
.woocommerce td.subscription-status::before{content:none}
.woocommerce mark.order-status.status-completed,
.woocommerce mark.order-status.status-active{background:var(--sage); color:#F7F3EA}
.woocommerce mark.order-status.status-on-hold{background:var(--butter); color:#33291F}
.woocommerce mark.order-status.status-cancelled,
.woocommerce mark.order-status.status-failed{background:var(--mulberry); color:var(--mulberry-ink)}

/* The subscription detail screen. */
.woocommerce .subscription_details,
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details,
.woocommerce .woocommerce-Addresses{
  background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:22px 24px; margin-bottom:22px;
}

.woocommerce .woocommerce-Addresses{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; background:none; border:0; padding:0}

.woocommerce .woocommerce-Address{background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:22px 24px; width:auto; float:none}

.woocommerce .woocommerce-Address-title{display:flex; align-items:baseline; justify-content:space-between; gap:14px}

.woocommerce .woocommerce-Address-title h2,
.woocommerce .woocommerce-Address-title h3{font-size:20px; margin:0}

.woocommerce .woocommerce-Address address{font-style:normal; color:var(--ink-2); line-height:1.8; margin-top:10px}

/* Payment methods. */
.woocommerce .woocommerce-MyAccount-paymentMethods{background:var(--card)}

.woocommerce .payment-method-actions .button{padding:9px 15px; font-size:14px}

/* The "skip next box" action is the retention feature — make it primary. */
.woocommerce a.button.skip,
.woocommerce a.button[href*="subscription_skip"]{background:var(--butter); border-color:#33291F; color:#33291F}