/* ==========================================================================
   MAHIRA SELECT - account.css
   Cart, checkout and My Account. Loaded on those pages only.
   Also carries the shared WooCommerce notice and form styling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper{max-width:var(--ms-container);margin-inline:auto;padding-inline:var(--ms-gutter);}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{
  list-style:none;margin:0 0 20px;padding:16px 20px;
  font-size:var(--ms-fs-sm);
  /* border:0 first, because WooCommerce puts a 3px blue rule on the top edge of
     every notice and setting only the left border leaves that showing. */
  border:0;border-left:2px solid var(--ms-gold);
  background:var(--ms-champagne);
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
/* WooCommerce sets an icon on each notice using a glyph from its own icon font.
   Wherever that font does not load the glyph renders as a missing character box,
   which is the small empty square that appears beside the notice text. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none;}
.woocommerce-error{border-left-color:var(--ms-sale);background:rgba(140,47,38,.06);}
.woocommerce-error li{list-style:none;}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 18px;
  font-size:.6875rem;font-weight:500;
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  background:var(--ms-ink);color:var(--ms-cream);
  border:0;border-radius:var(--ms-radius-btn);cursor:pointer;
}

/* WooCommerce 8+ prints some notices with the block notice component even on
   classic pages. Bring it onto the palette rather than leaving it default blue. */
.wc-block-components-notice-banner{
  display:flex;align-items:center;
  margin:0 0 20px;padding:14px 18px;
  font-size:var(--ms-fs-sm);
  background:var(--ms-champagne)!important;
  border:0!important;border-left:2px solid var(--ms-gold)!important;
  border-radius:0!important;
  color:var(--ms-ink);
}
.wc-block-components-notice-banner.is-error{
  background:rgba(140,47,38,.06)!important;border-left-color:var(--ms-sale)!important;
}
.wc-block-components-notice-banner.is-success{border-left-color:var(--ms-gold)!important;}
.wc-block-components-notice-banner > svg{
  width:18px;height:18px;flex:0 0 auto;margin-right:10px;
  fill:var(--ms-gold-ink);background:none!important;padding:0!important;border-radius:0!important;
}
.wc-block-components-notice-banner.is-error > svg{fill:var(--ms-sale);}
.wc-block-components-notice-banner .wc-block-components-notice-banner__content{padding:0;}

/* --------------------------------------------------------------------------
   Cart page

   The cart moved to its own stylesheet, assets/css/cart.css, when it was
   rebuilt from a `shop_table` into a card list. The rules that dressed the old
   `.ms-cartpage` / `.ms-carttable` markup were removed with it rather than
   left here matching nothing.
   -------------------------------------------------------------------------- */
.ms-checkout__subtitle{
  font-family:var(--ms-font-heading);
  font-size:1.25rem;font-weight:500;margin:0 0 16px;
}
/* Cross sells are hidden: the aside is for completing the order, not browsing. */
.cross-sells{display:none;}

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */
.ms-checkout{padding-block:clamp(28px,4vw,52px) clamp(48px,6vw,88px);}
.ms-checkout__head{margin-bottom:clamp(28px,3vw,44px);}
.ms-checkout__layout{
  display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,56px);
}
@media (min-width:1000px){
  .ms-checkout__layout{grid-template-columns:minmax(0,1fr) 380px;align-items:start;}
  .ms-checkout__aside{position:sticky;top:calc(var(--ms-header-h-compact) + 24px);}
}
.ms-checkout__fields{min-width:0;}
.ms-checkout__summary{
  background:var(--ms-surface);
  border:var(--ms-hairline);
  padding:clamp(20px,2.5vw,28px);
}

.ms-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3{
  font-family:var(--ms-font-heading);
  font-size:1.25rem;font-weight:500;
  margin:0 0 18px;padding-bottom:12px;
  border-bottom:var(--ms-hairline);
}
.woocommerce-shipping-fields,
.woocommerce-additional-fields{margin-top:32px;}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper{
  display:grid;grid-template-columns:1fr;gap:0 16px;
}
@media (min-width:600px){
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr 1fr;}
  .form-row-wide,#billing_address_1_field,#billing_address_2_field,
  #shipping_address_1_field,#shipping_address_2_field{grid-column:1 / -1;}
}
.form-row{margin-bottom:18px;}
.form-row label{
  display:block;font-size:var(--ms-fs-micro);font-weight:500;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-muted);margin-bottom:8px;
}
.form-row .required{color:var(--ms-sale);text-decoration:none;}
.form-row .optional{color:var(--ms-muted);text-transform:none;letter-spacing:0;}
.woocommerce-input-wrapper{display:block;width:100%;}
.select2-container .select2-selection--single{
  height:48px;border:1px solid var(--ms-border);border-radius:0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:46px;padding-left:14px;color:var(--ms-ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:46px;}
.woocommerce-form__label-for-checkbox{
  display:flex;align-items:center;gap:10px;
  text-transform:none;letter-spacing:0;font-size:var(--ms-fs-sm);color:var(--ms-ink);
}
.woocommerce-form__label-for-checkbox input{width:auto;min-height:0;}

#order_review .shop_table{width:100%;font-size:var(--ms-fs-sm);}
#order_review .shop_table th{
  text-align:left;font-size:var(--ms-fs-micro);font-weight:600;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-muted);padding:0 0 12px;border-bottom:var(--ms-hairline);
}
#order_review .shop_table td{padding:12px 0;border-bottom:var(--ms-hairline);}
#order_review .shop_table td.product-total{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
#order_review .order-total th,#order_review .order-total td{border-bottom:0;padding-top:16px;}
#order_review .order-total td{font-family:var(--ms-font-body);font-size:1.25rem;font-weight:600;text-align:right;}
#order_review .product-name .variation{font-size:var(--ms-fs-xs);color:var(--ms-muted);}

#payment{margin-top:20px;}
#payment ul.payment_methods{
  list-style:none;padding:0;margin:0 0 18px;
  border-top:var(--ms-hairline);
}
#payment ul.payment_methods li{
  padding:16px 0;border-bottom:var(--ms-hairline);
  font-size:var(--ms-fs-sm);
}
#payment ul.payment_methods label{
  display:inline-flex;align-items:center;gap:10px;
  text-transform:none;letter-spacing:0;color:var(--ms-ink);
  font-size:var(--ms-fs-sm);margin:0;cursor:pointer;
}
#payment .payment_box{
  background:var(--ms-champagne);padding:14px 16px;margin-top:12px;
  font-size:var(--ms-fs-xs);color:var(--ms-muted);
}
#payment .payment_box p{margin:0;max-width:none;}
#payment .woocommerce-notice--info{margin:0;}
#place_order{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:54px;padding:0 24px;margin-top:8px;
  font-family:var(--ms-font-body);
  font-size:.75rem;font-weight:500;
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  background:var(--ms-ink);color:var(--ms-cream);
  border:0;border-radius:var(--ms-radius-btn);cursor:pointer;
  transition:background var(--ms-t) var(--ms-ease);
}
#place_order:hover{background:var(--ms-ink-hover);}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:16px;font-size:var(--ms-fs-xs);}

.ms-checkout__assure{margin-top:24px;border-top:var(--ms-hairline);padding-top:20px;}
.ms-checkout__help{margin-top:18px;font-size:var(--ms-fs-xs);}
.ms-checkout__help a{display:inline-flex;align-items:center;gap:8px;color:var(--ms-muted);}
.ms-checkout__help a:hover{color:var(--ms-gold-ink);}

/* The checkout's own returning-customer and coupon panels. Scoped to the
   checkout so it cannot reach the account screen's sign in card, which is a
   composed page of its own further down this file. */
.woocommerce-checkout .woocommerce-form-login,.woocommerce-checkout .woocommerce-form-coupon{
  background:var(--ms-champagne);padding:20px 22px;margin-bottom:24px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle,.woocommerce-checkout .woocommerce-form-login-toggle{margin-bottom:16px;}

/* --------------------------------------------------------------------------
   Order received
   -------------------------------------------------------------------------- */
.woocommerce-order{padding-block:clamp(28px,4vw,52px) clamp(48px,6vw,88px);}
.woocommerce-thankyou-order-received{
  font-family:var(--ms-font-heading);
  font-size:var(--ms-fs-h2);line-height:1.15;margin-bottom:24px;
}
.woocommerce-order-overview{
  list-style:none;padding:0;margin:0 0 36px;
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:var(--ms-hairline);border-bottom:var(--ms-hairline);
}
.woocommerce-order-overview li{
  padding:18px 20px 18px 0;
  font-size:var(--ms-fs-micro);letter-spacing:var(--ms-track-micro);
  text-transform:uppercase;color:var(--ms-muted);
}
.woocommerce-order-overview li strong{
  display:block;margin-top:8px;
  font-family:var(--ms-font-body);font-size:1.0625rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ms-ink);
}

/* --------------------------------------------------------------------------
   My Account

   A composed dashboard rather than the WooCommerce default. Two columns on
   desktop: a 250px control panel and the content panel beside it. Below 1000px
   the wrapper collapses to display:contents so the profile card, the content and
   the support card become siblings in the page grid and can be ordered
   independently, which is what puts support after the dashboard on a phone.
   -------------------------------------------------------------------------- */
.woocommerce-account{
  /* Scoped tokens. The frame is the theme's own container, not a page specific
     shell: the account sits on the same grid as the header and footer, so the
     sidebar edge lines up with the logo and the content edge with the cart icon.
     The gutter below is the same token the header uses, so the two never drift. */
  --ms-acct-max:var(--ms-container);
  /* 256 rather than 250: it is the width at which an ordinary gmail address
     clears the avatar on one line, and eight pixels is invisible next to the
     panel beside it. */
  --ms-acct-side:256px;
  --ms-acct-gap:28px;
  --ms-acct-pad:clamp(20px,2.4vw,32px);
  --ms-acct-line:1px solid var(--ms-border);

  /* Cards carry a small radius here and nowhere else on the storefront. The
     account is UI rather than editorial, and a hard 0px corner on a nested tile
     reads as unfinished next to the rounded avatar. */
  --ms-acct-r:12px;
  --ms-acct-r-sm:9px;

  /* Warm white, one step off the surface, so a tile nested inside a white panel
     separates without needing a shadow. */
  --ms-acct-tint:#FBF9F4;
  --ms-acct-bad:rgba(190,40,23,.09);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ms-acct-hero{
  background:linear-gradient(180deg,var(--ms-champagne) 0%,var(--ms-cream) 100%);
  border-bottom:var(--ms-hairline);
}
.ms-acct-hero__inner{
  position:relative;
  max-width:var(--ms-acct-max);margin-inline:auto;
  padding:0 var(--ms-gutter) clamp(26px,3vw,38px);
}

/* The logo, at watermark strength, carries the right of the band so the
   composition is not a headline against dead space. It is the site's own mark,
   not decoration invented for this page, and it never appears on a phone where
   the band is short enough not to need it. */
.ms-acct-hero__inner::after{
  content:'';position:absolute;z-index:0;
  right:var(--ms-gutter);top:52%;translate:0 -50%;
  width:150px;height:150px;
  background:url('../images/logo-black.svg') center/contain no-repeat;
  opacity:.07;pointer-events:none;
}

/* ms_breadcrumb() prints its own full width container. Inside the hero it has
   to align to the hero grid instead, or it sits 40px left of the title.

   The two paddings are deliberately unequal so the two gaps are not. Playfair at
   the h1 size has an ascent that overflows its line box by about 8px, so a
   symmetric 16/16 renders as 18px above the crumb and only 10px below it. The
   extra 8px on the bottom cancels that overhang and the crumb sits centred. */
.ms-acct-hero .ms-crumb{padding-block:18px 26px;}
.ms-acct-hero .ms-crumb .ms-container{max-width:none;width:auto;padding-inline:0;}

.ms-acct-hero__title{position:relative;z-index:1;margin:0;}
.ms-acct-hero .ms-rule{margin:16px 0 16px;}
.ms-acct-hero__sub{
  position:relative;z-index:1;
  margin:0;max-width:46ch;
  font-size:var(--ms-fs-sm);line-height:1.65;color:var(--ms-muted);
  /* Keeps the last word off a line of its own. Ignored where unsupported,
     which only costs the orphan back. */
  text-wrap:pretty;
}

@media (max-width:860px){
  .ms-acct-hero__inner::after{display:none;}
  .ms-acct-hero__inner{padding-bottom:22px;}
  /* Same compensation, smaller title, so a smaller overhang to cancel. */
  .ms-acct-hero .ms-crumb{padding-block:14px 18px;}
  .ms-acct-hero .ms-rule{margin:12px 0 12px;}
  .ms-acct-hero__sub{font-size:var(--ms-fs-xs);}
}

/* --------------------------------------------------------------------------
   Frame
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce{
  max-width:var(--ms-acct-max);margin-inline:auto;
  padding:clamp(24px,3vw,36px) var(--ms-gutter) clamp(52px,6vw,84px);
  display:grid;grid-template-columns:1fr;gap:var(--ms-acct-gap);
  align-items:start;
}

/* WooCommerce's own woocommerce-layout.css still targets these templates, and
   two of its rules are incompatible with a grid account page. Both are undone
   here rather than by dequeuing that sheet, which the cart still relies on.

   1. .woocommerce carries a clearfix ::before/::after. A generated box inside a
      grid container becomes a grid item, so those two silently took the first
      and last cells: the sidebar was pushed into column two and the content
      wrapped onto a second row.
   2. The navigation and the content are floated at 30% and 68%. A grid item
      ignores float but still honours width, so each panel sized itself against
      the wrong track: the content resolved to 68% of the 256px sidebar column,
      which is where the 174px wide dashboard came from.

   Both overrides carry one extra class so they win on specificity rather than
   on stylesheet order, which a plugin or a caching layer could reshuffle. */
/* WooCommerce puts that clearfix on every layout block it owns, so the rule has
   to name each one the theme converts to a grid, not just the page wrapper. Miss
   one and its children silently shift a cell. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-MyAccount-content .woocommerce-Addresses::after,
.woocommerce-MyAccount-content .col2-set::before,
.woocommerce-MyAccount-content .col2-set::after,
.woocommerce-MyAccount-content .u-columns::before,
.woocommerce-MyAccount-content .u-columns::after,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm::before,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm::after,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper::before,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper::after{content:none;}
.woocommerce-account .woocommerce-MyAccount-navigation.ms-account__panel,
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content{
  float:none;width:auto;
}
@media (min-width:1000px){
  .woocommerce-account .woocommerce{grid-template-columns:var(--ms-acct-side) minmax(0,1fr);}
}
@media (max-width:999px){
  .woocommerce-account{--ms-acct-gap:18px;}
}

.ms-account__side{display:grid;gap:16px;align-content:start;}

/* Below the two column switch the sidebar stops being a column. Its two cards
   join the page grid directly so support can follow the dashboard instead of
   pushing it below the fold. */
@media (max-width:999px){
  .ms-account__side{display:contents;}
  .ms-account__panel{order:1;}
  .woocommerce-account .woocommerce-MyAccount-content{order:2;}
  .ms-account__help{order:3;}
}

/* --------------------------------------------------------------------------
   Sidebar: profile
   -------------------------------------------------------------------------- */
.ms-account__panel{
  background:var(--ms-surface);
  border:var(--ms-acct-line);
  border-radius:var(--ms-acct-r);
  padding:18px;
}
.ms-account__profile{
  display:flex;align-items:flex-start;gap:12px;
  padding-bottom:16px;margin-bottom:12px;
  border-bottom:var(--ms-acct-line);
}
.ms-account__avatar{
  flex:0 0 auto;display:grid;place-items:center;
  width:48px;height:48px;border-radius:50%;overflow:hidden;
  background:linear-gradient(145deg,var(--ms-gold-light),var(--ms-earth));
  color:var(--ms-white);
  font-family:var(--ms-font-heading);font-size:1.25rem;line-height:1;
  user-select:none;
}
.ms-account__avatar--img{object-fit:cover;background:var(--ms-champagne);}
.ms-account__identity{min-width:0;}
.ms-account__name{
  margin:0;font-size:var(--ms-fs-sm);font-weight:500;line-height:1.35;
  color:var(--ms-ink);overflow-wrap:anywhere;
}
/* The column leaves about 164px for the address once the avatar is placed, so
   the email steps down to 12px to fit. An address longer than the column is
   truncated rather than wrapped: the identity block has to stay one predictable
   height, and the full address is on the element's title. */
.ms-account__email{
  margin:2px 0 0;font-size:.75rem;line-height:1.45;
  color:var(--ms-muted);max-width:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/*
 * Logout is the last row of the menu, not a line under the email address — see
 * ms_account_nav_items(). It renders as an ordinary menu item and then steps
 * away from the list: a rule and a gap above it so the one row that ends the
 * session is not flush against Help & Support, and a muted tone that warms to
 * the ink on hover rather than lighting up gold like a destination would.
 */
.ms-account__item--logout{
  margin-top:10px;padding-top:10px;
  border-top:var(--ms-hairline);
}
.ms-account__menu .ms-account__item--logout a{color:var(--ms-muted);}
.ms-account__menu .ms-account__item--logout a:hover{color:var(--ms-ink);}
.ms-account__item--logout .ms-account__go{display:none;}

/* --------------------------------------------------------------------------
   Sidebar: menu
   -------------------------------------------------------------------------- */
.ms-account__menu{list-style:none;padding:0;margin:0;}
.ms-account__item + .ms-account__item{margin-top:2px;}
.ms-account__menu a{
  display:flex;align-items:center;gap:11px;
  min-height:44px;padding:8px 10px;
  border-radius:var(--ms-acct-r-sm);
  font-size:var(--ms-fs-sm);line-height:1.3;color:var(--ms-muted);
  transition:background var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease);
}
.ms-account__menu a:hover{background:var(--ms-acct-tint);color:var(--ms-ink);}
.ms-account__ico{
  display:flex;flex:0 0 auto;color:var(--ms-muted);
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-account__text{flex:1 1 auto;min-width:0;}
.ms-account__go{
  flex:0 0 auto;color:var(--ms-gold);
  opacity:0;transform:translateX(-4px);
  transition:opacity var(--ms-t) var(--ms-ease),transform var(--ms-t) var(--ms-ease);
}
.ms-account__menu a:hover .ms-account__ico{color:var(--ms-gold-ink);}
.ms-account__menu a:hover .ms-account__go{opacity:1;transform:translateX(0);}

.ms-account__item.is-active > a{
  background:var(--ms-champagne);color:var(--ms-ink);font-weight:500;
}
.ms-account__item.is-active .ms-account__ico{color:var(--ms-gold-ink);}
.ms-account__item.is-active .ms-account__go{opacity:0;}

/* No hover on touch, so the affordance has to be permanent there. */
@media (hover:none){
  .ms-account__go{opacity:1;transform:none;}
  .ms-account__item.is-active .ms-account__go{opacity:0;}
}

/* --------------------------------------------------------------------------
   Sidebar: support
   -------------------------------------------------------------------------- */
.ms-account__help{
  background:var(--ms-champagne);
  border:1px solid var(--ms-gold-line);
  border-radius:var(--ms-acct-r);
  padding:18px;
}
.ms-account__helpKicker{
  margin:0 0 9px;font-size:var(--ms-fs-micro);font-weight:500;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-muted);max-width:none;
}
.ms-account__helpTitle{
  margin:0 0 6px;font-size:var(--ms-fs-sm);font-weight:500;color:var(--ms-ink);max-width:none;
}
.ms-account__helpCopy{
  margin:0 0 15px;font-size:var(--ms-fs-xs);line-height:1.55;
  color:var(--ms-muted);max-width:none;
}

/* --------------------------------------------------------------------------
   Content panel. Shared by every tab, not only the dashboard, so Orders and
   Addresses sit on the same surface instead of falling back to bare page.
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content{
  min-width:0;
  background:var(--ms-surface);
  border:var(--ms-acct-line);
  border-radius:var(--ms-acct-r);
  padding:var(--ms-acct-pad);
}
.woocommerce-MyAccount-content > :first-child,
.woocommerce-MyAccount-content > :first-child > :first-child{margin-top:0;}

/* --------------------------------------------------------------------------
   Dashboard head
   -------------------------------------------------------------------------- */
.ms-dash__head{margin-bottom:22px;}
.ms-dash__welcome{
  margin:0 0 6px;
  font-family:var(--ms-font-heading);font-weight:500;
  font-size:clamp(1.25rem,1.08rem + .66vw,1.625rem);
  line-height:1.25;letter-spacing:-.005em;color:var(--ms-ink);
}
.ms-dash__sub{margin:0;font-size:var(--ms-fs-sm);color:var(--ms-muted);max-width:none;}

/* --------------------------------------------------------------------------
   Summary cards
   -------------------------------------------------------------------------- */
.ms-dash__grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:28px;
}
.ms-dash__card{
  display:flex;align-items:flex-start;gap:13px;
  padding:16px;
  background:var(--ms-acct-tint);
  border:var(--ms-acct-line);
  border-radius:var(--ms-acct-r-sm);
  transition:background var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease),transform var(--ms-t-fast) var(--ms-ease);
}
.ms-dash__card:hover{
  background:var(--ms-surface);border-color:var(--ms-gold-line);transform:translateY(-1px);
}
.ms-dash__cardIcon{
  flex:0 0 auto;display:grid;place-items:center;
  width:38px;height:38px;border-radius:9px;
  background:var(--ms-gold-soft);color:var(--ms-gold-ink);
  transition:background var(--ms-t) var(--ms-ease);
}
.ms-dash__card:hover .ms-dash__cardIcon{background:var(--ms-champagne);}
.ms-dash__cardBody{display:flex;flex-direction:column;min-width:0;}
.ms-dash__value{
  font-family:var(--ms-font-body);font-size:1.375rem;font-weight:600;
  line-height:1.1;color:var(--ms-ink);
}
/* A word never carries the weight of a figure, so it is set a step down. */
.ms-dash__value--word{font-size:1.125rem;line-height:1.25;}
.ms-dash__label{margin-top:2px;font-size:var(--ms-fs-xs);color:var(--ms-ink);line-height:1.35;}
.ms-dash__cue{margin-top:6px;font-size:var(--ms-fs-micro);color:var(--ms-muted);line-height:1.4;}

/* On a phone three tiles side by side would each be 100px wide. One grouped
   list reads instead, with the figure and its label on a single line. */
@media (max-width:640px){
  .ms-dash__grid{
    grid-template-columns:1fr;gap:0;margin-bottom:24px;
    background:var(--ms-acct-tint);
    border:var(--ms-acct-line);border-radius:var(--ms-acct-r-sm);
    overflow:hidden;
  }
  .ms-dash__card{
    align-items:center;background:transparent;
    border:0;border-radius:0;
  }
  .ms-dash__card + .ms-dash__card{border-top:var(--ms-acct-line);}
  .ms-dash__card:hover{transform:none;}
  .ms-dash__cardBody{
    display:grid;grid-template-columns:auto 1fr;align-items:baseline;
    column-gap:7px;row-gap:2px;
  }
  .ms-dash__value{font-size:1.125rem;}
  .ms-dash__value--word{font-size:1rem;}
  .ms-dash__label{margin-top:0;font-size:var(--ms-fs-sm);}
  .ms-dash__cue{grid-column:1 / -1;margin-top:0;}
}

/* --------------------------------------------------------------------------
   Recent orders
   -------------------------------------------------------------------------- */
.ms-dash__block{margin-bottom:26px;}
.ms-dash__blockHead{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:14px;
}
.ms-dash__section{
  margin:0;font-family:var(--ms-font-heading);font-weight:500;
  font-size:1.25rem;line-height:1.2;color:var(--ms-ink);
}
.ms-dash__more{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-size:var(--ms-fs-xs);color:var(--ms-gold-ink);white-space:nowrap;
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-dash__more:hover{color:var(--ms-ink);}

.ms-orders{list-style:none;padding:0;margin:0;border-top:var(--ms-acct-line);}
.ms-orders__row{
  display:grid;align-items:center;gap:6px 18px;
  grid-template-columns:repeat(5,minmax(0,1fr)) auto;
  padding:15px 0;border-bottom:var(--ms-acct-line);
}
.ms-orders__cell{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ms-orders__k{
  font-size:var(--ms-fs-micro);font-weight:500;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-muted);
}
.ms-orders__v{font-size:var(--ms-fs-sm);line-height:1.35;color:var(--ms-ink);}
.ms-orders__v--num{font-variant-numeric:tabular-nums;white-space:nowrap;}
.ms-orders__v .woocommerce-Price-amount{font-variant-numeric:tabular-nums;}

.ms-orders__pill{
  display:inline-flex;align-items:center;align-self:flex-start;
  padding:3px 10px;border:1px solid transparent;border-radius:999px;
  font-size:var(--ms-fs-micro);font-weight:500;letter-spacing:.04em;
  white-space:nowrap;
}
.ms-orders__pill[data-tone='good']{background:var(--ms-gold-soft);color:var(--ms-gold-ink);}
.ms-orders__pill[data-tone='live']{background:var(--ms-sand);color:var(--ms-ink);}
.ms-orders__pill[data-tone='wait']{border-color:var(--ms-border);color:var(--ms-muted);}
.ms-orders__pill[data-tone='off']{background:var(--ms-acct-tint);color:var(--ms-muted);}
.ms-orders__pill[data-tone='bad']{background:var(--ms-acct-bad);color:var(--ms-sale);}

.ms-orders__view{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 16px;white-space:nowrap;
  font-size:var(--ms-fs-micro);font-weight:500;
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  color:var(--ms-ink);
  border:1px solid var(--ms-border);border-radius:var(--ms-radius-btn);
  transition:background var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease);
}
.ms-orders__view:hover{background:var(--ms-acct-tint);border-color:var(--ms-ink);}

@media (max-width:860px){
  .ms-orders__row{grid-template-columns:1fr 1fr;gap:13px 16px;padding:17px 0;}
  .ms-orders__cell--id{grid-column:1 / -1;}
  .ms-orders__view{grid-column:1 / -1;width:100%;min-height:44px;}
}

/* Empty state */
.ms-dash__empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(34px,5vw,54px) 24px;
  background:var(--ms-acct-tint);
  border:var(--ms-acct-line);border-radius:var(--ms-acct-r-sm);
}
.ms-dash__emptyIcon{
  display:grid;place-items:center;
  width:60px;height:60px;border-radius:50%;margin-bottom:16px;
  background:var(--ms-gold-soft);color:var(--ms-gold-ink);
}
.ms-dash__emptyTitle{
  margin:0 0 6px;font-family:var(--ms-font-heading);font-weight:500;
  font-size:1.25rem;line-height:1.2;color:var(--ms-ink);max-width:none;
}
.ms-dash__emptyCopy{
  margin:0 0 20px;font-size:var(--ms-fs-sm);color:var(--ms-muted);
  max-width:42ch;line-height:1.6;
}

/* --------------------------------------------------------------------------
   Service points. Wording restates published policy: prepaid only, a 24 hour
   claim window rather than free returns, and the real support hours.
   -------------------------------------------------------------------------- */
.ms-dash__assure{
  list-style:none;margin:0;padding:18px;
  display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--ms-acct-tint);
  border:var(--ms-acct-line);border-radius:var(--ms-acct-r-sm);
}
.ms-dash__assureItem,
.ms-dash__assureItem > a{display:flex;align-items:flex-start;gap:11px;min-width:0;}
.ms-dash__assureItem > a{flex:1 1 auto;}
.ms-dash__assureIcon{
  flex:0 0 auto;display:grid;place-items:center;
  width:34px;height:34px;border-radius:8px;
  background:var(--ms-champagne);color:var(--ms-gold-ink);
  transition:background var(--ms-t) var(--ms-ease);
}
.ms-dash__assureText{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ms-dash__assureTitle{font-size:var(--ms-fs-xs);font-weight:500;line-height:1.35;color:var(--ms-ink);}
.ms-dash__assureCopy{font-size:var(--ms-fs-micro);line-height:1.5;color:var(--ms-muted);}
.ms-dash__assureItem > a:hover .ms-dash__assureIcon{background:var(--ms-gold-soft);}
.ms-dash__assureItem > a:hover .ms-dash__assureTitle{color:var(--ms-gold-ink);}

/* Four across needs roughly a 180px measure per point. The content panel only
   clears that once the viewport passes ~1150px, because between 1000 and 1150
   the sidebar has already taken its 256px out of the row. Below that a clean
   two by two beats four cramped columns. */
@media (max-width:1149px){
  .ms-dash__assure{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;}
}
/* Two columns at phone width would give each point a 140px measure and run the
   supporting line to five rows. One column keeps it readable. */
@media (max-width:520px){
  .ms-dash__assure{grid-template-columns:1fr;gap:15px;}
}

/* --------------------------------------------------------------------------
   WooCommerce's own account screens

   Orders, Addresses and Account details are rendered by the plugin, so they
   arrive with its notice art, float based columns and default buttons. Every
   override below is scoped to the account panel and carries an element name,
   because WooCommerce's button and column selectors are (0,2,1): a rule written
   with classes alone loses to them however late it loads.
   -------------------------------------------------------------------------- */

/* Buttons. Covers .button wherever WooCommerce prints it, including inside a
   notice, but deliberately not .show-password-input, which is the eye toggle
   sitting inside the password field and must stay unstyled. */
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content input.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 26px;
  font-family:var(--ms-font-body);
  font-size:.75rem;font-weight:500;line-height:1;
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  background:var(--ms-ink);color:var(--ms-cream);
  border:0;border-radius:var(--ms-radius-btn);cursor:pointer;
  transition:background var(--ms-t) var(--ms-ease);
}
.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content input.button:hover{
  background:var(--ms-ink-hover);color:var(--ms-cream);
}
/* A notice already sits on a tinted ground, so its action reads as secondary. */
.woocommerce-MyAccount-content .woocommerce-info a.button,
.woocommerce-MyAccount-content .woocommerce-message a.button{
  min-height:40px;padding:0 20px;
  background:transparent;color:var(--ms-ink);
  border:1px solid var(--ms-ink);
}
.woocommerce-MyAccount-content .woocommerce-info a.button:hover,
.woocommerce-MyAccount-content .woocommerce-message a.button:hover{
  background:var(--ms-ink);color:var(--ms-cream);
}

/* --------------------------------------------------------------------------
   Account forms: edit account and edit address
   -------------------------------------------------------------------------- */

/* Two things fight this layout. WooCommerce floats the paired rows at 47%, and
   base.css caps every paragraph at 68ch, which applies because WooCommerce
   renders each field row as a <p> — that is why a full width row stopped at
   683px. Both are undone and the form is laid out on a real grid, capped at a
   readable measure rather than running the full 1236px panel: a text input a
   metre wide is worse UX, not better. */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.woocommerce-MyAccount-content form.edit-account,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 20px;max-width:840px;
}
.woocommerce-MyAccount-content form.woocommerce-address-form,
.woocommerce-MyAccount-content .woocommerce-address-fields{max-width:840px;}

.woocommerce-MyAccount-content p.form-row,
.woocommerce-MyAccount-content .form-row{
  float:none;width:auto;max-width:none;
  grid-column:1 / -1;margin:0 0 18px;padding:0;
}
.woocommerce-MyAccount-content p.form-row-first{grid-column:1;}
.woocommerce-MyAccount-content p.form-row-last{grid-column:2;}

/* Password change arrives as a fieldset with a legend. A legend is painted onto
   its fieldset's border rather than below it, so leaving the rule on the
   fieldset draws the hairline straight through the words. The fieldset loses all
   borders and the divider moves onto the legend instead, which also returns the
   legend to normal block flow. */
.woocommerce-MyAccount-content fieldset{
  grid-column:1 / -1;
  margin:4px 0 22px;padding:0;border:0;
}
.woocommerce-MyAccount-content fieldset legend{
  display:block;width:100%;
  padding:22px 0 0;margin:0 0 16px;
  border-top:var(--ms-acct-line);
  font-family:var(--ms-font-heading);font-size:1.125rem;font-weight:500;
  line-height:1.2;color:var(--ms-ink);
}
/* A password never needs the full measure. */
.woocommerce-MyAccount-content fieldset .form-row{max-width:520px;}

.woocommerce-MyAccount-content .form-row span.description,
.woocommerce-MyAccount-content .form-row em{
  display:block;margin-top:7px;
  font-size:var(--ms-fs-xs);font-style:normal;line-height:1.5;
  color:var(--ms-muted);
}
.woocommerce-MyAccount-content .password-input{display:block;position:relative;}
.woocommerce-MyAccount-content .show-password-input{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;color:var(--ms-muted);
}

@media (max-width:640px){
  .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
  .woocommerce-MyAccount-content form.edit-account,
  .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper{
    grid-template-columns:1fr;
  }
  .woocommerce-MyAccount-content p.form-row-first,
  .woocommerce-MyAccount-content p.form-row-last{grid-column:1;}
}

/* --------------------------------------------------------------------------
   Orders and downloads tables
   -------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table{
  width:100%;font-size:var(--ms-fs-sm);border-collapse:collapse;
}
.woocommerce-MyAccount-content table.shop_table th{
  text-align:left;font-size:var(--ms-fs-micro);font-weight:600;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-muted);padding:0 12px 12px 0;border-bottom:var(--ms-acct-line);
}
.woocommerce-MyAccount-content table.shop_table td{
  padding:16px 12px 16px 0;border-bottom:var(--ms-acct-line);
}
.woocommerce-MyAccount-content .woocommerce-button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 16px;
  font-size:.6875rem;font-weight:500;
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  border:1px solid var(--ms-border);border-radius:var(--ms-radius-btn);
  transition:background var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease);
}
.woocommerce-MyAccount-content .woocommerce-button:hover{border-color:var(--ms-ink);background:var(--ms-acct-tint);}

/* The orders and downloads tables become labelled rows rather than a sideways
   scroll. WooCommerce already writes the header text into data-title. */
@media (max-width:700px){
  .woocommerce-MyAccount-content table.shop_table thead{display:none;}
  .woocommerce-MyAccount-content table.shop_table tr{
    display:block;padding:14px 0;border-bottom:var(--ms-acct-line);
  }
  .woocommerce-MyAccount-content table.shop_table td{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:5px 0;border:0;text-align:right;
  }
  .woocommerce-MyAccount-content table.shop_table td::before{
    content:attr(data-title);flex:0 0 auto;text-align:left;
    font-size:var(--ms-fs-micro);font-weight:500;
    letter-spacing:var(--ms-track-micro);text-transform:uppercase;
    color:var(--ms-muted);
  }
  .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-actions{
    display:block;text-align:left;padding-top:12px;
  }
  .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-actions::before{display:none;}
  .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-actions .woocommerce-button{
    width:100%;min-height:44px;
  }
}

/* --------------------------------------------------------------------------
   Saved addresses

   WooCommerce marks the two cards as .col-1 / .col-2 inside a .col2-set and
   floats them at 48%. On a grid the float is ignored but the 48% is not, so each
   card resolved to 48% of its own track and collapsed to about 134px. Both are
   cleared and the pair sits on an explicit two column grid, capped so a saved
   address is not stretched across the full panel.
   -------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .woocommerce-Addresses{
  display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:840px;margin-top:20px;
}
/* The float and the 48% come from `.woocommerce .col2-set .col-1`, which is
   (0,3,0). Clearing them needs four classes, not two. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .col-2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address{
  float:none;width:auto;
}
.woocommerce-MyAccount-content .woocommerce-Address{
  padding:20px;background:var(--ms-acct-tint);
  border:var(--ms-acct-line);border-radius:var(--ms-acct-r-sm);
}
.woocommerce-Address address{
  font-style:normal;line-height:1.7;font-size:var(--ms-fs-sm);color:var(--ms-muted);
  margin:0;
}
.woocommerce-Address-title{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px 14px;flex-wrap:wrap;margin-bottom:12px;
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3{font-size:1.125rem;margin:0;min-width:0;}
.woocommerce-Address-title .edit{
  font-size:var(--ms-fs-xs);color:var(--ms-gold-ink);white-space:nowrap;
  transition:color var(--ms-t) var(--ms-ease);
}
.woocommerce-Address-title .edit:hover{color:var(--ms-ink);}

@media (max-width:640px){
  .woocommerce-MyAccount-content .woocommerce-Addresses{grid-template-columns:1fr;}
}

/* --------------------------------------------------------------------------
   Orders page. Shares the dashboard's row treatment, so the two screens read as
   one product rather than two.
   -------------------------------------------------------------------------- */
.ms-acctpage__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:16px;
}
.ms-acctpage__title{
  margin:0;font-family:var(--ms-font-heading);font-weight:500;
  font-size:1.375rem;line-height:1.2;color:var(--ms-ink);
}
.ms-acctpage__count{font-size:var(--ms-fs-xs);color:var(--ms-muted);}
.ms-orders__pager{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-top:22px;
}
.ms-orders__pagerNow{font-size:var(--ms-fs-xs);color:var(--ms-muted);}

/* --------------------------------------------------------------------------
   Signed out — sign in and create account

   One card on screen at a time. Both forms are in the markup so the toggle is
   instant and so a rejected registration comes back with its values intact, but
   only one of them is ever displayed: the other carries [hidden].

   The frame is narrower than the dashboard behind it. A sign in form stretched
   to 1600px is a worse form, so the shell is capped at the width the design
   gives the two cards together and the card itself at the width of one.
   -------------------------------------------------------------------------- */
.woocommerce-account:not(.logged-in){
  --ms-auth-max:1070px;
  --ms-auth-card:520px;
  --ms-auth-pad:clamp(20px,3.2vw,28px);
  --ms-auth-r:12px;
  --ms-auth-r-sm:6px;
  /* The control is 48 tall including its border, which is the height every
     other input on the storefront resolves to. */
  --ms-auth-h:46px;
  --ms-auth-btn:52px;
  --ms-auth-lead:46px;
  --ms-auth-shadow:0 2px 16px rgba(13,13,13,.035);
}

/* No sidebar to sit beside, and the hero above already carries the opening
   space, so the frame closes up at the top. */
.woocommerce-account:not(.logged-in) .woocommerce{
  grid-template-columns:1fr;
  padding-top:clamp(16px,2.1vw,24px);
}

/* The notice bar prints inside this wrapper. Capped to the card rather than
   to the shell, so an error sits directly over the form it belongs to
   instead of running twice its width. The grid already supplies the page
   gutter; a second one here would inset it twice. */
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper{
  max-width:var(--ms-auth-card);margin-inline:auto;padding-inline:0;
}

.woocommerce-account .woocommerce > .ms-auth{
  grid-column:1 / -1;
  width:100%;max-width:var(--ms-auth-max);margin-inline:auto;
}

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */
.ms-auth__card{
  width:100%;max-width:var(--ms-auth-card);margin-inline:auto;
  padding:clamp(26px,3.2vw,34px) var(--ms-auth-pad) clamp(22px,2.6vw,26px);
  background:var(--ms-surface);
  border:1px solid var(--ms-border);
  border-radius:var(--ms-auth-r);
  box-shadow:var(--ms-auth-shadow);
}
.ms-auth__card[hidden]{display:none;}

/* Lost password and reset password. One card, no reassurance strip, so the
   shell closes to the card and the screen stays a single object. */
.woocommerce-account .woocommerce > .ms-auth--single{max-width:var(--ms-auth-card);}

/* WooCommerce's own sentence above the field, kept because it explains what the
   email will contain. Sized between the subtitle and the labels so it reads as
   instruction rather than as another heading. */
.ms-auth__lede{
  margin:0 0 20px;max-width:none;
  font-size:var(--ms-fs-xs);line-height:1.65;color:var(--ms-muted);
}

/* Only the card arriving animates. Fading the outgoing one out first would
   double the wait before the customer can start typing. */
.ms-auth__card.is-enter{animation:ms-auth-in 300ms var(--ms-ease) both;}
@keyframes ms-auth-in{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

.ms-auth__badge{
  display:flex;align-items:center;justify-content:center;
  width:66px;height:66px;margin:0 auto 14px;
  border-radius:50%;
  background:var(--ms-gold-soft);
  color:var(--ms-gold-ink);
}

.ms-auth__title{
  margin:0;text-align:center;
  font-family:var(--ms-font-heading);font-weight:500;
  font-size:clamp(1.5rem,1.28rem + .6vw,1.6875rem);
  line-height:1.18;color:var(--ms-ink);
}
.ms-auth__sub{
  margin:8px 0 0;max-width:none;text-align:center;
  font-size:var(--ms-fs-xs);line-height:1.5;color:var(--ms-muted);
}

/* WooCommerce paints a bordered, padded, rounded box on form.login and
   form.register at (0,2,1). The card already is that box, so the form inside it
   has to be nothing at all — which takes (0,3,1) to say. */
.woocommerce-account .ms-auth form.ms-auth__form{
  margin:20px 0 0;padding:0;
  background:none;border:0;border-radius:0;
  text-align:left;
}

/* --------------------------------------------------------------------------
   Fields

   The icon sits in its own cell inside the border rather than floating over the
   text, so a long value can never run underneath it and the divider gives the
   control the same two part rhythm the design draws.
   -------------------------------------------------------------------------- */
.ms-auth__field{margin:0 0 18px;}

.ms-auth__label{
  display:block;margin:0 0 8px;
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-xs);font-weight:500;line-height:1.4;
  letter-spacing:0;text-transform:none;
  color:var(--ms-ink);
}
.ms-auth__req{margin-left:3px;color:var(--ms-sale);}

.ms-auth__control{
  display:flex;align-items:stretch;
  background:var(--ms-surface);
  border:1px solid var(--ms-border);
  border-radius:var(--ms-auth-r-sm);
  transition:border-color var(--ms-t) var(--ms-ease),box-shadow var(--ms-t) var(--ms-ease);
}
.ms-auth__control:hover{border-color:var(--ms-beige-deep);}
.ms-auth__control:focus-within{
  border-color:var(--ms-gold);
  box-shadow:0 0 0 3px var(--ms-gold-soft);
}

.ms-auth__icon{
  flex:0 0 var(--ms-auth-lead);
  display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--ms-border);
  color:var(--ms-muted);
  transition:color var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease);
}
.ms-auth__control:focus-within .ms-auth__icon{
  color:var(--ms-gold-ink);border-right-color:var(--ms-gold-line);
}

/* base.css styles inputs by attribute, which is (0,1,1). A single class would
   lose to it, so every input rule here carries the block as well. */
.ms-auth .ms-auth__input{
  flex:1 1 auto;min-width:0;
  height:var(--ms-auth-h);min-height:0;
  padding:0 14px;
  font-family:var(--ms-font-body);font-size:var(--ms-fs-sm);
  color:var(--ms-ink);background:transparent;
  border:0;border-radius:0;
}
.ms-auth .ms-auth__input:focus{outline:none;border:0;box-shadow:none;}
.ms-auth .ms-auth__field--reveal .ms-auth__input{padding-right:0;}

/* Chrome paints its own pale blue over an autofilled field and the card turns
   two-tone. An inset shadow the full height of the control is the only way to
   repaint it. */
.ms-auth .ms-auth__input:-webkit-autofill,
.ms-auth .ms-auth__input:-webkit-autofill:hover,
.ms-auth .ms-auth__input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ms-ink);
  -webkit-box-shadow:0 0 0 60px var(--ms-surface) inset;
  box-shadow:0 0 0 60px var(--ms-surface) inset;
}

.ms-auth__reveal{
  flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;
  background:none;border:0;cursor:pointer;
  color:var(--ms-muted);
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-auth__reveal:hover{color:var(--ms-ink);}
.ms-auth__revealOn,.ms-auth__revealOff{display:flex;align-items:center;}
.ms-auth__reveal .ms-auth__revealOff{display:none;}
.ms-auth__reveal[aria-pressed='true'] .ms-auth__revealOn{display:none;}
.ms-auth__reveal[aria-pressed='true'] .ms-auth__revealOff{display:flex;}

.ms-auth__hint{
  margin:7px 0 0;max-width:none;
  font-size:.75rem;line-height:1.5;color:var(--ms-muted);
}
.ms-auth__hint--block{margin:0 0 18px;}

/* --------------------------------------------------------------------------
   Remember me and the lost password link
   -------------------------------------------------------------------------- */
.ms-auth__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 16px;flex-wrap:wrap;
  margin:20px 0 26px;
}

/* .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme is
   (0,3,0) and turns this back into an inline-block, which loses the gap and the
   centring. The element name buys the extra step. */
.woocommerce-account .ms-auth label.ms-auth__check{
  display:inline-flex;align-items:center;gap:11px;
  margin:0;padding:0;cursor:pointer;
  font-family:var(--ms-font-body);font-size:var(--ms-fs-xs);font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ms-ink);
}
/* Kept in the layout and focusable, only invisible: the drawn box beside it is
   decorative and has no keyboard identity of its own. */
.ms-auth .ms-auth__check input{
  position:absolute;width:1px;height:1px;min-height:0;margin:0;padding:0;
  opacity:0;pointer-events:none;
}
.ms-auth__box{
  flex:0 0 20px;
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;
  background:var(--ms-surface);
  border:1px solid var(--ms-border);border-radius:4px;
  color:transparent;
  transition:background var(--ms-t-fast) var(--ms-ease),border-color var(--ms-t-fast) var(--ms-ease),color var(--ms-t-fast) var(--ms-ease);
}
.ms-auth__check:hover .ms-auth__box{border-color:var(--ms-gold);}
.ms-auth .ms-auth__check input:checked + .ms-auth__box{
  background:var(--ms-ink);border-color:var(--ms-ink);color:var(--ms-cream);
}
.ms-auth .ms-auth__check input:focus-visible + .ms-auth__box{
  outline:2px solid var(--ms-focus);outline-offset:2px;
}

.ms-auth__forgot{
  font-size:var(--ms-fs-xs);color:var(--ms-gold-ink);
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-auth__forgot:hover{color:var(--ms-ink);text-decoration:underline;text-underline-offset:3px;}

/* --------------------------------------------------------------------------
   Submit

   WooCommerce's own button rule is (0,2,1) and its hover (0,3,1), so the brand
   treatment is written one step above each. A class on the element is worth
   nothing on its own here; the selector has to earn it.
   -------------------------------------------------------------------------- */
.woocommerce-account .ms-auth button.ms-auth__submit{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:var(--ms-auth-btn);padding:0 22px;margin:0;
  /* woocommerce.css floats this button left at (0,3,0), which drops it out of
     the form's height and lands it on top of the line underneath. */
  float:none;
  font-family:var(--ms-font-body);font-size:.75rem;font-weight:500;line-height:1;
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  background:var(--ms-ink);color:var(--ms-cream);
  border:1px solid var(--ms-ink);border-radius:var(--ms-auth-r-sm);
  cursor:pointer;
  transition:background var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease),transform var(--ms-t-fast) var(--ms-ease);
}
.woocommerce-account .ms-auth button.ms-auth__submit:hover{
  background:var(--ms-ink-hover);border-color:var(--ms-ink-hover);color:var(--ms-cream);
}
.woocommerce-account .ms-auth button.ms-auth__submit:active{transform:translateY(1px);}

/* The design's second button is a filled antique gold with white lettering.
   #CBA361 cannot carry white type, so this uses the palette's earth gold, which
   is the tone the system already reserves for gold that has to be read. */
.woocommerce-account .ms-auth button.ms-auth__submit--gold{
  background:var(--ms-earth);border-color:var(--ms-earth);color:var(--ms-white);
}
.woocommerce-account .ms-auth button.ms-auth__submit--gold:hover{
  background:var(--ms-ink);border-color:var(--ms-ink);color:var(--ms-cream);
}

.woocommerce-account .ms-auth button.ms-auth__submit[disabled],
.woocommerce-account .ms-auth button.ms-auth__submit.is-busy{
  opacity:.55;pointer-events:none;
}
.ms-auth__submit.is-busy::after{
  content:'';flex:0 0 auto;
  width:15px;height:15px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:ms-auth-spin .7s linear infinite;
}
@keyframes ms-auth-spin{to{transform:rotate(360deg);}}


/* WooCommerce's registration privacy notice, moved under the button by
   ms_auth_move_privacy_text(). Sized as small print so it reads as a note on
   the action rather than as another paragraph of the form. */
.ms-auth .woocommerce-privacy-policy-text{margin:14px 0 0;}
.ms-auth .woocommerce-privacy-policy-text p{
  margin:0;max-width:none;
  font-size:.75rem;line-height:1.55;color:var(--ms-muted);
}
.ms-auth .woocommerce-privacy-policy-text a{
  color:var(--ms-gold-ink);text-decoration:underline;text-underline-offset:2px;
}
.ms-auth .woocommerce-privacy-policy-text a:hover{color:var(--ms-ink);}
.ms-auth__swap{
  margin:18px 0 0;max-width:none;text-align:center;
  font-size:var(--ms-fs-xs);color:var(--ms-muted);
}
.ms-auth__swap a{
  margin-left:5px;font-weight:500;color:var(--ms-gold-ink);
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-auth__swap a:hover{color:var(--ms-ink);text-decoration:underline;text-underline-offset:3px;}

/* --------------------------------------------------------------------------
   Reassurance strip

   One pixel of gap over a tinted ground draws the dividers, so they stay
   correct however the four points wrap.
   -------------------------------------------------------------------------- */
.ms-auth__trust{
  list-style:none;margin:clamp(26px,3.4vw,38px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--ms-border);
  border:1px solid var(--ms-border);border-radius:var(--ms-auth-r);
  overflow:hidden;
}
.ms-auth__trustItem{margin:0;background:var(--ms-surface);}
.ms-auth__trustItem > a,
.ms-auth__trustItem > div{
  display:flex;align-items:center;justify-content:center;gap:13px;
  height:100%;padding:20px 16px;
  color:inherit;
}
.ms-auth__trustIcon{
  flex:0 0 auto;display:flex;align-items:center;
  color:var(--ms-gold);
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-auth__trustText{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ms-auth__trustTitle{
  font-size:var(--ms-fs-sm);font-weight:500;line-height:1.3;color:var(--ms-ink);
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-auth__trustCopy{font-size:.75rem;line-height:1.45;color:var(--ms-muted);}
.ms-auth__trustItem > a:hover .ms-auth__trustTitle{color:var(--ms-gold-ink);}
.ms-auth__trustItem > a:hover .ms-auth__trustIcon{color:var(--ms-gold-ink);}

/* --------------------------------------------------------------------------
   Focus
   -------------------------------------------------------------------------- */
.ms-auth a:focus-visible,
.ms-auth button:focus-visible{
  outline:2px solid var(--ms-focus);outline-offset:3px;border-radius:3px;
}

/* --------------------------------------------------------------------------
   Signed out hero

   Centred on the card below it, and without the watermark: on a screen whose
   only job is to get the customer through a form, nothing else competes.
   -------------------------------------------------------------------------- */
.ms-acct-hero--auth{background:none;border-bottom:0;}
.ms-acct-hero--auth .ms-acct-hero__inner{
  padding-bottom:0;text-align:center;
}
.ms-acct-hero--auth .ms-acct-hero__inner::after{display:none;}
.ms-acct-hero--auth .ms-crumb{text-align:left;padding-block:16px 18px;}

/* The ornament shares the breadcrumb's line, which is where the design puts it
   and which is worth about 35px of height above the fold. Three columns rather
   than an absolute box: the outer two are equal, so the ornament is centred on
   the page and not on the space left over, and a breadcrumb that ever outgrew
   its column would push the mark aside instead of colliding with it. */
@media (min-width:760px){
  .ms-acct-hero--auth .ms-acct-hero__top{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  }
  .ms-acct-hero--auth .ms-acct-hero__top .ms-crumb{grid-column:1;}
  .ms-acct-hero--auth .ms-acct-hero__top .ms-auth__orn{grid-column:2;margin:0;}
}

/* base.css draws every icon as a block, so centring the mark is the box's job
   and not the inherited text-align's. */
.ms-auth__orn{
  display:flex;justify-content:center;
  margin:0 0 16px;line-height:0;color:var(--ms-gold);
}
.ms-acct-hero--auth .ms-acct-hero__title{margin:0;}
.ms-acct-hero--auth .ms-acct-hero__sub{
  margin:12px auto 0;max-width:54ch;
  font-size:var(--ms-fs-sm);
}

/* --------------------------------------------------------------------------
   Narrower screens

   Not the desktop card shrunk. The strip stacks before it would start
   truncating, the card gives its padding back to the fields rather than to the
   frame, and every control keeps a comfortable hit area.
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .ms-auth__trust{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ms-auth__trustItem > a,
  .ms-auth__trustItem > div{justify-content:flex-start;padding:18px;}
}

@media (max-width:860px){
  .ms-acct-hero--auth .ms-crumb{padding-block:12px 16px;}
  .ms-auth__orn{margin-bottom:14px;}
  .ms-acct-hero--auth .ms-acct-hero__sub{margin-top:11px;font-size:var(--ms-fs-xs);}
}

@media (max-width:620px){
  .woocommerce-account:not(.logged-in){
    --ms-auth-pad:18px;
    --ms-auth-lead:44px;
  }
  .ms-auth__card{
    max-width:none;
    padding-top:26px;padding-bottom:24px;
    border-radius:10px;
  }
  .ms-auth__badge{width:58px;height:58px;margin-bottom:14px;}
  .ms-auth__badge svg{width:25px;height:25px;}
  .woocommerce-account .ms-auth form.ms-auth__form{margin-top:20px;}
  .ms-auth__field{margin-bottom:20px;}

  /* Remember me and the lost password link stay on one line while they fit;
     flex-wrap drops the link to its own row on the narrowest phones rather
     than either of them wrapping inside itself. */
  .ms-auth__row{margin:18px 0 22px;gap:14px;}
  .ms-auth__forgot{display:inline-flex;align-items:center;min-height:24px;}

  .ms-auth__trust{grid-template-columns:1fr;}
  .ms-auth__trustItem > a,
  .ms-auth__trustItem > div{padding:16px 18px;min-height:48px;}
}

@media (prefers-reduced-motion:reduce){
  .ms-auth__card.is-enter{animation:none;}
  .ms-auth__submit.is-busy::after{animation-duration:2.4s;}
}

/* --------------------------------------------------------------------------
   Touch targets. The menu rows are already 44px, but the text actions and the
   compact help button are not, so they get a 44px floor on a phone. Their type
   size and position are unchanged: only the hit area grows, and the negative
   margin on the section action keeps its text optically flush with the panel.
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  /* Logout needs no floor of its own any more: it is a menu row now, and
     .ms-account__menu a is already comfortably past 44px. */
  .ms-account__help .ms-btn,
  .ms-dash__empty .ms-btn{min-height:46px;}
  .ms-dash__blockHead{align-items:center;}
  .ms-dash__more{min-height:44px;padding-inline:10px;margin-right:-10px;}
  .ms-dash__assureItem,
  .ms-dash__assureItem > a{min-height:44px;align-items:center;}
}

/* --------------------------------------------------------------------------
   Focus. Every account control is reachable and visibly so.
   -------------------------------------------------------------------------- */
.ms-account__menu a:focus-visible,
.ms-dash__card:focus-visible,
.ms-dash__more:focus-visible,
.ms-orders__view:focus-visible,
.ms-dash__assureItem > a:focus-visible{
  outline:2px solid var(--ms-focus);outline-offset:2px;border-radius:var(--ms-acct-r-sm);
}