/* Close Call — My Account
   Extends the shared design system (assets/css/home.css) with the
   account-only surfaces: title, login/register, account nav, orders,
   order detail, addresses and account-details forms. No new visual
   language — same tokens, spacing, buttons, forms and motion as the
   rest of the storefront. */

body.cc-account-active {
  background: var(--cc-paper);
}

.cc-account-main {
  padding-block: clamp(36px, 4.5vw, 60px) clamp(56px, 6vw, 88px);
}

/* ---------- Title ---------- */

.cc-account-title {
  display: block;
  padding-bottom: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--cc-line-strong);
}

.cc-account-title p {
  margin: 0 0 12px;
  color: var(--cc-ink-soft);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cc-account-title h1 {
  margin: 0;
  font-family: var(--cc-serif);
  font-size: clamp(46px, 5.4vw, 68px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .9;
}

.cc-account-content {
  max-width: 860px;
  padding-top: clamp(22px, 2.6vw, 32px);
}

/* ---------- Notices ---------- */

.cc-account-content .woocommerce-info,
.cc-account-content .woocommerce-message,
.cc-account-content .woocommerce-error,
.cc-account-content .woocommerce-notice {
  margin: 0 0 20px;
  padding: 15px 18px 15px 46px;
  border: 1px solid var(--cc-line-strong);
  border-radius: 0;
  background: var(--cc-paper-light);
  color: var(--cc-ink);
  font-size: 12px;
  line-height: 1.5;
  list-style: none;
}

.cc-account-content .woocommerce-error {
  border-color: #9b3a32;
  color: #7d2720;
}

.cc-account-content .woocommerce-info::before,
.cc-account-content .woocommerce-message::before,
.cc-account-content .woocommerce-error::before {
  top: 14px;
  left: 18px;
  color: currentColor;
}

.cc-account-content .woocommerce-error li,
.cc-account-content .woocommerce-message li {
  margin: 0;
}

.cc-account-content .woocommerce-error a.button,
.cc-account-content .woocommerce-message a.button {
  display: inline-flex;
  margin-top: 12px;
}

/* ---------- Shared form language (mirrors checkout) ---------- */

.cc-account-content label:not(.woocommerce-form__label-for-checkbox) {
  display: block;
  margin: 0 0 7px;
  color: var(--cc-ink-2);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .055em;
  line-height: 1.35;
  text-transform: uppercase;
}

.cc-account-content .required {
  color: var(--cc-ink-soft);
  text-decoration: none;
}

.cc-account-content input.input-text,
.cc-account-content textarea,
.cc-account-content select,
.cc-account-content .select2-container .select2-selection--single {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--cc-line-strong);
  border-radius: 0;
  outline: 0;
  background: var(--cc-paper-light);
  color: var(--cc-ink);
  box-shadow: none;
  font: 400 14px/1.4 var(--cc-sans);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.cc-account-content textarea {
  min-height: 92px;
  resize: vertical;
}

.cc-account-content input.input-text:focus,
.cc-account-content textarea:focus,
.cc-account-content select:focus {
  border-color: var(--cc-ink);
  box-shadow: 0 0 0 1px var(--cc-ink);
}

.cc-account-content .woocommerce-invalid input.input-text {
  border-color: #9b3a32;
}

.cc-account-content .form-row {
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  float: none;
}

.cc-account-content .form-row:last-child {
  margin-bottom: 0;
}

.cc-account-content .woocommerce-form__label-for-checkbox,
.cc-account-content .woocommerce-form-login__rememberme {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  color: var(--cc-ink-soft);
  font-size: 12px;
  line-height: 1.5;
  text-transform: none;
  cursor: pointer;
}

.cc-account-content input[type="checkbox"],
.cc-account-content input[type="radio"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1px solid var(--cc-line-strong);
  border-radius: 0;
  accent-color: var(--cc-ink);
}

.cc-account-content .woocommerce-button,
.cc-account-content .woocommerce-Button,
.cc-account-content button.button,
.cc-account-content a.button,
.cc-account-content input.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid var(--cc-ink);
  border-radius: 2px;
  background: var(--cc-ink);
  color: var(--cc-paper-light) !important;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s var(--cc-ease), background .25s var(--cc-ease), transform .25s var(--cc-ease);
}

.cc-account-content .woocommerce-button:hover,
.cc-account-content .woocommerce-Button:hover,
.cc-account-content button.button:hover,
.cc-account-content a.button:hover,
.cc-account-content input.button:hover {
  background: transparent;
  color: var(--cc-ink) !important;
  transform: translateY(-2px);
}

.cc-account-content a:not(.button) {
  color: inherit;
}

.cc-account-content .woocommerce-LostPassword a,
.cc-account-content p a:not(.button) {
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

/* ---------- Login / Register ---------- */
/* Forms sit directly on the paper background — no card, border or shadow
   wrapper. Some themes add default panel styling to WooCommerce's login
   columns, so it is explicitly stripped here rather than assumed absent. */

.cc-account-content #customer_login.u-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
  max-width: 760px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cc-account-content #customer_login .u-column1,
.cc-account-content #customer_login .u-column2 {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  float: none;
}

/* The theme's WooCommerce grid-compatibility stylesheet assigns its own
   grid-column/grid-row to .u-column1/.u-column2 (shared with cart/checkout
   layouts), which fights the two-column placement above. Pin both
   explicitly so Login always renders left, Register always right. */
.cc-account-content #customer_login .u-column1 {
  grid-column: 1;
  grid-row: 1;
}

.cc-account-content #customer_login .u-column2 {
  grid-column: 2;
  grid-row: 1;
}

/* Astra's default WooCommerce styling boxes form.login/form.register with
   a border, padding and margin (`body .woocommerce form.login {...}`,
   higher specificity than a plain class selector) — !important is needed
   to reliably strip it since a future plugin/theme update could otherwise
   change load order. */
.cc-account-content form.woocommerce-form-login,
.cc-account-content form.woocommerce-form-register {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cc-account-content #customer_login h2 {
  margin: 0 0 20px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--cc-line-strong);
  font-family: var(--cc-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cc-account-content form.woocommerce-form-login,
.cc-account-content form.woocommerce-form-register {
  max-width: none;
}

.cc-account-content .woocommerce-form-login__rememberme {
  margin-bottom: 18px;
}

.cc-account-content .woocommerce-form-login__submit,
.cc-account-content .woocommerce-form-register__submit {
  width: 100%;
}

.cc-account-content .woocommerce-LostPassword {
  margin: 16px 0 0;
  font-size: 12px;
}

.cc-account-content form.woocommerce-form-register p:not(.form-row) {
  margin: 0 0 16px;
  color: var(--cc-ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

/* Newsletter opt-in (MailPoet) and any Germanized legal checkboxes that
   hook into the native registration form — styled as a normal checkbox
   row, not as an uppercase field label. */
.cc-account-content .registration-form-mailpoet,
.cc-account-content .wc-gzd-additional-checkbox-container {
  margin: 4px 0 18px;
}

.cc-account-content .registration-form-mailpoet label,
.cc-account-content .wc-gzd-additional-checkbox-container label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  color: var(--cc-ink-soft);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
  cursor: pointer;
}

/* ---------- Account navigation ---------- */

/* The site's WordPress "Additional CSS" (Customizer) still carries a
   leftover `.woocommerce-account .woocommerce-MyAccount-navigation
   { display: none; }` rule from an earlier iteration of the account page.
   It's the same specificity as the rule below but loads later (Customizer
   CSS prints last), so it wins the tie without !important. Recommend
   removing that stale rule in Customizer > Additional CSS; until then,
   this keeps the nav visible regardless. */
/* Astra also floats/narrows this nav to 30% width by default
   (`.woocommerce-account .woocommerce-MyAccount-navigation{float:left;
   width:30%}`) and boxes each item
   (`.woocommerce-MyAccount-navigation-link{border:1px solid ...}`) for its
   own sidebar-style account menu — both overridden below since this
   design uses a single-row tab nav instead. */
.cc-account-content .woocommerce-MyAccount-navigation {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin-bottom: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--cc-line);
}

.cc-account-content .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(20px, 3vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-account-content .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  border: 0 !important;
  list-style: none;
}

.cc-account-content .woocommerce-MyAccount-navigation a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--cc-ink-soft);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .075em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--cc-ease), border-color .2s var(--cc-ease);
}

.cc-account-content .woocommerce-MyAccount-navigation a:hover {
  color: var(--cc-ink);
}

.cc-account-content .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--cc-ink);
  border-bottom-color: var(--cc-ink);
}

.cc-account-content .woocommerce-MyAccount-navigation-link--customer-logout {
  margin-left: auto;
}

/* ---------- Dashboard ---------- */

.cc-account-content .woocommerce-MyAccount-content > p {
  max-width: 62ch;
  margin: 0 0 14px;
  color: var(--cc-ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.cc-account-content .woocommerce-MyAccount-content > p strong {
  color: var(--cc-ink);
  font-weight: 600;
}

.cc-account-content .cc-account-greeting {
  margin: 0 0 6px;
  color: var(--cc-ink);
  font-family: var(--cc-sans);
  font-size: 16px;
  font-weight: 520;
  letter-spacing: -.01em;
  line-height: 1.4;
}

.cc-account-content .cc-account-greeting-sub {
  margin: 0;
  color: var(--cc-ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- Orders table ---------- */

.cc-account-content table.woocommerce-orders-table,
.cc-account-content table.woocommerce-table {
  width: 100%;
  max-width: none;
  margin: 0 0 24px;
  border: 1px solid var(--cc-line-strong);
  border-collapse: collapse;
  font-size: 13px;
}

.cc-account-content table.woocommerce-orders-table th,
.cc-account-content table.woocommerce-table th {
  padding: 13px 16px;
  border-bottom: 1px solid var(--cc-line-strong);
  background: var(--cc-paper-light);
  color: var(--cc-ink-soft);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .075em;
  text-align: left;
  text-transform: uppercase;
}

.cc-account-content table.woocommerce-orders-table td,
.cc-account-content table.woocommerce-table td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--cc-line);
  color: var(--cc-ink);
  vertical-align: middle;
}

.cc-account-content table.woocommerce-orders-table tr:last-child td {
  border-bottom: 0;
}

.cc-account-content .woocommerce-orders-table__cell-order-actions {
  text-align: right;
  white-space: nowrap;
}

.cc-account-content .woocommerce-orders-table__cell-order-actions a.button {
  min-height: 36px;
  padding: 8px 16px;
  margin-left: 8px;
}

.cc-account-content .woocommerce-orders-table__cell-order-actions a.button:first-child {
  margin-left: 0;
}

.cc-account-content .woocommerce-orders-table__cell-order-status {
  color: var(--cc-ink-soft);
  font-size: 12px;
  text-transform: capitalize;
}

.cc-account-content .woocommerce-pagination {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 8px;
}

.cc-account-content .woocommerce-pagination a {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .075em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

/* ---------- Order detail ---------- */

.cc-account-content .woocommerce-order-details,
.cc-account-content .woocommerce-customer-details {
  margin-top: clamp(28px, 3.5vw, 44px);
}

.cc-account-content .woocommerce-order-details__title,
.cc-account-content .woocommerce-column__title {
  margin: 0 0 16px;
  font-family: var(--cc-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.cc-account-content table.woocommerce-table--order-details tfoot th,
.cc-account-content table.woocommerce-table--order-details tfoot td {
  border-bottom: 0;
  border-top: 1px solid var(--cc-line);
  font-weight: 400;
}

.cc-account-content table.woocommerce-table--order-details tfoot tr:last-child th,
.cc-account-content table.woocommerce-table--order-details tfoot tr:last-child td {
  padding-top: 16px;
  font-weight: 650;
}

.cc-account-content .woocommerce-table--order-details .product-name a {
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

.cc-account-content .woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0 0 clamp(28px, 3.5vw, 44px);
  padding: 18px 20px;
  border: 1px solid var(--cc-line-strong);
  background: var(--cc-paper-light);
  list-style: none;
}

.cc-account-content .woocommerce-order-overview li {
  margin: 0;
  color: var(--cc-ink-soft);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cc-account-content .woocommerce-order-overview li strong {
  display: block;
  margin-top: 4px;
  color: var(--cc-ink);
  font-family: var(--cc-sans);
  font-size: 14px;
  font-weight: 520;
  letter-spacing: -.01em;
  text-transform: none;
}

.cc-account-content address {
  font-style: normal;
  line-height: 1.6;
}

.cc-account-content .woocommerce-columns--addresses,
.cc-account-content .woocommerce-customer-details .u-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.cc-account-content .woocommerce-column {
  padding: 20px;
  border: 1px solid var(--cc-line);
}

/* ---------- Addresses ---------- */

.cc-account-content > p:first-child {
  max-width: 62ch;
  margin: 0 0 24px;
  color: var(--cc-ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

/* The theme's WooCommerce grid-compatibility stylesheet also targets the
   generic `.col2-set` class (shared by this address grid, the login/register
   grid and the order-review table) with its own fixed-pixel
   grid-template-columns, and floats `.u-column1`/`.u-column2` left/right for
   its default sidebar-card layout. Both fight the two-column grid below, so
   they're reset explicitly the same way the login/register grid is. */
.cc-account-content .u-columns.woocommerce-Addresses {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  max-width: 100% !important;
}

.cc-account-content .u-columns.woocommerce-Addresses .u-column1,
.cc-account-content .u-columns.woocommerce-Addresses .u-column2 {
  float: none !important;
  width: 100% !important;
  min-width: 0;
}

.cc-account-content .u-columns.woocommerce-Addresses .u-column1 { grid-column: 1; }
.cc-account-content .u-columns.woocommerce-Addresses .u-column2 { grid-column: 2; }

.cc-account-content .woocommerce-Address {
  width: 100%;
  padding: 22px 24px;
  border: 1px solid var(--cc-line-strong);
  background: var(--cc-paper-light);
}

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

.cc-account-content .woocommerce-Address-title h2 {
  margin: 0;
  font-family: var(--cc-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.cc-account-content .woocommerce-Address-title a.edit {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

.cc-account-content .woocommerce-Address address {
  color: var(--cc-ink-soft);
  font-size: 14px;
}

/* ---------- Edit account / edit address forms ---------- */

.cc-account-content form.edit-account,
.cc-account-content form.woocommerce-address-fields,
.cc-account-content form[name="checkout"] {
  max-width: 560px;
}

.cc-account-content fieldset {
  margin: 28px 0 0;
  padding: 0;
  border: 0;
}

.cc-account-content legend {
  width: 100%;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--cc-line-strong);
  font-family: var(--cc-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.cc-account-content p.form-row-first,
.cc-account-content p.form-row-last {
  display: inline-block;
  width: calc(50% - 8px);
}

.cc-account-content p.form-row-first {
  margin-right: 16px;
}

.cc-account-content .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
}

.cc-account-content .woocommerce-address-fields__field-wrapper .form-row {
  margin: 0;
}

.cc-account-content .woocommerce-address-fields__field-wrapper #address_field_billing_country_field,
.cc-account-content .woocommerce-address-fields__field-wrapper #billing_address_1_field,
.cc-account-content .woocommerce-address-fields__field-wrapper #billing_address_2_field,
.cc-account-content .woocommerce-address-fields__field-wrapper #billing_company_field,
.cc-account-content .woocommerce-address-fields__field-wrapper [id$="_address_1_field"],
.cc-account-content .woocommerce-address-fields__field-wrapper [id$="_address_2_field"],
.cc-account-content .woocommerce-address-fields__field-wrapper [id$="_company_field"] {
  grid-column: 1 / -1;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .cc-account-content .woocommerce-columns--addresses,
  .cc-account-content .woocommerce-customer-details .u-columns,
  .cc-account-content .u-columns.woocommerce-Addresses {
    grid-template-columns: 1fr !important;
  }

  .cc-account-content .u-columns.woocommerce-Addresses .u-column1,
  .cc-account-content .u-columns.woocommerce-Addresses .u-column2 {
    grid-column: 1;
  }
}

@media (max-width: 859px) {
  .cc-account-content #customer_login.u-columns {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* The explicit grid-column:2 pin above (needed to beat the theme's own
     grid placement at desktop widths) has to be released here, or Register
     keeps trying to sit in a second column that no longer exists and
     visually overlaps Login instead of stacking below it. */
  .cc-account-content #customer_login .u-column1,
  .cc-account-content #customer_login .u-column2 {
    grid-column: 1;
    grid-row: auto;
  }

  /* Account nav: single scrollable row on narrow screens, matching the
     horizontal-scroll idiom already used for image tracks on this site,
     rather than wrapping labels onto a second line. */
  .cc-account-content .woocommerce-MyAccount-navigation {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cc-account-content .woocommerce-MyAccount-navigation::-webkit-scrollbar {
    display: none;
  }

  .cc-account-content .woocommerce-MyAccount-navigation ul {
    flex-wrap: nowrap;
    gap: 4px 26px;
    width: max-content;
    min-width: 100%;
  }

  .cc-account-content .woocommerce-MyAccount-navigation a {
    white-space: nowrap;
  }

  .cc-account-content .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-left: 26px;
  }

  .cc-account-content p.form-row-first,
  .cc-account-content p.form-row-last {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  .cc-account-content .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  /* Orders: stacked cards instead of a squeezed table. */
  .cc-account-content table.woocommerce-orders-table thead {
    display: none;
  }

  .cc-account-content table.woocommerce-orders-table,
  .cc-account-content table.woocommerce-orders-table tbody,
  .cc-account-content table.woocommerce-orders-table tr,
  .cc-account-content table.woocommerce-orders-table th,
  .cc-account-content table.woocommerce-orders-table td {
    display: block;
    width: 100%;
  }

  .cc-account-content table.woocommerce-orders-table {
    border: 0;
  }

  .cc-account-content table.woocommerce-orders-table tr {
    margin-bottom: 16px;
    padding: 16px 18px;
    border: 1px solid var(--cc-line-strong);
    background: var(--cc-paper-light);
  }

  .cc-account-content table.woocommerce-orders-table td {
    padding: 6px 0;
    border-bottom: 0;
  }

  .cc-account-content table.woocommerce-orders-table td[data-title]::before {
    display: block;
    margin-bottom: 3px;
    color: var(--cc-ink-soft);
    content: attr(data-title);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .075em;
    text-transform: uppercase;
  }

  .cc-account-content .woocommerce-orders-table__cell-order-actions {
    margin-top: 8px;
    padding-top: 12px !important;
    border-top: 1px solid var(--cc-line);
    text-align: left;
  }

  .cc-account-content .woocommerce-orders-table__cell-order-actions a.button {
    margin: 0 8px 8px 0;
  }
}

@media (max-width: 640px) {
  .cc-account-content #customer_login h2 {
    margin-bottom: 16px;
  }
}