/*
 * WDS customer My Account — account shell, sidebar and dashboard (dev.363)
 *
 * Single source for the logged-in account layout. It replaces the dashboard, navigation and
 * shell rules that were spread across ~40 legacy layers in customer-account.css and
 * customer-portal.css (those rules were removed; the login/registration screen keeps its own).
 *
 * Layout model
 *   .woocommerce (grid) ─┬─ .wdsbm-account-sidebar   (printed by the plugin around the menu;
 *                        │     └─ theme wrapper(s)    Kadence adds .account-navigation-wrap here)
 *                        │          ├─ .wdsbm-account-identity
 *                        │          └─ nav.woocommerce-MyAccount-navigation
 *                        └─ .woocommerce-MyAccount-content  (inline-size container)
 *                               └─ .wdsbm-dash (dashboard endpoint)
 *
 * Root cause of the old "name stacked one letter per line" bug: Kadence floats
 * .account-navigation-wrap at width:30%. Inside the plugin's 250px grid column that left ~75px,
 * and the avatar block's 40px image + 50px text indent squeezed the name to ~0px.
 * The theme wrapper is now neutralised below and the avatar is no longer printed.
 */

body.wdsbm-account-authenticated {
  --wdsbm-acc-sidebar: 252px;
  --wdsbm-acc-gap: var(--wdsbm-space-6);
  --wdsbm-acc-card-pad: var(--wdsbm-space-5);
  --wdsbm-acc-radius: var(--wdsbm-radius-lg);
  --wdsbm-acc-card-bg: var(--wdsbm-surface);
  --wdsbm-acc-soft-bg: var(--wdsbm-surface-alt);
  --wdsbm-acc-line: var(--wdsbm-border);
}

/* ---------- Page shell ---------- */

body.wdsbm-account-authenticated :is(.entry-title, .wp-block-post-title) {
  display: none;
}
body.wdsbm-account-authenticated :is(.entry-content, .wp-block-post-content) > .woocommerce {
  display: grid;
  grid-template-columns: var(--wdsbm-acc-sidebar) minmax(0, 1fr);
  gap: var(--wdsbm-acc-gap);
  align-items: start;
  width: auto;
  max-width: none;
  margin: 0;
  padding: var(--wdsbm-space-6) 0 var(--wdsbm-space-8);
  box-sizing: border-box;
}
/* WooCommerce/Kadence clearfix pseudo-elements would otherwise become grid items. */
body.wdsbm-account-authenticated :is(.entry-content, .wp-block-post-content) > .woocommerce::before,
body.wdsbm-account-authenticated :is(.entry-content, .wp-block-post-content) > .woocommerce::after {
  content: none;
  display: none;
}
body.wdsbm-account-authenticated .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}
body.wdsbm-account-authenticated .woocommerce > .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--wdsbm-ink);
  container: wds-account-content / inline-size;
}

/* ---------- Sidebar ---------- */

body.wdsbm-account-authenticated .wdsbm-account-sidebar {
  min-width: 0;
  padding: var(--wdsbm-space-2);
  background: var(--wdsbm-acc-card-bg);
  border: 1px solid var(--wdsbm-acc-line);
  border-radius: var(--wdsbm-acc-radius);
  box-sizing: border-box;
}
/* Neutralise the theme's own wrapper (Kadence: float + 30% width + border). */
body.wdsbm-account-authenticated .wdsbm-account-sidebar .account-navigation-wrap {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}
body.wdsbm-account-authenticated .wdsbm-account-sidebar .kadence-account-avatar {
  display: none; /* only reachable if a theme re-adds it; the plugin removes it server-side */
}
body.wdsbm-account-authenticated .wdsbm-account-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--wdsbm-space-3) var(--wdsbm-space-3) var(--wdsbm-space-4);
  margin-bottom: var(--wdsbm-space-2);
  border-bottom: 1px solid var(--wdsbm-acc-line);
}
body.wdsbm-account-authenticated .wdsbm-account-identity-label {
  color: var(--wdsbm-text-muted);
  font-size: var(--wdsbm-fs-2xs);
  font-weight: var(--wdsbm-fw-semibold);
  letter-spacing: var(--wdsbm-tracking-caps);
  line-height: 1.4;
  text-transform: uppercase;
}
body.wdsbm-account-authenticated .wdsbm-account-identity-name {
  color: var(--wdsbm-ink);
  font-size: var(--wdsbm-fs-lg);
  font-weight: var(--wdsbm-fw-bold);
  line-height: var(--wdsbm-lh-tight);
  letter-spacing: -.01em;
  overflow-wrap: anywhere; /* very long names wrap at the edge, never letter-by-letter */
}
body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation li {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 9px var(--wdsbm-space-3);
  /* Kadence draws its active/hover marker as a 5px side border with high-specificity selectors. */
  border: 0 !important;
  margin: 0 !important;
  border-radius: 10px;
  color: var(--wdsbm-ink);
  font-size: 14px;
  font-weight: var(--wdsbm-fw-semibold);
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color var(--wdsbm-duration) var(--wdsbm-ease), color var(--wdsbm-duration) var(--wdsbm-ease);
}
body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation li a:hover {
  background: var(--wdsbm-surface-sunken);
  color: var(--wdsbm-ink);
}
body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation li.is-active a,
body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation li.is-active a:hover {
  background: var(--wdsbm-ink);
  color: var(--wdsbm-on-ink);
  font-weight: var(--wdsbm-fw-semibold);
}
body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation li a:focus-visible {
  outline: 2px solid var(--wdsbm-focus-color);
  outline-offset: 2px;
}
body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: var(--wdsbm-space-2);
  padding-top: var(--wdsbm-space-2);
  border-top: 1px solid var(--wdsbm-acc-line);
}
body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--wdsbm-text-muted);
}
body.wdsbm-account-authenticated .woocommerce-MyAccount-navigation-link--downloads {
  display: none;
}

/* ---------- Dashboard: shared pieces ---------- */

.wdsbm-dash {
  display: grid;
  gap: var(--wdsbm-space-5);
  min-width: 0;
  color: var(--wdsbm-ink);
  font-size: var(--wdsbm-fs-base);
  line-height: var(--wdsbm-lh);
}
.wdsbm-dash :is(h1, h2, h3, p, ul, dl, dd) {
  margin: 0;
}
.wdsbm-dash :is(h1, h2, h3) {
  color: var(--wdsbm-ink);
  font-family: inherit;
  text-transform: none;
}
.wdsbm-dash-card {
  min-width: 0;
  background: var(--wdsbm-acc-card-bg);
  border: 1px solid var(--wdsbm-acc-line);
  border-radius: var(--wdsbm-acc-radius);
}
.wdsbm-dash-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wdsbm-surface-sunken);
  color: var(--wdsbm-ink);
}
.wdsbm-dash-icon svg {
  width: 20px;
  height: 20px;
}
.wdsbm-dash-arrow {
  display: inline-grid;
  flex: none;
  place-items: center;
}
.wdsbm-dash-arrow svg {
  width: 16px;
  height: 16px;
}
.wdsbm-dash-heading,
.wdsbm-dash-section-head h2 {
  font-size: var(--wdsbm-fs-lg);
  font-weight: var(--wdsbm-fw-bold);
  line-height: var(--wdsbm-lh-tight);
  letter-spacing: -.01em;
}

/* Links and buttons. The account stylesheet forces `.woocommerce-MyAccount-content a { color … !important }`,
   so button text colour has to answer with the same weight at a higher specificity. */
body.wdsbm-account-authenticated .wdsbm-dash a {
  text-decoration: none;
}
body.wdsbm-account-authenticated .wdsbm-dash a.wdsbm-dash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wdsbm-space-2);
  min-height: var(--wdsbm-control-h);
  padding: 0 var(--wdsbm-space-5);
  border: 1px solid var(--wdsbm-ink);
  border-radius: var(--wdsbm-radius-sm);
  background: var(--wdsbm-ink);
  color: var(--wdsbm-on-ink) !important;
  font-size: 14px;
  font-weight: var(--wdsbm-fw-semibold);
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color var(--wdsbm-duration) var(--wdsbm-ease), border-color var(--wdsbm-duration) var(--wdsbm-ease);
}
body.wdsbm-account-authenticated .wdsbm-dash a.wdsbm-dash-btn:hover {
  background: var(--wdsbm-ink-hover);
  border-color: var(--wdsbm-ink-hover);
}
body.wdsbm-account-authenticated .wdsbm-dash a.wdsbm-dash-btn.is-secondary {
  background: var(--wdsbm-surface);
  border-color: var(--wdsbm-border-strong);
  color: var(--wdsbm-ink) !important;
}
body.wdsbm-account-authenticated .wdsbm-dash a.wdsbm-dash-btn.is-secondary:hover {
  background: var(--wdsbm-surface-sunken);
  border-color: var(--wdsbm-ink);
}
body.wdsbm-account-authenticated .wdsbm-dash a.wdsbm-dash-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  color: var(--wdsbm-ink) !important;
  font-size: var(--wdsbm-fs-sm);
  font-weight: var(--wdsbm-fw-semibold);
  text-underline-offset: 3px;
}
body.wdsbm-account-authenticated .wdsbm-dash a.wdsbm-dash-link:hover {
  text-decoration: underline;
}
body.wdsbm-account-authenticated .wdsbm-dash a:focus-visible {
  outline: 2px solid var(--wdsbm-focus-color);
  outline-offset: 3px;
}

/* Whole-card links (stats and quick actions) */
body.wdsbm-account-authenticated .wdsbm-dash a.wdsbm-dash-card {
  color: var(--wdsbm-ink) !important;
  transition: border-color var(--wdsbm-duration) var(--wdsbm-ease), box-shadow var(--wdsbm-duration) var(--wdsbm-ease);
}
body.wdsbm-account-authenticated .wdsbm-dash a.wdsbm-dash-card:hover {
  border-color: var(--wdsbm-border-strong);
  box-shadow: var(--wdsbm-shadow-sm);
}
.wdsbm-dash-card-arrow {
  color: var(--wdsbm-text-subtle);
  transition: color var(--wdsbm-duration) var(--wdsbm-ease);
}
.wdsbm-dash a.wdsbm-dash-card:hover .wdsbm-dash-card-arrow {
  color: var(--wdsbm-ink);
}

/* ---------- Welcome ---------- */

.wdsbm-dash-welcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wdsbm-space-4) var(--wdsbm-space-6);
  padding: var(--wdsbm-space-6) 28px;
  background: var(--wdsbm-acc-soft-bg);
  border: 1px solid var(--wdsbm-acc-line);
  border-radius: var(--wdsbm-acc-radius);
}
.wdsbm-dash-welcome-copy {
  display: grid;
  flex: 1 1 320px;
  gap: 6px;
  min-width: 0;
}
.wdsbm-dash .wdsbm-dash-title {
  font-size: 30px;
  font-size: clamp(24px, 2.4cqi + 12px, 34px);
  font-weight: var(--wdsbm-fw-bold);
  line-height: 1.12;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.wdsbm-dash-welcome p {
  max-width: 56ch;
  color: var(--wdsbm-text-muted);
  font-size: 15px;
}

/* ---------- Statistics ---------- */

.wdsbm-dash-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wdsbm-space-4);
}
.wdsbm-dash a.wdsbm-dash-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wdsbm-space-4);
  padding: 18px var(--wdsbm-acc-card-pad);
}
.wdsbm-dash-stat-body {
  display: grid;
  min-width: 0;
}
.wdsbm-dash-stat-value {
  font-size: 28px;
  font-weight: var(--wdsbm-fw-bold);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.wdsbm-dash-stat-label {
  margin-top: 4px;
  font-size: 14px;
  font-weight: var(--wdsbm-fw-semibold);
  line-height: 1.3;
}
.wdsbm-dash-stat-hint {
  color: var(--wdsbm-text-muted);
  font-size: var(--wdsbm-fs-xs);
  line-height: 1.4;
}
.wdsbm-dash-stat.is-attention .wdsbm-dash-icon {
  background: var(--wdsbm-warning-soft);
  color: var(--wdsbm-warning);
}

/* ---------- Upcoming bookings ---------- */

.wdsbm-dash-bookings {
  overflow: hidden;
}
.wdsbm-dash-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wdsbm-space-2) var(--wdsbm-space-4);
  padding: 14px var(--wdsbm-acc-card-pad);
  border-bottom: 1px solid var(--wdsbm-acc-line);
}
.wdsbm-dash-booking {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) minmax(210px, 250px);
  gap: var(--wdsbm-space-5);
  align-items: start;
  padding: var(--wdsbm-acc-card-pad);
}
.wdsbm-dash-booking-media {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--wdsbm-radius);
  background: var(--wdsbm-surface-sunken);
}
.wdsbm-dash-booking-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wdsbm-dash-booking-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 22px;
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.03em;
  text-align: center;
}
.wdsbm-dash-booking-main {
  display: grid;
  gap: var(--wdsbm-space-2);
  align-content: start;
  min-width: 0;
}
.wdsbm-dash-eyebrow {
  color: var(--wdsbm-text-muted);
  font-size: var(--wdsbm-fs-2xs);
  font-weight: var(--wdsbm-fw-semibold);
  letter-spacing: var(--wdsbm-tracking-caps);
  text-transform: uppercase;
}
/* Size and weight come from the shared `.wdsbm-ui h3` card-title style in customer-portal.css. */
.wdsbm-dash-booking-main h3 {
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.wdsbm-dash .wdsbm-dash-booking-meta {
  display: grid;
  gap: 6px;
  padding: 0;
  list-style: none;
}
.wdsbm-dash-booking-meta li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  margin: 0;
  color: var(--wdsbm-text);
  font-size: 14px;
  line-height: 1.45;
}
.wdsbm-dash-booking-meta .wdsbm-dash-icon {
  width: 20px;
  height: 20px;
  background: none;
  color: var(--wdsbm-text-muted);
}
.wdsbm-dash-booking-meta .wdsbm-dash-icon svg {
  width: 17px;
  height: 17px;
}
.wdsbm-dash-booking-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.wdsbm-dash-booking-meta small {
  color: var(--wdsbm-text-muted);
  font-size: var(--wdsbm-fs-xs);
}
.wdsbm-dash-booking-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.wdsbm-dash-booking-side {
  display: grid;
  gap: var(--wdsbm-space-4);
  align-content: start;
  min-width: 0;
  padding-left: var(--wdsbm-space-5);
  border-left: 1px solid var(--wdsbm-acc-line);
}
.wdsbm-dash-figures {
  display: grid;
  gap: 6px;
}
.wdsbm-dash-figures > div {
  display: flex;
  justify-content: space-between;
  gap: var(--wdsbm-space-3);
  font-size: var(--wdsbm-fs-sm);
  line-height: 1.4;
}
.wdsbm-dash-figures dt {
  color: var(--wdsbm-text-muted);
  font-weight: var(--wdsbm-fw-regular);
}
.wdsbm-dash-figures dd {
  font-weight: var(--wdsbm-fw-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.wdsbm-dash-figures > .is-due {
  padding-top: 6px;
  border-top: 1px solid var(--wdsbm-acc-line);
}
.wdsbm-dash-figures > .is-due :is(dt, dd) {
  color: var(--wdsbm-ink);
  font-weight: var(--wdsbm-fw-bold);
}
.wdsbm-dash-booking-actions {
  display: grid;
  gap: var(--wdsbm-space-2);
}
.wdsbm-dash-booking-actions .wdsbm-dash-btn {
  width: 100%;
}

/* Empty state */
.wdsbm-dash-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wdsbm-space-4);
  padding: 18px var(--wdsbm-acc-card-pad);
}
.wdsbm-dash-empty-copy {
  display: grid;
  flex: 1 1 260px;
  gap: 2px;
  min-width: 0;
}
.wdsbm-dash-empty h2 {
  font-size: var(--wdsbm-fs-md);
  font-weight: var(--wdsbm-fw-bold);
  line-height: 1.3;
}
.wdsbm-dash-empty p {
  color: var(--wdsbm-text-muted);
  font-size: 14px;
}

/* ---------- Quick actions ---------- */

.wdsbm-dash-quick .wdsbm-dash-heading {
  margin-bottom: var(--wdsbm-space-3);
}
.wdsbm-dash-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wdsbm-space-3);
}
.wdsbm-dash a.wdsbm-dash-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "icon arrow"
    "title title"
    "text text";
  align-content: start;
  row-gap: 4px;
  padding: 18px;
}
.wdsbm-dash-action .wdsbm-dash-icon {
  grid-area: icon;
  margin-bottom: 10px;
}
.wdsbm-dash-action .wdsbm-dash-card-arrow {
  grid-area: arrow;
  align-self: start;
}
.wdsbm-dash-action-title {
  grid-area: title;
  font-size: 15px;
  font-weight: var(--wdsbm-fw-semibold);
  line-height: 1.3;
}
.wdsbm-dash-action-text {
  grid-area: text;
  color: var(--wdsbm-text-muted);
  font-size: var(--wdsbm-fs-sm);
  line-height: 1.45;
}

/* ---------- Promotional strip ---------- */

.wdsbm-dash-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wdsbm-space-4) var(--wdsbm-space-6);
  padding: 22px 28px;
  background: var(--wdsbm-surface-sunken);
  border: 1px solid var(--wdsbm-acc-line);
  border-radius: var(--wdsbm-acc-radius);
}
.wdsbm-dash-promo > div {
  display: grid;
  flex: 1 1 320px;
  gap: 4px;
  min-width: 0;
}
.wdsbm-dash-promo h2 {
  font-size: var(--wdsbm-fs-lg);
  font-weight: var(--wdsbm-fw-bold);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.wdsbm-dash-promo p {
  color: var(--wdsbm-text-muted);
  font-size: 14px;
}

/* ---------- Responsive: content width (container queries) ---------- */

@container wds-account-content (max-width: 860px) {
  .wdsbm-dash-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wdsbm-dash-booking {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .wdsbm-dash-booking-side {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    padding: var(--wdsbm-space-4) 0 0;
    border-left: 0;
    border-top: 1px solid var(--wdsbm-acc-line);
  }
}
@container wds-account-content (max-width: 560px) {
  .wdsbm-dash {
    gap: var(--wdsbm-space-4);
  }
  .wdsbm-dash-welcome,
  .wdsbm-dash-promo {
    padding: var(--wdsbm-space-5);
  }
  .wdsbm-dash-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wdsbm-space-3);
  }
  .wdsbm-dash a.wdsbm-dash-stat {
    padding: 14px var(--wdsbm-space-4);
  }
  .wdsbm-dash-stat-value {
    font-size: 24px;
  }
  .wdsbm-dash-booking {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: var(--wdsbm-space-4);
    padding: var(--wdsbm-space-4);
  }
  .wdsbm-dash-booking-media {
    border-radius: 10px;
  }
  .wdsbm-dash-booking-placeholder {
    font-size: 15px;
  }
  .wdsbm-dash-booking-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .wdsbm-dash-section-head {
    padding: 12px var(--wdsbm-space-4);
  }
  .wdsbm-dash-quick-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wdsbm-space-2);
  }
  /* One row per action on phones: icon | title + text | arrow */
  .wdsbm-dash a.wdsbm-dash-action {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title arrow"
      "icon text arrow";
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    padding: 14px var(--wdsbm-space-4);
  }
  .wdsbm-dash-action .wdsbm-dash-icon {
    width: 40px;
    height: 40px;
    margin: 0;
  }
  .wdsbm-dash-action .wdsbm-dash-card-arrow {
    align-self: center;
  }
  .wdsbm-dash-empty > .wdsbm-dash-icon {
    display: none;
  }
  .wdsbm-dash-welcome > .wdsbm-dash-btn,
  .wdsbm-dash-empty > .wdsbm-dash-btn,
  .wdsbm-dash-promo > .wdsbm-dash-btn {
    width: 100%;
  }
}
@container wds-account-content (max-width: 300px) {
  .wdsbm-dash-booking {
    grid-template-columns: minmax(0, 1fr);
  }
  .wdsbm-dash-booking-media {
    aspect-ratio: 16 / 9;
  }
  .wdsbm-dash-booking-media.is-placeholder {
    display: none;
  }
}

/* ---------- Orders (WooCommerce orders table) ---------- */

/* dev.365: on narrow content each order becomes a card of label/value rows. The legacy rule turned
   the table into display:block for sideways scrolling, which (combined with WooCommerce's
   small-screen row blocks) left every row in a shrink-to-fit box about half the card wide. */
@container wds-account-content (max-width: 700px) {
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.woocommerce-orders-table {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
  }
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.woocommerce-orders-table thead {
    display: none !important;
  }
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.woocommerce-orders-table tbody {
    display: grid !important;
    gap: var(--wdsbm-space-3);
    width: 100%;
  }
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.woocommerce-orders-table tr {
    display: block !important;
    width: 100%;
    padding: 4px var(--wdsbm-space-4) !important;
    background: var(--wdsbm-surface) !important;
    border: 1px solid var(--wdsbm-acc-line) !important;
    border-radius: var(--wdsbm-acc-radius) !important;
    box-sizing: border-box;
  }
  /* Block cells with a floated label keep each value ("230 $ for 1 item") together on the right. */
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.woocommerce-orders-table tbody :is(td, th) {
    display: block !important;
    width: auto !important;
    float: none !important;
    padding: 11px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--wdsbm-acc-line) !important;
    background: none !important;
    color: var(--wdsbm-ink) !important;
    font-size: 14px !important;
    font-weight: var(--wdsbm-fw-semibold) !important;
    line-height: 1.4;
    text-align: right !important;
    overflow-wrap: anywhere;
  }
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.woocommerce-orders-table tbody :is(td, th):first-child {
    border-top: 0 !important;
  }
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.woocommerce-orders-table tbody :is(td, th)::before {
    content: attr(data-title) !important;
    float: left !important;
    margin: 0 var(--wdsbm-space-3) 0 0 !important;
    color: var(--wdsbm-text-muted);
    font-size: 13px;
    font-weight: var(--wdsbm-fw-regular);
    text-align: left;
  }
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.woocommerce-orders-table tbody :is(td, th):not([data-title])::before {
    content: none !important;
  }
  /* Order number leads the card. */
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
    color: var(--wdsbm-ink) !important;
    font-weight: var(--wdsbm-fw-bold);
    text-decoration: none;
  }
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--wdsbm-space-2);
  }
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before {
    float: none !important;
    margin: 0 auto 0 0 !important;
  }
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
    display: inline-flex !important;
    align-items: center;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 var(--wdsbm-space-5) !important;
  }
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content .wdsbm-endpoint-heading + table.woocommerce-orders-table {
    margin-top: var(--wdsbm-space-4) !important;
  }
  /* Other WooCommerce tables (order details, totals) stay real tables at full width. */
  body.wdsbm-account-authenticated .woocommerce-MyAccount-content table.shop_table:not(.woocommerce-orders-table) {
    display: table !important;
    width: 100% !important;
    overflow: visible !important;
    table-layout: auto;
  }
}

/* ---------- Responsive: viewport (shell) ---------- */

@media (max-width: 1100px) {
  body.wdsbm-account-authenticated {
    --wdsbm-acc-sidebar: 220px;
    --wdsbm-acc-gap: var(--wdsbm-space-5);
  }
}
/* Tablet and phone: the menu sits above the content as a compact grid of buttons. */
@media (max-width: 960px) {
  body.wdsbm-account-authenticated :is(.entry-content, .wp-block-post-content) > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wdsbm-space-4);
    padding-top: var(--wdsbm-space-4);
  }
  body.wdsbm-account-authenticated .wdsbm-account-identity {
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: var(--wdsbm-space-2);
    padding: var(--wdsbm-space-2) var(--wdsbm-space-2) var(--wdsbm-space-3);
  }
  body.wdsbm-account-authenticated .wdsbm-account-identity-name {
    font-size: var(--wdsbm-fs-md);
  }
  body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation li a {
    justify-content: center;
    min-height: 44px;
    padding: 8px 10px;
    background: var(--wdsbm-acc-soft-bg);
    font-size: 13.5px;
    text-align: center;
  }
  body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  /* Tablet: trim the boxed article's inner padding so the theme gutters don't stack up. */
  body.wdsbm-account-authenticated #inner-wrap article .entry-content-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 600px) {
  /* Kadence bleeds the boxed article to an 8px edge on phones; a matching inner padding gives a 16px gutter. */
  body.wdsbm-account-authenticated #inner-wrap article .entry-content-wrap {
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (max-width: 520px) {
  body.wdsbm-account-authenticated .wdsbm-account-sidebar .woocommerce-MyAccount-navigation ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.wdsbm-account-authenticated .wdsbm-account-identity {
    grid-auto-flow: row;
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.wdsbm-account-authenticated .wdsbm-account-sidebar *,
  .wdsbm-dash * {
    transition: none !important;
  }
}