/* ==========================================================================
   CHELSEA CHELSEA — MY ACCOUNT
   18 October 2026

   Companion to cart-checkout.css, same design language, loaded only on
   account pages. The tokens are repeated here on purpose so this file stands
   on its own and does not depend on load order.

   IMPORTANT STRUCTURAL NOTE
   The account pages use page-template-default, NOT the full width template
   that Cart and Checkout use. Measured on the live site: the chain here is
       .content > .content_inner > .container > .container_inner
   with .container_inner carrying 20px of padding and no max width, so at
   1786px the content ran the full width of the screen. Cart and Checkout
   have no .container_inner at all. That is why the gutter rule below is
   separate from the one in cart-checkout.css rather than shared.
   ========================================================================== */

:root{
  --cc-paper:#ffffff;
  --cc-surface:#faf8f6;
  --cc-ink:#14110f;
  --cc-ink-soft:#6b6560;
  --cc-rule:#e5e1dc;
  --cc-rule-strong:#cfc9c2;
  --cc-accent:#ef8686;
  --cc-accent-deep:#b85252;
  --cc-accent-wash:#fdf0f0;
  --cc-bold:'Futura Bold','Jost',sans-serif;
  --cc-med:'Futura Medium','Jost',sans-serif;
  --cc-light:'Futura Light','Futura book','Jost',sans-serif;
}

/* --------------------------------------------------------------------------
   1. Page gutter and width
   -------------------------------------------------------------------------- */
.cc-account-area .content .container .container_inner{
  box-sizing:border-box;
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(30px,3.4vw,60px);
  padding-right:clamp(30px,3.4vw,60px);
  padding-top:40px;
  padding-bottom:70px;
}
@media (max-width:767px){
  .cc-account-area .content .container .container_inner{
    padding-top:24px;
    padding-bottom:48px;
  }
}

/* --------------------------------------------------------------------------
   2. The two column grid. Stock WooCommerce floats these, which is why they
      never aligned. Same treatment as the cart and checkout grids.
   -------------------------------------------------------------------------- */
.cc-account-grid{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:clamp(32px,4vw,64px);
  align-items:start;
}
.cc-account-area .cc-account-grid .woocommerce-MyAccount-navigation,
.cc-account-area .cc-account-grid .woocommerce-MyAccount-content{
  float:none !important;
  width:auto !important;
  margin:0 !important;
}
.cc-account-main{min-width:0}

@media (max-width:900px){
  .cc-account-grid{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* --------------------------------------------------------------------------
   3. Navigation
   Stock has list-style:disc on the menu, so every account link was a bullet
   point. Gone.
   -------------------------------------------------------------------------- */
.cc-account-nav{position:sticky;top:120px}
@media (max-width:900px){.cc-account-nav{position:static}}

.cc-account-nav-hd{
  padding:0 0 16px;
  margin:0 0 16px;
  border-bottom:1px solid var(--cc-rule);
}
.cc-account-nav-label{
  display:block;
  font-family:var(--cc-bold);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cc-ink-soft);
  margin:0 0 6px;
}
.cc-account-nav-name{
  display:block;
  font-family:var(--cc-med);
  font-size:17px;
  line-height:1.3;
  color:var(--cc-ink);
}

.cc-account-area ul.cc-account-menu{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.cc-account-area ul.cc-account-menu li{
  list-style:none !important;
  margin:0;
  padding:0;
  border:0;
}
.cc-account-area ul.cc-account-menu li::marker{content:none}

.cc-account-area ul.cc-account-menu li a{
  display:block;
  padding:11px 0;
  font-family:var(--cc-light);
  font-size:14px;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--cc-ink-soft);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .15s ease;
}
.cc-account-area ul.cc-account-menu li a:hover{color:var(--cc-ink)}

.cc-account-area ul.cc-account-menu li.is-active a{
  font-family:var(--cc-med);
  color:var(--cc-ink);
  position:relative;
}
.cc-account-area ul.cc-account-menu li.is-active a::before{
  content:'';
  position:absolute;
  left:-14px;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--cc-accent);
}

.cc-account-area ul.cc-account-menu li.cc-account-menu-logout{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--cc-rule);
}
.cc-account-area ul.cc-account-menu li.cc-account-menu-logout a{
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:var(--cc-bold);
  color:var(--cc-ink-soft);
}
.cc-account-area ul.cc-account-menu li.cc-account-menu-logout a:hover{color:var(--cc-accent-deep)}

/* Mobile: the menu becomes a horizontally scrolling row of tabs rather than
   ten stacked links above the thing the customer came for. Deliberately CSS
   only. A <select> would have been tidier but it cannot navigate without
   JavaScript, and on a two to three second server that is a real failure mode
   rather than a theoretical one. */
@media (max-width:900px){
  .cc-account-nav-hd{
    border-bottom:0;
    padding-bottom:10px;
    margin-bottom:10px;
  }
  .cc-account-area ul.cc-account-menu{
    display:flex;
    gap:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    border-bottom:1px solid var(--cc-rule);
    margin:0 0 24px !important;
  }
  .cc-account-area ul.cc-account-menu::-webkit-scrollbar{display:none}
  .cc-account-area ul.cc-account-menu li{flex:none}
  .cc-account-area ul.cc-account-menu li a{
    padding:10px 16px;
    white-space:nowrap;
    font-size:13.5px;
    border-bottom:2px solid transparent;
  }
  .cc-account-area ul.cc-account-menu li:first-child a{padding-left:0}
  .cc-account-area ul.cc-account-menu li.is-active a{
    border-bottom-color:var(--cc-accent);
    color:var(--cc-ink);
  }
  .cc-account-area ul.cc-account-menu li.is-active a::before{display:none}
  .cc-account-area ul.cc-account-menu li.cc-account-menu-logout{
    margin-top:0;
    padding-top:0;
    border-top:0;
    margin-left:auto;
  }
}

/* --------------------------------------------------------------------------
   4. Shared headings and text
   -------------------------------------------------------------------------- */
.cc-account-area h2.cc-account-title{
  font-family:var(--cc-bold);
  font-size:15px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cc-ink);
  margin:0 0 22px;
  padding:0;
}
.cc-account-area .cc-dash-card-title{
  font-family:var(--cc-bold);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cc-ink-soft);
  margin:0 0 14px;
}
.cc-account-intro{
  font-family:var(--cc-light);
  font-size:14.5px;
  line-height:1.6;
  color:var(--cc-ink-soft);
  margin:0 0 24px;
  max-width:60ch;
}
.cc-dash-muted{
  font-family:var(--cc-light);
  font-size:14px;
  color:var(--cc-ink-soft);
  line-height:1.6;
  margin:0 0 12px;
}
.cc-account-area a.cc-textlink{
  display:inline-block;
  font-family:var(--cc-med);
  font-size:13px;
  color:var(--cc-ink-soft);
  text-decoration:none;
  border-bottom:1px solid var(--cc-rule-strong);
  padding-bottom:1px;
}
.cc-account-area a.cc-textlink:hover{
  color:var(--cc-accent-deep);
  border-bottom-color:var(--cc-accent);
}

/* --------------------------------------------------------------------------
   5. Status pills. One visual language for order state across the dashboard,
      the orders table and the order page.
   -------------------------------------------------------------------------- */
.cc-status{
  display:inline-block;
  font-family:var(--cc-bold);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 11px;
  border:1px solid var(--cc-rule-strong);
  background:var(--cc-surface);
  color:var(--cc-ink-soft);
  white-space:nowrap;
  line-height:1.1;
}
.cc-status--processing{background:#eef3f0;border-color:#c3d8cd;color:#2f5c45}
.cc-status--completed{background:#eaf2ec;border-color:#b4d2bf;color:#215c38}
.cc-status--pending,
.cc-status--on-hold{background:#fdf6ea;border-color:#e6cfa8;color:#8a6120}
.cc-status--failed{background:var(--cc-accent-wash);border-color:var(--cc-accent);color:var(--cc-accent-deep)}
.cc-status--cancelled,
.cc-status--refunded{background:var(--cc-surface);border-color:var(--cc-rule-strong);color:var(--cc-ink-soft)}

/* --------------------------------------------------------------------------
   6. Dashboard
   -------------------------------------------------------------------------- */
.cc-dash-hello{
  font-family:var(--cc-med);
  font-size:26px;
  line-height:1.2;
  color:var(--cc-ink);
  margin:0 0 26px;
  text-transform:none;
  letter-spacing:0;
}
.cc-dash-card{
  background:var(--cc-surface);
  padding:24px;
  margin:0 0 20px;
}
.cc-dash-split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}
.cc-dash-split .cc-dash-card{margin:0}
.cc-dash-order-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 12px;
}
.cc-dash-order-number{
  font-family:var(--cc-med);
  font-size:18px;
  color:var(--cc-ink);
  margin-right:12px;
}
.cc-dash-order-date{font-family:var(--cc-light);font-size:13px;color:var(--cc-ink-soft)}
.cc-dash-order-total{
  font-family:var(--cc-med);
  font-size:17px;
  color:var(--cc-ink);
  margin:0 0 18px;
}
.cc-dash-order-total .cc-dash-order-items{
  font-family:var(--cc-light);
  font-size:13px;
  color:var(--cc-ink-soft);
  margin-left:10px;
}
.cc-account-area address.cc-dash-address{
  font-family:var(--cc-light);
  font-size:14px;
  line-height:1.7;
  font-style:normal;
  color:var(--cc-ink);
  margin:0 0 14px;
}
.cc-account-area .cc-dash-card .cc-btn,
.cc-account-area .cc-dash-card .cc-btn-ghost{
  display:inline-block;
  width:auto;
  padding:13px 26px;
}

/* --------------------------------------------------------------------------
   7. Orders table, and the same table as cards on a phone
   -------------------------------------------------------------------------- */
.cc-account-area table.cc-orders{
  width:100%;
  border:0;
  border-collapse:collapse;
  margin:0 0 28px;
}
.cc-account-area table.cc-orders thead th{
  text-align:left;
  padding:0 16px 12px 0;
  border-bottom:1px solid var(--cc-rule);
  font-family:var(--cc-bold);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cc-ink-soft);
  background:none;
}
.cc-account-area table.cc-orders tbody td{
  padding:20px 16px 20px 0;
  border-bottom:1px solid var(--cc-rule);
  vertical-align:middle;
  font-family:var(--cc-light);
  font-size:14px;
  color:var(--cc-ink);
  background:none;
}
.cc-account-area table.cc-orders tbody tr:hover td{background:var(--cc-surface)}
.cc-account-area table.cc-orders a.cc-order-number{
  font-family:var(--cc-med);
  font-size:15px;
  color:var(--cc-ink);
  text-decoration:none;
  border-bottom:1px solid var(--cc-rule-strong);
}
.cc-account-area table.cc-orders a.cc-order-number:hover{border-bottom-color:var(--cc-accent)}
.cc-order-total{display:block;font-family:var(--cc-med);color:var(--cc-ink)}
.cc-order-items{display:block;font-size:12.5px;color:var(--cc-ink-soft);margin-top:3px}
.cc-account-area table.cc-orders .cc-cell-order-actions{text-align:right;white-space:nowrap}
.cc-account-area table.cc-orders .cc-cell-order-actions .cc-btn{
  display:inline-block;
  width:auto;
  padding:10px 20px;
  font-size:11px;
  margin-left:10px;
}
.cc-account-area table.cc-orders .cc-cell-order-actions .cc-textlink{margin-left:14px}

@media (max-width:767px){
  .cc-account-area table.cc-orders,
  .cc-account-area table.cc-orders tbody,
  .cc-account-area table.cc-orders tr,
  .cc-account-area table.cc-orders td{display:block;width:100%}
  .cc-account-area table.cc-orders thead{display:none}
  .cc-account-area table.cc-orders tbody tr.cc-order-row{
    border:1px solid var(--cc-rule);
    padding:18px;
    margin:0 0 14px;
    background:var(--cc-paper);
  }
  .cc-account-area table.cc-orders tbody tr:hover td{background:none}
  .cc-account-area table.cc-orders tbody td{
    border:0;
    padding:0 0 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }
  .cc-account-area table.cc-orders tbody td::before{
    content:attr(data-title);
    font-family:var(--cc-bold);
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--cc-ink-soft);
    flex:none;
  }
  .cc-account-area table.cc-orders tbody td.cc-cell-order-actions{
    display:block;
    padding:14px 0 0;
    margin-top:6px;
    border-top:1px solid var(--cc-rule);
    text-align:left;
  }
  .cc-account-area table.cc-orders tbody td.cc-cell-order-actions::before{display:none}
  .cc-account-area table.cc-orders .cc-cell-order-actions .cc-btn{
    display:block;
    width:100%;
    margin:0 0 10px;
    padding:13px 20px;
  }
  .cc-account-area table.cc-orders .cc-cell-order-actions .cc-textlink{margin:0 16px 0 0}
  .cc-order-total,.cc-order-items{display:inline}
  .cc-order-items{margin-left:8px}
}

.cc-orders-pagination{display:flex;gap:12px;flex-wrap:wrap}
.cc-account-area .cc-orders-pagination .cc-btn{display:inline-block;width:auto;padding:12px 24px}

/* --------------------------------------------------------------------------
   8. View order
   -------------------------------------------------------------------------- */
.cc-vieworder-status{
  background:var(--cc-surface);
  padding:24px;
  margin:0 0 28px;
}
.cc-vieworder-help{
  font-family:var(--cc-light);
  font-size:15px;
  line-height:1.6;
  color:var(--cc-ink);
  margin:14px 0 0;
  max-width:55ch;
}
.cc-vieworder-date{
  font-family:var(--cc-light);
  font-size:13px;
  color:var(--cc-ink-soft);
  margin:10px 0 0;
}
.cc-vieworder-notes{margin:0 0 28px}
.cc-account-area ol.cc-notes{list-style:none;margin:0;padding:0}
.cc-account-area ol.cc-notes li.cc-note{
  list-style:none;
  border-left:2px solid var(--cc-accent);
  padding:0 0 0 16px;
  margin:0 0 16px;
}
.cc-note-date{
  font-family:var(--cc-bold);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cc-ink-soft);
  margin:0 0 6px;
}
.cc-account-area ol.cc-notes .description p{
  font-family:var(--cc-light);
  font-size:14.5px;
  line-height:1.6;
  margin:0;
}
.cc-vieworder-back{margin:26px 0 0}

/* The order details table is WooCommerce's own markup, rendered through
   woocommerce_order_details_table. Styled, never rebuilt, because refunds,
   downloads and gateway additions all hang off that hook. */
.cc-account-area .cc-vieworder-details table.woocommerce-table--order-details,
.cc-account-area .cc-vieworder-details table.shop_table{
  width:100%;
  border:0;
  border-collapse:collapse;
  margin:0 0 30px;
}
.cc-account-area .cc-vieworder-details table.shop_table th,
.cc-account-area .cc-vieworder-details table.shop_table td{
  border:0;
  border-bottom:1px solid var(--cc-rule);
  padding:15px 12px 15px 0;
  text-align:left;
  font-family:var(--cc-light);
  font-size:14px;
  color:var(--cc-ink);
  background:none;
}
.cc-account-area .cc-vieworder-details table.shop_table thead th{
  font-family:var(--cc-bold);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cc-ink-soft);
  padding-bottom:12px;
}
.cc-account-area .cc-vieworder-details table.shop_table tfoot th{
  font-family:var(--cc-med);
  font-size:13px;
  color:var(--cc-ink-soft);
  text-transform:none;
  letter-spacing:0;
}
.cc-account-area .cc-vieworder-details table.shop_table tfoot tr:last-child th,
.cc-account-area .cc-vieworder-details table.shop_table tfoot tr:last-child td{
  font-family:var(--cc-bold);
  font-size:15px;
  color:var(--cc-ink);
  border-bottom:0;
  padding-top:18px;
}
.cc-account-area .cc-vieworder-details td.product-name a{
  color:var(--cc-ink);
  text-decoration:none;
  border-bottom:1px solid var(--cc-rule-strong);
}
.cc-account-area .cc-vieworder-details .wc-item-meta,
.cc-account-area .cc-vieworder-details .variation{
  font-size:12.5px;
  color:var(--cc-ink-soft);
  margin:6px 0 0;
  list-style:none;
  padding:0;
}

.cc-account-area .woocommerce-customer-details{margin:0}
.cc-account-area .woocommerce-customer-details .woocommerce-columns{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}
.cc-account-area .woocommerce-customer-details .woocommerce-column{
  background:var(--cc-surface);
  padding:22px;
  width:auto;
  float:none;
  margin:0;
}
.cc-account-area .woocommerce-customer-details h2,
.cc-account-area .woocommerce-customer-details h3{
  font-family:var(--cc-bold);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cc-ink-soft);
  margin:0 0 12px;
}
.cc-account-area .woocommerce-customer-details address{
  font-family:var(--cc-light);
  font-size:14px;
  line-height:1.7;
  font-style:normal;
  border:0;
  padding:0;
  color:var(--cc-ink);
}

@media (max-width:600px){
  .cc-account-area .cc-vieworder-details table.shop_table thead{display:none}
  .cc-account-area .cc-vieworder-details table.shop_table tbody tr{
    display:block;
    border-bottom:1px solid var(--cc-rule);
    padding:14px 0;
  }
  .cc-account-area .cc-vieworder-details table.shop_table tbody td{
    display:flex;
    justify-content:space-between;
    gap:14px;
    border:0;
    padding:4px 0;
  }
}

/* --------------------------------------------------------------------------
   9. Addresses
   -------------------------------------------------------------------------- */
.cc-address-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.cc-address-grid--one{grid-template-columns:minmax(0,420px)}
.cc-account-area .cc-address-card{
  background:var(--cc-surface);
  padding:24px;
  width:auto;
  float:none;
}
.cc-address-card-hd{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin:0 0 12px;
}
.cc-address-card-hd .cc-dash-card-title{margin:0}
.cc-account-area .cc-address-card address{
  font-family:var(--cc-light);
  font-size:14px;
  line-height:1.7;
  font-style:normal;
  color:var(--cc-ink);
  margin:0;
}

/* --------------------------------------------------------------------------
   10. Login and register page
   -------------------------------------------------------------------------- */
.cc-login-page{
  display:grid;
  gap:clamp(32px,5vw,64px);
  align-items:start;
  max-width:980px;
}
.cc-login-page--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cc-login-page--one{grid-template-columns:minmax(0,440px)}
@media (max-width:767px){
  .cc-login-page--two{grid-template-columns:minmax(0,1fr)}
  .cc-login-col--register{
    border-top:1px solid var(--cc-rule);
    padding-top:32px;
  }
}
.cc-login-blurb{
  font-family:var(--cc-light);
  font-size:14px;
  line-height:1.6;
  color:var(--cc-ink-soft);
  margin:0 0 22px;
  max-width:46ch;
}
.cc-login-extras{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:16px 0 0 !important;
}
.cc-account-area label.cc-checkbox{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--cc-light);
  font-size:13.5px;
  color:var(--cc-ink-soft);
  margin:0;
  cursor:pointer;
}
.cc-account-area label.cc-checkbox input{width:15px;height:15px;margin:0}

/* --------------------------------------------------------------------------
   11. Forms, everywhere in the account area.
   This section deliberately targets WooCommerce's generic classes rather than
   my own, because several account pages have no template override: Account
   details, Edit address, Lost password, Downloads, Payment methods, and the
   endpoints your plugins add (Gift Card Balance, Store credit, Wishlist).
   Those pages get their look entirely from here.
   -------------------------------------------------------------------------- */
.cc-account-area .woocommerce-MyAccount-content form .form-row,
.cc-account-area .cc-form .form-row{
  display:block;
  margin:0 0 18px;
  padding:0;
  float:none;
  width:100%;
}
.cc-account-area .woocommerce-MyAccount-content form label,
.cc-account-area .cc-form label{
  display:block;
  font-family:var(--cc-bold);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cc-ink-soft);
  margin:0 0 7px;
}
.cc-account-area .woocommerce-MyAccount-content form label .required,
.cc-account-area .cc-form label .required{color:var(--cc-accent-deep);text-decoration:none;border:0}

.cc-account-area .woocommerce-MyAccount-content input.input-text,
.cc-account-area .woocommerce-MyAccount-content input[type="text"],
.cc-account-area .woocommerce-MyAccount-content input[type="email"],
.cc-account-area .woocommerce-MyAccount-content input[type="tel"],
.cc-account-area .woocommerce-MyAccount-content input[type="password"],
.cc-account-area .woocommerce-MyAccount-content textarea,
.cc-account-area .woocommerce-MyAccount-content select:not(.select2-hidden-accessible),
.cc-account-area .woocommerce-MyAccount-content .select2-container--default .select2-selection--single{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--cc-rule-strong);
  border-radius:0;
  background-color:var(--cc-paper);
  padding:12px 13px;
  height:48px;
  min-height:48px;
  font-family:var(--cc-light);
  font-size:14.5px;
  color:var(--cc-ink);
  box-shadow:none;
}
.cc-account-area .woocommerce-MyAccount-content textarea{height:auto;min-height:110px;padding-top:12px}
.cc-account-area .woocommerce-MyAccount-content input.input-text:focus,
.cc-account-area .woocommerce-MyAccount-content textarea:focus,
.cc-account-area .woocommerce-MyAccount-content select:focus{
  outline:none;
  border-color:var(--cc-ink);
}

/* select2 and native selects get the same centred chevron as the checkout,
   and select2's own inner padding is zeroed so the text lines up with the
   inputs above and below it. That 20px offset is what pushed the postcode
   out of line on the cart. */
.cc-account-area .woocommerce-MyAccount-content select:not(.select2-hidden-accessible),
.cc-account-area .woocommerce-MyAccount-content .select2-container--default .select2-selection--single{
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b6560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:13px 13px;
  padding-right:36px;
  display:flex;
  align-items:center;
}
.cc-account-area .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-left:0 !important;
  padding-right:0 !important;
  line-height:1.2;
  color:var(--cc-ink);
}
.cc-account-area .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow{display:none !important}
.cc-account-area .woocommerce-MyAccount-content .select2-container{width:100% !important}

/* Two column rows where WooCommerce asks for them (first name / last name) */
@media (min-width:600px){
  .cc-account-area .woocommerce-MyAccount-content form .form-row-first,
  .cc-account-area .woocommerce-MyAccount-content form .form-row-last{
    display:inline-block;
    width:calc(50% - 9px);
    vertical-align:top;
  }
  .cc-account-area .woocommerce-MyAccount-content form .form-row-first{margin-right:14px}
}

.cc-account-area .woocommerce-MyAccount-content fieldset{
  border:1px solid var(--cc-rule);
  padding:22px;
  margin:28px 0 22px;
}
.cc-account-area .woocommerce-MyAccount-content fieldset legend{
  font-family:var(--cc-bold);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cc-ink-soft);
  padding:0 10px;
  margin:0;
}
.cc-account-area .woocommerce-MyAccount-content em,
.cc-account-area .woocommerce-MyAccount-content span.description{
  display:block;
  font-family:var(--cc-light);
  font-style:normal;
  font-size:12.5px;
  color:var(--cc-ink-soft);
  margin:6px 0 0;
}

/* Buttons. Qode's panel sets .woocommerce .button{color:#fff !important},
   which is why these need !important of their own to stay readable. */
.cc-account-area .woocommerce-MyAccount-content button.cc-btn,
.cc-account-area .woocommerce-MyAccount-content a.cc-btn,
.cc-account-area .woocommerce-MyAccount-content input.cc-btn{
  display:inline-block;
  width:auto;
  box-sizing:border-box;
  background-color:var(--cc-ink) !important;
  color:#fff !important;
  border:1px solid var(--cc-ink);
  border-radius:0;
  padding:14px 30px;
  height:auto;
  line-height:1.2;
  font-family:var(--cc-bold);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:opacity .15s ease;
}
.cc-account-area .woocommerce-MyAccount-content button.cc-btn:hover,
.cc-account-area .woocommerce-MyAccount-content a.cc-btn:hover{
  opacity:.86;
  background-color:var(--cc-ink) !important;
  color:#fff !important;
}
.cc-account-area .woocommerce-MyAccount-content button.cc-btn-ghost,
.cc-account-area .woocommerce-MyAccount-content a.cc-btn-ghost{
  background-color:transparent !important;
  color:var(--cc-ink) !important;
  border-color:var(--cc-rule-strong);
}
.cc-account-area .woocommerce-MyAccount-content button.cc-btn-ghost:hover,
.cc-account-area .woocommerce-MyAccount-content a.cc-btn-ghost:hover{
  background-color:transparent !important;
  color:var(--cc-ink) !important;
  border-color:var(--cc-accent);
  opacity:1;
}

/* Catch-all for the pages with no template override, where the submit button
   is WooCommerce's own markup and carries none of my classes. */
.cc-account-area .woocommerce-MyAccount-content button[type="submit"],
.cc-account-area .woocommerce-MyAccount-content input[type="submit"],
.cc-account-area .woocommerce-MyAccount-content .woocommerce-Button,
.cc-account-area .woocommerce-MyAccount-content a.button{
  background-color:var(--cc-ink) !important;
  color:#fff !important;
  border:1px solid var(--cc-ink);
  border-radius:0;
  padding:14px 30px;
  height:auto;
  line-height:1.2;
  font-family:var(--cc-bold);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  width:auto;
}
.cc-account-area .woocommerce-MyAccount-content a.cc-textlink,
.cc-account-area .woocommerce-MyAccount-content .cc-address-card-hd a{
  background:none !important;
  color:var(--cc-ink-soft) !important;
  border:0;
  border-bottom:1px solid var(--cc-rule-strong);
  padding:0 0 1px;
  font-family:var(--cc-med);
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
}
.cc-account-area .woocommerce-MyAccount-content a.cc-textlink:hover{color:var(--cc-accent-deep) !important}

.cc-form-actions{margin-top:24px !important}

/* --------------------------------------------------------------------------
   12. Notices and empty states
   -------------------------------------------------------------------------- */
.cc-account-area .woocommerce-message,
.cc-account-area .woocommerce-info,
.cc-account-area .woocommerce-error{
  background:var(--cc-surface);
  border:0;
  border-left:2px solid var(--cc-accent);
  border-radius:0;
  padding:18px 20px;
  margin:0 0 24px;
  font-family:var(--cc-light);
  font-size:14px;
  line-height:1.6;
  color:var(--cc-ink);
  list-style:none;
}
.cc-account-area .woocommerce-message::before,
.cc-account-area .woocommerce-info::before,
.cc-account-area .woocommerce-error::before{display:none}
.cc-account-area .woocommerce-error{border-left-color:var(--cc-accent-deep)}
.cc-account-area .woocommerce-error li{list-style:none;margin:0}

.cc-account-empty{
  background:var(--cc-surface);
  border:0 !important;
  border-left:0 !important;
  padding:34px 28px !important;
  text-align:left;
}
.cc-account-empty p{
  font-family:var(--cc-light);
  font-size:14.5px;
  line-height:1.6;
  color:var(--cc-ink-soft);
  margin:0 0 20px;
  max-width:46ch;
}

/* Downloads and payment methods use the same shop_table markup as the order
   details, so they inherit from section 8 once scoped to the content area. */
.cc-account-area .woocommerce-MyAccount-content table.shop_table{
  width:100%;
  border:0;
  border-collapse:collapse;
}
.cc-account-area .woocommerce-MyAccount-content table.shop_table th,
.cc-account-area .woocommerce-MyAccount-content table.shop_table td{
  border:0;
  border-bottom:1px solid var(--cc-rule);
  padding:15px 12px 15px 0;
  text-align:left;
  background:none;
  font-family:var(--cc-light);
  font-size:14px;
}
.cc-account-area .woocommerce-MyAccount-content table.shop_table thead th{
  font-family:var(--cc-bold);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cc-ink-soft);
}

/* ==========================================================================
   FIXES — round 10, 18 October 2026
   All five measured on the live site before changing anything.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The box around the orders table.
   Measured: table border 0, thead/tbody 0, cells 0 except a bottom rule, but
   every <tr> carried 1px on all four sides from the theme. With
   border-collapse:collapse those row borders merge into a rectangle around
   the whole table. I had never styled tr at all, which is why it survived.
   -------------------------------------------------------------------------- */
.cc-account-area table.cc-orders tr,
.cc-account-area table.cc-orders thead tr,
.cc-account-area table.cc-orders tbody tr{
  border:0;
}
@media (max-width:767px){
  .cc-account-area table.cc-orders tbody tr.cc-order-row{
    border:1px solid var(--cc-rule);
  }
}

/* --------------------------------------------------------------------------
   2. Horizontal overflow on mobile. This is the cause of BOTH the missing
   right hand padding and the white footer on the wishlist page.

   Measured: Bridge pins .container_inner to width:1100px. On the wishlist
   page that rule wins outright, and the element really is 1100px wide inside
   the viewport. On a 390px phone a 1100px box overflows by 710px, the page
   scrolls sideways, and every full width background — the footer's included —
   only paints across one viewport width. Scroll right and you are looking at
   the white page background beside a black footer that stopped at 100%.

   Two defences: take the fixed width off, and stop my own grid from forcing
   the page wider than the screen.
   -------------------------------------------------------------------------- */
.cc-account-area .content .container .container_inner,
.content .container .container_inner.woocommerce-account{
  box-sizing:border-box !important;
  width:auto !important;
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(30px,3.4vw,60px) !important;
  padding-right:clamp(30px,3.4vw,60px) !important;
}

/* A grid item defaults to min-width:auto, so it refuses to shrink below its
   content. The navigation becomes a flex row of ten tabs on mobile, which
   made the whole grid as wide as that row. This is the other half of the
   overflow. */
.cc-account-nav,
.cc-account-main,
.cc-account-area .woocommerce-MyAccount-navigation,
.cc-account-area .woocommerce-MyAccount-content{
  min-width:0;
  max-width:100%;
}
.cc-account-area ul.cc-account-menu{max-width:100%}
.cc-account-area .cc-account-grid{max-width:100%}

/* Belt and braces: nothing inside the account area may push the page wider
   than the screen. */
.cc-account-area .woocommerce-MyAccount-content img,
.cc-account-area .woocommerce-MyAccount-content table{max-width:100%}

/* --------------------------------------------------------------------------
   3. The Dashboard link sitting higher than the rest.
   Measured: every other link computed padding 11px 0, the active one
   computed 0 0 11px. The theme styles .is-active a separately and was
   winning, so the active tab lost its top padding and rode 11px high. It was
   doing this on desktop too, just less visibly.
   -------------------------------------------------------------------------- */
.cc-account-area ul.cc-account-menu li a,
.cc-account-area ul.cc-account-menu li.is-active a,
.cc-account-area .woocommerce-MyAccount-navigation ul li.is-active a{
  padding:11px 0;
  margin:0;
}
.cc-account-area ul.cc-account-menu{align-items:stretch}

@media (max-width:900px){
  .cc-account-area ul.cc-account-menu li a,
  .cc-account-area ul.cc-account-menu li.is-active a,
  .cc-account-area .woocommerce-MyAccount-navigation ul li.is-active a{
    padding:10px 16px;
  }
  .cc-account-area ul.cc-account-menu li:first-child a{padding-left:0}
  .cc-account-area ul.cc-account-menu li{display:flex;align-items:stretch}
  .cc-account-area ul.cc-account-menu li a{display:flex;align-items:center}
}

/* --------------------------------------------------------------------------
   4. The password reveal control.
   Measured: a <button class="show-password-input"> at 16x6px, position
   static, background #efefef, border 2px outset. That is an unstyled native
   button — WooCommerce's own styling for it is not reaching this theme, so
   what you saw was the browser's default rendering of a button with no
   content. Hence the grey pill nobody could interpret.

   I have given it the word rather than an icon. See the note in the reply:
   an eye glyph is a convention people have to already know, and half of them
   read it as "preview" rather than "reveal". "Show" and "Hide" need no
   learning. The eye version is in the block underneath if you prefer it.
   -------------------------------------------------------------------------- */
.cc-account-area .password-input,
.cc-account-area span.password-input{
  position:relative;
  display:block;
  width:100%;
}
.cc-account-area .password-input input.input-text,
.cc-account-area .password-input input[type="password"],
.cc-account-area .password-input input[type="text"]{
  padding-right:76px;
}
.cc-account-area button.show-password-input{
  position:absolute;
  right:0;
  top:0;
  height:48px;
  width:auto;
  min-width:68px;
  padding:0 14px;
  margin:0;
  border:0 !important;
  border-left:1px solid var(--cc-rule) !important;
  border-radius:0;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none;
  cursor:pointer;
  font-family:var(--cc-bold);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cc-ink-soft) !important;
  line-height:48px;
  text-align:center;
  -webkit-appearance:none;
  appearance:none;
}
.cc-account-area button.show-password-input::after{content:'Show'}
.cc-account-area button.show-password-input.display-password::after{content:'Hide'}
.cc-account-area button.show-password-input:hover{color:var(--cc-accent-deep) !important}
.cc-account-area button.show-password-input:focus-visible{
  outline:2px solid var(--cc-accent);
  outline-offset:-2px;
}

/* ALTERNATIVE: the eye icon, if you would rather have one. Delete the two
   ::after rules above and uncomment this block.

.cc-account-area button.show-password-input{
  min-width:48px;
  padding:0;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:20px 20px !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
}
.cc-account-area button.show-password-input.display-password{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") !important;
}
*/

/* --------------------------------------------------------------------------
   5. Wishlist page.
   It is not a WooCommerce endpoint. It is a separate WordPress page using the
   child theme's own wishlist_page.php, so is_account_page() returned false,
   this stylesheet never loaded, and the class "woocommerce-account" sits on
   the container div rather than the body. Both ends are fixed: functions.php
   now loads this file there and adds the cc-account-area body class, and
   wishlist_page.php has the grid wrapper it was missing.
   -------------------------------------------------------------------------- */
.cc-account-area .woocommerce-MyAccount-content.wishlist_pageright{
  float:none !important;
  width:auto !important;
  margin:0 !important;
}
.cc-account-area .tinv-wishlist table{
  width:100%;
  border-collapse:collapse;
}
.cc-account-area .tinv-wishlist table tr{border:0}
.cc-account-area .tinv-wishlist table th,
.cc-account-area .tinv-wishlist table td{
  border:0;
  border-bottom:1px solid var(--cc-rule);
  padding:15px 12px 15px 0;
  background:none;
  font-family:var(--cc-light);
  font-size:14px;
}
.cc-account-area .tinv-wishlist table thead th{
  font-family:var(--cc-bold);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cc-ink-soft);
}
@media (max-width:767px){
  .cc-account-area .tinv-wishlist table,
  .cc-account-area .tinv-wishlist .tinv-wishlist-clear{max-width:100%;overflow-x:auto}
}

/* The wishlist page logged out has no navigation column. */
.cc-account-grid--solo{grid-template-columns:minmax(0,1fr) !important}

/* ==========================================================================
   FIXES — round 11, 18 October 2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE LOGGED OUT LOGIN PAGE WAS GETTING ALMOST NONE OF MY FORM STYLING.

   WC_Shortcode_My_Account::output() branches on login state. Logged in it
   renders myaccount/my-account.php, which supplies the wrapper
   .woocommerce-MyAccount-content. Logged OUT it renders myaccount/form-login.php
   directly and that wrapper never exists.

   Every input, select and button rule I wrote was scoped to
   .woocommerce-MyAccount-content, so on the one account page that non-customers
   actually see, none of it applied. That single mistake explains three of the
   four things reported:

     - the password field was short, because width:100% never reached it
     - SHOW sat out to the right, because it is positioned against the
       full width .password-input span while the input inside stayed at its
       default ~177px
     - the right gutter looked smaller than the left, because box-sizing:
       border-box never reached the inputs either, so width:100% plus padding
       plus border overflowed the container by about 30px

   Scoping the same rules to .cc-form (which both forms in form-login.php
   carry) fixes all three at once.
   -------------------------------------------------------------------------- */

.cc-account-area .cc-form,
.cc-account-area .cc-login-page{box-sizing:border-box;max-width:100%}

.cc-account-area .cc-form .form-row{
  display:block;
  margin:0 0 18px;
  padding:0;
  float:none;
  width:100%;
  box-sizing:border-box;
}

.cc-account-area .cc-form label{
  display:block;
  font-family:var(--cc-bold);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cc-ink-soft);
  margin:0 0 7px;
}
.cc-account-area .cc-form label .required{
  color:var(--cc-accent-deep);
  text-decoration:none;
  border:0;
}

.cc-account-area .cc-form input.input-text,
.cc-account-area .cc-form input[type="text"],
.cc-account-area .cc-form input[type="email"],
.cc-account-area .cc-form input[type="tel"],
.cc-account-area .cc-form input[type="password"],
.cc-account-area .cc-form textarea,
.cc-account-area .cc-form select{
  width:100% !important;
  box-sizing:border-box !important;
  display:block;
  border:1px solid var(--cc-rule-strong);
  border-radius:0;
  background-color:var(--cc-paper);
  padding:12px 13px;
  height:48px;
  min-height:48px;
  font-family:var(--cc-light);
  font-size:14.5px;
  color:var(--cc-ink);
  box-shadow:none;
  margin:0;
}
.cc-account-area .cc-form textarea{height:auto;min-height:110px}
.cc-account-area .cc-form input.input-text:focus,
.cc-account-area .cc-form textarea:focus{outline:none;border-color:var(--cc-ink)}

.cc-account-area .cc-form button.cc-btn,
.cc-account-area .cc-form button[type="submit"],
.cc-account-area .cc-form .woocommerce-Button{
  display:inline-block;
  width:auto;
  box-sizing:border-box;
  background-color:var(--cc-ink) !important;
  color:#fff !important;
  border:1px solid var(--cc-ink);
  border-radius:0;
  padding:14px 30px;
  height:auto;
  line-height:1.2;
  font-family:var(--cc-bold);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
}
.cc-account-area .cc-form button.cc-btn-ghost{
  background-color:transparent !important;
  color:var(--cc-ink) !important;
  border-color:var(--cc-rule-strong);
}
.cc-account-area .cc-form button.cc-btn:hover{opacity:.86}

/* The password control, now that the input beside it is the right width.
   Excluded from the generic width:100% rule above so it cannot be stretched. */
.cc-account-area .cc-form .password-input{
  position:relative;
  display:block;
  width:100%;
  box-sizing:border-box;
}
.cc-account-area .cc-form .password-input input[type="password"],
.cc-account-area .cc-form .password-input input[type="text"]{
  width:100% !important;
  padding-right:76px;
}
.cc-account-area .cc-form button.show-password-input{
  width:auto !important;
  box-sizing:border-box;
}

/* On a narrow screen the label is enough context, so the word can shrink
   rather than crowd the field. */
@media (max-width:420px){
  .cc-account-area button.show-password-input{
    min-width:58px;
    padding:0 10px;
    font-size:10px;
    letter-spacing:.08em;
  }
  .cc-account-area .cc-form .password-input input[type="password"],
  .cc-account-area .cc-form .password-input input[type="text"]{padding-right:66px}
}

/* Nothing on this page may be wider than the page. */
.cc-account-area .cc-login-page,
.cc-account-area .cc-login-col,
.cc-account-area .cc-form,
.cc-account-area .cc-form .form-row,
.cc-account-area .cc-login-extras{min-width:0;max-width:100%}