/* =============================================================
   DPL account overrides
   Applies to: /account and every WooCommerce account endpoint
               (woocommerce/myaccount/*), on top of customer.css.

   customer.css is Dawn's, copied unchanged. Live runs Shopify's new
   customer accounts, so those pages never rendered on the storefront
   and there is no live screenshot to match — this file puts Dawn's
   account layout on the DPL tokens, the same way component-dpl-cart.css
   does for the cart.
   ============================================================= */

/* ── Section padding (Dawn's section-{{ id }}-padding, 36/36) ── */

.section-template--dpl__account-padding {
  padding-top: 27px;
  padding-bottom: 27px;
}

@media screen and (min-width: 750px) {
  .section-template--dpl__account-padding {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

/* ── Typography ───────────────────────────────────────────── */

.customer h1,
.customer h2,
.customer h3,
.customer__title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  color: #0D0D0D;
  letter-spacing: 0;
}

.customer h1,
.customer__title {
  font-size: 28px;
}

@media screen and (min-width: 750px) {
  .customer h1,
  .customer__title {
    font-size: 34px;
  }
}

.customer h2 {
  font-size: 18px;
}

.customer,
.customer p,
.customer td,
.customer th,
.customer address,
.customer label {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  color: #0D0D0D;
}

.customer p,
.customer address {
  color: #6B6B6B;
  font-size: 14px;
  font-style: normal;
  line-height: 1.6;
}

.customer a {
  color: #6B6B6B;
  font-size: 14px;
  text-underline-offset: 3px;
}

.customer a:hover {
  color: #FF9A01;
}

/* ── Buttons ──────────────────────────────────────────────── */

.customer button,
.customer .button,
.customer input[type='submit'],
.woocommerce-MyAccount-content .button {
  background: #FF9A01;
  color: #FFFFFF;
  box-shadow: none;
  border: none;
  border-radius: 20px;
  min-height: 44px;
  padding: 0 28px;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.customer button:hover,
.customer .button:hover,
.woocommerce-MyAccount-content .button:hover {
  background: #E88A00;
  color: #FFFFFF;
}

.customer button:after,
.customer .button:after,
.customer button:before,
.customer .button:before {
  content: none;
}

/* Dawn's secondary buttons: the address form's Cancel and the decline invite. */
.customer .addresses li > button,
.customer .addresses form button[type],
.customer button[name='decline'] {
  background: #FFFFFF;
  color: #0D0D0D;
  border: 1px solid #E5E5E5;
}

.customer .addresses li > button:hover,
.customer .addresses form button[type]:hover,
.customer button[name='decline']:hover {
  background: #F7F7F7;
  color: #0D0D0D;
}

/* ── Inputs ───────────────────────────────────────────────── */

.customer .field,
.customer .field input,
.customer select,
.customer input[type='text'],
.customer input[type='email'],
.customer input[type='tel'],
.customer input[type='password'],
.customer .select2-container .select2-selection {
  border-radius: 20px;
}

.customer .field:after,
.customer .field:before {
  border-radius: 20px;
}

.customer .field input,
.customer select,
.customer input.input-text {
  border: 1px solid #E5E5E5;
  background: #FFFFFF;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  box-shadow: none;
}

.customer .field input:focus,
.customer select:focus,
.customer input.input-text:focus {
  border-color: #FF9A01;
  outline: none;
  box-shadow: none;
}

/* ── Login / recover / register toggle ────────────────────── */

/*
 * customer.css hides #recover and shows #login by default, and swaps them on
 * `#recover:target`. Dawn had no third block. The register block that
 * form-login.php adds sits after #login and stays visible, as WooCommerce's own
 * login page shows both; the "Account aanmaken" link only scrolls to it. It is
 * hidden while the recover form is open, so that step stays one question.
 * (A rule the other way round is impossible: `~` only matches forwards, and
 * #login precedes #register.)
 */
#recover:target ~ #register,
#recover:target ~ #register + div {
  display: none;
}

#register {
  scroll-margin-top: 20rem;
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid #E5E5E5;
}

.customer .dpl-rememberme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: #6B6B6B;
  cursor: pointer;
}

.customer .dpl-rememberme input {
  width: auto;
  margin: 0;
  accent-color: #FF9A01;
}

/* ── Account: the two-column row ──────────────────────────── */

.customer.account > div:first-of-type,
.customer.order > div:first-of-type {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  border-bottom: 1px solid #E5E5E5;
  padding-bottom: 16px;
}

.customer.account h1 + a .svg-wrapper,
.customer.order h1 + a .svg-wrapper {
  width: 15px;
  margin-right: 8px;
}

.dpl-account-aside {
  margin-top: 40px;
}

@media screen and (min-width: 990px) {
  .dpl-account-aside {
    flex: 0 0 280px;
    margin-top: 0;
  }
}

.dpl-account-aside address {
  margin-bottom: 12px;
}

.dpl-account-aside .woocommerce-MyAccount-navigation {
  margin-top: 24px;
  border-top: 1px solid #E5E5E5;
  padding-top: 16px;
}

.dpl-account-aside .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  text-align: left;
}

.dpl-account-aside .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid #E5E5E5;
}

.dpl-account-aside .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}

.dpl-account-aside .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 12px 0;
  font-size: 14px;
  text-decoration: none;
}

.dpl-account-aside .woocommerce-MyAccount-navigation .is-active > a,
.dpl-account-aside .woocommerce-MyAccount-navigation a[aria-current='page'] {
  color: #0D0D0D;
  font-weight: 400;
}

.dpl-account-aside .woocommerce-MyAccount-navigation .is-active > a::before,
.dpl-account-aside .woocommerce-MyAccount-navigation a[aria-current='page']::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 100px;
  background: #FF9A01;
  margin-right: 10px;
  vertical-align: middle;
}

/* ── Order history table ──────────────────────────────────── */

.customer table {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  border-bottom-color: #E5E5E5;
}

@media screen and (min-width: 750px) {
  .customer table {
    box-shadow: none;
    border: 1px solid #E5E5E5;
    border-radius: 20px;
    overflow: hidden;
  }
}

.customer thead th {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B6B6B;
}

.customer tbody tr,
.customer thead::after,
.customer tfoot::before {
  border-top-color: #E5E5E5;
  background-color: #E5E5E5;
}

.customer tbody tr {
  background: transparent;
}

.customer table td:first-of-type a {
  box-shadow: none;
  border: 1px solid #E5E5E5;
  border-radius: 20px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #0D0D0D;
}

.customer table td:first-of-type a:hover {
  box-shadow: none;
  border-color: #FF9A01;
  color: #FF9A01;
}

/*
 * customer.css gives `th` and `td:first-of-type` different horizontal padding (0 vs 2.2rem),
 * which leaves the order-history headers offset from the cells under them. One padding for
 * every cell instead, and only the total column right-aligned.
 */
@media screen and (min-width: 750px) {
  .customer .order-history th,
  .customer .order-history td,
  .customer .order-history th:first-of-type,
  .customer .order-history td:first-of-type {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
  }

  .customer .order-history th:last-child,
  .customer .order-history td:last-child {
    text-align: right;
  }
}

@media screen and (max-width: 749px) {
  .customer td::before {
    color: #6B6B6B;
    font-size: 12px;
    letter-spacing: 0.08em;
  }
}

/* ── WooCommerce's own address / account-details forms ────── */

.woocommerce-MyAccount-content .form-row,
.woocommerce-address-fields .form-row {
  display: flex;
  flex-direction: column;
  margin: 0 0 16px;
  text-align: left;
}

.woocommerce-MyAccount-content label,
.woocommerce-address-fields label {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #6B6B6B;
  margin-bottom: 6px;
}

.woocommerce-MyAccount-content .required {
  color: #FF9A01;
  text-decoration: none;
}

.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #E5E5E5;
  border-radius: 20px;
  background: #FFFFFF;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: #0D0D0D;
}

.woocommerce-MyAccount-content fieldset {
  border: 1px solid #E5E5E5;
  border-radius: 20px;
  padding: 16px 20px;
  margin: 24px 0;
}

.woocommerce-MyAccount-content legend {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #0D0D0D;
  padding: 0 8px;
}

.woocommerce-Address {
  text-align: left;
}

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

@media screen and (min-width: 750px) {
  .woocommerce-Addresses {
    display: flex;
    gap: 32px;
  }

  .woocommerce-Addresses .woocommerce-Address {
    flex: 1 1 0;
  }
}

/* ── Shared with the checkout: WooCommerce markup its own stylesheet would
      have handled, and the order that the thank-you page and
      /account/view-order both render. This file is loaded on both. ── */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Free extras, on the checkout summary and on a placed order. */
.dpl-order__free {
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FF9A01;
}

/* WooCommerce marks the order number, date and status with <mark>; without its
   stylesheet the browser paints them highlighter-yellow. */
.customer mark,
.woocommerce-MyAccount-content mark {
  background: transparent;
  color: #0D0D0D;
  font-weight: 400;
}

/* ── Order details table (thank-you page and /account/view-order) ──
   customer.css styles `.customer table` for Dawn's own order page; these rules
   put WooCommerce's order-details markup on the same grid. */

.woocommerce-order .woocommerce-table--order-details,
.woocommerce-MyAccount-content .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
}

.woocommerce-order .woocommerce-table--order-details th,
.woocommerce-order .woocommerce-table--order-details td,
.woocommerce-MyAccount-content .woocommerce-table--order-details th,
.woocommerce-MyAccount-content .woocommerce-table--order-details td {
  text-align: left;
  padding: 12px 0;
}

.woocommerce-order .woocommerce-table--order-details thead th,
.woocommerce-MyAccount-content .woocommerce-table--order-details thead th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B6B6B;
}

/*
 * customer.css right-aligns `.order thead th:nth-last-child(-n + 3)` — written for Dawn's
 * five-column order table. WooCommerce's has two columns, so that rule catches the product
 * header as well and out-specifies a plain `th` selector; this matches its specificity.
 */
.woocommerce-order .woocommerce-table--order-details thead th.product-name,
.woocommerce-MyAccount-content .woocommerce-table--order-details thead th.product-name {
  text-align: left;
}

.woocommerce-order .woocommerce-table--order-details .product-total,
.woocommerce-order .woocommerce-table--order-details tfoot td,
.woocommerce-MyAccount-content .woocommerce-table--order-details .product-total,
.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot td {
  text-align: right;
}

.woocommerce-order .woocommerce-table--order-details tbody tr,
.woocommerce-MyAccount-content .woocommerce-table--order-details tbody tr {
  border-top: 1px solid #E5E5E5;
}

.woocommerce-order .woocommerce-table--order-details tfoot th,
.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot th {
  font-weight: 400;
  color: #6B6B6B;
  padding: 6px 0;
}

.woocommerce-order .woocommerce-table--order-details tfoot td,
.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot td {
  padding: 6px 0;
}

/* The grand total is the last footer row (inc/checkout.php reorders it there), which
   customer.css sets larger — keep that, on the DPL scale. */
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-of-type th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-of-type td,
.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-of-type th,
.woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-of-type td {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #0D0D0D;
  border-top: 1px solid #E5E5E5;
  padding-top: 14px;
  padding-bottom: 14px;
}

@media screen and (max-width: 749px) {
  .woocommerce-order .woocommerce-table--order-details tfoot tr:last-of-type td::before,
  .woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-of-type td::before {
    font-size: 14px;
  }
}

/* "Customer of our old shop? Set your password": the first thing on the sign-in page. */
.dpl-login-migrated {
  margin: 0 0 24px;
  font-size: 15px;
}
.dpl-login-migrated a {
  font-weight: 500;
  text-underline-offset: 3px;
}