/* AyoPlus - My Account (/compte and its endpoints). Self-contained -
   defines its own tokens and resets, so it needs no base file.
   Split out of the former single cart.css; edit here, not there. */

/* ================= My Account (/compte and its endpoints) ================= */
/* Page shell: designed sidebar + content column. */

body.ayo-account-page .woocommerce {
  --ayo-ac-ink: #132747;
  --ayo-ac-text: #20324f;
  --ayo-ac-muted: #71819a;
  --ayo-ac-line: #e6edf5;
  --ayo-ac-line-soft: #eef2f6;
  --ayo-ac-red: #ed2638;
  --ayo-ac-red-dark: #d51f36;
  --ayo-ac-red-soft: #fff5f6;
  --ayo-ac-panel: #fbfcfe;

  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}

/* Only the sidebar and the content column share the row. Everything else
   WooCommerce prints in this wrapper - notices, and the login / lost-password
   forms shown to logged-out visitors - keeps the full width. */
body.ayo-account-page
  .woocommerce
  > *:not(.woocommerce-MyAccount-navigation):not(
    .woocommerce-MyAccount-content
  ) {
  flex: 1 1 100%;
}
body.ayo-account-page .woocommerce > .woocommerce-notices-wrapper {
  margin: 0;
}

/* Astra and WooCommerce both float these columns; the flex row replaces that. */
body.ayo-account-page .woocommerce-MyAccount-navigation,
body.ayo-account-page .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
}
body.ayo-account-page .woocommerce-MyAccount-navigation {
  flex: 0 0 250px;
}
body.ayo-account-page .woocommerce-MyAccount-content {
  flex: 1 1 0;
  min-width: 0;
}

/* Astra prints <header class="entry-header"> unconditionally in
   template-parts/content.php, with no hook to suppress the element itself. On
   the account screens it carries ast-header-without-markup - the theme's own
   flag for "nothing was rendered inside" - so all it contributes is empty
   vertical space above the design. */
body.ayo-account-page .entry-header.ast-header-without-markup {
  display: none;
}

/* Astra's dynamic CSS sets margin-top:60px;margin-bottom:60px on #primary
   inside this same breakpoint, which pushes the account design down the page.
   Scoped to body.ayo-account-page so it outranks that rule on specificity
   rather than relying on load order, and so it cannot reach any other page if
   a CSS optimiser ever merges this file into a shared bundle. */
@media (min-width: 1200px) {
  body.ayo-account-page.ast-plain-container.ast-no-sidebar #primary {
    margin-top: 0 !important;
  }
}

body.ayo-account-page .entry-title,
body.ayo-account-page .page-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.15;
  color: var(--ayo-ac-ink, #132747);
}

/* ---------- account navigation ---------- */

.ayo-account-nav {
  background: #fff;
  border: 1px solid #e7edf5;
  border-radius: 12px;
  overflow: hidden;
  font-size: 15px;
}
.ayo-account-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ayo-account-nav li {
  border-bottom: 1px solid #eef2f6;
  margin: 0;
}
.ayo-account-nav li:last-child {
  border-bottom: 0;
}

.ayo-account-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  color: #20324f !important;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.3;
}
.ayo-account-nav a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #8494aa;
  position: relative;
  top: 3px;
  right: 4px;
}
.ayo-account-nav a:hover {
  background: #f8fafd;
  color: #d51f36 !important;
}
.ayo-account-nav a:hover svg {
  color: #d51f36;
}

.ayo-account-nav li.is-active {
  background: #fff5f6;
}
.ayo-account-nav li.is-active > a {
  color: #d51f36 !important;
  font-weight: 600;
}
.ayo-account-nav li.is-active > a svg {
  color: #d51f36;
}

/* ---------- dashboard (/compte) ---------- */

.ayo-dashboard-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ayo-line);
  border-radius: 12px;
}
.ayo-dashboard-avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #fff5f6;
  color: #d51f36;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 800;
}
.ayo-dashboard-hero-body {
  flex: 1 1 auto;
  min-width: 0;
}
.ayo-dashboard-hero-body h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #132747;
  line-height: 1.25;
}
.ayo-dashboard-hero-body p {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: #71819a;
}
.ayo-dashboard-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 14px;
  border: 1px solid #e1e8f0;
  border-radius: 9px;
  background: #fff;
  color: #20324f !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.ayo-dashboard-logout svg {
  width: 15px;
  height: 15px;
}
.ayo-dashboard-logout:hover {
  border-color: var(--ayo-red);
  color: var(--ayo-red) !important;
}

.ayo-dashboard-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.ayo-dashboard-tile {
  display: block;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--ayo-line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit !important;
}
.ayo-dashboard-tile:hover {
  border-color: #f6c3c9;
  background: #fffafb;
}
.ayo-dashboard-tile-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f2f6fb;
  color: #2589dd;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.ayo-dashboard-tile-icon svg {
  width: 19px;
  height: 19px;
}
.ayo-dashboard-tile-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #132747;
}
.ayo-dashboard-tile-text {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: #71819a;
}

/* ================= account content column ================= */
/* Shared by every endpoint's content: orders, downloads, addresses, details.
   .ayo-orders is the orders screen; .ayo-account is everything else. */

.ayo-orders,
.ayo-account {
  /* Offset parent for the absolutely positioned view toggle. */
  position: relative;

  --ayo-red: #ed2638;
  --ayo-red-dark: #d51f36;
  --ayo-ink: #132747;
  --ayo-muted: #71819a;
  --ayo-line: #e6edf5;
  --ayo-panel: #fbfcfe;

  color: var(--ayo-ink);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ayo-orders *,
.ayo-orders *::before,
.ayo-orders *::after,
.ayo-account *,
.ayo-account *::before,
.ayo-account *::after {
  box-sizing: border-box;
}
.ayo-orders svg,
.ayo-account svg {
  width: 1em;
  height: 1em;
  display: block;
}

.ayo-orders-notice {
  border: 1px solid #d9efdf;
  border-radius: 12px;
  background: #f6fbf8;
  display: flex;
  align-items: center;
  gap: 14px;
  /* Right padding clears the absolutely positioned view toggle. */
  padding: 16px 104px 16px 18px;
  color: #48647e;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.ayo-orders-notice-icon {
  flex-shrink: 0;
  color: #0aa855;
  font-size: 22px;
  display: block;
}

/* ---------- view toggle ---------- */
/* Icon-only and lifted out of the flow into the notice band's top-right corner,
   so switching layouts costs no vertical space of its own. The notice reserves
   room for it on the right so its text never runs underneath. */

.ayo-view-toggle {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e1e8f0;
  border-radius: 11px;
  background: #fff;
}
.ayo-view-option {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #536b91;
  line-height: 0;
  cursor: pointer;
  box-shadow: none;
  display: inline-grid;
  place-items: center;
}
.ayo-view-option svg {
  width: 16px;
  height: 16px;
}
.ayo-view-option:hover {
  color: var(--ayo-red);
}
.ayo-view-option.is-active {
  background: #fff5f6;
  color: var(--ayo-red);
}

/* ---------- list: ticket mode ---------- */
/* A two-column grid of detailed cards. Each ticket stacks its own header, date,
   total and actions vertically, and carries its item list and totals open, so it
   shows materially more than the one-line table row. */

.ayo-order-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The header labels only mean anything over aligned columns. */
.ayo-order-row.is-header {
  display: none;
}

.ayo-order-list.is-ticket {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Each ticket keeps its natural height instead of stretching to match the
     tallest card in its row. */
  align-items: start;
  gap: 12px;
}
.ayo-order-list.is-ticket .ayo-order-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "number status"
    "date   date"
    "total  actions";
  align-items: center;
  gap: 10px 12px;
  padding: 18px;
}
.ayo-order-list.is-ticket .ayo-order-identity {
  display: contents;
}
.ayo-order-list.is-ticket .ayo-order-id {
  grid-area: number;
}
.ayo-order-list.is-ticket .ayo-order-status-cell {
  grid-area: status;
  justify-self: end;
}
.ayo-order-list.is-ticket .ayo-order-date {
  grid-area: date;
}
.ayo-order-list.is-ticket .ayo-order-total {
  grid-area: total;
  align-items: flex-start;
  text-align: left;
  margin-top: 4px;
}
.ayo-order-list.is-ticket .ayo-row-actions {
  grid-area: actions;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ---------- list: table mode ---------- */

.ayo-order-list.is-table {
  /* One track set shared by the header row and every summary row, so the
     labels stay over their columns. The status track is sized for the longest
     journey label ("Expédition vers Madagascar"): the pill does not wrap, so a
     narrower track let it run over the total. */
  --ayo-order-cols: 110px 165px 225px minmax(0, 1fr) auto;

  gap: 0;
  background: #fff;
  border: 1px solid var(--ayo-line);
  border-radius: 12px;
  overflow: hidden;
}
.ayo-order-list.is-table .ayo-order-row.is-header {
  display: grid;
  grid-template-columns: var(--ayo-order-cols);
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 0 20px;
  background: var(--ayo-panel);
  border-bottom: 1px solid var(--ayo-line);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8494aa;
}
.ayo-order-list.is-table .ayo-order-row.is-header > :last-child {
  text-align: right;
}
.ayo-order-list.is-table .ayo-order-card {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--ayo-line);
}
.ayo-order-list.is-table .ayo-order-card:last-child {
  border-bottom: 0;
}
.ayo-order-list.is-table .ayo-order-summary {
  display: grid;
  grid-template-columns: var(--ayo-order-cols);
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
}
/* Lifts the number and the date out of their wrapper so each lands in its own
   column, without needing a second markup shape for this mode. */
.ayo-order-list.is-table .ayo-order-identity {
  display: contents;
}
.ayo-order-list.is-table .ayo-order-total {
  align-items: flex-start;
  text-align: left;
}
.ayo-order-list.is-table .ayo-order-details {
  background: var(--ayo-panel);
}

/* Five columns stop fitting well before the phone breakpoints, so narrow
   screens always get the ticket presentation whichever mode is selected. The
   toggle keeps working - the choice just has no visible effect until there is
   room for the columns again. */
@media (max-width: 900px) {
  /* One ticket per row once two no longer fit. */
  .ayo-order-list.is-ticket {
    grid-template-columns: 1fr;
  }
  .ayo-order-list.is-table {
    gap: 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .ayo-order-list.is-table .ayo-order-row.is-header {
    display: none;
  }
  .ayo-order-list.is-table .ayo-order-card {
    border: 1px solid var(--ayo-line);
    border-radius: 12px;
  }
  .ayo-order-list.is-table .ayo-order-summary {
    display: flex;
    gap: 18px;
    padding: 20px;
  }
  .ayo-order-list.is-table .ayo-order-identity {
    display: flex;
  }
  .ayo-order-list.is-table .ayo-order-total {
    align-items: flex-end;
    text-align: right;
  }
}

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

.ayo-order-card {
  background: #fff;
  border: 1px solid var(--ayo-line);
  border-radius: 12px;
}

.ayo-order-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
}

.ayo-order-identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ayo-order-id {
  font-size: 15px;
  font-weight: 700;
  color: var(--ayo-ink);
}
.ayo-order-id a {
  color: inherit;
  text-decoration: none;
}
.ayo-order-id a:hover {
  color: var(--ayo-red);
}

.ayo-order-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ayo-muted);
}
.ayo-order-date svg {
  width: 14px;
  height: 14px;
  color: #8494aa;
  flex-shrink: 0;
}

.ayo-status-pill {
  flex-shrink: 0;
  padding: 8px 10px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
.ayo-status-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ayo-status-pill.is-shipped {
  color: #0aa855;
  background: #eaf8ef;
}
.ayo-status-pill.is-progress {
  color: #2589dd;
  background: #e8f5ff;
}
.ayo-status-pill.is-pending {
  color: #d98b0b;
  background: #fff7e7;
}
.ayo-status-pill.is-cancelled {
  color: #7d899c;
  background: #f4f6f8;
}

.ayo-order-total {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}
.ayo-order-amount {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ayo-ink);
}
.ayo-order-total small {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ayo-muted);
}

.ayo-row-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ayo-view-btn {
  padding: 10px 14px;
  border: 0;
  border-radius: 9px;
  background: var(--ayo-red);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ayo-view-btn:hover {
  background: var(--ayo-red-dark);
}

.ayo-order-toggle {
  padding: 10px;
  border: 1px solid #e1e8f0;
  border-radius: 9px;
  background: #fff;
  color: #20324f;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.ayo-order-toggle svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}
.ayo-order-toggle:hover {
  border-color: var(--ayo-red);
  color: var(--ayo-red);
}
.ayo-order-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.ayo-more {
  position: relative;
}
.ayo-more summary {
  width: 37px;
  height: 37px;
  border: 1px solid #e1e8f0;
  background: #fff;
  border-radius: 9px;
  color: #20324f;
  display: grid;
  place-items: center;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
}
.ayo-more summary::-webkit-details-marker {
  display: none;
}
.ayo-more summary:hover {
  border-color: var(--ayo-red);
  color: var(--ayo-red);
}
.ayo-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--ayo-line);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(24, 39, 75, 0.12);
  padding: 6px;
  display: grid;
  gap: 2px;
}
.ayo-more-menu a {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ayo-ink) !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.ayo-more-menu a:hover {
  background: #f7f8fa;
  color: var(--ayo-red) !important;
}

/* ---------- expandable details ---------- */

.ayo-order-details {
  border-top: 1px solid var(--ayo-line);
  background: var(--ayo-panel);
  overflow: hidden;
  transition: height 0.25s ease;
}
.ayo-order-details[hidden] {
  display: none;
}
.ayo-order-details-inner {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ayo-order-details-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ayo-ink);
  line-height: 1.3;
}

.ayo-order-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ayo-order-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.ayo-order-item-media {
  display: block;
  line-height: 0;
}
.ayo-order-item-media a {
  display: block;
  line-height: 0;
}
.ayo-order-item-media img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--ayo-line);
  background: #fff;
  display: block;
}
.ayo-order-item-body {
  min-width: 0;
}
.ayo-order-item-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #253a5a;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ayo-order-item-qty {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ayo-muted);
}
.ayo-order-item-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--ayo-ink);
  white-space: nowrap;
}

.ayo-order-totals {
  background: #fff;
  border: 1px solid var(--ayo-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.ayo-order-totals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
  font-size: 14.5px;
  font-weight: 500;
  color: #314665;
}
.ayo-order-totals-row.is-grand {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--ayo-line);
  font-weight: 700;
  color: var(--ayo-red);
}
.ayo-order-totals-row.is-grand span:last-child {
  font-size: 15px;
}

/* ---------- footer / pagination / empty ---------- */

.ayo-orders-footer {
  min-height: 68px;
  border: 1px solid var(--ayo-line);
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  color: #647188;
  font-size: 13.5px;
  font-weight: 500;
}
.ayo-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ayo-page-btn {
  width: 30px;
  height: 28px;
  border: 1px solid #e1e8f0;
  background: #fff;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #8390a2 !important;
  text-decoration: none;
  font-size: 14px;
}
.ayo-page-btn:hover {
  border-color: var(--ayo-red);
  color: var(--ayo-red) !important;
}
.ayo-page-btn.is-current {
  color: var(--ayo-red) !important;
  border-color: var(--ayo-red);
  font-weight: 700;
}
.ayo-page-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.ayo-orders-empty {
  border: 1px solid var(--ayo-line);
  border-radius: 12px;
  background: #fff;
  padding: 40px 24px;
  text-align: center;
}
.ayo-orders-empty p {
  margin: 0 0 18px;
  color: var(--ayo-muted);
}

/* ================= downloads / addresses / account details ================= */

/* Intro band. Same shape as .ayo-orders-notice; the orders screen keeps the
   green reassurance tone, the other endpoints use the neutral blue one. */
.ayo-account-note {
  border: 1px solid #d9e7f5;
  border-radius: 12px;
  background: #f6faff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  color: #48647e;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.ayo-account-note-icon {
  flex-shrink: 0;
  color: #2589dd;
  font-size: 22px;
  display: block;
}

.ayo-account-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--ayo-ink);
  line-height: 1.3;
}

.ayo-account-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--ayo-red) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.ayo-account-back svg {
  width: 15px;
  height: 15px;
}
.ayo-account-back:hover {
  color: var(--ayo-red-dark) !important;
}

/* ---------- section card ---------- */

.ayo-account-section {
  background: #fff;
  border: 1px solid var(--ayo-line);
  border-radius: 12px;
  overflow: hidden;
}
.ayo-account-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ayo-line);
  background: var(--ayo-panel);
}
.ayo-account-section-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #eef4fb;
  color: #2589dd;
  display: grid;
  place-items: center;
}
.ayo-account-section-icon svg {
  width: 18px;
  height: 18px;
}
.ayo-account-section-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ayo-ink);
  line-height: 1.3;
}
.ayo-account-section-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ayo-account-empty {
  border: 1px solid var(--ayo-line);
  border-radius: 12px;
  background: #fff;
  padding: 40px 24px;
  text-align: center;
}
.ayo-account-empty-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: #f2f6fb;
  color: #8494aa;
  display: grid;
  place-items: center;
  font-size: 24px;
}
.ayo-account-empty p {
  margin: 0 0 18px;
  color: var(--ayo-muted);
}

/* ---------- downloads ---------- */

.ayo-downloads {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ayo-download {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--ayo-line);
  border-radius: 12px;
}
.ayo-download-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #eef4fb;
  color: #2589dd;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.ayo-download-body {
  flex: 1 1 auto;
  min-width: 0;
}
.ayo-download-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ayo-ink);
  line-height: 1.35;
}
.ayo-download-name a {
  color: inherit;
  text-decoration: none;
}
.ayo-download-name a:hover {
  color: var(--ayo-red);
}
.ayo-download-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ayo-muted);
}
/* Dot separators between whichever meta pieces WooCommerce decided to show. */
.ayo-download-meta > span + span::before {
  content: "·";
  margin-right: 8px;
}
.ayo-download-file {
  color: #314665;
}
.ayo-download-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--ayo-red);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.ayo-download-btn svg {
  width: 15px;
  height: 15px;
}
.ayo-download-btn:hover {
  background: var(--ayo-red-dark);
}

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

.ayo-address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.ayo-address-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ayo-line);
  border-radius: 12px;
}
.ayo-address-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ayo-address-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #eef4fb;
  color: #2589dd;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.ayo-address-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ayo-ink);
  line-height: 1.3;
}
.ayo-address-card address {
  margin: 0;
  flex: 1 1 auto;
  font-style: normal;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  color: #314665;
}
.ayo-address-card address.is-empty {
  color: var(--ayo-muted);
}
.ayo-address-edit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid #e1e8f0;
  border-radius: 9px;
  background: #fff;
  color: #20324f !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.ayo-address-edit svg {
  width: 14px;
  height: 14px;
}
.ayo-address-edit:hover {
  border-color: var(--ayo-red);
  color: var(--ayo-red) !important;
}

/* ---------- forms (edit address, account details) ---------- */

.ayo-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
}
.ayo-form-grid > .form-row,
.ayo-form-grid > p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.ayo-form-grid > .form-row-wide,
.ayo-form-grid > .form-row.form-row-wide {
  grid-column: 1 / -1;
}
.ayo-form-flex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}
/* WooCommerce's float clears have no job inside a grid, and would otherwise
   each consume a cell. */
.ayo-account-form .clear {
  display: none;
}

.ayo-account-form label {
  font-size: 13px;
  font-weight: 600;
  color: #314665;
  line-height: 1.35;
  margin: 0;
}
.ayo-account-form label .required,
.ayo-account-form label abbr.required {
  color: var(--ayo-red);
  border: 0;
  text-decoration: none;
}
.ayo-field-hint,
.ayo-account-form .description,
.ayo-account-form em {
  font-size: 12px;
  font-style: normal;
  color: var(--ayo-muted);
  line-height: 1.45;
}

.ayo-account-form input[type="text"],
.ayo-account-form input[type="email"],
.ayo-account-form input[type="tel"],
.ayo-account-form input[type="password"],
.ayo-account-form input[type="number"],
.ayo-account-form textarea,
.ayo-account-form select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #e1e8f0;
  border-radius: 9px;
  background: #fff;
  color: #20324f;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: none;
}
.ayo-account-form input:focus,
.ayo-account-form textarea:focus,
.ayo-account-form select:focus {
  border-color: #2589dd;
  box-shadow: 0 0 0 3px rgba(37, 137, 221, 0.12);
  outline: 0;
}
.ayo-account-form .woocommerce-input-wrapper {
  width: 100%;
}

/* Country / state pickers are select2 widgets, not plain selects. */
.ayo-account-form .select2-container .select2-selection--single {
  height: 44px;
  border: 1px solid #e1e8f0;
  border-radius: 9px;
  background: #fff;
}
.ayo-account-form .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  padding-left: 13px;
  color: #20324f;
  font-size: 14px;
}
.ayo-account-form .select2-container .select2-selection--single .select2-selection__arrow {
  height: 42px;
}

.ayo-account-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ayo-account-btn {
  padding: 12px 20px;
  border: 0;
  border-radius: 9px;
  background: var(--ayo-red);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}
.ayo-account-btn:hover {
  background: var(--ayo-red-dark);
}

@media (max-width: 620px) {
  .ayo-form-grid {
    grid-template-columns: 1fr;
  }
  .ayo-download {
    flex-wrap: wrap;
  }
  .ayo-download-btn {
    width: 100%;
    justify-content: center;
  }
  .ayo-account-section-body {
    padding: 18px;
  }
}

@media (max-width: 980px) {
  body.ayo-account-page .woocommerce {
    gap: 20px;
  }
  body.ayo-account-page .woocommerce-MyAccount-navigation {
    flex: 0 0 100%;
  }
  body.ayo-account-page .woocommerce-MyAccount-content {
    flex: 1 1 100%;
  }
}
@media (max-width: 720px) {
  /* Reflow rules for the flex summary. Ticket mode lays the same elements out
     on a grid that is already vertical, so it opts out of all of them. */
  .ayo-order-list:not(.is-ticket) .ayo-order-summary {
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px;
  }
  .ayo-order-list:not(.is-ticket) .ayo-order-identity {
    flex: 1 1 60%;
  }
  .ayo-order-list:not(.is-ticket) .ayo-order-total {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .ayo-order-list:not(.is-ticket) .ayo-row-actions {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .ayo-order-details-inner {
    padding: 18px;
  }
  .ayo-orders-footer {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 18px;
  }
  .ayo-dashboard-hero {
    flex-wrap: wrap;
  }
  .ayo-dashboard-logout {
    margin-left: auto;
  }
}
@media (max-width: 520px) {
  .ayo-order-list:not(.is-ticket) .ayo-order-status-cell {
    order: 3;
    flex: 1 1 100%;
  }
  .ayo-order-list:not(.is-ticket) .ayo-order-total {
    order: 2;
  }
  .ayo-order-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .ayo-order-item-media img {
    width: 40px;
    height: 40px;
  }
  .ayo-order-item-price {
    grid-column: 2;
  }
}

/* ---------- summary footer: payment badges ---------- */
/* La note « Vos données sont 100% sécurisées », le lien « Vider le panier » et
   sa fenêtre de confirmation vivaient ici : ils n'appartiennent qu'au panier,
   dont la page ne charge jamais cette feuille - ils s'affichaient donc sans
   aucune mise en forme. Ils sont désormais dans ayo-cart.css. */
.ayo-payment-methods {
  border-top: 1px solid var(--ayo-line);
  padding-top: 18px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}
.ayo-payment-badge {
  height: 29px;
  min-width: 52px;
  padding: 0 9px;
  border: 1px solid #e4e8ee;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  background: #fff;
  color: #46536b;
}
/* =======================================================================
   Connexion / inscription — surcharge de myaccount/form-login.php
   ======================================================================= */

.ayo-auth {
  --auth-rouge: #ff4f4f;
  --auth-rouge-fonce: #f13d3d;
  --auth-vert: #20a957;
  --auth-vert-fonce: #189048;
  --auth-navy: #17233b;
  --auth-muted: #68758a;
  --auth-bord: #e6ebf1;
  --auth-ombre: 0 10px 35px rgba(23, 35, 59, .055);
  --auth-radius: 16px;

  max-width: 1160px;
  margin: 0 auto;
  padding: 0px 24px 55px;
  color: var(--auth-navy);
  font-family: "DM Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing: border-box;
}

.ayo-auth *,
.ayo-auth *::before,
.ayo-auth *::after { box-sizing: inherit; }

/* -- Accroche ----------------------------------------------------------- */

.ayo-auth__hero {
  margin: 0 0 32px;
  text-align: center;
}

.ayo-auth__titre {
  margin: 0;
  font-size: clamp(27px, 4vw, 34px);
  letter-spacing: -1.2px;
  line-height: 1.15;
  color: var(--auth-navy);
}

.ayo-auth__accroche {
  margin: 9px 0 0;
  color: var(--auth-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* -- Les deux cartes ---------------------------------------------------- */

.ayo-auth__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.ayo-auth__grille--seule {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}

/* WooCommerce pose un clearfix sur .col2-set : deux pseudo-éléments en
   « display: table ». Dans un conteneur en flottement ils ne se voient pas,
   mais un pseudo-élément généré est un élément de grille à part entière - le
   ::before occupait donc la première cellule, poussant la connexion en
   colonne 2 et l'inscription à la ligne suivante, en diagonale. */
.ayo-auth__grille::before,
.ayo-auth__grille::after {
  display: none !important;
}

/* Astra encadre form.login et form.register. Le cadre de la carte suffit ;
   un second, à l'intérieur, double les bordures. */
.ayo-auth__form {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

/* Les classes u-column1 / u-column2 / col-1 / col-2 de WooCommerce restent sur
   les cartes pour ne rien casser ailleurs, mais leur mise en page ne doit plus
   agir : WooCommerce leur donne « float: left; width: 48% », ce qui réduisait
   chaque carte à 48 % de sa cellule de grille - 262 px au lieu de 545.
   Ces règles-là viennent de sélecteurs à specificité (0,3,0), d'où
   l'!important plutôt qu'une surenchère de sélecteurs. */
.ayo-auth__grille > .ayo-auth__carte {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}

.ayo-auth__carte {
  padding: 30px;
  border: 1px solid var(--auth-bord);
  border-radius: var(--auth-radius);
  background: #fff;
  box-shadow: var(--auth-ombre);
}

.ayo-auth__pastille {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 0 20px;
  border-radius: 13px;
}

.ayo-auth__pastille--rouge { background: #fff0f0; color: var(--auth-rouge); }
.ayo-auth__pastille--verte { background: #effaf2; color: var(--auth-vert); }

.ayo-auth__carte-titre {
  margin: 0;
  font-size: 25px;
  letter-spacing: -.5px;
  line-height: 1.2;
  color: var(--auth-navy);
}

.ayo-auth__carte-sous-titre {
  margin: 7px 0 28px;
  color: var(--auth-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* -- Champs ------------------------------------------------------------- */

.ayo-auth__champ {
  margin: 0 0 19px !important;
  padding: 0 !important;
}

.ayo-auth__champ label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--auth-navy);
}

.ayo-auth__champ .required {
  color: var(--auth-rouge);
  border: 0;
  text-decoration: none;
}

.ayo-auth__saisie {
  position: relative;
  display: block;
}

.ayo-auth__icone {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: #8290a5;
  pointer-events: none;
}

.ayo-auth__saisie input {
  width: 100%;
  height: 49px;
  margin: 0;
  padding: 0 44px 0 43px;
  border: 1px solid #dce3eb;
  border-radius: 10px;
  background: #fff;
  color: var(--auth-navy);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ayo-auth__saisie input::placeholder { color: #9aa6b8; }

.ayo-auth__saisie input:focus {
  border-color: #ff9a9a;
  box-shadow: 0 0 0 3px #fff0f0;
}

/* Astra habille tout <button> : fond rouge, bordure, ombre au focus. Sans ces
   remises à zéro sur les quatre états, l'œil devenait une pastille rouge dès
   qu'on cliquait dessus. */
.ayo-auth__oeil,
.ayo-auth__oeil:hover,
.ayo-auth__oeil:focus,
.ayo-auth__oeil:active {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  width: auto;
  height: auto;
  padding: 6px;
  border: 0 !important;
  border-radius: 6px;
  background: none !important;
  box-shadow: none !important;
  color: #8290a5;
  cursor: pointer;
  outline: none;
}

.ayo-auth__oeil:hover,
.ayo-auth__oeil.is-actif { color: var(--auth-navy) !important; }

.ayo-auth__oeil:focus-visible {
  box-shadow: 0 0 0 3px #fff0f0 !important;
}

/* Le bouton d'envoi, lui, doit garder son aplat : Astra ne doit pas le
   repeindre non plus. */
.ayo-auth__bouton,
.ayo-auth__bouton:hover,
.ayo-auth__bouton:focus {
  border: 0 !important;
  box-shadow: none !important;
}

/* -- Se souvenir / bouton ----------------------------------------------- */

.ayo-auth__actions {
  margin: 0 !important;
  padding: 0 !important;
}

.ayo-auth__souvenir {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 2px 0 20px !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ayo-auth__souvenir input {
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  accent-color: var(--auth-rouge);
}

.ayo-auth__bouton {
  display: block;
  width: 100%;
  height: 52px !important;
  padding: 0 20px !important;
  border: 0;
  border-radius: 10px;
  background: var(--auth-rouge);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 52px;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.ayo-auth__bouton:hover {
  background: var(--auth-rouge-fonce);
  color: #fff;
  transform: translateY(-1px);
}

.ayo-auth__bouton--vert { background: var(--auth-vert); }
.ayo-auth__bouton--vert:hover { background: var(--auth-vert-fonce); }

.ayo-auth__oubli {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 0 !important;
  padding: 18px 0 0;
  border-top: 1px solid var(--auth-bord);
  color: var(--auth-muted);
  font-size: 13px;
}

.ayo-auth__oubli a,
.ayo-auth .woocommerce-privacy-policy-link {
  color: var(--auth-rouge);
  font-weight: 700;
  text-decoration: none;
}

.ayo-auth__oubli a:hover { text-decoration: underline; }

/* -- Règles de mot de passe / confidentialité --------------------------- */

.ayo-auth__regles {
  margin: -4px 0 20px;
  padding: 12px 14px;
  list-style: none;
  border: 1px solid #d4f0dc;
  border-radius: 11px;
  background: #effaf2;
}

.ayo-auth__regles li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 6px 0;
  color: #355c44;
  font-size: 11.5px;
  line-height: 1.45;
}

.ayo-auth__regles li::before {
  content: "✓";
  flex: none;
  color: var(--auth-vert);
  font-weight: 900;
}

.ayo-auth__note,
.ayo-auth .woocommerce-privacy-policy-text p {
  margin: 0 0 20px;
  color: var(--auth-muted);
  font-size: 12px;
  line-height: 1.6;
}

/* -- Bandeau d'atouts --------------------------------------------------- */

.ayo-auth__atouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 22px 0 0;
  padding: 20px 22px;
  list-style: none;
  border: 1px solid var(--auth-bord);
  border-radius: var(--auth-radius);
  box-shadow: var(--auth-ombre);
  background: #fff;
}

.ayo-auth__atout {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 11px;
  margin: 0;
}

.ayo-auth__atout-icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.ayo-auth__atout-icone--bleu   { background: #eef6ff; color: #2878df; }
.ayo-auth__atout-icone--vert   { background: #effbf3; color: #18a558; }
.ayo-auth__atout-icone--violet { background: #f6f0ff; color: #805ad5; }
.ayo-auth__atout-icone--jaune  { background: #fff8e9; color: #d99700; }

.ayo-auth__atout strong {
  display: block;
  margin: 2px 0 4px;
  font-size: 11.5px;
  font-weight: 800;
}

.ayo-auth__atout span > strong + * { margin: 0; }

.ayo-auth__atout > span:last-child {
  color: var(--auth-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

/* -- Messages WooCommerce dans la page ---------------------------------- */

.ayo-auth ~ .woocommerce-notices-wrapper,
.woocommerce-notices-wrapper:has(+ .ayo-auth) {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* -- Adaptations ------------------------------------------------------- */

@media (max-width: 680px) {
  .ayo-auth { padding: 35px 14px 40px; }
  .ayo-auth__grille { grid-template-columns: 1fr; }
  .ayo-auth__carte { padding: 23px; }
  .ayo-auth__atouts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
  .ayo-auth__atouts { grid-template-columns: 1fr; }
}