/* ==========================================================================
   LOX24 — SMS Price List module (v1.1)
   Scoped to .lox-pl so it can drop into any theme without collisions.
   ========================================================================== */

.lox-pl {
  /* brand */
  --lox-red: #CE2027;
  --lox-red-hover: #B01B21;
  --lox-red-light: #FF8A8E;

  /* ink / neutrals */
  --lox-ink: #0E1513;
  --lox-body: #535F5C;
  --lox-muted: #4E5A57;
  --lox-faint: #8A948F;
  --lox-faint-2: #B3BCB8;
  --lox-canvas: #FBFAF8;
  --lox-surface: #FFFFFF;
  --lox-surface-2: #F4F3F0;

  /* on dark */
  --lox-on-dark: #E7ECEA;
  --lox-on-dark-muted: #8B9894;

  /* lines + shadows */
  --lox-hair: rgba(14, 21, 19, .07);
  --lox-soft: rgba(14, 21, 19, .10);
  --lox-faint-line: rgba(14, 21, 19, .055);
  --lox-sh-1: 0 1px 3px rgba(14, 21, 19, .04);
  --lox-sh-lift: 0 18px 40px -18px rgba(14, 21, 19, .16);
  --lox-sh-float: 0 24px 56px -26px rgba(14, 21, 19, .28);

  /* type */
  --lox-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --lox-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* fluid spacing */
  --lox-gutter: clamp(1rem, .516rem + 1.98vw, 2.5rem);
  --lox-gap: clamp(1rem, .758rem + .99vw, 1.75rem);
  --lox-block: clamp(2.125rem, 1.52rem + 2.48vw, 4rem);
  --lox-section: clamp(3rem, 2.355rem + 2.64vw, 5rem);

  /* radii */
  --lox-r-s: 14px;
  --lox-r-m: 18px;
  --lox-r-l: 24px;
  --lox-r-xl: 28px;
  --lox-r-pill: 99px;

  --lox-ease: cubic-bezier(.2, .7, .3, 1);

  box-sizing: border-box;
  padding: 0 var(--lox-gutter) var(--lox-section);
  font-family: var(--lox-sans);
  color: var(--lox-body);
  -webkit-font-smoothing: antialiased;
}

.lox-pl *,
.lox-pl *::before,
.lox-pl *::after { box-sizing: border-box; }

.lox-pl__inner { max-width: 1180px; margin: 0 auto; }

/* ---------- header ---------------------------------------------------- */

.lox-pl__eyebrow {
  display: block;
  font-family: var(--lox-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lox-red);
  margin: 0 0 20px;
}

.lox-pl__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(1.5rem, .694rem + 3.31vw, 4rem);
  align-items: start;
  margin-bottom: var(--lox-block);
}

.lox-pl__title {
  margin: 0;
  font-size: clamp(2rem, 1.476rem + 2.15vw, 3.625rem);
  line-height: 1.03;
  letter-spacing: -.04em;
  font-weight: 600;
  color: var(--lox-ink);
  max-width: 18ch;
  text-wrap: pretty;
}

.lox-pl__intro {
  margin: 0;
  font-size: clamp(1.031rem, .981rem + .21vw, 1.188rem);
  line-height: 1.6;
  letter-spacing: -.01em;
  max-width: 46ch;
  padding-top: clamp(0px, 1.5vw, 34px);
  text-wrap: pretty;
}

/* ---------- filter bar ------------------------------------------------ */

.lox-pl__bar {
  position: sticky;
  top: 12px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px var(--lox-gap);
  padding: 14px;
  margin-bottom: var(--lox-gap);
  border-radius: var(--lox-r-xl);
  background: rgba(251, 250, 248, .86);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--lox-hair);
  box-shadow: var(--lox-sh-1);
  transition: box-shadow .35s var(--lox-ease), border-color .35s var(--lox-ease);
}

.lox-pl__bar.is-stuck {
  box-shadow: 0 16px 40px -22px rgba(14, 21, 19, .38);
  border-color: var(--lox-soft);
}

.lox-pl__field {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.lox-pl__field--country { flex: 1 1 320px; }

.lox-pl__label {
  font-family: var(--lox-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lox-faint);
  padding-left: 6px;
  white-space: nowrap;
}

/* combobox --------------------------------------------------------------- */

.lox-pl__combo { position: relative; flex: 1; min-width: 0; }

.lox-pl__combo-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.016em;
  color: var(--lox-ink);
  text-align: left;
  background: var(--lox-surface-2);
  border: 1px solid var(--lox-hair);
  border-radius: var(--lox-r-m);
  cursor: pointer;
  transition: background .3s var(--lox-ease), border-color .3s var(--lox-ease);
}

.lox-pl__combo-btn:hover { background: #EFEEEA; }
.lox-pl__combo-btn:focus-visible { outline: 2px solid var(--lox-red); outline-offset: 2px; }

.lox-pl__flag {
  flex: none;
  font-family: var(--lox-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--lox-muted);
  background: rgba(14, 21, 19, .055);
  border-radius: 6px;
  padding: 4px 7px;
}

.lox-pl__combo-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lox-pl__chev {
  flex: none;
  color: var(--lox-faint);
  transition: transform .3s var(--lox-ease);
}

.lox-pl__combo-btn[aria-expanded="true"] .lox-pl__chev { transform: rotate(180deg); }

.lox-pl__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  padding: 10px;
  background: var(--lox-surface);
  border: 1px solid var(--lox-soft);
  border-radius: var(--lox-r-l);
  box-shadow: var(--lox-sh-float);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .22s var(--lox-ease), transform .22s var(--lox-ease);
}

.lox-pl__pop.is-open { opacity: 1; transform: none; pointer-events: auto; }

/* closed: out of the tab order and the accessibility tree, after the fade */
.lox-pl__pop:not(.is-open) { visibility: hidden; transition: opacity .22s var(--lox-ease), transform .22s var(--lox-ease), visibility 0s linear .22s; }

.lox-pl__search {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 8px;
  font-family: inherit;
  font-size: 14.5px;
  letter-spacing: -.01em;
  color: var(--lox-ink);
  background: var(--lox-surface-2);
  border: 1px solid transparent;
  border-radius: 12px;
}

.lox-pl__search::placeholder { color: var(--lox-faint-2); }

/* Themes like Bricks give every input "transition: all": the field would then
   inherit its visibility with a delay when the list opens and refuse focus,
   so typing would not work right away. Only animate what we style. */
.lox-pl .lox-pl__search { transition: border-color .2s var(--lox-ease), background-color .2s var(--lox-ease); }
.lox-pl__search:focus { outline: none; border-color: var(--lox-soft); background: #fff; }

.lox-pl__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lox-pl__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--lox-muted);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  user-select: none;
  transition: background .18s, color .18s;
}

.lox-pl__opt:hover,
.lox-pl__opt.is-cursor { background: rgba(14, 21, 19, .05); color: var(--lox-ink); }
.lox-pl__opt.is-current { font-weight: 600; color: var(--lox-ink); }
.lox-pl__opt.is-current .lox-pl__flag { background: rgba(206, 32, 39, .1); color: var(--lox-red); }

.lox-pl__empty {
  margin: 0;
  padding: 16px 12px;
  font-size: 14px;
  color: var(--lox-faint);
}

/* currency segmented --------------------------------------------------- */

.lox-pl__seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--lox-surface-2);
  border: 1px solid var(--lox-hair);
  border-radius: var(--lox-r-pill);
}

.lox-pl__seg-btn {
  min-width: 52px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--lox-muted);
  background: transparent;
  border: 0;
  border-radius: var(--lox-r-pill);
  cursor: pointer;
  transition: background .3s var(--lox-ease), color .3s var(--lox-ease);
}

.lox-pl__seg-btn:hover { color: var(--lox-ink); }

.lox-pl__seg-btn.is-active {
  background: var(--lox-ink);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(14, 21, 19, .5);
}

/* ---------- cards ----------------------------------------------------- */

.lox-pl__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lox-gap);
  margin-bottom: var(--lox-block);
}

@media (max-width: 1150px) {
  .lox-pl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .lox-pl__grid { grid-template-columns: minmax(0, 1fr); }
}

.lox-pl-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  background: var(--lox-surface);
  border: 1px solid var(--lox-hair);
  border-radius: var(--lox-r-xl);
  box-shadow: var(--lox-sh-1);
  transition: transform .35s var(--lox-ease), box-shadow .35s var(--lox-ease);
}

.lox-pl-card:hover { transform: translateY(-4px); box-shadow: var(--lox-sh-lift); }

.lox-pl-card--featured {
  position: relative;
  background: var(--lox-ink);
  border-color: rgba(255, 255, 255, .09);
  overflow: hidden;
}

.lox-pl-card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(206, 32, 39, .5), transparent 62%);
  pointer-events: none;
}

.lox-pl-card--featured > * { position: relative; }

.lox-pl-card__top {
  display: flex;
  flex-wrap: wrap;            /* min. top-up moves under the name instead of breaking "S-Tarif" */
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.lox-pl-card__name {
  margin: 0;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--lox-ink);
}

.lox-pl-card__min {
  font-family: var(--lox-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lox-faint-2);
  white-space: nowrap;
}

.lox-pl-card__desc {
  margin: 14px 0 0;
  font-size: 14.4px;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--lox-body);
  text-wrap: pretty;
}

.lox-pl-card__rows {
  margin: auto 0 0;
  padding: 22px 0 0;
  display: flex;
  flex-direction: column;
}

/* Head, description, price rows and foot share one row track per part across
   all cards of a line (subgrid). The price rows line up even when one card has
   a shorter description or no savings badge in its foot. */
@supports (grid-template-rows: subgrid) {
  .lox-pl-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .lox-pl-card__rows { margin-top: 0; }
}

.lox-pl-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--lox-faint-line);
  transition: opacity .25s var(--lox-ease);
}

.lox-pl-card__row.is-dim { opacity: .34; }

.lox-pl-card__row.is-na .lox-pl-card__price { color: var(--lox-faint-2); font-weight: 500; }
.lox-pl-card--featured .lox-pl-card__row.is-na .lox-pl-card__price { color: rgba(255, 255, 255, .4); }

.lox-pl-card__row.is-hl .lox-pl-card__svc { color: var(--lox-red); }
.lox-pl-card--featured .lox-pl-card__row.is-hl .lox-pl-card__svc { color: var(--lox-red-light); }

.lox-pl-card__rows > .lox-pl-card__row:first-child { border-top: 1px solid var(--lox-soft); }

.lox-pl-card__svc {
  margin: 0;
  font-family: var(--lox-mono);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--lox-faint);
}

.lox-pl-card__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--lox-ink);
  font-variant-numeric: tabular-nums;
}

.lox-pl-card__cur {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--lox-faint);
}

.lox-pl-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 16px;
}

.lox-pl-card__unit {
  font-family: var(--lox-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lox-faint-2);
}

.lox-pl-card__save {
  font-family: var(--lox-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--lox-red);
  background: rgba(206, 32, 39, .09);
  border-radius: var(--lox-r-pill);
  padding: 5px 9px;
  white-space: nowrap;
}

/* featured overrides */
.lox-pl-card--featured .lox-pl-card__name,
.lox-pl-card--featured .lox-pl-card__price { color: #fff; }
.lox-pl-card--featured .lox-pl-card__desc { color: var(--lox-on-dark); }
.lox-pl-card--featured .lox-pl-card__svc { color: var(--lox-on-dark-muted); }
.lox-pl-card--featured .lox-pl-card__cur { color: var(--lox-on-dark-muted); }
.lox-pl-card--featured .lox-pl-card__min { color: var(--lox-red-light); }
.lox-pl-card--featured .lox-pl-card__unit { color: rgba(255, 255, 255, .38); }
.lox-pl-card--featured .lox-pl-card__row { border-bottom-color: rgba(255, 255, 255, .08); }
.lox-pl-card--featured .lox-pl-card__rows > .lox-pl-card__row:first-child { border-top-color: rgba(255, 255, 255, .12); }
.lox-pl-card--featured .lox-pl-card__save { color: #fff; background: rgba(255, 255, 255, .14); }

/* ---------- service legend ------------------------------------------- */

.lox-pl__legend {
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem) clamp(1.25rem, 1rem + 1vw, 2rem);
  margin-bottom: var(--lox-gap);
  background: var(--lox-surface-2);
  border: 1px solid var(--lox-hair);
  border-radius: var(--lox-r-xl);
}

.lox-pl__legend-title {
  margin: 0 0 clamp(1rem, .875rem + .5vw, 1.5rem);
  font-family: var(--lox-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lox-faint);
}

.lox-pl__legend-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 2rem);
}

@media (max-width: 1000px) {
  .lox-pl__legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .lox-pl__legend-grid { grid-template-columns: minmax(0, 1fr); }
}

.lox-pl__legend-item {
  padding: 12px 14px 14px;
  margin: 0 -14px;
  border-radius: var(--lox-r-s);
  transition: background .25s var(--lox-ease);
}

.lox-pl__legend-item.is-hl { background: rgba(255, 255, 255, .8); }

.lox-pl__legend-key {
  display: block;
  margin-bottom: 8px;
  font-family: var(--lox-mono);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--lox-ink);
  transition: color .25s var(--lox-ease);
}

.lox-pl__legend-item.is-hl .lox-pl__legend-key { color: var(--lox-red); }

.lox-pl__legend-desc {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.55;
  letter-spacing: -.008em;
  color: var(--lox-body);
  text-wrap: pretty;
}

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

.lox-pl__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
}

.lox-pl__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.016em;
  color: var(--lox-ink);
  text-decoration: none;
  background: var(--lox-surface);
  border: 1px solid var(--lox-soft);
  border-radius: var(--lox-r-pill);
  cursor: pointer;
  transition: background .35s var(--lox-ease), color .35s var(--lox-ease),
              gap .35s var(--lox-ease), box-shadow .35s var(--lox-ease),
              border-color .35s var(--lox-ease);
}

.lox-pl__btn svg { flex: none; }
.lox-pl__btn:hover { background: var(--lox-surface-2); gap: 13px; }
.lox-pl__btn:focus-visible { outline: 2px solid var(--lox-red); outline-offset: 2px; }

.lox-pl__btn--primary {
  color: #fff;
  background: var(--lox-ink);
  border-color: var(--lox-ink);
  box-shadow: 0 12px 28px -14px rgba(14, 21, 19, .55);
}

.lox-pl__btn--primary:hover { background: #1A2321; border-color: #1A2321; }

.lox-pl__btn.is-done { color: var(--lox-red); border-color: rgba(206, 32, 39, .35); }
.lox-pl__btn--primary.is-done { color: #fff; background: var(--lox-red); border-color: var(--lox-red); }

/* ---------- legal ----------------------------------------------------- */

.lox-pl__legal {
  margin: 0;
  max-width: 92ch;
  font-size: 13.2px;
  line-height: 1.62;
  letter-spacing: -.005em;
  color: #6B7674;
  text-wrap: pretty;
}

/* ---------- all countries (table) ------------------------------------ */

.lox-pl__all {
  margin-bottom: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  background: var(--lox-surface);
  border: 1px solid var(--lox-hair);
  border-radius: var(--lox-r-xl);
  box-shadow: var(--lox-sh-1);
  overflow: hidden;
}

.lox-pl__all-sum {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  transition: background .25s var(--lox-ease);
}

.lox-pl__all-sum::-webkit-details-marker { display: none; }
.lox-pl__all-sum:hover { background: var(--lox-surface-2); }
.lox-pl__all-sum:focus-visible { outline: 2px solid var(--lox-red); outline-offset: -2px; }

.lox-pl__all-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--lox-ink);
}

.lox-pl__all-meta {
  flex: 1;
  font-family: var(--lox-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lox-faint);
}

.lox-pl__all-sum .lox-pl__chev { margin-left: auto; }
.lox-pl__all[open] .lox-pl__all-sum .lox-pl__chev { transform: rotate(180deg); }
.lox-pl__all[open] .lox-pl__all-sum { border-bottom: 1px solid var(--lox-hair); }

.lox-pl-table__wrap {
  max-height: min(72vh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
}

.lox-pl-table {
  width: 100%;
  min-width: 600px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--lox-ink);
}

.lox-pl-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 16px;
  font-family: var(--lox-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: right;
  color: var(--lox-faint);
  background: var(--lox-surface-2);
  border-bottom: 1px solid var(--lox-soft);
}

.lox-pl-table thead th:nth-child(-n+2) { text-align: left; }

.lox-pl-table tbody th {
  width: 34%;
  padding: 12px 16px;
  font-weight: 600;
  text-align: left;
  vertical-align: top;
}

/* country column stays in view when the table scrolls sideways (phones) */
.lox-pl-table tbody th,
.lox-pl-table thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--lox-surface);
}

.lox-pl-table tbody th { z-index: 1; }
.lox-pl-table thead th:first-child { z-index: 2; background: var(--lox-surface-2); }

.lox-pl-table tbody th .lox-pl__flag { margin-right: 6px; }

.lox-pl-table td {
  padding: 6px 16px;
  text-align: right;
  white-space: nowrap;
}

.lox-pl-table td:first-of-type {
  text-align: left;
  font-family: var(--lox-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--lox-faint);
}

.lox-pl-table tbody tr:first-child > * { padding-top: 12px; }
.lox-pl-table tbody tr:last-child > * { padding-bottom: 12px; }
.lox-pl-table tbody + tbody > tr:first-child > * { border-top: 1px solid var(--lox-hair); }
.lox-pl-table tbody:hover > tr > * { background-color: #F8F7F5; }

.lox-pl-table__note {
  display: block;
  max-width: 38ch;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--lox-body);
}

.lox-pl-table__note-title { color: var(--lox-faint); }

.lox-pl__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- entrance -------------------------------------------------- */

/* Gated on .lox-pl--fx (set by an inline script in the markup): without
   JavaScript nothing is hidden. If price-list.js never arrives, the
   failsafe animation shows everything after 3 s. */
.lox-pl--fx .lox-fx {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--lox-ease), transform .9s var(--lox-ease);
  transition-delay: var(--lox-fx-delay, 0s);
  animation: lox-pl-failsafe 0s linear 3s forwards;
}

.lox-pl--fx.lox-pl--live .lox-fx { animation: none; }
.lox-pl--fx .lox-fx.is-in { opacity: 1; transform: none; animation: none; }

@keyframes lox-pl-failsafe { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .lox-pl .lox-fx,
  .lox-pl .lox-fx.is-in { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .lox-pl-card:hover { transform: none; }
}

.lox-pl [hidden] { display: none !important; }

/* ---------- narrow ---------------------------------------------------- */

@media (max-width: 720px) {
  .lox-pl__bar { position: static; align-items: stretch; flex-direction: column; }
  /* stacked: the desktop basis of 320px would otherwise become a 320px height */
  .lox-pl__field,
  .lox-pl__field--country { flex: 0 0 auto; }
  .lox-pl__field { flex-direction: column; align-items: stretch; gap: 8px; }
  .lox-pl__combo { flex: 0 0 auto; }
  .lox-pl__label { padding-left: 8px; }
  .lox-pl__seg-btn { flex: 1; }
  .lox-pl__actions .lox-pl__btn { flex: 1 1 100%; justify-content: center; }
  .lox-pl__all-sum { padding: 18px; }
  .lox-pl__all-title { flex: 1; }
  .lox-pl__all-meta { flex: 1 1 100%; order: 3; }
  .lox-pl-table { min-width: 500px; font-size: 13.5px; }
  .lox-pl-table tbody th { width: 120px; min-width: 120px; max-width: 120px; white-space: normal; }
  /* tier letter sticks next to the country, so S/M/L/XL stay readable */
  .lox-pl-table td:first-of-type,
  .lox-pl-table thead th:nth-child(2) { position: sticky; left: 120px; z-index: 1; background: var(--lox-surface); box-shadow: 1px 0 0 var(--lox-hair); }
  .lox-pl-table thead th:nth-child(2) { z-index: 2; background: var(--lox-surface-2); }
  .lox-pl-table tbody th .lox-pl__flag { display: none; }
  .lox-pl-table thead th, .lox-pl-table tbody th, .lox-pl-table td { padding-left: 10px; padding-right: 10px; }
  .lox-pl-table thead th { letter-spacing: .06em; }
}

/* ---------- country note (sender ID etc.) ----------------------------- */
/* px, not rem: themes like Bricks set the root font size to 10px */

/* sits right under the cards: pull it up into the grid's bottom margin
   (adjacent margins collapse to var(--lox-gap)), then keep the usual
   distance to the legend */
.lox-pl__note {
  margin: calc(var(--lox-gap) - var(--lox-block)) 0 var(--lox-block);
  padding: 14px 18px 15px;
  background: var(--lox-surface-2);
  border: 1px solid var(--lox-soft);
  border-radius: var(--lox-r-m);
}

.lox-pl__note-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-family: var(--lox-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lox-faint);
}

.lox-pl__note-title::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm0 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-.8 3.2h1.6v4.6H7.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm0 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-.8 3.2h1.6v4.6H7.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lox-pl__note-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--lox-ink);
  text-wrap: pretty;
}

.lox-pl__note[hidden] { display: none; }

@media (max-width: 720px) {
  .lox-pl__note { padding: 12px 14px 13px; }
  .lox-pl__note-text { font-size: 14.5px; }
}