/* Force top alignment on the rows we tag */
[data-pe-align-top] {
  align-items: start !important;      /* grid */
  place-items: start !important;      /* grid shorthand */
  align-content: start !important;    /* grid/flex */
  align-items: flex-start !important; /* flex */
}
/* Ensure children align to top even if container rules are overridden */
[data-pe-align-top] > * { align-self: start !important; }

/* Keep generic fallbacks if your markup uses them */
.pe-submenu-header,
.submenu-header,
.pe-submenu-columns,
.submenu-columns {
  align-items: start !important;
  align-items: flex-start !important;
}

/* Disable sticky on the "Special Event Menus" heading when tagged */
[data-pe-no-sticky] {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* PE_ALIGN_HEADERS_PATCH: stronger top-alignment for Safari on submenu columns */
[data-pe-align-top] {
  align-items: start !important;       /* grid */
  align-items: flex-start !important;  /* flex */
  align-content: start !important;     /* grid/flex */
  place-items: start !important;       /* grid shorthand */
  justify-items: start !important;     /* grid inline axis */
  -webkit-box-align: start !important; /* old webkit flexbox */
  -webkit-align-items: flex-start !important;
  -ms-flex-align: start !important;
}
[data-pe-align-top] > * {
  align-self: start !important;
  justify-self: start !important;
  vertical-align: top !important;      /* when inline-block sneaks in */
}
/* If a columns wrapper sits inside the aligned container, ensure it also aligns */
[data-pe-align-top] .pe-submenu-columns,
[data-pe-align-top] .submenu-columns {
  align-items: flex-start !important;
  align-content: start !important;
}

/* PE_ALIGN_HEADERS_NUCLEAR: fast, scoped top-alignment for Private Events planner (Safari-safe) */
@supports (-webkit-touch-callout: none) {
  .pe-picker .items-center,
  .pe-picker [class*="items-center"] {
    align-items: flex-start !important;
  }
  .pe-picker .grid,
  .pe-picker .flex {
    align-items: start !important;
    align-items: flex-start !important;
    align-content: start !important;
    place-items: start !important;
    justify-items: start !important;
  }
  .pe-picker [class*="self-center"] {
    align-self: start !important;
  }
}

/* PE_ALIGN_HEADERS_LOCK: enforce top alignment in Safari inside planner sections */
@supports (-webkit-touch-callout:none){
  [data-section-id] .grid.items-center,
  [data-section-id] .flex.items-center,
  [data-section-id] [class*="items-center"],
  [data-section-id] fieldset .grid.items-center,
  [data-section-id] fieldset .flex.items-center,
  [data-section-id] fieldset [class*="items-center"]{
    align-items: start !important;
    align-items: flex-start !important;
    align-content: start !important;
    place-items: start !important;
    justify-items: start !important;
  }
  [data-section-id] [class*="self-center"]{
    align-self: start !important;
  }
}

/* PE_ALIGN_HEADERS_PIN: force grid/flex children to top inside planner sections (Safari-only) */
@supports (-webkit-touch-callout:none){
  [data-section-id] .grid.items-center > *,
  [data-section-id] .flex.items-center > * {
    align-self: start !important;
    vertical-align: top !important;
  }
  [data-section-id] fieldset .grid.items-center > *,
  [data-section-id] fieldset .flex.items-center > * {
    align-self: start !important;
    vertical-align: top !important;
  }
}

/* PE_ALIGN_HEADERS_HAS: Safari-only structural selector to top-align header row */
@supports (-webkit-touch-callout:none){
  [data-section-id] .grid.items-center:has(> .text-xs),
  [data-section-id] .grid.items-center:has(> .text-sm),
  [data-section-id] .grid.items-center:has(> .font-semibold),
  [data-section-id] .flex.items-center:has(> .text-xs),
  [data-section-id] .flex.items-center:has(> .text-sm),
  [data-section-id] .flex.items-center:has(> .font-semibold),
  [data-section-id] .grid.items-center.justify-between,
  [data-section-id] .flex.items-center.justify-between {
    align-items: start !important;
    align-items: flex-start !important;
    align-content: start !important;
    place-items: start !important;
    justify-items: start !important;
  }
  [data-section-id] .grid.items-center > *,
  [data-section-id] .flex.items-center > * {
    align-self: start !important;
    vertical-align: top !important;
  }
}

/* PE_ALIGN_3COL_FINAL: force top alignment for 3-col (1fr/auto/auto) grids on Private Events page */
.grid[class*="grid-cols-[1fr_auto_auto]"] {
  /* Both keywords for max Safari compatibility */
  align-items: start !important;
  align-items: flex-start !important;
}
.grid[class*="grid-cols-[1fr_auto_auto]"] > * {
  align-self: start !important;
}

/* PE_ALIGN_COLUMNS: lock Price/Total widths so columns align across header + rows (Safari + Chrome) */
:root {
  --pe-price-col: 6ch;   /* adjust if your numbers are wider */
  --pe-total-col: 7ch;
}

.grid[class*="grid-cols-[1fr_auto_auto]"] {
  grid-template-columns: 1fr var(--pe-price-col) var(--pe-total-col) !important;
}

.grid[class*="grid-cols-[1fr_auto_auto]"] > :nth-child(2),
.grid[class*="grid-cols-[1fr_auto_auto]"] > :nth-child(3) {
  justify-self: end !important;
  text-align: right;
  font-variant-numeric: tabular-nums; /* optional */
}

/* PE_ALIGN_COLUMNS_FIX: Right-align the last two cells (Price, Total) even if the DOM order varies */
.grid[class*="grid-cols-[1fr_auto_auto]"] > :nth-last-child(2),
.grid[class*="grid-cols-[1fr_auto_auto]"] > :last-child {
  justify-self: end !important;
  text-align: right !important;
  margin-right: 0 !important;
}

/* PE_ALIGN_COLUMNS_FORCE: lock placement + right-align of Price/Total for all rows (Safari-safe) */
:root {
  --pe-price-col: 6ch;   /* adjust if needed */
  --pe-total-col: 7ch;
}

.grid[class*="grid-cols-[1fr_auto_auto]"] {
  grid-template-columns: 1fr var(--pe-price-col) var(--pe-total-col) !important;
}

.grid[class*="grid-cols-[1fr_auto_auto]"] > :nth-last-child(2) {
  grid-column: 2 !important;
  justify-self: end !important;
  text-align: right !important;
  margin: 0 !important;
  padding-right: 0 !important;
}

.grid[class*="grid-cols-[1fr_auto_auto]"] > :last-child {
  grid-column: 3 !important;
  justify-self: end !important;
  text-align: right !important;
  margin: 0 !important;
  padding-right: 0 !important;
}

.grid[class*="grid-cols-[1fr_auto_auto]"] > :first-child {
  min-width: 0 !important;
}

/* PE_ALIGN_COLUMNS_FORCE: lock placement + right-align of Price/Total for all rows (Safari-safe) */
:root {
  --pe-price-col: 6ch;   /* adjust if needed */
  --pe-total-col: 7ch;
}

.grid[class*="grid-cols-[1fr_auto_auto]"] {
  grid-template-columns: 1fr var(--pe-price-col) var(--pe-total-col) !important;
}

.grid[class*="grid-cols-[1fr_auto_auto]"] > :nth-last-child(2) {
  grid-column: 2 !important;
  justify-self: end !important;
  text-align: right !important;
  margin: 0 !important;
  padding-right: 0 !important;
}

.grid[class*="grid-cols-[1fr_auto_auto]"] > :last-child {
  grid-column: 3 !important;
  justify-self: end !important;
  text-align: right !important;
  margin: 0 !important;
  padding-right: 0 !important;
}

.grid[class*="grid-cols-[1fr_auto_auto]"] > :first-child {
  min-width: 0 !important;
}

/* PE_ALIGN_COLUMNS_FINAL: normalize gaps to 0 and add padding on Price/Total */
:root {
  --pe-price-col: 6ch;     /* adjust if your numbers get wider */
  --pe-total-col: 7ch;
  --pe-gap-x: 1rem;        /* visual space between columns (was gap-x-4) */
}

/* Header + rows: lock widths and remove column gap (the misalignment culprit) */
.grid.grid-cols-\[1fr_auto_auto\] {
  grid-template-columns: 1fr var(--pe-price-col) var(--pe-total-col) !important;
  column-gap: 0 !important; /* same as gap-x-0 */
}

/* If any rows have extra children before the numbers, keep them in column 1 */
.grid.grid-cols-\[1fr_auto_auto\] > :not(:nth-last-child(-n+2)) {
  grid-column: 1 !important;
}

/* Price and Total: force into columns 2 and 3, right-align, add visual spacing */
.grid.grid-cols-\[1fr_auto_auto\] > :nth-last-child(2),
.grid.grid-cols-\[1fr_auto_auto\] > :last-child {
  padding-left: var(--pe-gap-x) !important; /* replaces the old grid gap */
  justify-self: end !important;
  text-align: right !important;
}

/* Let the first column shrink so numbers stay aligned */
.grid.grid-cols-\[1fr_auto_auto\] > :first-child { min-width: 0 !important; }