/* My account.
   The design never drew these screens, so this file deliberately invents as
   little as possible: the account frame borrows the contact page's legal grid,
   the forms borrow .cb-field / .cb-input / .cb-btn from components.css, the
   order view borrows .cb-ticket from components-checkout.css, and what is left
   is a list of past orders and a status pill. No new tokens, no new idiom.

   The last block is the exception and the reason this file exists at all.
   Edit-address, edit-account and the customer address on a past order are
   WooCommerce's own markup, printed by WooCommerce's own templates, and
   overriding three more templates to restyle a two-field form would have been
   three more files to keep in step with WooCommerce. They are styled through
   their core class names instead, narrowly, and only where this theme has
   dropped WooCommerce's stylesheets and would otherwise leave them unstyled. */

.cb-acct-page{display:grid;gap:22px}
.cb-acct{display:grid;gap:28px}
@media (min-width:900px){.cb-acct{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:56px}.cb-acct__nav{position:sticky;top:calc(var(--hd-h,72px) + 24px);align-self:start}}
.cb-acct__nav ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
@media (min-width:900px){.cb-acct__nav ul{flex-direction:column;align-items:stretch}}
.cb-acct__nav a{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 16px;border-radius:var(--r-pill);border:2px solid var(--espresso);background:var(--paper);font-weight:800;text-decoration:none}
.cb-acct__nav a .i{width:20px;height:20px;flex:0 0 20px;color:var(--terracotta)}
.cb-acct__nav a:hover{background:var(--sun)}
.cb-acct__nav .is-active>a{background:var(--espresso);color:var(--paper)}
.cb-acct__nav .is-active>a .i{color:var(--sun)}
.cb-acct__body{display:grid;gap:22px;align-content:start}
.cb-acct__body>h2{font-size:var(--fs-h3)}
.cb-acct__intro{margin:0;color:var(--ink-2)}

/* A form on its own card, so a login screen on a cream section is not two
   paragraphs floating in the middle of nothing. --solo is the same card on a
   screen with no sidebar beside it: narrow enough to read, centred, and full
   width again as soon as there are two of them. */
.cb-acct__card{display:grid;gap:16px;padding:26px 24px;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-1)}
.cb-acct__card h2{font-size:var(--fs-h3);margin:0}
.cb-acct__card p{margin:0;color:var(--ink-2)}
.cb-acct__card .cb-btn{justify-self:start}
.cb-acct__card--solo{width:100%;max-width:560px;margin-inline:auto}
.cb-acct__row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.cb-acct__row .cb-btn{margin-right:auto}
.cb-acct__form{display:grid;gap:16px}
.cb-acct__form .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cb-acct__form .required{margin-left:3px;color:var(--terracotta)}
.cb-acct-login{display:grid;gap:22px}
@media (min-width:900px){.cb-acct-login--two{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.cb-acct-login--two .cb-acct__card--solo{max-width:none}}

/* Past orders. A table on a phone is a table that scrolls sideways, so each
   order is a card and the "columns" are its lines. The number is the only link
   to the order, so it is a tap target rather than a line of text. */
.cb-orders{display:grid;gap:14px;list-style:none}
.cb-order{display:grid;gap:10px;padding:20px;border-radius:var(--r-lg);background:var(--paper);border:2px solid var(--espresso);box-shadow:4px 4px 0 var(--espresso)}
@media (min-width:600px){.cb-order{grid-template-columns:1fr auto;align-items:center}}
.cb-order__main{display:grid;gap:4px}
.cb-order__no{margin:0;font:800 1.5rem/1 var(--font-display);font-variation-settings:"wdth" 78}
.cb-order__no a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
.cb-order__meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.cb-order__meta b{color:var(--price)}
.cb-order__side{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (min-width:600px){.cb-order__side{justify-content:flex-end}}
.cb-status{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r-pill);background:var(--cream);font-size:var(--fs-xs);font-weight:800;letter-spacing:var(--track-eyebrow);text-transform:uppercase}
.cb-status--processing,.cb-status--on-hold{background:var(--sun-soft)}
.cb-status--completed{background:var(--olive-soft);color:var(--espresso)}
.cb-status--cancelled,.cb-status--failed,.cb-status--refunded{background:var(--error-bg);color:var(--terracotta-dark)}
.cb-acct__pager{display:flex;gap:10px;flex-wrap:wrap}

/* One order, which is the ticket plus the few things around it. The status
   sentence is WooCommerce's, <mark> elements and all, so those are turned off
   as highlights and the status inside it is given the same pill as the list. */
.cb-acct__status{margin:0;color:var(--ink-2)}
.cb-acct__status mark{background:none;color:var(--espresso);font-weight:800}
.cb-acct__status mark.order-status{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--r-pill);background:var(--sun-soft);font-size:var(--fs-sm)}
.cb-order-view{display:grid;gap:18px}
.cb-order-view__h{font-size:var(--fs-h3);margin:0}
.cb-order-view__actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.cb-updates{display:grid;gap:12px;list-style:none;margin:0}
.cb-updates li{padding:16px 18px;border-radius:var(--r-md);background:var(--paper);box-shadow:var(--sh-1)}
.cb-updates time{display:block;font-size:var(--fs-sm);font-weight:800;color:var(--ink-2)}
.cb-updates p{margin:4px 0 0}
.cb-updates p:first-of-type{margin-top:6px}

/* WooCommerce's own markup. Edit-address and edit-account are core's forms,
   printed by core's templates, and overriding two more templates to restyle a
   handful of fields would have been two more files to keep in step with
   WooCommerce. They are styled through the class names core puts on its own
   containers instead - .woocommerce-address-fields and
   .woocommerce-EditAccountForm, neither of which this theme ever prints - so
   these rules cannot reach the rows the theme draws itself. */
.cb-acct__body>form{padding:26px 24px;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-1)}
.cb-acct__body>form>h2{font-size:var(--fs-h3);margin:0 0 18px}
.woocommerce-address-fields .form-row,.woocommerce-EditAccountForm .woocommerce-form-row{display:grid;gap:6px;margin:0 0 16px}
.woocommerce-address-fields label,.woocommerce-EditAccountForm label{font-size:var(--fs-sm);font-weight:800}
.woocommerce-address-fields .woocommerce-input-wrapper{display:block}
.woocommerce-address-fields .input-text,.woocommerce-address-fields select,.woocommerce-EditAccountForm .input-text{width:100%;min-height:56px;padding:0 16px;border-radius:var(--r-md);background:var(--cream);border:2px solid transparent;font:600 1rem/1 var(--font-body);color:var(--espresso)}
.woocommerce-address-fields .input-text:focus,.woocommerce-address-fields select:focus,.woocommerce-EditAccountForm .input-text:focus{outline:0;border-color:var(--espresso);background:var(--paper)}
.woocommerce-address-fields .required,.woocommerce-EditAccountForm .required{margin-left:3px;color:var(--terracotta);text-decoration:none}
.woocommerce-address-fields .optional,.woocommerce-EditAccountForm em{font-size:var(--fs-sm);font-weight:600;font-style:normal;color:var(--ink-2)}
.cb-acct__body fieldset{border:0;padding:0;margin:22px 0 0}
.cb-acct__body fieldset legend{font-size:var(--fs-h3);line-height:var(--lh-head);margin-bottom:10px}

/* Core's own submit button on those two screens gets the one button this
   design has rather than the browser's. */
.cb-acct__body button.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border-radius:var(--r-pill);border:2px solid var(--espresso);background:var(--espresso);color:var(--paper);font:800 .9375rem/1.1 var(--font-body);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 0 rgba(42,27,20,.35);transition:transform var(--dur-1) var(--ease-spring),box-shadow var(--dur-1)}
.cb-acct__body button.button:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(42,27,20,.35)}
.cb-acct__body button.button:active{transform:translateY(4px);box-shadow:0 0 0 rgba(42,27,20,.35)}

/* The saved addresses: on the edit-address index, and under a past order. */
.cb-acct__body .woocommerce-Addresses,.woocommerce-customer-details .woocommerce-columns{display:grid;gap:16px}
@media (min-width:700px){.cb-acct__body .woocommerce-Addresses,.woocommerce-customer-details .woocommerce-columns--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.woocommerce-Address-title{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-bottom:8px}
.woocommerce-Address-title h2,.woocommerce-customer-details .woocommerce-column__title{font-size:var(--fs-h3);margin:0}
.woocommerce-Address-title .edit{font-size:var(--fs-sm);font-weight:800}
.woocommerce-Address address,.woocommerce-customer-details address{font-style:normal;padding:18px 20px;border-radius:var(--r-md);background:var(--paper);box-shadow:var(--sh-1);line-height:1.55}
.woocommerce-customer-details{display:grid;gap:12px}
.woocommerce-customer-details .woocommerce-column__title{margin-bottom:8px}
.woocommerce-customer-details address p,.woocommerce-Address address p{margin:6px 0 0}