/* My account and the login screen. */

/* The page template's section already spaces the page from the header and
   footer, as on the home page. */
.pp-account { padding-block: 0; }

/* woocommerce-layout.css floats the content at 68% beside a 30% sidebar.
   Here the navigation is a row of pills above it, and the uncleared float
   let the footer ride up beside the content. */
.pp-account .woocommerce-MyAccount-navigation,
.pp-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

.pp-account__head { margin-block-end: var(--pp-sp-5); }

.pp-account__greeting {
  display: flex;
  align-items: center;
  gap: var(--pp-sp-3);
  margin: 0 0 var(--pp-sp-2);
  font-size: var(--pp-fs-3xl);
}

.pp-account__lead { margin: 0; color: var(--pp-muted); }

.pp-account__nav { margin-block-end: var(--pp-sp-6); }

/* Account tabs: hairline edge and a soft drop so the pills lift off the
   near-identical page background. */
.pp-account__nav .pp-pill {
  background: #fff8;
  border: 1px solid var(--pp-line);
  box-shadow: 0 1px 2px rgba(10, 37, 71, .04), 0 4px 12px rgba(10, 37, 71, .06);
  transition: background var(--pp-transition), color var(--pp-transition),
              border-color var(--pp-transition), box-shadow var(--pp-transition),
              transform var(--pp-transition);
}

.pp-account__nav .pp-pill:hover {
  border-color: var(--pp-divider);
  box-shadow: 0 2px 4px rgba(10, 37, 71, .05), 0 8px 18px rgba(10, 37, 71, .08);
  transform: translateY(-1px);
}

.pp-account__nav .pp-pill.is-active {
  background: var(--pp-red-gradient);
  background-origin: border-box;
  border-color: transparent;
  box-shadow: var(--pp-shadow-red);
}

.pp-account__section-title {
  margin-block-end: var(--pp-sp-4);
  font-size: var(--pp-fs-2xl);
}

.pp-order + .pp-order { margin-block-start: var(--pp-sp-7); }

/* ---------- Current order card ---------- */

.pp-order__card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pp-sp-5);
  padding: var(--pp-sp-5);
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
}

.pp-order__card .pp-timeline {
  grid-column: 1 / -1;
  margin-block-start: 0; /* the grid gap already spaces it */
}

.pp-order__row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--pp-sp-4);
  padding: var(--pp-sp-4);
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-sm);
}

.pp-order__row + .pp-order__row { margin-block-start: var(--pp-sp-3); }

.pp-order__meta {
  display: grid;
  grid-template-columns: auto;
  gap: 2px;
}

.pp-order__label {
  font-size: var(--pp-fs-xs);
  color: var(--pp-muted);
}

.pp-order__number {
  font-size: var(--pp-fs-lg);
  color: var(--pp-navy);
}

.pp-order__meta time {
  font-size: var(--pp-fs-sm);
  color: var(--pp-navy);
}

.pp-order__thumbs {
  display: flex;
  align-items: center;
  gap: var(--pp-sp-2);
}

.pp-order__thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--pp-radius-xs);
  background: var(--pp-tint);
  overflow: hidden;
}

.pp-order__thumb img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.pp-order__total { text-align: center; }

/* Divider between the products and the total, as in the mockup. */
.pp-order__card .pp-order__total,
.pp-order__row .pp-order__total {
  padding-inline-start: var(--pp-sp-6);
  border-inline-start: 1px solid var(--pp-line);
}
.pp-order__total .pp-price { display: block; font-size: var(--pp-fs-2xl); }

.pp-order__go {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-tint);
  color: var(--pp-navy);
  transition: background var(--pp-transition), color var(--pp-transition);
}

.pp-order__go:hover { background: var(--pp-red); color: var(--pp-white); }

/* The chevron points along reading order in both directions. */
[dir="rtl"] .pp-order__go svg { transform: scaleX(-1); }

.pp-order__reorder { white-space: nowrap; }

/* ---------- Status timeline ---------- */

.pp-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--pp-sp-2);
  margin: var(--pp-sp-5) 0 0;
  padding: var(--pp-sp-5) 0 0;
  border-block-start: 1px solid var(--pp-line);
  list-style: none;
}

.pp-timeline__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp-sp-2);
  font-size: var(--pp-fs-sm);
  font-weight: 600;
  color: var(--pp-muted);
  text-align: center;
}

.pp-timeline__dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-box);
  color: var(--pp-white);
}

.pp-timeline__item--done .pp-timeline__dot,
.pp-timeline__item--current .pp-timeline__dot {
  border-color: var(--pp-red);
  background: var(--pp-red-bright);
}

.pp-timeline__item--current { color: var(--pp-red); }
.pp-timeline__item--current .pp-timeline__dot { box-shadow: 0 0 0 4px var(--pp-red-soft); }

.pp-timeline__bar {
  width: clamp(24px, 8vw, 120px);
  height: 2px;
  margin-block-start: 12px;
  background: var(--pp-line);
}

.pp-timeline__bar--done { background: var(--pp-red); }

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

.pp-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--pp-sp-4);
}

.pp-shortcut {
  display: grid;
  gap: var(--pp-sp-1);
  padding: var(--pp-sp-5);
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-sm);
  color: var(--pp-navy);
  transition: transform var(--pp-transition), box-shadow var(--pp-transition);
}

.pp-shortcut:hover {
  transform: translateY(-2px);
  box-shadow: var(--pp-shadow);
  color: var(--pp-navy);
}

.pp-shortcut__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-block-end: var(--pp-sp-2);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-red-soft);
  color: var(--pp-red);
}

.pp-shortcut__title { font-weight: 800; }
.pp-shortcut__desc { font-size: var(--pp-fs-sm); color: var(--pp-muted); }

/* ---------- Empty / pagination ---------- */

.pp-account__empty { text-align: center; padding-block: var(--pp-sp-7); }

.pp-account__pagination {
  display: flex;
  justify-content: center;
  gap: var(--pp-sp-3);
  margin-block-start: var(--pp-sp-5);
}

/* ---------- Default WooCommerce endpoints ----------
   Addresses, the address form, account details and a single order use
   WooCommerce's own markup. With its stylesheet dequeued they showed bare
   browser controls; these rules bring them in line with the checkout.
   No card around the whole endpoint: it sits on the page background. */

/* Forms read better at a measure; tables and address cards use the full row
   like the orders list. */
.pp-account__content > form { max-width: 880px; }
.pp-account__content > p:first-child { color: var(--pp-ink-soft); }

.pp-account__content h2,
.pp-account__content h3,
.pp-account__content legend {
  margin: 0 0 var(--pp-sp-3);
  font-size: var(--pp-fs-xl);
  color: var(--pp-navy);
}

/* woocommerce-layout.css (kept for the checkout) floats .form-row-first/-last
   at 47% and .col-1/.col-2 at 48% with selectors such as
   ".woocommerce form .form-row-first", so the resets below are prefixed with
   .pp-account to outrank them. */

/* Fields: two columns for the first/last pairs, one otherwise. */
.pp-account__content .woocommerce-address-fields__field-wrapper,
.pp-account__content .woocommerce-EditAccountForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--pp-sp-4);
}

.pp-account__content .woocommerce-EditAccountForm > *,
.pp-account__content .woocommerce-address-fields__field-wrapper > * { grid-column: 1 / -1; }

.pp-account__content .form-row-first,
.pp-account__content .form-row-last { grid-column: auto; }

.pp-account__content .woocommerce-EditAccountForm > .clear { display: none; }

.pp-account .pp-account__content .form-row {
  float: none;
  width: auto;
  margin: 0 0 var(--pp-sp-4);
}

.pp-account__content .form-row label {
  display: block;
  margin-block-end: var(--pp-sp-2);
  font-size: var(--pp-fs-sm);
  font-weight: 600;
  color: var(--pp-navy);
}

.pp-account__content .form-row .required { color: var(--pp-red); text-decoration: none; }
.pp-account__content .form-row .optional { font-weight: 400; color: var(--pp-muted); }

.pp-account__content .input-text,
.pp-account__content select,
.pp-account__content .select2-container .select2-selection--single {
  width: 100%;
  height: 50px;
  padding-inline: var(--pp-sp-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  background: var(--pp-box);
  color: var(--pp-ink);
}

.pp-account__content .input-text:focus,
.pp-account__content select:focus,
.pp-account__content .select2-container--focus .select2-selection,
.pp-account__content .select2-container--open .select2-selection {
  outline: none;
  border-color: var(--pp-red);
  box-shadow: 0 0 0 4px var(--pp-red-soft);
}

.pp-account__content .select2-container .select2-selection--single { display: flex; align-items: center; }
.pp-account__content .select2-container .select2-selection__rendered { padding: 0; line-height: 1.4; }
.pp-account__content .select2-container .select2-selection__arrow { inset-block: 0; inset-inline-end: var(--pp-sp-3); height: auto; }

.pp-account__content .form-row em,
.pp-account__content #account_display_name_description {
  display: block;
  margin-block-start: var(--pp-sp-1);
  font-size: var(--pp-fs-xs);
  font-style: normal;
  color: var(--pp-muted);
}

/* Password change group. */
.pp-account__content fieldset {
  margin: var(--pp-sp-2) 0 var(--pp-sp-5);
  padding: var(--pp-sp-4) var(--pp-sp-4) 0;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
}

.pp-account__content fieldset legend {
  padding-inline: var(--pp-sp-2);
  font-size: var(--pp-fs-md);
}

/* Show/hide password eye, inside the field at the end. */
.pp-account__content .password-input { position: relative; display: block; }
.pp-account__content .password-input .input-text { padding-inline-end: 48px; }

.pp-account__content .show-password-input {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--pp-sp-2);
  width: 36px;
  border: 0;
  background: transparent;
  color: var(--pp-muted);
  cursor: pointer;
}

/* Save buttons. */
.pp-account__content button[name="save_address"],
.pp-account__content button[name="save_account_details"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: var(--pp-sp-3) var(--pp-sp-7);
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-red-gradient);
  box-shadow: var(--pp-shadow-red);
  font-weight: 700;
  color: var(--pp-white);
  cursor: pointer;
}

/* Addresses overview: two small cards side by side. */
.pp-account__content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pp-sp-4);
}

.pp-account__content .woocommerce-Addresses::before,
.pp-account__content .woocommerce-Addresses::after { display: none; }

.pp-account .pp-account__content .woocommerce-Addresses .woocommerce-Address {
  float: none;
  width: auto;
  padding: var(--pp-sp-5);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  background: var(--pp-box);
}

.pp-account__content .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pp-sp-2);
  margin-block-end: var(--pp-sp-3);
}

.pp-account__content .woocommerce-Address-title h2 { margin: 0; font-size: var(--pp-fs-lg); }

.pp-account__content .woocommerce-Address-title .edit {
  padding: var(--pp-sp-1) var(--pp-sp-3);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-red-soft);
  font-size: var(--pp-fs-sm);
  font-weight: 700;
  color: var(--pp-red);
}

.pp-account__content address {
  font-style: normal;
  line-height: 1.7;
  color: var(--pp-ink-soft);
}

/* Single order. */
.pp-account__content mark {
  padding: 0;
  background: none;
  font-weight: 700;
  color: var(--pp-navy);
}

.pp-account__content .woocommerce-order-details,
.pp-account__content .woocommerce-customer-details { margin-block-start: var(--pp-sp-5); }

.pp-account__content .shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  background: var(--pp-box);
  overflow: hidden;
  font-size: var(--pp-fs-sm);
}

.pp-account__content .shop_table th,
.pp-account__content .shop_table td {
  padding: var(--pp-sp-3) var(--pp-sp-4);
  text-align: start;
  border-block-end: 1px solid var(--pp-line);
}

.pp-account__content .shop_table thead th {
  background: var(--pp-tint);
  font-weight: 700;
  color: var(--pp-navy);
}

.pp-account__content .shop_table .product-total,
.pp-account__content .shop_table td:last-child { text-align: end; }

.pp-account__content .shop_table tfoot th { font-weight: 600; color: var(--pp-ink-soft); }

.pp-account__content .shop_table tfoot tr:last-child th,
.pp-account__content .shop_table tfoot tr:last-child td {
  border-block-end: 0;
  font-size: var(--pp-fs-md);
  font-weight: 800;
  color: var(--pp-navy);
}

.pp-account__content .shop_table .product-name a { font-weight: 600; color: var(--pp-navy); }
.pp-account__content .shop_table .product-quantity { color: var(--pp-muted); }

.pp-account__content .woocommerce-customer-details address {
  padding: var(--pp-sp-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  background: var(--pp-box);
}

.pp-account__content .woocommerce-customer-details address p { margin: var(--pp-sp-2) 0 0; }

.pp-account__content .order-again .button {
  display: inline-flex;
  margin-block-start: var(--pp-sp-4);
  padding: var(--pp-sp-3) var(--pp-sp-6);
  border: 2px solid var(--pp-red);
  border-radius: var(--pp-radius-pill);
  font-weight: 700;
  color: var(--pp-red);
}

/* ---------- Login ---------- */

.pp-login {
  display: grid;
  grid-template-columns: 1fr 460px;
  align-items: center;
  gap: var(--pp-sp-7);
  padding-block: var(--pp-sp-7);
}

.pp-login__art {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--pp-sp-5);
}

.pp-login__glyph { width: min(100%, 650px); height: auto; }

.pp-login__welcome { text-align: center; }
.pp-login__welcome h1 { font-size: var(--pp-fs-3xl); }
.pp-login__welcome p { margin: 0; color: var(--pp-muted); }

.pp-login__panel {
  padding: var(--pp-sp-6);
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-lg);
}

.pp-login__brand {
  display: grid;
  place-items: center;
  margin-block-end: var(--pp-sp-5);
}

.pp-login__brand img { max-height: 64px; width: auto; }

.pp-login__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pp-sp-2);
  margin-block-end: var(--pp-sp-5);
  padding: var(--pp-sp-1);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-tint);
}

.pp-login__tab {
  padding: var(--pp-sp-3);
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: transparent;
  font-weight: 700;
  color: var(--pp-muted);
  transition: background var(--pp-transition), color var(--pp-transition);
}

.pp-login__tab.is-active {
  background: var(--pp-red-gradient);
  color: var(--pp-white);
  box-shadow: var(--pp-shadow-red);
}

.pp-login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pp-sp-3);
  margin-block-end: var(--pp-sp-5);
}

.pp-login__remember {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-sp-2);
  font-size: var(--pp-fs-sm);
  color: var(--pp-muted);
}

.pp-login__remember input { accent-color: var(--pp-red); }

.pp-login__forgot { font-size: var(--pp-fs-sm); font-weight: 600; }

[dir="rtl"] .pp-login__pane .pp-btn svg { transform: scaleX(-1); }

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

@media (max-width: 1024px) {
  .pp-login { grid-template-columns: 1fr; }
  .pp-login__art { order: -1; }
  .pp-login__glyph { width: min(100%, 240px); }

  .pp-order__card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--pp-sp-4);
  }

  .pp-order__thumbs,
  .pp-order__card .pp-order__total { grid-column: 1 / -1; }

  .pp-order__card .pp-order__total,
  .pp-order__row .pp-order__total {
    padding-inline-start: 0;
    border-inline-start: 0;
    text-align: start;
  }

  .pp-order__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: var(--pp-sp-3);
  }

  .pp-order__reorder { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 700px) {
  .pp-timeline {
    flex-wrap: wrap;
    gap: var(--pp-sp-3);
  }

  .pp-timeline__bar { display: none; }
  .pp-timeline__item { flex-direction: row; }

  .pp-order__thumbs { flex-wrap: wrap; }
  .pp-order__total { text-align: start; }
  .pp-order__total .pp-price { font-size: var(--pp-fs-xl); }

  .pp-login__panel { padding: var(--pp-sp-4); }

  /* Phones: drop the cross artwork and the panel logo so the form starts
     near the top; the header already shows the logo. */
  .pp-login__glyph,
  .pp-login__brand { display: none; }

  /* Tighter rhythm once the artwork is gone. */
  .pp-login {
    gap: var(--pp-sp-4);
    padding-block: var(--pp-sp-3) var(--pp-sp-5);
  }

  .pp-login__welcome h1 { margin-block-end: var(--pp-sp-1); font-size: var(--pp-fs-2xl); }
  .pp-login__tabs { margin-block-end: var(--pp-sp-4); }
  .pp-login__tab { padding: var(--pp-sp-2); }
  .pp-login__row { margin-block-end: var(--pp-sp-4); }

  .pp-login__pane .pp-btn--lg {
    padding: var(--pp-sp-3) var(--pp-sp-5);
    font-size: var(--pp-fs-md);
  }

  /* Account forms and the addresses overview go to one column. */
  .pp-account__content .woocommerce-address-fields__field-wrapper,
  .pp-account__content .woocommerce-EditAccountForm,
  .pp-account__content .woocommerce-Addresses { grid-template-columns: 1fr; }

  .pp-account__content button[name="save_address"],
  .pp-account__content button[name="save_account_details"] { width: 100%; }

  .pp-account__content .shop_table th,
  .pp-account__content .shop_table td { padding: var(--pp-sp-3); }

  .pp-account__content fieldset { padding-inline: var(--pp-sp-3); }

  /* Five pills wrapped into three rows; scroll them in one, as on the
     archive. The negative margin lets them run to the screen edge. */
  .pp-account__nav {
    flex-wrap: nowrap;
    gap: var(--pp-sp-2);
    margin-inline: calc(-1 * var(--pp-gutter));
    padding: var(--pp-sp-1) var(--pp-gutter) var(--pp-sp-2);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pp-account__nav::-webkit-scrollbar { display: none; }
  /* Without flex-shrink: 0 the pills squeeze and the icons collapse to 0. */
  .pp-account__nav .pp-pill {
    flex-shrink: 0;
    padding: var(--pp-sp-2) var(--pp-sp-4);
  }

  .pp-account__nav .pp-pill svg { flex-shrink: 0; }

  /* Shortcuts: icon beside the text instead of three tall cards. */
  .pp-shortcut {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--pp-sp-4);
    align-items: center;
    padding: var(--pp-sp-4);
  }

  .pp-shortcut__icon { grid-row: span 2; margin: 0; }
  .pp-shortcut__title { align-self: end; }
  .pp-shortcut__desc { align-self: start; }
}