@font-face {
  font-family: "Geist";
  src: url("/assets/Geist_wght_-Bj2R_7yk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:host,
:root {
  color-scheme: var(--q-color-scheme, light dark);
  font-family: Geist, system-ui, sans-serif;

  /* 
  * all colorization should work by setting a single color (for merchant) -> --color-accent. all other colors should be derived, but may be overriden, if needed.
  * do not generate positive, warning, netagive - not worth it 
  * better to generate fixed values when generating a template
  */

  /* qasima colors */
  --color-canvas: light-dark(oklch(0.98 0 0), oklch(0.14 0 0));

  /* DEFAULTS (= QASIMA) */
  /* primary button variant */
  --color-accent: light-dark(oklch(0.2 0 0), oklch(0.95 0 0));

  /* not worth it to derive these from the accent variable */
  --color-positive: oklch(0.85 0.25 128);
  --color-positive-foreground: oklch(0.45 0.25 128);
  --color-warning: oklch(0.85 0.3 55);
  --color-warning-foreground: oklch(0.45 0.3 55);
  --color-info: light-dark(oklch(0.88 0.12 250), oklch(0.38 0.14 250));
  --color-info-foreground: light-dark(oklch(0.38 0.14 250), oklch(0.92 0.06 250));
  --color-negative: light-dark(oklch(0.55 0.3 30), oklch(0.35 0.35 30));
  --color-negative-foreground: light-dark(oklch(0.98 0.05 30), oklch(0.9 0.1 30));

  --color-overlay-hover: oklch(0 0 0 / 0.05);

  background-color: var(--color-canvas);

  /* --color-accent foreground derivation */
  /* this is more complex, because we don't know if the accent color is light or dark */
  /* browser native color derivation with manual shift */
  /* makes the contrast-color() think the source color is darker, otherwise it flips too early on C0.4+ */
  --color-accent-shift: 0.75;
  --color-accent-with-shift: oklch(from var(--color-accent) calc(l * var(--color-accent-shift)) c h);
  --color-accent-foreground: light-dark(oklch(0.98 0 0), oklch(0.15 0 0));

  /* --color-neutral derivation */
  --color-neutral: light-dark(
    oklch(from var(--color-accent) 0.95 calc(c * 0.1) h),
    oklch(from var(--color-accent) 0.35 calc(c * 0.1) h)
  );
  --color-neutral-foreground: light-dark(
    oklch(from var(--color-accent) 0.4 calc(c * 0.5) h),
    oklch(from var(--color-accent) 0.8 calc(c * 0.2) h)
  );
}

@supports (color: contrast-color(red)) {
  :host,
  :root {
    --color-accent-foreground: color-mix(
      in oklch shorter hue,
      contrast-color(var(--color-accent-with-shift)) 98%,
      var(--color-accent) 2%
    );
  }
}

/* page and embed hosts set data-color-scheme — cascades into nested q-* via --q-color-scheme */
:root[data-color-scheme="light"],
:host([data-color-scheme="light"]) {
  --q-color-scheme: light;
  color-scheme: light;
}

:root[data-color-scheme="dark"],
:host([data-color-scheme="dark"]) {
  --q-color-scheme: dark;
  color-scheme: dark;
}
/* manage/console app shell — scroll lives inside q-app-view, not on document */
html {
  block-size: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  block-size: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--color-canvas);
  color-scheme: var(--q-color-scheme, light dark);
}
.dev-toolbar-root {
  position: fixed;
  inset-block-end: calc(0.625rem + 100px);
  inset-inline-end: 0.625rem;
  inset-inline-start: auto;
  z-index: 9999;
  inline-size: fit-content;
  max-inline-size: calc(100vw - 1.25rem);
  max-block-size: calc(100dvh - 1.25rem - 100px);
  margin: 0;
  padding: 0;
  overflow: visible;
}

.dev-toolbar {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.375rem;

  .dev-toolbar-rail {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.125rem;
    border-radius: 0.375rem;
    background-color: oklch(0.12 0 0 / 0.88);
    border: 1px solid oklch(1 0 0 / 0.08);
  }

  .dev-toolbar-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.625rem;
    block-size: 1.625rem;
    border: 0;
    border-radius: 0.25rem;
    color: oklch(0.62 0 0);
    background: transparent;
    cursor: pointer;

    &:hover {
      color: oklch(0.78 0 0);
      background-color: oklch(1 0 0 / 0.06);
    }

    &.is-active {
      color: oklch(0.88 0 0);
      background-color: oklch(1 0 0 / 0.1);
    }

    svg {
      pointer-events: none;
    }
  }

  .dev-toolbar-panel {
    inline-size: min(20rem, calc(100vw - 3rem));
    max-block-size: min(20rem, calc(100dvh - 3rem));
    overflow: auto;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    background-color: oklch(0.12 0 0 / 0.92);
    border: 1px solid oklch(1 0 0 / 0.08);

    &.is-seeds {
      inline-size: min(24rem, calc(100vw - 3rem));
      max-block-size: min(28rem, calc(100dvh - 3rem));
    }
  }

  .dev-toolbar-panel-title {
    margin: 0 0 0.375rem;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: oklch(0.64 0 0);
  }

  .dev-toolbar-session-list {
    display: grid;
    grid-template-columns: 4.75rem 1fr;
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.3;

    dt,
    dd {
      margin: 0;
      padding: 0.25rem 0;
      border-block-end: 1px solid oklch(1 0 0 / 0.06);
    }

    dt {
      padding-inline-end: 0.5rem;
      color: oklch(0.6 0 0);
      font-weight: 400;
    }

    dd {
      display: grid;
      gap: 0.0625rem;
      min-inline-size: 0;
    }

    dt:last-of-type,
    dd:last-of-type {
      border-block-end: none;
    }
  }

  .dev-toolbar-primary {
    color: oklch(0.94 0 0);
    font-weight: 400;
  }

  .dev-toolbar-id {
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.625rem;
    line-height: 1.35;
    word-break: break-all;
    color: oklch(0.72 0 0);
  }

  .dev-toolbar-empty {
    color: oklch(0.54 0 0);
  }

  .dev-toolbar-note {
    margin: 0.5rem 0 0;
    font-size: 0.625rem;
    line-height: 1.35;
    color: oklch(0.6 0 0);
  }

  .dev-toolbar-loading {
    margin: 0;
    font-size: 0.6875rem;
    color: oklch(0.62 0 0);
  }

  .dev-toolbar-headers {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.25rem;
  }

  .dev-toolbar-header {
    display: grid;
    gap: 0.0625rem;
    font-size: 0.625rem;
    line-height: 1.3;
    word-break: break-all;
  }

  .dev-toolbar-header-key {
    font-weight: 500;
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    color: oklch(0.74 0 0);
  }

  .dev-toolbar-header span:last-child {
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.625rem;
    color: oklch(0.82 0 0);
  }

  .dev-toolbar-seed-orgs,
  .dev-toolbar-seed-users,
  .dev-toolbar-seed-merchants,
  .dev-toolbar-seed-roles {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dev-toolbar-seed-orgs,
  .dev-toolbar-seed-users {
    display: grid;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
  }

  .dev-toolbar-seed-org,
  .dev-toolbar-seed-user {
    padding: 0.375rem 0;
    border-block-end: 1px solid oklch(1 0 0 / 0.06);

    &:last-child {
      border-block-end: none;
    }
  }

  .dev-toolbar-seed-org-head,
  .dev-toolbar-seed-user-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.3;
  }

  .dev-toolbar-seed-user-copy {
    display: grid;
    gap: 0.0625rem;
    min-inline-size: 0;
    flex: 1;
  }

  .dev-toolbar-seed-sign-in {
    flex-shrink: 0;
    margin: 0;
    padding: 0.1875rem 0.4375rem;
    border: 1px solid oklch(1 0 0 / 0.12);
    border-radius: 0.25rem;
    background: oklch(1 0 0 / 0.06);
    color: oklch(0.92 0 0);
    font: inherit;
    font-size: 0.625rem;
    line-height: 1.2;
    cursor: pointer;

    &:hover:not(:disabled) {
      background: oklch(1 0 0 / 0.1);
    }

    &:disabled {
      opacity: 0.55;
      cursor: wait;
    }
  }

  .dev-toolbar-seed-sign-in-error {
    margin: 0.25rem 0 0;
    font-size: 0.625rem;
    line-height: 1.3;
    color: oklch(0.78 0.12 25);
  }

  .dev-toolbar-seed-merchants {
    display: grid;
    gap: 0.25rem;
    margin-block-start: 0.25rem;
    padding-inline-start: 0.5rem;
    border-inline-start: 1px solid oklch(1 0 0 / 0.06);
  }

  .dev-toolbar-seed-merchant {
    display: grid;
    gap: 0.0625rem;
    font-size: 0.625rem;
    line-height: 1.3;
    color: oklch(0.8 0 0);
  }

  .dev-toolbar-seed-tag {
    display: inline-block;
    margin-block-start: 0.0625rem;
    padding: 0.0625rem 0.25rem;
    border-radius: 0.125rem;
    font-size: 0.5625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(0.72 0 0);
    background-color: oklch(1 0 0 / 0.06);
  }

  .dev-toolbar-seed-user-name {
    font-size: 0.625rem;
    color: oklch(0.68 0 0);
  }

  .dev-toolbar-seed-roles {
    display: grid;
    gap: 0.125rem;
    margin-block-start: 0.25rem;
  }

  .dev-toolbar-seed-role {
    font-size: 0.625rem;
    line-height: 1.3;
    color: oklch(0.76 0 0);
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  }
}
.login-view {
  container-type: inline-size;
  display: grid;
  place-items: center;
  min-block-size: 100dvb;
  color-scheme: var(--q-color-scheme, light dark);
  color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
  background-color: var(--color-canvas);

  .login-panel {
    display: grid;
    gap: 2.5rem;
    inline-size: min(100%, 22rem);
    justify-items: center;
  }

  .login-logo-mark {
    display: block;
    inline-size: min(100%, 10rem);
    line-height: 0;
  }

  .login-logo-mark--emblem {
    inline-size: 2.5rem;
    max-inline-size: 2.5rem;
  }

  .login-logo-image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    object-fit: contain;
  }

  .login-logo-image-for-dark {
    display: none;
  }

  .login-form {
    inline-size: 100%;
  }
}

html[data-color-scheme="dark"] .login-logo-image-for-light {
  display: none;
}

html[data-color-scheme="dark"] .login-logo-image-for-dark {
  display: block;
}
.service-dock-bar-host {
  display: block;
  width: 100%;
}

.service-dock-bar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 3.45rem;
  padding: 0.5rem 0.85rem;
  padding-bottom: max(0.58rem, env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 0;
  background: transparent;
  color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
  box-sizing: border-box;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      oklch(0% 0 0 / 0.35) 38%,
      oklch(0% 0 0) 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      oklch(0% 0 0 / 0.35) 38%,
      oklch(0% 0 0) 100%
    );
  }

  &::-webkit-scrollbar {
    display: none;
  }

  .service-dock-bar__cluster {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
  }

  .service-dock-bar__cluster--actions {
    margin-left: auto;
  }

  .service-dock-bar__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: transparent;
    color: inherit;
    font: inherit;
  }

  .service-dock-bar__brand-emblem {
    display: block;
    flex-shrink: 0;
    width: 2.125rem;
    height: 2.125rem;
    background: light-dark(oklch(42% 0 0), oklch(98% 0 0));
    mask-image: url("/qasima-emblem-on-light.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("/qasima-emblem-on-light.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
  }

  .service-dock-bar__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: light-dark(oklch(95% 0 0), oklch(26% 0 0));
    color: light-dark(oklch(62% 0 0), oklch(72% 0 0));

    svg {
      display: block;
      flex-shrink: 0;
    }

    svg path {
      fill: currentColor;
    }
  }

  .service-dock-bar__icon-btn.is-active {
    background: light-dark(oklch(90% 0 0), oklch(32% 0 0));
    color: light-dark(oklch(44% 0 0), oklch(88% 0 0));
  }

  .service-dock-bar__icon-btn.service-dock-bar__fab {
    width: 2.8rem;
    height: 2.8rem;
    background: light-dark(oklch(20% 0 0), oklch(92% 0 0));
    color: light-dark(oklch(98% 0 0), oklch(18% 0 0));

    &.is-active {
      background: light-dark(oklch(20% 0 0), oklch(92% 0 0));
      color: light-dark(oklch(98% 0 0), oklch(18% 0 0));
    }
  }

  .service-dock-bar__avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    background: light-dark(oklch(42% 0 0), oklch(58% 0 0));
    color: light-dark(oklch(99% 0 0), oklch(12% 0 0));
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
  }

  .service-dock-bar__avatar-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .service-dock-bar__avatar-initial {
    position: relative;
    line-height: 1;
  }

  .service-dock-bar__avatar-image + .service-dock-bar__avatar-initial {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .service-dock-bar__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    background: light-dark(oklch(95% 0 0), oklch(26% 0 0));
    color: light-dark(oklch(62% 0 0), oklch(72% 0 0));

    svg {
      display: block;
      flex-shrink: 0;
    }

    svg path {
      fill: currentColor;
    }
  }

  .service-dock-bar__widget {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    height: 2.65rem;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    color: light-dark(oklch(62% 0 0), oklch(72% 0 0));
    background: light-dark(oklch(95% 0 0), oklch(26% 0 0));

    > svg {
      display: block;
      flex-shrink: 0;
    }

    > svg path {
      fill: currentColor;
    }
  }

  .service-dock-bar__widget-stats {
    display: inline-flex;
    gap: 0.6rem;
    font-size: 0.68rem;
    line-height: 1.1;
    color: light-dark(oklch(28% 0 0), oklch(88% 0 0));

    span {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      min-width: 1.25rem;
    }

    strong {
      font-size: 0.78rem;
      font-weight: 700;
    }

    small {
      opacity: 0.65;
      font-size: 0.58rem;
      text-transform: lowercase;
    }
  }

  .service-dock-bar__actions-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    background: transparent;

    &:hover .service-dock-bar__action-pill,
    &:hover .service-dock-bar__icon-btn--in-group {
      background: light-dark(oklch(93% 0 0), oklch(28% 0 0));
    }
  }

  .service-dock-bar__icon-btn--in-group {
    pointer-events: none;
  }

  .service-dock-bar__action-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.65rem;
    padding: 0 0.9rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    color: inherit;
    background: light-dark(oklch(99% 0 0), oklch(20% 0 0));
    box-shadow: inset 0 0 0 1px light-dark(oklch(90% 0 0), oklch(32% 0 0));
  }

  .service-dock-bar__actions-group .service-dock-bar__action-pill {
    pointer-events: none;
  }

  .service-dock-bar__action-muted {
    font-weight: 500;
    opacity: 0.55;
    text-transform: lowercase;
  }

  &.is-search-open {
    .service-dock-bar__cluster--pinned {
      flex: 1;
      min-width: 0;
    }
  }

  .service-dock-bar__search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
    height: 2.65rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    background: light-dark(oklch(95% 0 0), oklch(26% 0 0));
    box-shadow: inset 0 0 0 1px light-dark(oklch(90% 0 0), oklch(32% 0 0));
  }

  .service-dock-bar__search-leading {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: light-dark(oklch(62% 0 0), oklch(72% 0 0));
  }

  .service-dock-bar__search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
    background: transparent;
    color: inherit;
    outline: none;

    &::-webkit-search-cancel-button {
      display: none;
    }
  }

  .service-dock-bar__search-close {
    flex-shrink: 0;
  }
}
q-spinner {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  inline-size: 1em;
  block-size: 1em;
  --spinner-size: 1em;
  --spinner-stroke: 2.5;
  font-size: var(--spinner-size);
  color: var(--color-spinner, currentColor);

  .spinner {
    display: block;
    line-height: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .spinner-svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  circle {
    fill: none;
    stroke-width: var(--spinner-stroke);
  }

  .track {
    stroke: light-dark(
      color-mix(in oklch, currentColor 12%, transparent),
      color-mix(in oklch, currentColor 28%, transparent)
    );
  }

  .indicator {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: 42 14.5;
    transform-origin: center;
    animation: q-spinner-spin 1s linear infinite;
  }

  &[size="xs"] {
    --spinner-size: 0.75em;
    --spinner-stroke: 2.35;
  }

  &[size="sm"] {
    --spinner-size: 0.875em;
    --spinner-stroke: 2.4;
  }

  &[size="md"] {
    --spinner-size: 1em;
    --spinner-stroke: 2.5;
  }

  &[size="lg"] {
    --spinner-size: 1.25em;
    --spinner-stroke: 2.45;
  }

  &[size="xl"] {
    --spinner-size: 1.5em;
    --spinner-stroke: 2.35;
  }

  &[size="2xl"] {
    --spinner-size: 2em;
    --spinner-stroke: 2.2;
  }
}

@keyframes q-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}
q-button {
  color-scheme: var(--q-color-scheme, light dark);
  display: inline-flex;
  vertical-align: middle;
  --button-size: 1em;
  font-size: var(--button-size);

  --radius: 0.625rem;
  --button-border-width: 0;
  --button-border-color: transparent;
  --button-line-height: 1.25;
  --button-min-block-size: 1.75em;
  --button-padding-block: 0.375em;
  --button-padding-inline: 0.75em;

  /* default: primary variant x accent tone */
  --button-color-background: var(--color-accent);
  --button-color-foreground: var(--color-accent-foreground);

  @media (pointer: coarse) and (max-width: 47.99rem) {
    --button-min-block-size: 2.75em;
    --button-padding-block: 0.75em;
    --button-padding-inline: 0.75em;
  }

  :is(button, a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: var(--button-color-foreground);
    background-color: var(--button-color-background);
    border-width: var(--button-border-width);
    border-style: solid;
    border-color: var(--button-border-color);
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    font: inherit;
    font-weight: 500;
    line-height: var(--button-line-height);
    appearance: none;
    -webkit-appearance: none;
    --button-block-size: max(
      var(--button-min-block-size),
      calc(var(--button-padding-block) * 2 + var(--button-line-height) * 1em)
    );
    block-size: var(--button-block-size);
    min-block-size: var(--button-block-size);
    padding: var(--button-padding-block) var(--button-padding-inline);
    transition-property: transform, color, background-color, border-color;
    transition-duration: 120ms;
    transition-timing-function: ease-in-out;
    text-decoration: none;
  }

  @media (hover: hover) {
    :is(button, a):hover:not(:disabled):not([aria-disabled="true"]) {
      background-color: color-mix(
        in oklch decreasing hue,
        var(--button-color-background) 90%,
        var(--button-color-foreground) 10%
      );
    }
  }

  :is(button, a):active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.98);
  }

  button:disabled,
  a[aria-disabled="true"] {
    background-color: color-mix(
      in oklch decreasing hue,
      var(--button-color-background) 50%,
      var(--button-color-foreground) 50%
    );
    color: color-mix(in oklch decreasing hue, var(--button-color-foreground) 45%, var(--button-color-background) 100%);
    cursor: inherit;
    pointer-events: none;
  }

  &[disabled] {
    cursor: not-allowed;
  }

  &[progress]:not([disabled]) {
    cursor: wait;
  }

  &[progress] :is(button, a) {
    cursor: inherit;
  }

  &[progress]:not([interruptible]) :is(button, a) {
    pointer-events: none;
  }

  .content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .icon {
    flex-shrink: 0;
    display: block;
  }

  .content--inline {
    min-inline-size: var(--button-label-width, auto);
  }

  .content--over-label,
  .content--replace-label {
    display: inline-grid;
    align-items: center;
    justify-items: center;

    .label,
    q-spinner,
    .icon {
      grid-area: 1 / 1;
    }
  }

  .content--over-label .label {
    opacity: 0.4;
  }

  .content--replace-label .label {
    opacity: 0;
  }

  .shortcut {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    margin-inline-start: 0.125rem;
    opacity: 0.85;
  }

  .shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.25em;
    padding: 0.0625em 0.3125em;
    border-radius: 0.25rem;
    border: 1px solid color-mix(in oklch, currentColor 22%, transparent);
    background: color-mix(in oklch, currentColor 10%, transparent);
    font-family: inherit;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.2;
  }

  q-spinner {
    color: inherit;
  }

  &[size="xs"] {
    --button-size: 0.75em;
  }

  &[size="sm"] {
    --button-size: 0.875em;
  }

  &[size="md"] {
    --button-size: 1em;
  }

  &[size="lg"] {
    --button-size: 1.25em;
  }

  &[size="xl"] {
    --button-size: 1.5em;
  }

  &[size="2xl"] {
    --button-size: 2em;
  }

  &[shape="pill"] :is(button, a) {
    border-radius: calc(infinity * 1px);
  }

  &[shape="circle"] :is(button, a) {
    border-radius: calc(infinity * 1px);
    inline-size: var(--button-block-size);
    block-size: var(--button-block-size);
    min-inline-size: var(--button-block-size);
    min-block-size: var(--button-block-size);
    padding: 0;
  }

  &[full-width] {
    display: block;
    inline-size: 100%;

    :is(button, a) {
      inline-size: 100%;
    }
  }

  &[active] :is(button, a):not(:disabled):not([aria-disabled="true"]) {
    background-color: color-mix(
      in oklch decreasing hue,
      var(--button-color-background) 90%,
      var(--button-color-foreground) 10%
    );
  }

  /* tone — remap palette locally so variants pick it up */
  &[tone="negative"] {
    --color-accent: var(--color-negative);
    --color-accent-foreground: var(--color-negative-foreground);

    /* --color-neutral derivation */
    --color-neutral: light-dark(
      oklch(from var(--color-negative) 0.95 calc(c * 0.1) h),
      oklch(from var(--color-negative) 0.35 calc(c * 0.1) h)
    );
    --color-neutral-foreground: light-dark(
      oklch(from var(--color-negative) 0.4 calc(c * 0.5) h),
      oklch(from var(--color-negative) 0.8 calc(c * 0.2) h)
    );
  }

  &[tone="positive"] {
    --color-accent: var(--color-positive);
    --color-accent-foreground: var(--color-positive-foreground);

    /* --color-neutral derivation */
    --color-neutral: light-dark(
      oklch(from var(--color-positive) 0.95 calc(c * 0.1) h),
      oklch(from var(--color-positive) 0.35 calc(c * 0.1) h)
    );
    --color-neutral-foreground: light-dark(
      oklch(from var(--color-positive) 0.4 calc(c * 0.5) h),
      oklch(from var(--color-positive) 0.8 calc(c * 0.2) h)
    );
  }

  &[variant="secondary"] {
    --button-color-background: var(--color-neutral);
    --button-color-foreground: var(--color-neutral-foreground);
  }

  &[variant="ghost"],
  &[variant="outline"] {
    --button-color-background: none;
    --button-color-foreground: var(--color-neutral-foreground);

    @media (hover: hover) {
      :is(button, a):hover:not(:disabled):not([aria-disabled="true"]) {
        background-color: var(--color-neutral);
      }
    }
  }

  &[variant="ghost"][active],
  &[variant="outline"][active] {
    :is(button, a):not(:disabled):not([aria-disabled="true"]) {
      background-color: var(--color-neutral);
    }
  }

  &[variant="outline"] {
    --button-border-width: 1px;
    --button-border-color: light-dark(
      oklch(from var(--color-accent) 0.94 calc(c * 0.05) h),
      oklch(from var(--color-accent) 0.44 calc(c * 0.15) h)
    );

    @media (hover: hover) {
      :is(button, a):hover:not(:disabled):not([aria-disabled="true"]) {
        --button-border-color: light-dark(
          oklch(from var(--color-accent) 0.9 calc(c * 0.15) h),
          oklch(from var(--color-accent) 0.44 calc(c * 0.15) h)
        );
      }
    }
  }

  &[variant="outline"][active] :is(button, a):not(:disabled):not([aria-disabled="true"]) {
    --button-border-color: light-dark(
      oklch(from var(--color-accent) 0.9 calc(c * 0.15) h),
      oklch(from var(--color-accent) 0.44 calc(c * 0.15) h)
    );
  }

  &[variant="link"] {
    --button-color-background: none;
    --button-color-foreground: var(--color-accent);
    --button-border-width: 0;

    :is(button, a) {
      padding: 0;
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }

    @media (hover: hover) {
      :is(button, a):hover:not(:disabled):not([aria-disabled="true"]) {
        --button-color-foreground: color-mix(in oklch, var(--color-accent) 60%, white);
      }
    }
  }

  &[variant="link"][active] :is(button, a):not(:disabled):not([aria-disabled="true"]) {
    --button-color-foreground: color-mix(in oklch, var(--color-accent) 60%, white);
  }
}
q-button-group {
  display: inline-flex;
  align-items: stretch;

  q-button {
    display: flex;
    min-inline-size: 0;
  }

  q-button :is(button, a) {
    inline-size: 100%;
  }

  &[orientation="vertical"] {
    flex-direction: column;
    inline-size: fit-content;

    q-button {
      align-self: stretch;
    }

    q-button:not(:first-child) :is(button, a) {
      border-start-start-radius: 0;
      border-start-end-radius: 0;
      margin-block-start: calc(var(--button-border-width, 1px) * -1);
    }

    q-button:not(:last-child) :is(button, a) {
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
  }

  &[full-width] {
    display: flex;
    inline-size: 100%;

    q-button {
      flex: 1 1 0;
    }
  }

  &:not([orientation="vertical"]) {
    q-button:not(:first-child) :is(button, a) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
      margin-inline-start: calc(var(--button-border-width, 1px) * -1);
    }

    q-button:not(:last-child) :is(button, a) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
  }
}
q-form-field-status {
  span.status {
    display: block;
    padding: 0.25rem 0.35rem;
    font-size: 0.75rem;
  }

  span.variant-attached {
    border-radius: 0 0 10px 10px;
  }

  span.variant-detached {
    border-radius: 10px;
  }

  span.type-error {
    color: var(--color-negative-foreground);
    background-color: var(--color-negative);
  }

  span.type-warning {
    color: var(--color-warning-foreground);
    background-color: var(--color-warning);
  }

  span.type-success {
    color: var(--color-positive-foreground);
    background-color: var(--color-positive);
  }
}
q-form-checkbox {
  .input-field {
    display: flex;
    flex-direction: column;
    gap: 0;

    span.description {
      font-size: 0.75rem;
      padding-bottom: 0.2em;
      color: light-dark(oklch(70% 0 0), oklch(55% 0 0));
    }

    label.checkbox-control {
      display: inline-flex;
      align-items: flex-start;
      gap: 0.5rem;
      cursor: pointer;
      color: light-dark(oklch(28% 0 0), oklch(95% 0 0));

      &.has-error {
        outline: 1px solid light-dark(oklch(60% 0.2 25), oklch(0.75 0.12 25));
        outline-offset: 4px;
        border-radius: 8px;
      }

      &.has-warning {
        outline: 1px solid light-dark(oklch(0.75 0.12 85), oklch(0.75 0.12 85));
        outline-offset: 4px;
        border-radius: 8px;
      }

      &.has-success {
        outline: 1px solid light-dark(oklch(0.55 0.12 145), oklch(0.55 0.12 145));
        outline-offset: 4px;
        border-radius: 8px;
      }

      input[type="checkbox"] {
        inline-size: 1rem;
        block-size: 1rem;
        margin: 0.15rem 0 0;
        flex-shrink: 0;
        accent-color: light-dark(oklch(0.55 0.18 255), oklch(0.72 0.14 255));
      }

      span.checkbox-label {
        font-size: 1rem;
        line-height: 1.4;
      }
    }

    &.status-attached {
      label.checkbox-control.has-error,
      label.checkbox-control.has-warning,
      label.checkbox-control.has-success {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }
    }

    &.status-detached {
      q-form-field-status {
        margin-block-start: 0.35rem;
      }
    }
  }
}
q-form-field-label {
  label {
    font-size: 1rem;
    font-weight: 500;
    color: light-dark(#3c3c3c, var(--color-neutral-foreground));
    display: flex;
    align-items: baseline;

    span.optional {
      font-size: 0.75em;
      color: #acacac;

      span.dot {
        padding: 0 0.2rem;
      }
    }
  }
}
q-form-radio-group {
  display: block;
  container-type: inline-size;

  .input-field {
    display: flex;
    flex-direction: column;
    gap: 0;

    span.description {
      font-size: 0.75rem;
      padding-bottom: 0.2em;
      color: light-dark(#acacac, #808080);
    }

    .radio-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding-block: 0.25rem;

      &.has-error {
        outline: 1px solid light-dark(oklch(60% 0.2 25), oklch(0.75 0.12 25));
        outline-offset: 4px;
        border-radius: 8px;
      }

      &.has-warning {
        outline: 1px solid light-dark(oklch(0.75 0.12 85), oklch(0.75 0.12 85));
        outline-offset: 4px;
        border-radius: 8px;
      }

      &.has-success {
        outline: 1px solid light-dark(oklch(0.55 0.12 145), oklch(0.55 0.12 145));
        outline-offset: 4px;
        border-radius: 8px;
      }

      label.radio-option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        color: light-dark(oklch(0.28 0.02 260), oklch(0.94 0.01 260));

        input[type="radio"] {
          inline-size: 1rem;
          block-size: 1rem;
          margin: 0;
          flex-shrink: 0;
          accent-color: light-dark(oklch(0.55 0.18 255), oklch(0.72 0.14 255));
        }

        span.radio-label {
          font-size: 1rem;
          font-weight: 500;
        }

        span.radio-description {
          display: block;
          font-size: 0.8125rem;
          font-weight: 400;
          line-height: 1.4;
          color: light-dark(oklch(0.48 0.02 260), oklch(0.72 0.01 260));
        }

        span.radio-option-body {
          display: flex;
          flex-direction: column;
          gap: 0.2rem;
          min-inline-size: 0;
        }
      }

      &.radio-group--cards,
      &.radio-group--tiles {
        display: grid;
        gap: 0.5rem;

        label.radio-option--card {
          position: relative;
          align-items: flex-start;
          padding: 0.75rem 0.85rem;
          border-radius: 0.5rem;
          border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.34 0.02 260));
          background: light-dark(oklch(0.99 0.005 260), oklch(0.22 0.02 260));
          transition: border-color 120ms ease, box-shadow 120ms ease;

          &:hover {
            border-color: light-dark(oklch(0.72 0.04 255), oklch(0.48 0.04 255));
          }

          &:has(input:checked) {
            border-color: light-dark(oklch(0.55 0.14 255), oklch(0.68 0.12 255));
            box-shadow: 0 0 0 1px light-dark(oklch(0.55 0.14 255), oklch(0.68 0.12 255));
          }

          &:has(input:focus-visible) {
            outline: 2px solid light-dark(oklch(0.55 0.18 255), oklch(0.72 0.14 255));
            outline-offset: 2px;
          }
        }
      }

      &.radio-group--cards {
        @container (min-width: 32rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      &.radio-group--tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        label.radio-option--card {
          /*
           tiles hide the native control; selection reads from card border state
           keep input in the tree for form validation and screen readers
          */
          input[type="radio"] {
            position: absolute;
            inline-size: 1px;
            block-size: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
          }
        }
      }
    }

    &.status-attached {
      .radio-group.has-error,
      .radio-group.has-warning,
      .radio-group.has-success {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }
    }

    &.status-detached {
      q-form-field-status {
        margin-block-start: 0.35rem;
      }
    }
  }
}
q-card {
  display: block;
  container-type: inline-size;

  .card {
    border-radius: 0.625rem;
    background-color: var(--color-neutral);
    color: var(--color-neutral-foreground);
  }

  &[variant="outline"] .card {
    background-color: transparent;
    border: 1px solid light-dark(
      oklch(from var(--color-accent) 0.9 calc(c * 0.05) h),
      oklch(from var(--color-accent) 0.4 calc(c * 0.1) h)
    );
  }

  &[padding="none"] .card {
    padding: 0;
  }

  &[padding="sm"] .card {
    padding: 0.75rem;
  }

  &[padding="md"] .card {
    padding: 1rem;
  }

  &[padding="lg"] .card {
    padding: 1.5rem;
  }
}
q-heading {
  display: block;

  .heading {
    margin: 0;
    color: light-dark(oklch(0.15 0 0), oklch(0.95 0 0));
    line-height: 1.25;
  }

  &[align="center"] .heading {
    text-align: center;
  }

  &[align="end"] .heading {
    text-align: end;
  }

  &[weight="normal"] .heading {
    font-weight: 400;
  }

  &[weight="medium"] .heading {
    font-weight: 500;
  }

  &[weight="bold"] .heading {
    font-weight: 700;
  }

  &[size="xs"] .heading {
    font-size: 0.75rem;
  }

  &[size="sm"] .heading {
    font-size: 0.875rem;
  }

  &[size="md"] .heading {
    font-size: 1rem;
  }

  &[size="lg"] .heading {
    font-size: 1.25rem;
  }

  &[size="xl"] .heading {
    font-size: 1.5rem;
  }

  &[size="2xl"] .heading {
    font-size: 2rem;
  }

  &:not([size]) {
    &[level="1"] .heading {
      font-size: 2rem;
      font-weight: 700;
    }

    &[level="2"] .heading {
      font-size: 1.5rem;
      font-weight: 700;
    }

    &[level="3"] .heading {
      font-size: 1.25rem;
      font-weight: 600;
    }

    &[level="4"] .heading {
      font-size: 1.125rem;
      font-weight: 600;
    }

    &[level="5"] .heading {
      font-size: 1rem;
      font-weight: 600;
    }

    &[level="6"] .heading {
      font-size: 0.875rem;
      font-weight: 600;
    }
  }
}
q-form {
  display: block;

  form {
    display: grid;
    gap: 1rem;
  }
}
q-button-action {
  color-scheme: var(--q-color-scheme, light dark);
  display: inline-block;

  &[data-shake] {
    animation: button-action-shake 400ms ease;
  }
}

@keyframes button-action-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-0.25rem);
  }

  40%,
  80% {
    transform: translateX(0.25rem);
  }
}
q-form-actions {
  display: block;

  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  &[center] .actions {
    justify-content: center;
  }
}
q-form-field {
  div.input-field {
    display: flex;
    flex-direction: column;

    q-form-field-label + span.description,
    q-form-field-label + div.input-wrapper,
    span.description + div.input-wrapper {
      margin-block-start: 0.15rem;
    }

    span.description {
      font-size: 0.75rem;
      padding-bottom: 0.2em;
      color: light-dark(#acacac, #808080);
    }

    div.input-wrapper {
      display: flex;
      align-items: center;
      gap: 0.375rem;
      background-color: light-dark(#ffffff, #202020);
      border: 1px solid light-dark(#e3e3e3, #505050);
      border-radius: 10px;
      padding: 8px;

      &.has-error {
        border-color: var(--color-negative);
      }

      &.has-warning {
        border-color: var(--color-warning);
      }

      &.has-success {
        border-color: var(--color-positive);
      }

      input,
      textarea {
        all: unset;
        display: block;
        flex: 1;
        min-inline-size: 0;
        background: none;
        border: none;
        padding: 0;
        inline-size: 100%;
        resize: none;
        color: light-dark(oklch(32% 0 0), oklch(0.92 0 0));
      }

      textarea {
        field-sizing: content;
        min-block-size: 2.5rem;
        max-block-size: 20rem;
        line-height: 1.35;
      }

      &:has(textarea) {
        align-items: flex-start;
      }

      .shortcut {
        display: inline-flex;
        align-items: center;
        gap: 0.125rem;
        flex-shrink: 0;
        opacity: 0.85;
        color: light-dark(oklch(45% 0 0), oklch(68% 0 0));
      }

      .shortcut-key {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: 1.25em;
        padding: 0.0625em 0.3125em;
        border-radius: 0.25rem;
        border: 1px solid color-mix(in oklch, currentColor 22%, transparent);
        background: color-mix(in oklch, currentColor 10%, transparent);
        font-family: inherit;
        font-size: 0.75em;
        font-weight: 600;
        line-height: 1.2;
      }

      &:has(:disabled) {
        background-color: light-dark(oklch(0.97 0 0), oklch(0.17 0 0));
        border-color: light-dark(oklch(0.91 0 0), oklch(0.42 0 0));
      }

      input:disabled,
      textarea:disabled {
        color: light-dark(oklch(0.72 0 0), oklch(0.58 0 0));
        cursor: not-allowed;
      }
    }

    &.status-attached {
      div.input-wrapper.has-error,
      div.input-wrapper.has-warning,
      div.input-wrapper.has-success {
        border-radius: 10px 10px 0 0;
      }
    }

    &.status-detached {
      q-form-field-status {
        margin-block-start: 0.35rem;
      }
    }
  }
}
q-form-email {
  display: block;

  .email-health-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.35rem;
  }
}
q-form-phone {
  q-form-field div.input-field div.input-wrapper input {
    font-variant-numeric: tabular-nums;
  }
}
q-image {
  display: inline-block;
  line-height: 0;

  .image {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  &[fit="cover"] .image {
    object-fit: cover;
  }

  &[fit="contain"] .image {
    object-fit: contain;
  }

  &[fit="fill"] .image {
    object-fit: fill;
  }

  &[fit="none"] .image {
    object-fit: none;
  }

  &[radius="sm"] .image {
    border-radius: 0.25rem;
  }

  &[radius="md"] .image {
    border-radius: 0.5rem;
  }

  &[radius="lg"] .image {
    border-radius: 0.75rem;
  }

  &[radius="full"] .image {
    border-radius: calc(infinity * 1px);
  }
}
q-form-password {
  display: block;
}
q-context-callout {
  display: block;

  .context-callout {
    position: relative;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: 0;
    background-color: light-dark(
      oklch(from var(--color-canvas) calc(l - 0.025) c h),
      oklch(from var(--color-canvas) calc(l + 0.035) c h)
    );
    color: light-dark(oklch(0.35 0.02 260), oklch(0.88 0.01 260));

    &[hidden] {
      display: none;
    }

    .context-callout__dismiss {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.75rem;
      padding: 0;
      border: 0;
      border-radius: 0.375rem;
      background: transparent;
      color: inherit;
      font: inherit;
      line-height: 1;
      cursor: pointer;
      opacity: 0;
      transition: opacity 120ms ease, background 120ms ease;

      &:hover {
        background: light-dark(oklch(0.9 0.02 260 / 0.6), oklch(0.3 0.02 260 / 0.7));
      }

      &:focus-visible {
        opacity: 1;
        outline: 2px solid light-dark(oklch(0.55 0.12 260), oklch(0.72 0.1 260));
        outline-offset: 1px;
      }
    }

    &:hover .context-callout__dismiss,
    &:focus-within .context-callout__dismiss {
      opacity: 1;
    }

    .context-callout__body {
      padding-right: 1.5rem;
      font-size: 0.9375rem;
      line-height: 1.5;

      :where(p) {
        margin: 0;
      }

      :where(p + p) {
        margin-top: 0.5rem;
      }
    }
  }

  &[variant="transparent"] .context-callout {
    background-color: transparent;
  }
}
q-dialog {
  display: contents;

  .dialog {
    border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.35 0 0));
    border-radius: 0.5rem;
    padding: 1rem;
    background: light-dark(oklch(0.99 0 0), oklch(0.22 0 0));
    color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
    max-width: min(24rem, calc(100vw - 2rem));

    &::backdrop {
      background: light-dark(oklch(0.2 0 0 / 0.35), oklch(0.05 0 0 / 0.55));
    }
  }
}
q-paragraph {
  display: block;

  .paragraph {
    margin: 0;
    color: var(--color-neutral-foreground);
    line-height: 1.5;
  }

  &[size="sm"] .paragraph {
    font-size: 0.875rem;
  }

  &[size="md"] .paragraph {
    font-size: 1rem;
  }

  &[size="lg"] .paragraph {
    font-size: 1.125rem;
  }

  &[align="center"] .paragraph {
    text-align: center;
  }

  &[align="end"] .paragraph {
    text-align: end;
  }

  &[muted] .paragraph {
    color: light-dark(
      oklch(from var(--color-neutral-foreground) l c h / 0.72),
      oklch(from var(--color-neutral-foreground) l c h / 0.72)
    );
  }
}
q-form-text {
  display: block;
}
q-form-text-slug {
  display: block;

  .input-field {
    display: flex;
    flex-direction: column;

    q-form-field-label + span.description,
    q-form-field-label + div.input-wrapper,
    span.description + div.input-wrapper {
      margin-block-start: 0.15rem;
    }

    span.description {
      font-size: 0.75rem;
      padding-bottom: 0.2em;
      color: light-dark(#acacac, #808080);
    }

    div.input-wrapper {
      display: flex;
      align-items: center;
      gap: 0.375rem;
      background-color: light-dark(#ffffff, #202020);
      border: 1px solid light-dark(#e3e3e3, #505050);
      border-radius: 10px;
      padding: 8px;

      &.has-error {
        border-color: var(--color-negative);
      }

      &.has-warning {
        border-color: var(--color-warning);
      }

      &.has-success {
        border-color: var(--color-positive);
      }

      input,
      textarea {
        all: unset;
        display: block;
        flex: 1;
        min-inline-size: 0;
        background: none;
        border: none;
        padding: 0;
        inline-size: 100%;
        resize: none;
        color: light-dark(oklch(32% 0 0), oklch(0.92 0 0));
      }

      &:has(:disabled) {
        background-color: light-dark(oklch(0.97 0 0), oklch(0.17 0 0));
        border-color: light-dark(oklch(0.91 0 0), oklch(0.42 0 0));
      }

      input:disabled,
      textarea:disabled {
        color: light-dark(oklch(0.72 0 0), oklch(0.58 0 0));
        cursor: not-allowed;
      }
    }

    &.status-attached {
      div.input-wrapper.has-error,
      div.input-wrapper.has-warning,
      div.input-wrapper.has-success {
        border-radius: 10px 10px 0 0;
      }
    }

    &.status-detached {
      q-form-field-status {
        margin-block-start: 0.35rem;
      }
    }
  }

  .text-slug {
    margin-block-start: 0.35rem;
    font-size: 0.75rem;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));

    &[data-editing="true"] {
      .text-slug__view {
        display: none;
      }

      .text-slug__input-wrap {
        display: flex;
      }
    }

    &[data-editing="false"] {
      .text-slug__input-wrap {
        display: none;
      }
    }
  }

  .text-slug__view {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
  }

  .text-slug__label {
    font-weight: 600;
    color: light-dark(oklch(38% 0 0), oklch(78% 0 0));
  }

  .text-slug__value {
    font-family: ui-monospace, monospace;
    word-break: break-all;

    &[data-empty="true"] {
      font-style: italic;
      color: light-dark(oklch(62% 0 0), oklch(58% 0 0));
    }
  }

  .text-slug__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: light-dark(oklch(52% 0 0), oklch(68% 0 0));
    cursor: pointer;

    q-icon {
      display: block;
    }

    &:hover {
      color: light-dark(oklch(42% 0 0), oklch(78% 0 0));
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }
  }

  .text-slug__input-wrap {
    margin-block-start: 0.15rem;
  }
}
q-form-number {
  q-form-field div.input-field div.input-wrapper input {
    font-variant-numeric: tabular-nums;
  }
}
q-icon {
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
  color: currentColor;

  svg {
    display: block;
  }
}
:where(q-form-text-locales, q-form-textarea-locales, q-form-text-slug-locales) {
  display: block;

  .input-field {
    display: flex;
    flex-direction: column;

    q-form-field-label + span.description,
    q-form-field-label + .text-locales-controls,
    span.description + .text-locales-controls {
      margin-block-start: 0.15rem;
    }

    span.description {
      font-size: 0.75rem;
      padding-bottom: 0.2em;
      color: light-dark(#acacac, #808080);
    }
  }

  .text-locales-controls {
    display: grid;
    gap: 0.5rem;

    &[data-layout="all"] {
      gap: 0;
    }
  }

  .input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: light-dark(#ffffff, #202020);
    border: 1px solid light-dark(#e3e3e3, #505050);
    border-radius: 10px;
    padding: 8px;

    &.has-error {
      border-color: var(--color-negative);
    }

    &.has-warning {
      border-color: var(--color-warning);
    }

    &.has-success {
      border-color: var(--color-positive);
    }

    .text-locales-input {
      all: unset;
      display: block;
      flex: 1;
      min-inline-size: 0;
      inline-size: 100%;
      resize: none;
      color: light-dark(oklch(32% 0 0), oklch(0.92 0 0));
    }

    .text-locales-input[dir="rtl"] {
      direction: rtl;
      text-align: right;
      unicode-bidi: plaintext;
    }

    &:has(:disabled) {
      background-color: light-dark(oklch(0.97 0 0), oklch(0.17 0 0));
      border-color: light-dark(oklch(0.91 0 0), oklch(0.42 0 0));
    }
  }

  .text-locales-locale-switch,
  .text-locales-menu-trigger-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    padding-inline-start: 0.25rem;
    border-inline-start: 1px dashed light-dark(oklch(84% 0 0), oklch(38% 0 0));

    q-icon {
      display: block;
      color: light-dark(oklch(52% 0 0), oklch(68% 0 0));
    }
  }

  .text-locales-locale-switch__options {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
  }

  .text-locales-locale-switch__option,
  .text-locales-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.125rem 0.375rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    cursor: pointer;

    &[aria-pressed="true"],
    &[aria-expanded="true"] {
      background: light-dark(oklch(94% 0 0), oklch(28% 0 0));
      color: light-dark(oklch(28% 0 0), oklch(90% 0 0));
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }
  }

  .text-locales-locale-switch__option--inactive {
    overflow: hidden;
    inline-size: 0;
    padding-inline: 0;
    opacity: 0;
    pointer-events: none;
    transition:
      inline-size 0.15s ease,
      opacity 0.15s ease,
      padding 0.15s ease;
  }

  .text-locales-locale-switch:hover .text-locales-locale-switch__option--inactive,
  .text-locales-locale-switch:focus-within .text-locales-locale-switch__option--inactive {
    inline-size: auto;
    padding-inline: 0.375rem;
    opacity: 1;
    pointer-events: auto;
  }

  .text-locales-menu-chevron {
    display: inline-block;
    inline-size: 0.35rem;
    block-size: 0.35rem;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.05rem;
  }

  .text-locales-menu-trigger[aria-expanded="true"] .text-locales-menu-chevron {
    rotate: -135deg;
    translate: 0 0.1rem;
  }

  .text-locales-menu {
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    box-sizing: border-box;
    border: 1px solid light-dark(#e3e3e3, #505050);
    border-radius: 10px;
    background: light-dark(#ffffff, #202020);
    box-shadow: 0 0.5rem 1.25rem light-dark(oklch(0.2 0 0 / 0.12), oklch(0.05 0 0 / 0.45));
  }

  .text-locales-stack {
    overflow: hidden;
    border: 1px solid light-dark(#e3e3e3, #505050);
    border-radius: 10px;
    background-color: light-dark(#ffffff, #202020);

    &.has-error {
      border-color: var(--color-negative);
    }

    &.has-warning {
      border-color: var(--color-warning);
    }

    &.has-success {
      border-color: var(--color-positive);
    }

    &:has(:disabled) {
      background-color: light-dark(oklch(0.97 0 0), oklch(0.17 0 0));
      border-color: light-dark(oklch(0.91 0 0), oklch(0.42 0 0));
    }
  }

  .text-locales-stack__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.5rem;
    padding: 0 8px;
    border-block-end: 1px solid light-dark(#e3e3e3, #505050);

    &:last-child {
      border-block-end: 0;
    }

    .text-locales-input {
      all: unset;
      display: block;
      flex: 1;
      min-inline-size: 0;
      inline-size: 100%;
      color: light-dark(oklch(32% 0 0), oklch(0.92 0 0));
    }

    .text-locales-input[dir="rtl"] {
      direction: rtl;
      text-align: right;
      unicode-bidi: plaintext;
    }
  }

  .text-locales-stack__label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    color: light-dark(oklch(52% 0 0), oklch(68% 0 0));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }

  .text-locales-collapse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.125rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: light-dark(oklch(52% 0 0), oklch(68% 0 0));
    cursor: pointer;
    transition:
      color 0.15s ease,
      background 0.15s ease;

    &:hover:not(:disabled) {
      background: light-dark(oklch(94% 0 0), oklch(28% 0 0));
      color: light-dark(oklch(28% 0 0), oklch(90% 0 0));
    }

    &:focus-visible {
      outline: 2px solid light-dark(oklch(55% 0.12 250), oklch(65% 0.12 250));
      outline-offset: 1px;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }
  }

  .text-locales-menu__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.45rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    cursor: pointer;

    &:hover,
    &[aria-selected="true"] {
      background: light-dark(oklch(0.97 0 0), oklch(0.24 0 0));
    }
  }

  .text-locales-menu__option--all {
    margin-block-start: 0.25rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid light-dark(oklch(92% 0 0), oklch(28% 0 0));
    font-weight: 600;
  }
}

q-form-textarea-locales {
  .input-wrapper,
  .text-locales-stack__row {
    align-items: flex-start;
  }

  .input-wrapper textarea.text-locales-input,
  .text-locales-stack__row textarea.text-locales-input {
    field-sizing: content;
    min-block-size: 2.5rem;
    max-block-size: 16rem;
    line-height: 1.35;
    resize: none;
    overflow: hidden;
  }

  .text-locales-stack__row {
    min-block-size: auto;
    padding-block: 8px;
  }

  .text-locales-locale-switch,
  .text-locales-menu-trigger-wrap {
    align-self: flex-start;
    margin-block-start: 0.125rem;
  }
}
:where(q-form-text-locales, q-form-textarea-locales, q-form-text-slug-locales) {
  display: block;

  .input-field {
    display: flex;
    flex-direction: column;

    q-form-field-label + span.description,
    q-form-field-label + .text-locales-controls,
    span.description + .text-locales-controls {
      margin-block-start: 0.15rem;
    }

    span.description {
      font-size: 0.75rem;
      padding-bottom: 0.2em;
      color: light-dark(#acacac, #808080);
    }
  }

  .text-locales-controls {
    display: grid;
    gap: 0.5rem;

    &[data-layout="all"] {
      gap: 0;
    }
  }

  .input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: light-dark(#ffffff, #202020);
    border: 1px solid light-dark(#e3e3e3, #505050);
    border-radius: 10px;
    padding: 8px;

    &.has-error {
      border-color: var(--color-negative);
    }

    &.has-warning {
      border-color: var(--color-warning);
    }

    &.has-success {
      border-color: var(--color-positive);
    }

    .text-locales-input {
      all: unset;
      display: block;
      flex: 1;
      min-inline-size: 0;
      inline-size: 100%;
      resize: none;
      color: light-dark(oklch(32% 0 0), oklch(0.92 0 0));
    }

    .text-locales-input[dir="rtl"] {
      direction: rtl;
      text-align: right;
      unicode-bidi: plaintext;
    }

    &:has(:disabled) {
      background-color: light-dark(oklch(0.97 0 0), oklch(0.17 0 0));
      border-color: light-dark(oklch(0.91 0 0), oklch(0.42 0 0));
    }
  }

  .text-locales-locale-switch,
  .text-locales-menu-trigger-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    padding-inline-start: 0.25rem;
    border-inline-start: 1px dashed light-dark(oklch(84% 0 0), oklch(38% 0 0));

    q-icon {
      display: block;
      color: light-dark(oklch(52% 0 0), oklch(68% 0 0));
    }
  }

  .text-locales-locale-switch__options {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
  }

  .text-locales-locale-switch__option,
  .text-locales-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.125rem 0.375rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    cursor: pointer;

    &[aria-pressed="true"],
    &[aria-expanded="true"] {
      background: light-dark(oklch(94% 0 0), oklch(28% 0 0));
      color: light-dark(oklch(28% 0 0), oklch(90% 0 0));
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }
  }

  .text-locales-locale-switch__option--inactive {
    overflow: hidden;
    inline-size: 0;
    padding-inline: 0;
    opacity: 0;
    pointer-events: none;
    transition:
      inline-size 0.15s ease,
      opacity 0.15s ease,
      padding 0.15s ease;
  }

  .text-locales-locale-switch:hover .text-locales-locale-switch__option--inactive,
  .text-locales-locale-switch:focus-within .text-locales-locale-switch__option--inactive {
    inline-size: auto;
    padding-inline: 0.375rem;
    opacity: 1;
    pointer-events: auto;
  }

  .text-locales-menu-chevron {
    display: inline-block;
    inline-size: 0.35rem;
    block-size: 0.35rem;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.05rem;
  }

  .text-locales-menu-trigger[aria-expanded="true"] .text-locales-menu-chevron {
    rotate: -135deg;
    translate: 0 0.1rem;
  }

  .text-locales-menu {
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    box-sizing: border-box;
    border: 1px solid light-dark(#e3e3e3, #505050);
    border-radius: 10px;
    background: light-dark(#ffffff, #202020);
    box-shadow: 0 0.5rem 1.25rem light-dark(oklch(0.2 0 0 / 0.12), oklch(0.05 0 0 / 0.45));
  }

  .text-locales-stack {
    overflow: hidden;
    border: 1px solid light-dark(#e3e3e3, #505050);
    border-radius: 10px;
    background-color: light-dark(#ffffff, #202020);

    &.has-error {
      border-color: var(--color-negative);
    }

    &.has-warning {
      border-color: var(--color-warning);
    }

    &.has-success {
      border-color: var(--color-positive);
    }

    &:has(:disabled) {
      background-color: light-dark(oklch(0.97 0 0), oklch(0.17 0 0));
      border-color: light-dark(oklch(0.91 0 0), oklch(0.42 0 0));
    }
  }

  .text-locales-stack__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.5rem;
    padding: 0 8px;
    border-block-end: 1px solid light-dark(#e3e3e3, #505050);

    &:last-child {
      border-block-end: 0;
    }

    .text-locales-input {
      all: unset;
      display: block;
      flex: 1;
      min-inline-size: 0;
      inline-size: 100%;
      color: light-dark(oklch(32% 0 0), oklch(0.92 0 0));
    }

    .text-locales-input[dir="rtl"] {
      direction: rtl;
      text-align: right;
      unicode-bidi: plaintext;
    }
  }

  .text-locales-stack__label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    color: light-dark(oklch(52% 0 0), oklch(68% 0 0));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }

  .text-locales-collapse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.125rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: light-dark(oklch(52% 0 0), oklch(68% 0 0));
    cursor: pointer;
    transition:
      color 0.15s ease,
      background 0.15s ease;

    &:hover:not(:disabled) {
      background: light-dark(oklch(94% 0 0), oklch(28% 0 0));
      color: light-dark(oklch(28% 0 0), oklch(90% 0 0));
    }

    &:focus-visible {
      outline: 2px solid light-dark(oklch(55% 0.12 250), oklch(65% 0.12 250));
      outline-offset: 1px;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }
  }

  .text-locales-menu__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.45rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    cursor: pointer;

    &:hover,
    &[aria-selected="true"] {
      background: light-dark(oklch(0.97 0 0), oklch(0.24 0 0));
    }
  }

  .text-locales-menu__option--all {
    margin-block-start: 0.25rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid light-dark(oklch(92% 0 0), oklch(28% 0 0));
    font-weight: 600;
  }
}

q-form-textarea-locales {
  .input-wrapper,
  .text-locales-stack__row {
    align-items: flex-start;
  }

  .input-wrapper textarea.text-locales-input,
  .text-locales-stack__row textarea.text-locales-input {
    field-sizing: content;
    min-block-size: 2.5rem;
    max-block-size: 16rem;
    line-height: 1.35;
    resize: none;
    overflow: hidden;
  }

  .text-locales-stack__row {
    min-block-size: auto;
    padding-block: 8px;
  }

  .text-locales-locale-switch,
  .text-locales-menu-trigger-wrap {
    align-self: flex-start;
    margin-block-start: 0.125rem;
  }
}

q-form-textarea-locales {
  display: block;
}
q-form-select {
  .input-field {
    display: flex;
    flex-direction: column;
    gap: 0;

    span.description {
      font-size: 0.75rem;
      padding-bottom: 0.2em;
      color: light-dark(#acacac, #808080);
    }

    .input-wrapper {
      position: relative;
      background-color: light-dark(#ffffff, #202020);
      border: 1px solid light-dark(#e3e3e3, #505050);
      border-radius: 10px;

      &.has-error {
        border-color: light-dark(oklch(60% 0.2 25), oklch(0.75 0.12 25));
      }

      &.has-warning {
        border-color: light-dark(oklch(0.75 0.12 85), oklch(0.75 0.12 85));
      }

      &.has-success {
        border-color: light-dark(oklch(0.55 0.12 145), oklch(0.55 0.12 145));
      }

      select,
      .select-filter {
        all: unset;
        display: block;
        box-sizing: border-box;
        inline-size: 100%;
        padding: 8px;
        cursor: pointer;
        color: light-dark(oklch(32% 0 0), oklch(0.92 0 0));
      }

      .select-filter {
        cursor: text;
        padding-inline-end: 1.75rem;
      }

      .select-arrow {
        position: absolute;
        inset-inline-end: 0.85rem;
        inset-block-start: 50%;
        inline-size: 0.35rem;
        block-size: 0.35rem;
        border-inline-end: 1.5px solid light-dark(oklch(0.62 0 0), oklch(0.58 0 0));
        border-block-end: 1.5px solid light-dark(oklch(0.62 0 0), oklch(0.58 0 0));
        rotate: 45deg;
        translate: 0 -65%;
        pointer-events: none;
      }

      &:has(.select-filter[aria-expanded="true"]) .select-arrow {
        rotate: -135deg;
        translate: 0 -35%;
      }

      &.has-select-arrow {
        select {
          appearance: none;
          padding-inline-end: 2rem;
        }
      }

      &.filterable {
        anchor-name: var(--select-anchor-name);

        .select-arrow {
          pointer-events: auto;
          cursor: pointer;
        }
      }

      .select-menu {
        position: fixed;
        position-anchor: var(--select-anchor-name);
        position-area: bottom span-left;
        position-try-fallbacks: flip-block;
        inset: unset;
        margin: 0;
        margin-block-start: 0.25rem;
        padding: 0.35rem;
        list-style: none;
        box-sizing: border-box;
        min-inline-size: anchor-size(inline);
        max-block-size: 14rem;
        overflow: auto;
        border: 1px solid light-dark(#e3e3e3, #505050);
        border-radius: 10px;
        background: light-dark(#ffffff, #202020);
        box-shadow: 0 0.5rem 1.25rem light-dark(oklch(0.2 0 0 / 0.12), oklch(0.05 0 0 / 0.45));
      }

      .select-menu:popover-open {
        display: block;
      }

      .select-option {
        padding: 0.45rem 0.55rem;
        border-radius: 0.45rem;
        cursor: pointer;
        color: light-dark(oklch(32% 0 0), oklch(0.92 0 0));

        &:hover,
        &:focus,
        &.select-option-active {
          background: light-dark(oklch(0.96 0 0), oklch(0.28 0 0));
        }
      }

      .select-option-empty {
        cursor: default;
        color: light-dark(oklch(0.55 0 0), oklch(0.65 0 0));

        &:hover {
          background: transparent;
        }
      }

      &:has(:disabled) {
        background-color: light-dark(oklch(0.97 0 0), oklch(0.17 0 0));
        border-color: light-dark(oklch(0.91 0 0), oklch(0.42 0 0));
      }

      select:disabled,
      .select-filter:disabled {
        color: light-dark(oklch(0.72 0 0), oklch(0.58 0 0));
        cursor: not-allowed;
      }
    }

    &.status-attached {
      .input-wrapper.has-error,
      .input-wrapper.has-warning,
      .input-wrapper.has-success {
        border-radius: 10px 10px 0 0;
      }
    }

    &.status-detached {
      q-form-field-status {
        margin-block-start: 0.35rem;
      }
    }
  }
}
q-form-switch {
  --switch-track-width: 2.25rem;
  --switch-track-height: 1.375rem;
  --switch-thumb-size: 1.1rem;
  --switch-thumb-offset: 0.125rem;
  --switch-thumb-travel: 0.9rem;

  &[size="xs"] {
    --switch-track-width: 1.5rem;
    --switch-track-height: 0.9375rem;
    --switch-thumb-size: 0.75rem;
    --switch-thumb-offset: 0.09rem;
    --switch-thumb-travel: 0.57rem;
  }

  &[size="sm"] {
    --switch-track-width: 2rem;
    --switch-track-height: 1.25rem;
    --switch-thumb-size: 1rem;
    --switch-thumb-offset: 0.11rem;
    --switch-thumb-travel: 0.78rem;
  }

  &[size="lg"] {
    --switch-track-width: 2.5rem;
    --switch-track-height: 1.5rem;
    --switch-thumb-size: 1.2rem;
    --switch-thumb-offset: 0.15rem;
    --switch-thumb-travel: 1rem;
  }

  &[size="xl"] {
    --switch-track-width: 2.75rem;
    --switch-track-height: 1.625rem;
    --switch-thumb-size: 1.35rem;
    --switch-thumb-offset: 0.16rem;
    --switch-thumb-travel: 1.08rem;
  }

  .input-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;

    span.description {
      font-size: 0.75rem;
      color: light-dark(oklch(70% 0 0), oklch(55% 0 0));
    }

    label.switch-control {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      cursor: pointer;
      color: light-dark(oklch(28% 0 0), oklch(95% 0 0));
      inline-size: fit-content;

      &.has-error {
        outline: 1px solid light-dark(oklch(60% 0.2 25), oklch(0.75 0.12 25));
        outline-offset: 4px;
        border-radius: 8px;
      }

      &.has-warning {
        outline: 1px solid light-dark(oklch(0.75 0.12 85), oklch(0.75 0.12 85));
        outline-offset: 4px;
        border-radius: 8px;
      }

      &.has-success {
        outline: 1px solid light-dark(oklch(0.55 0.12 145), oklch(0.55 0.12 145));
        outline-offset: 4px;
        border-radius: 8px;
      }

      input[type="checkbox"] {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      span.switch-track {
        position: relative;
        display: inline-flex;
        align-items: center;
        inline-size: var(--switch-track-width);
        block-size: var(--switch-track-height);
        border-radius: 999px;
        background: light-dark(oklch(88% 0 0), oklch(44% 0 0));
        transition: background-color 120ms ease;
        flex-shrink: 0;
      }

      span.switch-thumb {
        position: absolute;
        inset-inline-start: var(--switch-thumb-offset);
        inline-size: var(--switch-thumb-size);
        block-size: var(--switch-thumb-size);
        border-radius: 999px;
        background: light-dark(oklch(100% 0 0), oklch(92% 0 0));
        box-shadow: 0 1px 2px light-dark(oklch(0% 0 0 / 0.18), oklch(0% 0 0 / 0.45));
        transition: transform 120ms ease;
      }

      input[type="checkbox"]:checked + span.switch-track {
        background: var(--color-accent);
      }

      input[type="checkbox"]:checked + span.switch-track span.switch-thumb {
        transform: translateX(var(--switch-thumb-travel));
      }

      input[type="checkbox"]:disabled + span.switch-track {
        opacity: 0.55;
        cursor: not-allowed;
      }

      input[type="checkbox"]:focus-visible + span.switch-track {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
      }

      span.switch-label {
        font-size: 0.875rem;
        line-height: 1.35;
      }
    }

    &.status-attached {
      label.switch-control.has-error,
      label.switch-control.has-warning,
      label.switch-control.has-success {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }
    }

    &.status-detached {
      q-form-field-status {
        margin-block-start: 0.35rem;
      }
    }
  }
}
q-form-textarea {
  display: block;
}
q-form-file {
  display: block

  .q-form-file__body {
    display: grid
    gap: 0.5rem
  }

  .q-form-file__label {
    display: block
    font-size: 0.875rem
    font-weight: 600
    color: light-dark(oklch(0.35 0.02 260), oklch(0.85 0.02 260))
  }

  /*
   keep input in DOM for form submit; hide visually so only the button shows
   programmatic input.click() from the button click handler still opens the picker
  */
  .q-form-file__input {
    display: none
  }

  .q-form-file__actions {
    display: flex
    flex-wrap: wrap
    gap: 0.5rem
  }

  .q-form-file__choose,
  .q-form-file__picker {
    display: inline-flex
    align-items: center
    justify-content: center
    padding: 0.5rem 0.875rem
    border-radius: 0.5rem
    border: 1px solid light-dark(oklch(0.82 0.02 260), oklch(0.35 0.02 260))
    background: light-dark(oklch(0.98 0.01 260), oklch(0.22 0.02 260))
    color: light-dark(oklch(0.25 0.02 260), oklch(0.92 0.02 260))
    font: inherit
    cursor: pointer
  }

  .q-form-file__choose:disabled,
  .q-form-file__picker:disabled {
    opacity: 0.5
    cursor: not-allowed
  }

  .q-form-file__name {
    font-size: 0.8125rem
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260))
  }
}
q-toast {
  display: contents;

  .stack {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    pointer-events: none;
  }

  .toast-item {
    position: relative;
    display: grid;
    gap: 0.25rem;
    min-inline-size: 16rem;
    max-inline-size: min(calc(100vw - 2rem), 24rem);
    padding: 0.875rem 2.25rem 0.875rem 1rem;
    border-radius: 0.625rem;
    background-color: var(--color-neutral);
    color: var(--color-neutral-foreground);
    box-shadow: light-dark(
      oklch(0 0 0 / 0.12),
      oklch(0 0 0 / 0.4)
    );
    pointer-events: auto;
    animation: q-toast-enter 180ms ease-out;
  }

  .title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .description {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .dismiss {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
  }

  .dismiss:hover {
    background-color: var(--color-overlay-hover);
  }

  .toast-item[tone="negative"] {
    background-color: var(--color-negative);
    color: var(--color-negative-foreground);
  }

  .toast-item[tone="warning"] {
    background-color: var(--color-warning);
    color: var(--color-warning-foreground);
  }

  .toast-item[tone="info"] {
    background-color: var(--color-info);
    color: var(--color-info-foreground);
  }
}

@keyframes q-toast-enter {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
q-tooltip {
  display: inline-flex;
  vertical-align: middle;
  --tooltip-position-area: top;

  .tooltip {
    display: inline-flex;
    vertical-align: inherit;
  }

  .tooltip-trigger {
    display: inline-flex;
    vertical-align: inherit;
    anchor-name: var(--tooltip-anchor-name);

    :is(button, a[href], input, select, textarea) {
      interest-show-delay: 0.35s;
      interest-hide-delay: 0.1s;
    }
  }

  .tooltip-bubble {
    position: fixed;
    position-anchor: var(--tooltip-anchor-name);
    position-area: var(--tooltip-position-area);
    position-try-fallbacks: flip-block, flip-inline;
    inset: unset;
    margin: 0;
    translate: 0 -0.375rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.375rem;
    background: light-dark(oklch(0.18 0 0), oklch(0.18 0 0));
    color: light-dark(oklch(0.96 0 0), oklch(0.96 0 0));
    box-shadow: 0 0.35rem 0.85rem light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.35));
    font-size: 0.75rem;
    line-height: 1.25;
    white-space: nowrap;
    pointer-events: none;
  }

  .tooltip-bubble:popover-open {
    pointer-events: auto;
  }

  &[wrap]:not([wrap="false"]) .tooltip-bubble {
    white-space: pre-line;
    max-inline-size: min(var(--tooltip-max-inline-size, 28rem), calc(100vw - 2rem));
    text-wrap: pretty;
  }

  &[position="bottom"] {
    --tooltip-position-area: bottom;

    .tooltip-bubble {
      translate: 0 0.375rem;
    }
  }

  &[position="start"] {
    --tooltip-position-area: inline-start;

    .tooltip-bubble {
      translate: -0.375rem 0;
    }
  }

  &[position="end"] {
    --tooltip-position-area: inline-end;

    .tooltip-bubble {
      translate: 0.375rem 0;
    }
  }

  &[data-preview-tooltip] {
    .tooltip-bubble {
      display: inline-flex;
      position: relative;
      position-anchor: unset;
      translate: none;
      margin-block-start: 0.5rem;
      pointer-events: auto;
    }
  }
}
q-table,
q-table-interactive .table-interactive-table {
  display: block;
  inline-size: 100%;
  user-select: none;
  font-size: 0.8125rem;
  line-height: 1.35;

  --padding-x: 0.75rem;
  --padding-y: 0.5rem;
  --border-color: light-dark(oklch(90% 0 0), oklch(25% 0 0));
  --muted: light-dark(oklch(90% 0 0), oklch(25% 0 0));
  --muted-foreground: light-dark(oklch(50% 0 0), oklch(60% 0 0));

  table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;

    thead {
      tr.table-head-stash {
        display: none;
      }

      tr {
        th {
          background-color: var(--muted);
          padding: var(--padding-y) var(--padding-x);
          border-inline-end: 1px solid var(--border-color);
          border-block-end: 1px solid var(--border-color);
          font-weight: 700;
          color: var(--muted-foreground);

          .th-content {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 0.25rem;
          }

          &[data-ui-align="end"] .th-content {
            justify-content: flex-end;
          }

          &[data-ui-align="start"] .th-content {
            justify-content: flex-start;
          }

          &:last-child {
            border-inline-end: none;
          }
        }
      }
    }

    td[data-ui-mono="true"],
    th[data-ui-mono="true"] {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    td[data-ui-tabular-nums="true"],
    th[data-ui-tabular-nums="true"] {
      font-variant-numeric: tabular-nums;
    }

    td[data-ui-align="end"],
    th[data-ui-align="end"] {
      text-align: end;
    }

    td[data-ui-align="start"],
    th[data-ui-align="start"] {
      text-align: start;
    }

    tbody {
      tr {
        td {
          padding: var(--padding-y) var(--padding-x);
          border-inline-end: 1px solid var(--border-color);
          border-block-end: 1px solid var(--border-color);

          &:last-child {
            border-inline-end: none;
          }
        }

        &:last-child td {
          border-block-end: none;
        }
      }
    }
  }
}
q-popover-menu {
  display: inline-block;
  position: relative;

  .popover-menu-root {
    display: inline-flex;
    align-items: center;
  }

  .popover-menu-host {
    anchor-name: var(--select-anchor-name);
  }

  .popover-menu-panel {
    position: fixed;
    position-anchor: var(--select-anchor-name);
    position-area: bottom span-right;
    position-try-fallbacks: flip-block;
    inset: unset;
    z-index: 40;
    margin: 0;
    margin-block-start: 0.25rem;
    padding: 0.375rem;
    box-sizing: border-box;
    min-inline-size: 12rem;
    max-inline-size: min(18rem, 90vw);
    border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
    border-radius: 0.625rem;
    background: light-dark(oklch(99% 0 0), oklch(20% 0 0));
    box-shadow: 0 0.5rem 1.25rem light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.45));
    color: light-dark(oklch(22% 0 0), oklch(92% 0 0));
  }

  .popover-menu-list,
  .popover-menu-submenu__list {
    .popover-menu-separator {
      list-style: none;
      margin: 0.25rem 0;
      padding: 0;
      border: 0;
      border-block-end: 1px solid light-dark(oklch(92% 0 0), oklch(28% 0 0));
      block-size: 0;
    }

    .popover-menu-group-label {
      list-style: none;
      margin: 0;
      padding: 0.375rem 0.5rem 0.125rem;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: light-dark(oklch(52% 0 0), oklch(64% 0 0));
    }
  }

  .popover-menu-list {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .popover-menu-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.45rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    cursor: default;

    &:not(:has(.popover-menu-item__icon)) {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    &:hover,
    &.is-active {
      background: light-dark(oklch(0.97 0 0), oklch(0.24 0 0));
    }

    &.is-disabled {
      opacity: 0.45;
      pointer-events: none;
    }
  }

  .popover-menu-item__icon,
  .popover-menu-submenu__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: light-dark(oklch(52% 0 0), oklch(66% 0 0));
  }

  .popover-menu-item__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .popover-menu-item__chevron {
    color: light-dark(oklch(58% 0 0), oklch(62% 0 0));
    font-size: 0.875rem;
    line-height: 1;
  }

  .popover-menu-submenu,
  .popover-menu-subsubmenu {
    position: fixed;
    z-index: 41;
    margin: 0;
    padding: 0.375rem;
    box-sizing: border-box;
    min-inline-size: 11rem;
    max-inline-size: min(16rem, 90vw);
    max-block-size: min(20rem, calc(100dvh - 1rem));
    overflow: auto;
    border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
    border-radius: 0.625rem;
    background: light-dark(oklch(99% 0 0), oklch(20% 0 0));
    box-shadow: 0 0.5rem 1.25rem light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.45));
    color: light-dark(oklch(22% 0 0), oklch(92% 0 0));
  }

  .popover-menu-subsubmenu {
    z-index: 42;
  }

  .popover-menu-submenu__search {
    display: block;
    inline-size: 100%;
    margin: 0 0 0.375rem;
    padding: 0.45rem 0.55rem;
    box-sizing: border-box;
    border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
    border-radius: 0.45rem;
    background: light-dark(oklch(99% 0 0), oklch(18% 0 0));
    color: light-dark(oklch(22% 0 0), oklch(92% 0 0));
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .popover-menu-submenu__list {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-block-size: min(16rem, 50vh);
    overflow: auto;
  }

  .popover-menu-submenu__option,
  .popover-menu-submenu__branch {
    display: grid;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.45rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    cursor: pointer;
  }

  .popover-menu-submenu__option {
    grid-template-columns: auto auto minmax(0, 1fr) auto;

    &:not(:has(.popover-menu-submenu__icon)) {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }

    &:hover,
    &.is-checked {
      background: light-dark(oklch(0.97 0 0), oklch(0.24 0 0));
    }
  }

  .popover-menu-submenu__branch {
    grid-template-columns: auto minmax(0, 1fr) auto;

    &:not(:has(.popover-menu-submenu__icon)) {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    &:hover,
    &.is-active {
      background: light-dark(oklch(0.97 0 0), oklch(0.24 0 0));
    }
  }

  .popover-menu-submenu__chevron {
    color: light-dark(oklch(58% 0 0), oklch(62% 0 0));
    font-size: 0.875rem;
    line-height: 1;
  }

  .popover-menu-submenu__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .popover-menu-submenu__count {
    font-size: 0.75rem;
    color: light-dark(oklch(58% 0 0), oklch(62% 0 0));
    white-space: nowrap;
  }

  .popover-menu-submenu__checkbox {
    inline-size: 1rem;
    block-size: 1rem;
    margin: 0;
    accent-color: var(--color-accent, oklch(32% 0 0));
    opacity: 0;

    &:checked {
      opacity: 1;
    }
  }

  .popover-menu-submenu__option:hover .popover-menu-submenu__checkbox:not(:checked) {
    opacity: 1;
  }

  .popover-menu-empty {
    margin: 0;
    padding: 0.5rem;
    font-size: 0.8125rem;
    color: light-dark(oklch(58% 0 0), oklch(62% 0 0));
  }
}
q-table-filters {
  display: inline-block;
  position: relative;

  .table-filters-host {
    display: inline-flex;
    align-items: center;
  }

  .table-filters-trigger {
    position: relative;
  }

  .table-filters-trigger[data-active="true"]::after {
    content: "";
    position: absolute;
    inset-block-start: 0.125rem;
    inset-inline-end: 0.125rem;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: 999px;
    background: var(--color-accent, oklch(55% 0.18 275));
    box-shadow: 0 0 0 1px light-dark(oklch(99% 0 0), oklch(20% 0 0));
    pointer-events: none;
  }
}
q-table-columns {
  display: inline-block;
  position: relative;

  .table-columns-host {
    anchor-name: var(--select-anchor-name);
  }

  .table-columns-menu {
    position: fixed;
    position-anchor: var(--select-anchor-name);
    position-area: bottom span-right;
    position-try-fallbacks: flip-block;
    inset: unset;
    margin: 0;
    margin-block-start: 0.25rem;
    padding: 0.5rem;
    box-sizing: border-box;
    min-inline-size: 14rem;
    max-inline-size: min(20rem, 90vw);
    border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
    border-radius: 0.625rem;
    background: light-dark(oklch(99% 0 0), oklch(20% 0 0));
    box-shadow: 0 0.5rem 1.25rem light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.45));
    color: light-dark(oklch(22% 0 0), oklch(92% 0 0));
  }

  .table-columns-menu:popover-open {
    display: block;
  }

  .table-columns-menu__sort-section {
    margin-block-end: 0.5rem;
    padding-block-end: 0.5rem;
    border-block-end: 1px solid light-dark(oklch(92% 0 0), oklch(28% 0 0));
  }

  .table-columns-menu__widget-section {
    margin-block-end: 0.5rem;
    padding-block-end: 0.5rem;
    border-block-end: 1px solid light-dark(oklch(92% 0 0), oklch(28% 0 0));
  }

  .table-columns-menu__layout-section,
  .table-columns-menu__layout-settings-section {
    margin-block-end: 0.5rem;
    padding-block-end: 0.5rem;
    border-block-end: 1px solid light-dark(oklch(92% 0 0), oklch(28% 0 0));
  }

  .table-columns-menu__layout-list {
    display: grid;
    gap: 0.25rem;
  }

  .table-columns-menu__layout-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    cursor: pointer;
  }

  .table-columns-menu__layout-choice {
    display: grid;
    gap: 0.2rem;
    margin-block-start: 0.35rem;
  }

  .table-columns-menu__layout-choice-label {
    font-size: 0.75rem;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  }

  .table-columns-menu__layout-choice-select {
    inline-size: 100%;
    font: inherit;
  }

  .table-columns-menu__layout-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-block-start: 0.35rem;
    font-size: 0.85rem;
    cursor: pointer;
  }

  .table-columns-menu__layout-action {
    all: unset;
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    margin-block-start: 0.35rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    font: 500 0.875rem/1.4 system-ui, sans-serif;
    cursor: pointer;
    color: inherit;
    text-align: start;

    &:hover {
      background: light-dark(oklch(96% 0 0), oklch(26% 0 0));
    }
  }

  .table-columns-menu__widget-customize {
    all: unset;
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    font: 500 0.875rem/1.4 system-ui, sans-serif;
    cursor: pointer;
    color: inherit;

    &:hover {
      background: light-dark(oklch(96% 0 0), oklch(26% 0 0));
    }

    &:focus-visible {
      outline: 2px solid light-dark(oklch(55% 0.12 260), oklch(72% 0.1 260));
      outline-offset: 1px;
    }
  }

  .table-columns-menu__sort-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 0.375rem;
  }

  .table-columns-menu__sort-list {
    display: grid;
    gap: 0.375rem;
  }

  .table-columns-menu__sort-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.375rem;
  }

  .table-columns-menu__title {
    margin: 0;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: light-dark(oklch(45% 0 0), oklch(68% 0 0));
  }

  .table-columns-menu__title--columns {
    padding-block-end: 0.375rem;
  }

  .table-columns-menu__sort-add,
  .table-columns-menu__sort-direction,
  .table-columns-menu__sort-remove {
    all: unset;
    display: inline-grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
    cursor: pointer;

    &:hover:not(:disabled) {
      background: light-dark(oklch(0.94 0 0), oklch(0.28 0 0));
      color: light-dark(oklch(22% 0 0), oklch(92% 0 0));
    }

    &:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
  }

  .table-columns-menu__sort-direction {
    font-size: 0.75rem;
    font-weight: 700;
  }

  .table-columns-menu__sort-remove {
    font-size: 1rem;
  }

  .table-columns-menu__sort-select {
    inline-size: 100%;
    margin: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
    border-radius: 0.45rem;
    background: light-dark(oklch(99% 0 0), oklch(18% 0 0));
    color: light-dark(oklch(22% 0 0), oklch(92% 0 0));
    font-size: 0.8125rem;
    line-height: 1.3;
    cursor: pointer;
  }

  .table-columns-menu__list {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .table-columns-menu__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.25rem;
    border-radius: 0.45rem;

    &:hover {
      background: light-dark(oklch(0.97 0 0), oklch(0.24 0 0));
    }

    &.is-dragging {
      opacity: 0.45;
    }

    &.is-drag-over {
      background: light-dark(oklch(0.95 0 0), oklch(0.26 0 0));
      outline: 1px dashed light-dark(oklch(75% 0 0), oklch(42% 0 0));
    }
  }

  .table-columns-menu__label {
    font-size: 0.8125rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table-columns-menu__checkbox {
    inline-size: 1rem;
    block-size: 1rem;
    margin: 0;
    accent-color: var(--color-accent, oklch(32% 0 0));
  }

  .table-columns-menu__drag-handle {
    all: unset;
    display: inline-grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.5rem;
    border-radius: 0.375rem;
    color: light-dark(oklch(62% 0 0), oklch(58% 0 0));
    font-size: 0.625rem;
    line-height: 1;
    letter-spacing: -0.08em;
    touch-action: none;
    cursor: grab;

    &:active {
      cursor: grabbing;
    }

    &:hover {
      background: light-dark(oklch(0.94 0 0), oklch(0.28 0 0));
      color: light-dark(oklch(35% 0 0), oklch(88% 0 0));
    }
  }
}
q-list,
q-list-interactive .list-interactive-grid {
  display: block;
  inline-size: 100%;
  user-select: none;
  font-size: 0.8125rem;
  line-height: 1.35;

  --padding-x: 0.75rem;
  --padding-y: 0.25rem;
  --list-chip-block-size: calc(0.25rem + 1em * 1.4 + 2px);
  --list-row-min-block-size: calc(var(--padding-y) * 2 + var(--list-chip-block-size));
  --muted-foreground: light-dark(oklch(50% 0 0), oklch(60% 0 0));
  --list-head-foreground: light-dark(oklch(58% 0 0), oklch(66% 0 0));
  --list-row-hover: light-dark(oklch(96% 0 0), oklch(24% 0 0));
  --row-gap: 0;

  .list-grid {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
  }

  &[data-wrap="false"] .list-grid {
    overflow-x: auto;
  }

  .list-head-row,
  .list-row {
    display: flex;
    align-items: center;
    inline-size: 100%;
    gap: 0.75rem;
  }

  &[data-wrap="false"] .list-head-row,
  &[data-wrap="false"] .list-row {
    inline-size: max-content;
    min-inline-size: 100%;
  }

  .list-head-tail,
  .list-row__tail {
    display: grid;
    grid-template-columns: var(--list-tail-columns, max-content);
    column-gap: 0.75rem;
    align-items: center;
    justify-items: start;
    flex: none;
    width: max-content;
    max-inline-size: max-content;
    /* only this margin absorbs leftover row width */
    margin-inline-start: auto;
  }

  .list-head-cell[data-list-column="lead"],
  .list-cell[data-list-column="lead"] {
    flex: none;
    width: max-content;
    max-inline-size: min(40%, 24rem);
  }

  .list-head-tail .list-head-cell,
  .list-row__tail .list-cell {
    width: max-content;
    max-inline-size: max-content;
    box-sizing: border-box;
  }

  .list-head {
    .list-head-row.list-head-stash {
      display: none;
    }

    .list-head-cell {
      padding: var(--padding-y) var(--padding-x);
      color: var(--list-head-foreground);

      .list-head-cell__content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.25rem;
      }

      &[data-ui-align="end"] .list-head-cell__content {
        justify-content: flex-end;
      }

      &[data-ui-align="start"] .list-head-cell__content {
        justify-content: flex-start;
      }
    }
  }

  &[data-wrap="true"] .list-head-cell,
  &[data-wrap="true"] .list-cell {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  &[data-wrap="false"] .list-head-cell,
  &[data-wrap="false"] .list-cell {
    white-space: nowrap;
  }

  .list-body {
    .list-row {
      position: relative;
      min-block-size: var(--list-row-min-block-size);
      border-radius: 0.375rem;

      &:hover:not(.list-row--empty) {
        background: var(--list-row-hover);
      }

      &.list-row--navigable {
        cursor: pointer;
      }
    }

    .list-row__hit {
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
    }

    .list-cell {
      padding: var(--padding-y) var(--padding-x);
    }

    .list-cell[data-ui-primary="true"] {
      font-weight: 500;
    }

    .list-cell[data-list-interactive="true"] {
      position: relative;
      z-index: 1;
    }

    .list-row--empty .list-cell {
      flex: 1 1 auto;
      color: var(--muted-foreground);
    }
  }

  .list-cell[data-ui-mono="true"],
  .list-head-cell[data-ui-mono="true"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }

  .list-cell[data-ui-tabular-nums="true"],
  .list-head-cell[data-ui-tabular-nums="true"] {
    font-variant-numeric: tabular-nums;
  }

  .list-cell[data-ui-align="end"],
  .list-head-cell[data-ui-align="end"] {
    text-align: end;
  }

  .list-cell[data-ui-align="start"],
  .list-head-cell[data-ui-align="start"] {
    text-align: start;
  }
}
q-list-interactive {
  display: block;
  inline-size: 100%;
  container-type: inline-size;
  container-name: list-interactive;

  .list-interactive-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 0.75rem;
  }

  .list-interactive-filter-field {
    display: grid;
    min-inline-size: min(100%, 16rem);

    q-form-field {
      display: block;
      inline-size: 100%;
    }
  }

  .list-interactive-status {
    margin: 0;
    font-size: 0.75rem;
    color: light-dark(oklch(45% 0 0), oklch(68% 0 0));
  }

  .list-interactive-grid {
    inline-size: 100%;

    .list-head-cell {
      cursor: default;

      &[data-sortable="true"] {
        cursor: pointer;
      }

      .sort-icon {
        display: none;
        flex-shrink: 0;
        inline-size: 0.75rem;
        block-size: 0.75rem;
      }

      &[data-sort="asc"] .sort-icon--asc {
        display: block;
      }

      &[data-sort="desc"] .sort-icon--desc {
        display: block;
      }
    }
  }
}

@container list-interactive (max-width: 32rem) {
  q-list-interactive {
    .list-interactive-toolbar {
      align-items: stretch;
    }

    .list-interactive-filter-field {
      min-inline-size: 100%;
    }
  }
}

q-list-interactive[data-filter-placement="detached"] {
  .list-interactive-toolbar {
    justify-content: flex-end;
  }
}
q-app-view-filter-bar {
  display: block;

  .app-view-filter-bar-host {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    border-radius: 0.75rem;
    background: light-dark(oklch(97% 0 0), oklch(17% 0 0));
  }

  .app-view-filter-bar__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
    flex: 1 1 auto;
  }

  .app-view-filter-bar__chip {
    display: inline-grid;
    grid-template-columns: auto auto auto auto;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
    border-radius: 999px;
    background: light-dark(oklch(99% 0 0), oklch(20% 0 0));
    font-size: 0.8125rem;
    line-height: 1.2;
  }

  .app-view-filter-bar__chip-field,
  .app-view-filter-bar__chip-value {
    font-weight: 500;
  }

  .app-view-filter-bar__chip-operator {
    color: light-dark(oklch(52% 0 0), oklch(64% 0 0));
  }

  .app-view-filter-bar__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: light-dark(oklch(52% 0 0), oklch(64% 0 0));
    cursor: pointer;
  }

  .app-view-filter-bar__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
}
q-app-view-presets {
  display: block;

  .app-view-presets-host {
    display: grid;
    gap: 0.75rem;
  }

  .app-view-presets__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .app-view-presets__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-inline-size: 0;
    flex: 1 1 auto;
  }

  .app-view-presets__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
    border-radius: 999px;
    background: light-dark(oklch(99% 0 0), oklch(18% 0 0));
    color: light-dark(oklch(28% 0 0), oklch(90% 0 0));
    font-size: 0.8125rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;

    &.is-active {
      border-color: light-dark(oklch(24% 0 0), oklch(78% 0 0));
      background: light-dark(oklch(24% 0 0), oklch(88% 0 0));
      color: light-dark(oklch(98% 0 0), oklch(18% 0 0));
    }
  }

  .app-view-presets__tab-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: light-dark(oklch(52% 0 0), oklch(66% 0 0));
  }

  .app-view-presets__tab.is-active .app-view-presets__tab-icon {
    color: inherit;
  }

  .app-view-presets__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: light-dark(oklch(52% 0 0), oklch(64% 0 0));
    cursor: pointer;

    q-icon {
      display: block;
    }
  }

  .app-view-presets__header-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .app-view-presets__empty {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(52% 0 0), oklch(64% 0 0));
  }
}
q-app-view {
  display: block;
  container-type: inline-size;

  .app-view-host {
    display: grid;
    gap: 0.75rem;
  }

  .app-view__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .app-view__title-wrap {
    min-inline-size: 0;
  }

  .app-view__title {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
    min-inline-size: 0;
  }

  .app-view__title-parent {
    flex-shrink: 0;
  }

  .app-view__title-separator {
    color: light-dark(oklch(62% 0 0), oklch(48% 0 0));
    flex-shrink: 0;
  }

  .app-view__title-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
  }

  .app-view__actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .app-view__body {
    display: grid;
    gap: 0.75rem;
    min-inline-size: 0;
  }
}
q-metadata {
  .metadata-list {
    display: grid;
    grid-template-columns: auto 1fr;
    justify-content: start;
    width: max-content;
    max-width: 100%;
    margin: 0;
    /* border: 1px solid light-dark(oklch(90% 0 0), oklch(25% 0 0)); */
    border-radius: 0.5rem;
    overflow: hidden;

    dt,
    dd {
      margin: 0;
      padding: 0.5rem 0.75rem;
      border-block-end: 1px solid light-dark(oklch(90% 0 0), oklch(25% 0 0));
    }

    dt {
      /* background-color: light-dark(oklch(96% 0 0), oklch(20% 0 0)); */
      color: light-dark(oklch(50% 0 0), oklch(60% 0 0));
      font-weight: 500;
      border-inline-end: 1px solid light-dark(oklch(90% 0 0), oklch(25% 0 0));
    }

    dd {
      color: light-dark(oklch(20% 0 0), oklch(92% 0 0));
      word-break: break-word;

      .metadata-value {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
      }
    }

    dt:last-of-type,
    dd:last-of-type {
      border-block-end: none;
    }
  }

  &.variant-compact {
    .metadata-list {
      dt,
      dd {
        padding-block: 0.35rem;
      }
    }
  }
}

@container (max-width: 32rem) {
  q-metadata .metadata-list {
    grid-template-columns: 1fr;

    dt {
      border-inline-end: none;
      border-block-end: none;
      padding-block-end: 0.15rem;
    }

    dd {
      padding-block-start: 0;
      padding-block-end: 0.65rem;
    }
  }
}
.widget-board-host {
  display: block;
  margin-block-end: 1rem;
}

.widget-board-host--embedded {
  margin-block-end: 0;
}

.widget-board-host-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
}

.widget-board-host-status {
  margin: 0;
  color: light-dark(oklch(0.45 0.02 260), oklch(0.78 0.01 260));
}

.widget-board-host-note {
  margin: 0;
  font: 400 0.875rem/1.5 system-ui, sans-serif;
  color: light-dark(oklch(0.32 0.03 260), oklch(0.88 0.01 260));
  white-space: pre-wrap;
}

.widget-board-host-error {
  margin: 0;
  font: 500 0.8125rem/1.4 system-ui, sans-serif;
  color: light-dark(oklch(0.5 0.08 25), oklch(0.75 0.1 25));
}

q-widget-tile q-stats-card {
  display: block;
}
q-widget-board {
  display: block;
  inline-size: 100%;
  container-type: inline-size;
}

q-widget-tile {
  display: block;
  min-block-size: 4.5rem;
}

q-widget-board .widget-board {
  inline-size: 100%;
}

q-widget-board .widget-board-grid {
  display: grid;
  grid-template-columns: repeat(var(--widget-board-columns, 12), minmax(0, 1fr));
  grid-auto-rows: minmax(4.5rem, auto);
  gap: 0.75rem;
  inline-size: 100%;
}

q-widget-tile .widget-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 0.5rem;
  border: 1px solid light-dark(oklch(0.45 0 0 / 0.12), oklch(0.92 0 0 / 0.1));
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

q-widget-tile .widget-tile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
}

q-widget-tile .widget-tile-heading {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-inline-size: 0;
}

q-widget-tile .widget-tile-title {
  margin: 0;
  font: 600 0.875rem/1.2 system-ui, sans-serif;
  color: light-dark(oklch(0.28 0.03 260), oklch(0.93 0.01 260));
}

q-widget-tile .widget-tile-subtitle {
  margin: 0;
  font: 400 0.6875rem/1.35 system-ui, sans-serif;
  color: light-dark(oklch(0.5 0 0 / 0.72), oklch(0.78 0 0 / 0.55));
}

q-widget-tile .widget-tile-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  margin-block-start: 0.0625rem;
}

q-widget-tile .widget-tile-filter-toggle,
q-widget-tile .widget-tile-config-toggle,
q-widget-tile .widget-tile-remove {
  border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.4 0 0));
  background: light-dark(oklch(0.97 0 0), oklch(0.26 0 0));
  color: inherit;
  border-radius: 999px;
  font: 500 0.75rem/1 system-ui, sans-serif;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

q-widget-tile .widget-tile-remove {
  min-width: 1.75rem;
  padding-inline: 0.35rem;
}

q-widget-tile .widget-tile-body {
  flex: 1;
  padding: 0.75rem;
  position: relative;
}

q-widget-tile .widget-tile-body[data-loading="true"]::after {
  content: "…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: light-dark(oklch(1 0 0 / 0.55), oklch(0.08 0 0 / 0.55));
}

q-widget-tile .widget-tile-content {
  font: 400 0.875rem/1.4 system-ui, sans-serif;
  color: light-dark(oklch(0.35 0.03 260), oklch(0.9 0.01 260));
}

q-widget-tile .widget-tile-metric-value {
  font: 600 clamp(1.5rem, 2.5vw, 2rem) / 1.1 system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: light-dark(oklch(0.22 0.03 260), oklch(0.94 0.01 260));
}

q-widget-tile .widget-tile-body-link {
  display: inline-flex;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: light-dark(oklch(0.22 0.03 260), oklch(0.94 0.01 260));
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

q-widget-tile .widget-tile-body-text {
  margin: 0;
  white-space: pre-wrap;
}

q-widget-tile .widget-tile-resize-handle {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.15rem;
  border: 1px solid light-dark(oklch(0.7 0 0), oklch(0.55 0 0));
  cursor: nwse-resize;
}

q-widget-tile[data-edit-mode="true"] .widget-tile {
  position: relative;
}

@container (max-width: 40rem) {
  q-widget-board .widget-board-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
q-dialog.widget-board-picker-dialog {
  dialog.dialog {
    width: min(56rem, calc(100vw - 2rem));
    max-width: min(56rem, calc(100vw - 2rem));
    padding: 0;
  }

  .widget-picker {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    container-type: inline-size;

    .widget-picker-header {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.75rem;
    }

    .widget-picker-title {
      margin: 0;
      font: 600 1.125rem/1.3 system-ui, sans-serif;
    }

    .widget-picker-lead {
      margin: 0.25rem 0 0;
      font: 400 0.875rem/1.45 system-ui, sans-serif;
      color: light-dark(oklch(0.45 0 0), oklch(0.75 0 0));
      max-width: 36rem;
    }

    .widget-picker-status {
      margin: 0;
      font: 400 0.875rem/1.4 system-ui, sans-serif;
      color: light-dark(oklch(0.45 0 0), oklch(0.75 0 0));
    }

    .widget-picker-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
      gap: 1.5rem;
    }

    .widget-picker-card {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
      margin: 0;
      padding: 0.875rem;
      width: 100%;
      border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.34 0 0));
      border-radius: 0.5rem;
      background: light-dark(oklch(0.97 0 0), oklch(0.22 0 0));
      text-align: left;
      cursor: pointer;
      font: inherit;
      color: light-dark(oklch(0.32 0 0), oklch(0.88 0 0));
      appearance: none;
      -webkit-appearance: none;

      &:hover {
        border-color: light-dark(oklch(0.8 0 0), oklch(0.42 0 0));
        background: light-dark(oklch(0.95 0 0), oklch(0.26 0 0));
      }

      &:focus-visible {
        outline: 2px solid light-dark(oklch(0.55 0.06 250), oklch(0.72 0.05 250));
        outline-offset: 2px;
      }
    }

    .widget-picker-card-preview {
      pointer-events: none;
      min-height: 5.5rem;
      margin-block-end: 0.125rem;

      q-widget-tile {
        display: block;
      }

      q-widget-tile .widget-tile {
        border-color: light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
        background: light-dark(oklch(0.99 0 0), oklch(0.2 0 0));
        box-shadow: none;
        filter: saturate(0.42);
      }

      q-widget-tile .widget-tile-title,
      q-widget-tile .widget-tile-metric-value,
      q-widget-tile .widget-tile-subtitle,
      q-widget-tile .widget-tile-content,
      q-widget-tile .widget-tile-body-text {
        color: light-dark(oklch(0.35 0 0), oklch(0.86 0 0));
      }

      q-widget-tile .widget-tile-body-link {
        color: light-dark(oklch(0.38 0 0), oklch(0.78 0 0));
      }
    }

    .widget-picker-card-meta {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .widget-picker-card-title {
      margin: 0;
      font: 600 0.8125rem/1.3 system-ui, sans-serif;
    }

    .widget-picker-card-description {
      margin: 0;
      font: 400 0.75rem/1.4 system-ui, sans-serif;
      color: light-dark(oklch(0.5 0 0), oklch(0.68 0 0));
    }
  }
}
.entity-form-field-hint {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: light-dark(oklch(0.48 0.02 260), oklch(0.72 0.01 260));
}

.entity-form-json-field {
  display: grid;
  gap: 0.35rem;

  > span:first-child {
    font-size: 0.875rem;
    color: light-dark(oklch(40% 0.02 260), oklch(75% 0.02 260));
  }

  textarea {
    width: 100%;
    min-height: 6rem;
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
  }
}

.entity-detail-view,
.entity-form-view {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
  color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
}

.entity-detail-back,
.entity-form-back {
  color: light-dark(oklch(0.45 0.12 255), oklch(0.72 0.14 255));
  font-size: 0.875rem;
  text-decoration: none;

  &::before {
    content: "← ";
  }
}

.entity-detail-header,
.entity-form-header {
  display: grid;
  gap: 0.35rem;
}

.entity-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.entity-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

.entity-detail-title {
  display: grid;
  gap: 0.2rem;
  min-inline-size: 0;

  h1 {
    margin: 0;
    font-size: 1.5rem;
  }
}

.entity-detail-id {
  margin: 0;
  font-family: monospace;
  font-size: 0.8125rem;
  color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
  overflow-wrap: anywhere;
}

.entity-form-header {
  h1 {
    margin: 0;
    font-size: 1.5rem;
  }
}

.entity-detail-status {
  color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
}

.entity-detail-activity,
.entity-detail-section {
  display: grid;
  gap: 0.75rem;

  h2 {
    margin: 0;
    font-size: 1.125rem;
  }
}

.entity-detail-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.entity-detail-tags {
  display: grid;
  gap: 0.5rem;

  .entity-detail-tags-title {
    margin: 0;
    font-size: 1.125rem;
  }

  .entity-detail-tags-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .entity-detail-tags-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.35 0 0));
    background: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));
  }

  .entity-detail-tags-name {
    font-size: 0.875rem;
    font-weight: 500;
  }

  .entity-detail-tags-slug {
    font-size: 0.75rem;
    color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
  }
}

.activity-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.activity-timeline-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.75rem 1rem;
  padding-block-end: 1.25rem;

  &:last-child {
    padding-block-end: 0;
  }
}

.activity-timeline-time {
  font-size: 0.8125rem;
  color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
  white-space: nowrap;
  min-inline-size: 9rem;
}

.activity-timeline-track {
  position: relative;
  display: flex;
  justify-content: center;
  inline-size: 1rem;

  &::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 2px;
    background: light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
  }
}

.activity-timeline-item:last-child .activity-timeline-track::before {
  inset-block-end: 50%;
}

.activity-timeline-dot {
  position: relative;
  z-index: 1;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  margin-block-start: 0.2rem;
  border-radius: 50%;
  background: light-dark(oklch(0.55 0.14 255), oklch(0.72 0.14 255));
  border: 2px solid light-dark(oklch(0.99 0 0), oklch(0.22 0 0));
}

.activity-timeline-body {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

.activity-timeline-summary {
  margin: 0;
  line-height: 1.4;

  a {
    color: light-dark(oklch(0.45 0.12 255), oklch(0.72 0.14 255));
  }
}

.activity-timeline-field {
  font-family: monospace;
  font-size: 0.875em;
}

.activity-timeline-change {
  margin: 0;
  font-size: 0.875rem;
  color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
}

.activity-timeline-arrow {
  color: light-dark(oklch(0.6 0 0), oklch(0.55 0 0));
}

.activity-timeline-comment-body {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.4;
}

.activity-timeline-visibility,
.activity-timeline-edited,
.activity-timeline-pinned {
  margin-inline-start: 0.5rem;
  font-size: 0.75rem;
  text-transform: lowercase;
  color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
  border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.35 0 0));
  border-radius: 0.25rem;
  padding: 0.05rem 0.35rem;
}

.activity-timeline-pinned-block {
  display: grid;
  gap: 0.5rem;
  margin-block-end: 1rem;
  padding: 0.75rem;
  border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
  border-radius: 0.5rem;
  background: light-dark(oklch(0.97 0 0), oklch(0.22 0 0));
}

.activity-timeline-pinned-heading {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: lowercase;
}

.activity-timeline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-block-start: 0.25rem;
}

.activity-timeline-edit-body {
  width: 100%;
  min-block-size: 4.5rem;
  resize: vertical;
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.35 0 0));
  border-radius: 0.35rem;
  background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
  color: inherit;
}

.entity-activity-note-form {
  display: grid;
  gap: 0.75rem;
}

.entity-activity-note-label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.875rem;

  span {
    color: light-dark(oklch(0.4 0 0), oklch(0.7 0 0));
  }

  textarea,
  select {
    font: inherit;
    padding: 0.5rem 0.65rem;
    border: 1px solid light-dark(oklch(0.82 0 0), oklch(0.35 0 0));
    border-radius: 0.375rem;
    background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
    color: inherit;
  }
}

.entity-activity-note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1rem;
}

.entity-activity-note-pin {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
}

@container (max-width: 36rem) {
  .activity-timeline-item {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "time time"
      "track body";
  }

  .activity-timeline-time {
    grid-area: time;
    min-inline-size: 0;
  }

  .activity-timeline-track {
    grid-area: track;
  }

  .activity-timeline-body {
    grid-area: body;
  }
}

.entity-form-view {
  q-form {
    max-width: 28rem;
  }
}
.entity-token-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.entity-token {
  display: inline-flex;
  max-inline-size: 100%;

  a,
  span {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(0.86 0 0), oklch(0.38 0 0));
    font-size: 0.8125rem;
    line-height: 1.4;
    background: light-dark(oklch(0.96 0 0), oklch(0.26 0 0));
    color: light-dark(oklch(0.35 0 0), oklch(0.88 0 0));
    white-space: nowrap;
  }

  a {
    text-decoration: none;

    &:hover {
      background: light-dark(oklch(0.92 0.02 255), oklch(0.3 0.02 255));
      color: light-dark(oklch(0.4 0.1 255), oklch(0.82 0.12 255));
      border-color: light-dark(oklch(0.8 0.04 255), oklch(0.42 0.04 255));
    }
  }
}
.entity-list-view {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
  color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));

  .entity-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .entity-list-status {
    color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
  }

  .entity-list-actions {
    display: flex;
    gap: 0.5rem;
  }
}

@container (max-width: 40rem) {
  .entity-list-view .entity-list-header {
    flex-direction: column;
    align-items: stretch;
  }

  .entity-list-view .entity-list-header q-button {
    align-self: flex-end;
  }
}

.entity-list-view.store-products-view,
.entity-list-view.people-view,
.entity-list-view.persons-view {
  .entity-list-thumb {
    display: block;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    object-fit: cover;
    border-radius: 0.125rem;
    background: light-dark(oklch(0.94 0 0), oklch(0.28 0 0));
  }

  .entity-list-thumb--empty {
    opacity: 0.35;
  }

  .entity-list-title-with-thumb {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
  }
}

.entity-list-view.people-view,
.entity-list-view.persons-view {
  .entity-list-thumb {
    border-radius: 50%;
  }
}
q-table-interactive {
  display: block;
  inline-size: 100%;
  container-type: inline-size;
  container-name: table-interactive;

  .table-interactive-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 0.75rem;
  }

  .table-interactive-filter-field {
    display: grid;
    min-inline-size: min(100%, 16rem);

    q-form-field {
      display: block;
      inline-size: 100%;
    }
  }

  .table-interactive-status {
    margin: 0;
    font-size: 0.75rem;
    color: light-dark(oklch(45% 0 0), oklch(68% 0 0));
  }

  .table-interactive-table {
    inline-size: 100%;

    table {
      inline-size: 100%;
      table-layout: auto;

      thead {
        tr {
          th {
            cursor: default;
            white-space: nowrap;

            &[data-sortable="true"] {
              cursor: pointer;
            }

            .sort-icon {
              display: none;
              flex-shrink: 0;
              inline-size: 0.75rem;
              block-size: 0.75rem;
            }

            &[data-sort="asc"] .sort-icon--asc {
              display: block;
            }

            &[data-sort="desc"] .sort-icon--desc {
              display: block;
            }
          }
        }
      }
    }
  }
}

@container table-interactive (max-width: 32rem) {
  q-table-interactive {
    .table-interactive-toolbar {
      align-items: stretch;
    }

    .table-interactive-filter-field {
      min-inline-size: 100%;
    }
  }
}

q-table-interactive[data-filter-placement="detached"] {
  .table-interactive-toolbar {
    justify-content: flex-end;
  }
}
.store-orders-kanban-preview {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
  min-height: 0;

  .store-orders-kanban-preview-banner {
    margin: 0;
    padding: 0.65rem 0.85rem;
    border-radius: 0.45rem;
    border: 1px dashed light-dark(oklch(78% 0 0), oklch(38% 0 0));
    font-size: 0.85rem;
    color: light-dark(oklch(42% 0 0), oklch(74% 0 0));
    line-height: 1.4;
  }

  .store-orders-kanban-board {
    gap: 0.65rem;
    min-height: 14rem;

    &.is-scroll-columns-layout {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 0.35rem;
    }

    &.is-grid-columns-layout {
      display: grid;
      flex: 1;
      min-height: 0;
      width: 100%;
      grid-template-columns: repeat(var(--kanban-grid-cols, 4), minmax(0, 1fr));
      grid-template-rows: repeat(var(--kanban-grid-rows, 3), minmax(0, 1fr));
      gap: 0.65rem;
      overflow: auto;
      align-items: stretch;
    }

    &.is-lines-layout {
      display: flex;
      flex-direction: column;
      overflow: visible;
      min-height: 12rem;
      gap: 0.5rem;
    }
  }

  .store-orders-kanban-line {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: stretch;
    padding: 0.45rem 0.5rem;
    border-radius: 0.45rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    background: light-dark(oklch(97% 0 0), oklch(18% 0 0));

    &[data-internal-phase="draft"],
    &[data-internal-phase="awaiting_payment"] {
      background: light-dark(oklch(98% 0.02 85), oklch(19% 0.02 85));
    }

    &[data-internal-phase="on_hold"] {
      background: light-dark(oklch(98% 0.04 55), oklch(19% 0.04 55));
    }

    &[data-internal-phase="awaiting_supply"] {
      background: light-dark(oklch(98% 0.03 75), oklch(19% 0.03 75));
    }

    &[data-internal-phase="cancelled"],
    &[data-internal-phase="archived"] {
      opacity: 0.88;
      border-style: dashed;
    }

    &[data-internal-phase="refund_in_progress"] {
      background: light-dark(oklch(98% 0.03 25), oklch(19% 0.03 25));
    }
  }

  .store-orders-kanban-line-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.25rem 0.35rem;
    border-right: 1px solid light-dark(oklch(92% 0 0), oklch(26% 0 0));
  }

  .store-orders-kanban-line-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.25;
  }

  .store-orders-kanban-line-count {
    font-size: 0.72rem;
    color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
  }

  .store-orders-kanban-line-track {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.45rem;
    overflow: visible;
    padding: 0.2rem 0.1rem;
    align-items: flex-start;
    min-height: 4.5rem;

    .store-orders-kanban-card[data-card-grain="order"] {
      flex: 0 0 12rem;
      width: 12rem;
      max-width: 12rem;
      min-height: 0;
      box-sizing: border-box;
    }

    .store-orders-kanban-card[data-card-grain="fulfillment"] {
      flex: 0 0 auto;
      width: auto;
      max-width: 14rem;
      min-height: 4rem;
    }

    .store-orders-kanban-empty {
      align-self: center;
      padding: 0.35rem 0.5rem;
    }
  }

  .store-orders-kanban-grid-slot.is-spacer {
    min-height: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .store-orders-kanban-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    height: 100%;
    padding: 0.55rem;
    border-radius: 0.45rem;
    background: light-dark(oklch(96% 0 0), oklch(19% 0 0));
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));

    &[data-internal-phase="draft"],
    &[data-internal-phase="awaiting_payment"] {
      background: light-dark(oklch(97% 0.02 85), oklch(20% 0.02 85));
    }

    &[data-internal-phase="on_hold"] {
      background: light-dark(oklch(97% 0.04 55), oklch(20% 0.04 55));
    }

    &[data-internal-phase="awaiting_supply"] {
      background: light-dark(oklch(97% 0.03 75), oklch(20% 0.03 75));
    }

    &[data-internal-phase="cancelled"],
    &[data-internal-phase="archived"] {
      opacity: 0.88;
      border-style: dashed;
    }

    &[data-internal-phase="refund_in_progress"] {
      background: light-dark(oklch(97% 0.03 25), oklch(20% 0.03 25));
    }
  }

  .is-scroll-columns-layout .store-orders-kanban-column {
    flex: 0 0 min(14rem, 28vw);
  }

  .store-orders-kanban-column-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0 0.15rem;
  }

  .store-orders-kanban-column-stage-labels,
  .store-orders-kanban-line-stage-labels {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.65rem;
    line-height: 1.35;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
  }

  .is-column-group.store-orders-kanban-column {
    flex: 0 0 min(16rem, 32vw);
  }

  .store-orders-kanban-column-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .store-orders-kanban-column-count {
    font-size: 0.72rem;
    color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
  }

  .store-orders-kanban-column-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .is-grid-columns-layout .store-orders-kanban-column-body {
    min-height: 4rem;
  }

  .is-scroll-columns-layout .store-orders-kanban-column-body {
    min-height: 6rem;
  }

  .store-orders-kanban-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.35rem;
    border: 1px solid light-dark(oklch(88% 0 0), oklch(30% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
    cursor: default;
    box-shadow: 0 1px 0 light-dark(oklch(92% 0 0), oklch(16% 0 0));
    user-select: none;
    -webkit-user-select: none;

    &[data-draggable-preview="false"] {
      cursor: grab;
      touch-action: none;
    }

    &[data-draggable-preview="false"].is-dragging {
      cursor: grabbing;
    }

    &.is-dragging {
      opacity: 0.55;
    }
  }

  .store-orders-kanban-column.is-drag-over,
  .store-orders-kanban-line.is-drag-over {
    outline: 2px dashed light-dark(oklch(62% 0.12 250), oklch(72% 0.1 250));
    outline-offset: 2px;
  }

  .store-orders-kanban-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
  }

  .store-orders-kanban-card-title {
    font-weight: 600;
    font-size: 0.85rem;
  }

  a.store-orders-kanban-card-open {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .store-orders-kanban-card-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: light-dark(oklch(94% 0.03 145), oklch(26% 0.04 145));
    color: light-dark(oklch(38% 0.06 145), oklch(82% 0.04 145));
    text-transform: uppercase;
  }

  .store-orders-kanban-card-subtitle {
    font-size: 0.75rem;
    color: light-dark(oklch(46% 0 0), oklch(72% 0 0));
    line-height: 1.35;
  }

  .store-orders-kanban-empty {
    font-size: 0.75rem;
    color: light-dark(oklch(62% 0 0), oklch(52% 0 0));
    font-style: italic;
    padding: 0.5rem 0.25rem;
  }
}
.store-orders-view--board .store-orders-board-shell {
  margin-block-start: 0.75rem;
}

.store-orders-view--board .store-orders-list-pane {
  display: none !important;
}

.store-orders-2-view {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-sizing: border-box;
  min-height: calc(100dvh - 4rem);
  height: calc(100dvh - 4rem);
  max-height: calc(100dvh - 4rem);

  .store-orders-2-intro,
  .store-orders-2-footnote {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: light-dark(oklch(42% 0 0), oklch(74% 0 0));
    max-width: 44rem;
  }

  .store-orders-2-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem 1.25rem;
  }

  .store-orders-2-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
  }

  .store-orders-2-toolbar-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: light-dark(oklch(42% 0 0), oklch(74% 0 0));
  }

  .store-orders-2-grain-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .store-orders-2-board-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
}
.customers-form-view {
  .customers-owner-kind {
    display: grid;
    gap: 0.35rem;
  }

  .customers-owner-kind-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: light-dark(oklch(0.35 0 0), oklch(0.85 0 0));
  }

  [data-owner-kind][hidden] {
    display: none;
  }
}
.clients-detail-view {
  container-type: inline-size;

  .clients-detail-section {
    display: grid;
    gap: 0.75rem;
    margin-block-start: 1.25rem;
  }

  .clients-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .clients-detail-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
  }

  .clients-detail-person-link {
    font-weight: 600;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .clients-detail-table-wrap {
    overflow-x: auto;
  }

  .clients-detail-table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    border: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.32 0.02 260));
    border-radius: 0.5rem;
    overflow: hidden;

    thead th {
      padding: 0.5rem 0.75rem;
      text-align: start;
      font-weight: 700;
      color: light-dark(oklch(0.5 0 0), oklch(0.6 0 0));
      background: light-dark(oklch(0.94 0.008 260), oklch(0.28 0.01 260));
      border-block-end: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.32 0.02 260));
      border-inline-end: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.32 0.02 260));

      &:last-child {
        border-inline-end: none;
      }
    }

    tbody td {
      padding: 0.625rem 0.75rem;
      vertical-align: top;
      border-block-end: 1px solid light-dark(oklch(0.92 0.008 260), oklch(0.28 0.01 260));
      border-inline-end: 1px solid light-dark(oklch(0.92 0.008 260), oklch(0.28 0.01 260));

      &:last-child {
        border-inline-end: none;
      }
    }

    tbody tr:last-child td {
      border-block-end: none;
    }
  }

  .clients-detail-form-status {
    font-size: 0.8125rem;
    margin: 0.375rem 0 0;
    color: light-dark(oklch(0.48 0.02 260), oklch(0.72 0.01 260));
  }

}
.cards-codes-view {
  .cards-codes-lead {
    margin: 0;
    color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
    font-size: 0.9375rem;
  }

  .cards-codes-error {
    color: light-dark(oklch(0.52 0.18 25), oklch(0.72 0.14 25));
  }

  .cards-codes-result {
    margin-block-start: 0.5rem;
  }
}
.entity-type-picker-view {
  container-type: inline-size;
  display: grid;
  gap: 1rem;

  .entity-type-picker-sections {
    display: grid;
    gap: 1.5rem;
  }

  .entity-type-picker-section {
    display: grid;
    gap: 0.75rem;
  }

  .entity-type-picker-section-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: capitalize;
    color: light-dark(oklch(0.38 0.02 260), oklch(0.78 0.01 260));
  }

  .entity-type-picker-empty {
    margin: 0;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.01 260));
  }

  .entity-type-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1rem;
    align-items: start;
  }

  .entity-type-picker-card-link {
    display: block;
    min-inline-size: 0;
    color: inherit;
    text-decoration: none;
    border-radius: 0.75rem;

    &:hover .card,
    &:focus-visible .card {
      background-color: light-dark(
        oklch(from var(--color-canvas) calc(l - 0.04) c h),
        oklch(from var(--color-canvas) calc(l + 0.02) c h)
      );
    }

    &:focus-visible {
      outline: 2px solid light-dark(oklch(0.55 0.14 250), oklch(0.72 0.12 250));
      outline-offset: 2px;
    }
  }

  .entity-type-picker-card {
    min-inline-size: 0;
    block-size: 100%;

    .card {
      display: grid;
      gap: 0.75rem;
      align-content: start;
      block-size: 100%;
      border: none;
      cursor: pointer;
      background-color: light-dark(
        oklch(from var(--color-canvas) calc(l - 0.02) c h),
        oklch(from var(--color-canvas) calc(l - 0.002) c h)
      );
      transition: background-color 120ms ease;
    }

    .entity-type-picker-card-subtitle {
      margin: 0;
      font-size: 0.8125rem;
      font-weight: 500;
      line-height: 1.35;
      color: light-dark(oklch(0.42 0.03 260), oklch(0.76 0.02 260));
    }
  }

  .entity-type-picker-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 0.625rem;
    color: light-dark(oklch(0.45 0.12 145), oklch(0.78 0.12 145));
    background: light-dark(oklch(0.95 0.02 145), oklch(0.28 0.03 145));
  }

  .entity-type-picker-card-examples {
    display: grid;
    gap: 0.35rem;
    margin-block-start: 0.25rem;
  }

  .entity-type-picker-card-examples-label {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
  }

  .entity-type-picker-card-examples ul {
    margin: 0;
    padding-inline-start: 1rem;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.42 0.02 260), oklch(0.72 0.01 260));
  }

  .entity-type-picker-card-examples li {
    margin-block-end: 0.15rem;
  }

  &.entity-type-picker-view--compact {
    .entity-type-picker-sections {
      gap: 1rem;
    }

    .entity-type-picker-section {
      gap: 0.5rem;
    }

    .entity-type-picker-grid {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
      gap: 0.625rem;
    }

    .entity-type-picker-card {
      .card {
        gap: 0.5rem;
      }
    }

    .entity-type-picker-card-icon {
      inline-size: 2.125rem;
      block-size: 2.125rem;
      border-radius: 0.5rem;
    }

    .entity-type-picker-card-examples,
    q-paragraph {
      display: none;
    }
  }
}
.store-gift-kind-embed {
  container-type: inline-size;
  margin-block: 1rem 0;

  [hidden] {
    display: none !important;
  }

  q-button[hidden] {
    display: none !important;
  }

  [data-gift-kind-panel]:not([data-gift-kind-panel-visible]),
  [data-gift-kind-panel-shared]:not([data-gift-kind-panel-visible]) {
    display: none !important;
  }

  .store-gift-kind-embed-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
  }

  .store-gift-kind-embed-header-title {
    margin: 0;
  }

  .store-gift-kind-embed-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .store-gift-kind-embed-kind-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
    text-transform: lowercase;
  }

  .store-gift-kind-embed-picker {
    margin-block: 0.75rem 0.25rem;
  }

  .store-gift-kind-embed-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .store-gift-kind-readonly {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.75 0 0));
  }

  .store-gift-balance-rules-summary {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-block-start: 0.25rem;
    padding-inline-start: 0.125rem;
  }

  .store-gift-balance-rules-summary-line {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: light-dark(oklch(0.42 0.02 260), oklch(0.72 0.02 260));
  }

  .store-gift-amounts-section-title {
    margin: 0 0 0.35rem;
  }
}
.gift-delivery-methods-editor {
  display: block;
  container-type: inline-size;
  container-name: gift-delivery-methods;
  margin-block: 1.25rem;

  .gift-delivery-methods-editor-title {
    margin: 0 0 0.35rem;
  }

  .gift-delivery-methods-editor-lede {
    margin: 0 0 0.75rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
    font-size: 0.875rem;
  }

  .gift-delivery-methods-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  label.gift-delivery-method-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.34 0.02 260));
    background: light-dark(oklch(0.99 0.005 260), oklch(0.22 0.02 260));
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;

    &:hover {
      border-color: light-dark(oklch(0.72 0.04 255), oklch(0.48 0.04 255));
    }

    &:has(input:checked) {
      border-color: light-dark(oklch(0.55 0.14 255), oklch(0.68 0.12 255));
      box-shadow: 0 0 0 1px light-dark(oklch(0.55 0.14 255), oklch(0.68 0.12 255));
    }

    &:has(input:focus-visible) {
      outline: 2px solid light-dark(oklch(0.55 0.18 255), oklch(0.72 0.14 255));
      outline-offset: 2px;
    }

    input[type="checkbox"] {
      inline-size: 1rem;
      block-size: 1rem;
      margin: 0.15rem 0 0;
      flex-shrink: 0;
      accent-color: light-dark(oklch(0.55 0.18 255), oklch(0.72 0.14 255));
    }
  }

  .gift-delivery-method-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-inline-size: 0;
    flex: 1;
  }

  .gift-delivery-method-card-label {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: light-dark(oklch(0.28 0.02 260), oklch(0.94 0.01 260));
  }

  .gift-delivery-method-card-description {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: light-dark(oklch(0.48 0.02 260), oklch(0.72 0.01 260));
  }
}

@container gift-delivery-methods (max-width: 28rem) {
  .gift-delivery-methods-editor-grid {
    grid-template-columns: 1fr;
  }
}

.gift-recipient-send-editor {
  display: block;
  margin-block: 1.25rem;
  container-type: inline-size;
  container-name: gift-recipient-send;

  .gift-recipient-send-editor-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.34 0.02 260));
    background: light-dark(oklch(0.99 0.005 260), oklch(0.22 0.02 260));
    padding: 0.15rem 0.85rem;
  }

  .gift-recipient-send-row.settings-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    margin: 0;
    padding: 0.75rem 0;
    border-block-end: 1px solid light-dark(oklch(0.92 0.01 260), oklch(0.3 0.02 260));
    grid-template-columns: unset;

    &:last-child {
      border-block-end: none;
    }

    .settings-row__info {
      flex: 1 1 auto;
      min-inline-size: 0;
    }

    .settings-row__description {
      max-inline-size: 36rem;
    }

    .settings-row__control {
      flex: 0 0 auto;
      align-self: center;
      padding-block-start: 0.1rem;
    }
  }
}
.gift-card-config-preview-panel {
  .gift-card-config-preview-panel-note {
    margin: 0 0 0.65rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
  }
}
.store-product-preview-panel {
  container-type: inline-size;
  display: grid;
  gap: 0.65rem;
  align-content: start;

  .store-product-preview-panel-head {
    display: grid;
    gap: 0.5rem;
  }

  .store-product-preview-panel-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
    text-transform: lowercase;
  }

  .store-product-preview-sim-row {
    display: grid;
    gap: 0.35rem;
  }

  .store-product-preview-sim-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: light-dark(oklch(0.48 0.02 260), oklch(0.72 0.02 260));
  }

  .store-product-preview-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .store-product-preview-tax-summary,
  .store-product-preview-pricing-summary {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0.45rem 0.55rem;
    border-radius: 0.65rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.97 0.01 260), oklch(0.2 0.02 260));
    font-size: 0.75rem;
    line-height: 1.35;

    &.is-no-tax-region,
    &.is-no-rule,
    &.is-no-price,
    &.is-no-currency {
      border-color: light-dark(oklch(0.88 0.04 75), oklch(0.38 0.05 75));
      background: light-dark(oklch(0.97 0.02 85), oklch(0.22 0.03 85));
    }
  }

  .store-product-preview-pricing-summary {
    background: light-dark(oklch(0.97 0.01 230), oklch(0.2 0.03 230));
  }

  .store-product-preview-tax-summary-label {
    font-weight: 600;
    color: light-dark(oklch(0.4 0.02 260), oklch(0.78 0.02 260));
  }

  .store-product-preview-tax-summary-detail {
    color: light-dark(oklch(0.45 0 0), oklch(0.74 0 0));
  }

  .store-product-preview-tax-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
    font-size: 0.7rem;
  }

  .store-product-preview-tax-flow-step {
    display: inline-grid;
    gap: 0.05rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.34 0 0));
    background: light-dark(oklch(1 0 0), oklch(0.24 0 0));

    &.is-emphasis {
      border-color: light-dark(oklch(0.62 0.1 260), oklch(0.55 0.1 260));
      background: light-dark(oklch(0.95 0.03 260), oklch(0.26 0.05 260));
    }

    &.is-result {
      display: grid;
      gap: 0.12rem;
      justify-items: start;
      border-color: light-dark(oklch(0.5 0.12 145), oklch(0.52 0.12 145));
      background: light-dark(oklch(0.94 0.04 145), oklch(0.24 0.05 145));
    }

    &.is-pricing-result {
      border-color: light-dark(oklch(0.52 0.1 250), oklch(0.55 0.1 250));
      background: light-dark(oklch(0.94 0.04 250), oklch(0.24 0.05 250));
    }
  }

  .store-product-preview-tax-flow-vat-line {
    font-weight: 600;
    color: light-dark(oklch(0.38 0.02 260), oklch(0.82 0.02 260));
  }

  .store-product-preview-tax-flow-checkout-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-weight: 700;
    color: light-dark(oklch(0.32 0.04 145), oklch(0.86 0.04 145));
  }

  .store-product-preview-tax-flow-checkout-total {
    font-variant-numeric: tabular-nums;
  }

  .store-product-preview-tax-flow-entity {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: light-dark(oklch(0.52 0.02 260), oklch(0.66 0.02 260));
  }

  .store-product-preview-tax-flow-name {
    font-weight: 600;
    color: light-dark(oklch(0.38 0.02 260), oklch(0.82 0.02 260));
  }

  .store-product-preview-tax-flow-percent {
    font-weight: 700;
    color: light-dark(oklch(0.35 0.04 260), oklch(0.84 0.04 260));
  }

  .store-product-preview-tax-flow-note {
    font-size: 0.65rem;
    color: light-dark(oklch(0.52 0 0), oklch(0.68 0 0));
  }

  .store-product-preview-tax-flow-arrow {
    color: light-dark(oklch(0.55 0 0), oklch(0.65 0 0));
    font-weight: 600;
  }

  .store-product-preview-tab {
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.36 0 0));
    background: light-dark(oklch(1 0 0), oklch(0.22 0 0));
    color: light-dark(oklch(0.38 0 0), oklch(0.82 0 0));

    &.is-selected {
      border-color: light-dark(oklch(0.55 0.12 260), oklch(0.62 0.12 260));
      background: light-dark(oklch(0.94 0.04 260), oklch(0.28 0.06 260));
    }
  }

  .store-product-preview-frame {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 26rem;
    min-block-size: 22rem;
    margin-inline: auto;
    padding: 0.75rem;
    border-radius: 1.25rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.34 0 0));
    background: light-dark(oklch(0.98 0 0), oklch(0.18 0 0));
    overflow: auto;
  }

  qasima-product {
    display: block;
    inline-size: 100%;
  }
}

.store-product-editor-layout {
  container-type: inline-size;
  display: grid;
  gap: 1.5rem;
  align-items: start;

  @container (min-width: 58rem) {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  }

  .store-product-editor-main {
    display: grid;
    gap: 1rem;
    min-inline-size: 0;
  }

  .store-product-editor-aside {
    min-inline-size: 0;
  }

  &.store-product-editor-layout--companion {
    @container (min-width: 58rem) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}
.gift-amount-editor {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  container-type: inline-size;
  container-name: gift-amount-editor;

  .gift-amount-editor-subtitle {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: light-dark(oklch(0.32 0.02 260), oklch(0.88 0.01 260));
  }

  .gift-amount-editor-fixed-lines {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gift-amount-editor-fixed-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.1rem 0;
    border-radius: 0.5rem;
    transition: background-color 120ms ease, box-shadow 120ms ease;

    &.is-dragging {
      opacity: 0.62;
    }

    &.is-drag-over {
      background: light-dark(oklch(0.96 0.02 255), oklch(0.26 0.03 255));
      box-shadow: inset 0 0 0 1px light-dark(oklch(0.72 0.06 255), oklch(0.52 0.08 255));
    }

    .gift-amount-editor-fixed-line-field {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      flex: 1 1 auto;
      min-width: 0;
    }
  }

  .gift-amount-editor-line-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.1rem;
  }

  span.gift-amount-editor-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.65rem;
    block-size: 1.65rem;
    margin: 0;
    border: none;
    border-radius: 0.35rem;
    background: transparent;
    color: light-dark(oklch(0.58 0.02 260), oklch(0.62 0.02 260));
    cursor: grab;
    touch-action: none;
    user-select: none;

    &::before {
      content: "";
      display: block;
      inline-size: 0.42rem;
      block-size: 0.72rem;
      background: radial-gradient(circle, currentColor 0.11rem, transparent 0.12rem) 0 0 / 0.42rem 0.24rem repeat-y;
      box-shadow: 0.55rem 0 0 currentColor;
      opacity: 0.85;
    }

    &:hover {
      background: light-dark(oklch(0.94 0.01 260), oklch(0.28 0.02 260));
      color: light-dark(oklch(0.42 0.02 260), oklch(0.78 0.02 260));
    }

    &:active {
      cursor: grabbing;
    }

    &:focus-visible {
      outline: 2px solid light-dark(oklch(0.55 0.18 255), oklch(0.72 0.14 255));
      outline-offset: 2px;
    }
  }

  .gift-amount-editor-amount-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px;
    border: 1px solid light-dark(oklch(0.89 0.01 260), oklch(0.38 0.02 260));
    border-radius: 10px;
    background-color: light-dark(oklch(1 0 0), oklch(0.2 0.02 260));

    q-form-number {
      display: block;
      flex: 1;
      min-inline-size: 0;

      .input-field {
        gap: 0;
      }

      q-form-field-label,
      span.description {
        display: none;
      }

      .input-wrapper {
        border: none;
        padding: 0;
        background: transparent;
      }
    }
  }

  .gift-amount-editor-amount-prefix {
    flex-shrink: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
  }

  .gift-amount-editor-amount-suffix {
    flex-shrink: 0;
    max-inline-size: 11rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.68 0.02 260));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gift-amount-editor-line-hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.7 0.02 260));
  }

  .gift-amount-editor-add {
    display: flex;
    align-items: center;
  }

  .gift-amount-editor-custom.settings-row {
    padding-inline: 0;
    border-block-end: none;
    padding-block: 0.25rem 0;
  }

  .gift-amount-editor-custom-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .gift-amount-editor-custom-range-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-inline-size: 0;
  }

  .gift-amount-editor-custom-range-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: light-dark(oklch(0.42 0.02 260), oklch(0.78 0.02 260));
  }

  @container gift-amount-editor (max-width: 22rem) {
    .gift-amount-editor-custom-range {
      grid-template-columns: 1fr;
    }
  }
}
.settings-section {
  container-type: inline-size;
  display: grid;
  gap: 0.75rem;
  inline-size: 100%;

  .settings-section__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: light-dark(oklch(0.34 0 0), oklch(0.82 0 0));
  }

  .settings-section__tabs {
    display: flex;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border-block-end: 1px solid light-dark(oklch(0.94 0 0), oklch(0.28 0 0));
    background: light-dark(oklch(0.99 0 0), oklch(0.19 0 0));
  }

  .settings-section__preview {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    border-block-end: 1px solid light-dark(oklch(0.94 0 0), oklch(0.28 0 0));
    background: light-dark(oklch(0.985 0 0), oklch(0.18 0 0));

    q-timestamp[data-preview-tooltip] {
      display: inline-block;
      text-align: center;

      .timestamp {
        flex-direction: column-reverse;
        align-items: center;
      }

      .timestamp-tooltip {
        margin-block-end: 0.5rem;
        margin-block-start: 0;
      }
    }
  }

  .settings-section__footer {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.52 0 0), oklch(0.68 0 0));
  }
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-block-end: 1px solid light-dark(oklch(0.94 0 0), oklch(0.28 0 0));

  @container (min-width: 40rem) {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
  }

  &:last-child {
    border-block-end: none;
  }

  &.settings-row--nested {
    padding-inline-start: 2rem;
    background: light-dark(oklch(0.992 0 0), oklch(0.17 0 0));
  }

  &.settings-row--disabled {
    .settings-row__title {
      color: light-dark(oklch(0.62 0 0), oklch(0.48 0 0));
    }
  }

  .settings-row__info {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
  }

  .settings-row__title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: light-dark(oklch(0.22 0 0), oklch(0.92 0 0));
  }

  .settings-row__description {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: light-dark(oklch(0.52 0 0), oklch(0.68 0 0));
  }

  .settings-row__control {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-inline-size: 0;

    q-form-select {
      inline-size: 100%;
      max-inline-size: 18rem;
    }

    q-form-switch {
      inline-size: auto;
      max-inline-size: none;
      flex-shrink: 0;
    }
  }
}
.store-product-composed-form {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
  margin-block: 0.5rem 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background-color: light-dark(
    oklch(from var(--color-canvas) calc(l - 0.02) c h),
    oklch(from var(--color-canvas) calc(l - 0.002) c h)
  );

  .store-product-composed-form-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .store-product-composed-form-lede {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.01 260));
  }

  .store-product-bundle-lines {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .store-product-bundle-line {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.625rem;
    background-color: light-dark(oklch(0.99 0 0), oklch(0.22 0.01 260));
  }

  .store-product-bundle-line-fields {
    display: grid;
    gap: 0.5rem;

    @container (min-width: 36rem) {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 5rem) minmax(0, 1fr) auto;
      align-items: end;
    }
  }

  .store-product-combo-categories {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .store-product-combo-category {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.625rem;
    background-color: light-dark(oklch(0.99 0 0), oklch(0.22 0.01 260));
  }

  .store-product-combo-category-fields {
    display: grid;
    gap: 0.5rem;

    @container (min-width: 36rem) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 5rem) minmax(0, 5rem) auto;
      align-items: end;
    }
  }

  .store-product-composed-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}
.entity-checkbox-picker {
  display: block;
  margin: 0 0 1rem;
  padding: 0;
  border: none;

  legend {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: light-dark(oklch(40% 0.02 260), oklch(75% 0.02 260));
  }

  .entity-checkbox-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 14rem;
    overflow: auto;
    border: 1px solid light-dark(oklch(88% 0.01 260), oklch(28% 0.02 260));
    border-radius: 0.5rem;
    padding: 0.5rem;
  }

  .entity-checkbox-picker-empty {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(55% 0.02 260), oklch(65% 0.02 260));
  }
}
/*
  shadow-only tokens for storefront embeds (qasima-product / cart / checkout).
  omits html/body rules and host canvas paint — page css owns the backdrop.
*/
@font-face {
  font-family: "Geist";
  src: url("/assets/Geist_wght_-Bj2R_7yk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:host {
  color-scheme: var(--q-color-scheme, light dark);
  font-family: Geist, system-ui, sans-serif;
  color: inherit;

  --color-canvas: light-dark(oklch(0.98 0 0), oklch(0.14 0 0));
  --color-accent: light-dark(oklch(0.2 0 0), oklch(0.95 0 0));
  --color-positive: oklch(0.85 0.25 128);
  --color-positive-foreground: oklch(0.45 0.25 128);
  --color-warning: oklch(0.85 0.3 55);
  --color-warning-foreground: oklch(0.45 0.3 55);
  --color-info: light-dark(oklch(0.88 0.12 250), oklch(0.38 0.14 250));
  --color-info-foreground: light-dark(oklch(0.38 0.14 250), oklch(0.92 0.06 250));
  --color-negative: light-dark(oklch(0.55 0.3 30), oklch(0.35 0.35 30));
  --color-negative-foreground: light-dark(oklch(0.98 0.05 30), oklch(0.9 0.1 30));
  --color-overlay-hover: oklch(0 0 0 / 0.05);
  --color-accent-shift: 0.75;
  --color-accent-with-shift: oklch(from var(--color-accent) calc(l * var(--color-accent-shift)) c h);
  --color-accent-foreground: light-dark(oklch(0.98 0 0), oklch(0.15 0 0));
  --color-neutral: light-dark(
    oklch(from var(--color-accent) 0.95 calc(c * 0.1) h),
    oklch(from var(--color-accent) 0.35 calc(c * 0.1) h)
  );
  --color-neutral-foreground: light-dark(
    oklch(from var(--color-accent) 0.4 calc(c * 0.5) h),
    oklch(from var(--color-accent) 0.8 calc(c * 0.2) h)
  );
}

@supports (color: contrast-color(red)) {
  :host {
    --color-accent-foreground: color-mix(
      in oklch shorter hue,
      contrast-color(var(--color-accent-with-shift)) 98%,
      var(--color-accent) 2%
    );
  }
}

:host([data-color-scheme="light"]) {
  --q-color-scheme: light;
  color-scheme: light;
}

:host([data-color-scheme="dark"]) {
  --q-color-scheme: dark;
  color-scheme: dark;
}
q-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  background: light-dark(oklch(0.92 0.03 250), oklch(0.32 0.04 250));
  color: light-dark(oklch(0.35 0.06 250), oklch(0.92 0.02 250));

  &[data-tone="sale"] {
    background: light-dark(oklch(0.9 0.08 30), oklch(0.38 0.1 30));
    color: light-dark(oklch(0.42 0.14 30), oklch(0.95 0.04 30));
  }

  &[data-tone="new"] {
    background: light-dark(oklch(0.9 0.06 150), oklch(0.34 0.07 150));
    color: light-dark(oklch(0.35 0.1 150), oklch(0.94 0.03 150));
  }
}
q-store-commerce-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;

  .store-commerce-price-compare {
    text-decoration: line-through;
    opacity: 0.65;
    font-weight: 400;
  }

  .store-commerce-price-current {
    font-weight: 600;
  }
}
q-product-detail-sections {
  display: block;

  .product-detail-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .product-detail-sections-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
  }

  .product-detail-sections-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .product-detail-sections-tab {
    appearance: none;
    border: 1px solid light-dark(oklch(0.82 0 0), oklch(0.35 0 0));
    background: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    font: inherit;
  }

  .product-detail-sections-tab[aria-selected="true"] {
    background: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
    color: light-dark(oklch(0.98 0 0), oklch(0.15 0 0));
  }

  .product-detail-sections-panel {
    display: none;
  }

  .product-detail-sections-panel[data-active="true"] {
    display: block;
  }

  .product-detail-sections-stack-item + .product-detail-sections-stack-item {
    margin-top: 1.25rem;
  }

  .product-detail-sections-field-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
  }

  .product-detail-sections-long {
    margin: 0;
    white-space: pre-wrap;
  }

  .product-detail-sections-accordion-item {
    border-block-end: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
  }

  .product-detail-sections-accordion-item summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.75rem 0;
    list-style: none;
  }

  .product-detail-sections-accordion-item summary::-webkit-details-marker {
    display: none;
  }

  .product-detail-sections-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .product-detail-sections-faq-item summary {
    font-weight: 500;
  }

  .product-detail-sections-faq-answer {
    margin: 0.5rem 0 0;
    white-space: pre-wrap;
  }
}
.store-product-gift-config {
  .store-product-gift-config-summary {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
  }

  .store-product-gift-config-block {
    margin-block-start: 1rem;
  }

  .store-product-gift-config-subtitle {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: lowercase;
    color: light-dark(oklch(0.45 0 0), oklch(0.75 0 0));
  }

  .store-product-gift-config-readonly {
    margin-block-start: 0.85rem;
    font-size: 0.8125rem;
  }

  .store-product-gift-lines,
  .store-product-gift-combo-categories {
    display: grid;
    gap: 0.65rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .store-product-gift-line,
  .store-product-gift-combo-category {
    padding: 0.75rem 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.99 0 0), oklch(0.21 0 0));
  }

  .store-product-gift-line-name,
  .store-product-gift-combo-options a {
    font-weight: 600;
    color: light-dark(oklch(0.35 0.08 250), oklch(0.78 0.06 250));
    text-decoration: none;
  }

  .store-product-gift-line-name:hover,
  .store-product-gift-combo-options a:hover {
    text-decoration: underline;
  }

  .store-product-gift-line-meta,
  .store-product-gift-combo-category-meta {
    margin-block-start: 0.25rem;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.48 0 0), oklch(0.72 0 0));
  }

  .store-product-gift-combo-category-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    align-items: baseline;
  }

  .store-product-gift-combo-category-title {
    font-weight: 600;
  }

  .store-product-gift-combo-options {
    margin: 0.5rem 0 0;
    padding-inline-start: 1.1rem;
    font-size: 0.875rem;
  }
}
.gift-card-batch-create-preview-panel {
  .gift-card-batch-create-preview-note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
  }

  .gift-card-batch-create-preview-list {
    list-style: none;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-radius: 0.65rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.97 0.01 260), oklch(0.2 0.02 260));
    font-size: 0.8125rem;
    line-height: 1.4;
    display: grid;
    gap: 0.4rem;
  }

  .gift-card-batch-create-preview-item {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
    gap: 0.35rem 0.75rem;
    align-items: start;
  }

  .gift-card-batch-create-preview-term {
    font-weight: 600;
    color: light-dark(oklch(0.42 0.02 260), oklch(0.78 0.02 260));
    text-transform: lowercase;
  }

  .gift-card-batch-create-preview-detail {
    color: light-dark(oklch(0.28 0 0), oklch(0.9 0 0));
    overflow-wrap: anywhere;
  }
}
.store-price-form-view {
  container-type: inline-size;

  [hidden] {
    display: none !important;
  }

  q-button[hidden] {
    display: none !important;
  }

  [data-price-kind-panel]:not([data-price-panel-visible]) {
    display: none !important;
  }

  .store-price-tier-panel-mount {
    display: block;
    min-inline-size: 0;
  }

  .store-price-embed-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-block-start: 1.25rem;
  }

  .store-price-embed-header-title {
    margin: 0;
  }

  .store-price-embed-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .store-price-embed-kind-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
    text-transform: lowercase;
  }

  .store-price-embed-kind-picker {
    margin-block: 0.75rem 0.25rem;
  }

  .store-price-flat-amount {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;

    .store-price-flat-amount-label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: light-dark(oklch(0.42 0.02 260), oklch(0.78 0.02 260));
    }

    .store-price-flat-amount-input {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 8px;
      border: 1px solid light-dark(oklch(0.89 0.01 260), oklch(0.38 0.02 260));
      border-radius: 10px;
      background-color: light-dark(oklch(1 0 0), oklch(0.2 0.02 260));
    }

    .store-price-flat-amount-prefix {
      flex-shrink: 0;
      font-size: 0.9375rem;
      font-weight: 600;
      color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
    }

    q-form-text {
      display: block;
      flex: 1;
      min-inline-size: 0;

      .input-field {
        gap: 0;
      }

      q-form-field-label,
      span.description {
        display: none;
      }

      .input-wrapper {
        border: none;
        padding: 0;
        background: transparent;
      }
    }
  }

  .store-price-embed-fields {
    display: grid;
    gap: 0.75rem;
    margin-block-start: 0.75rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
  }

  .store-price-embed-additional-list {
    display: grid;
    gap: 1rem;
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
  }

  .store-price-embed-additional-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
    text-transform: lowercase;
  }

  .store-price-embed-additional-row {
    display: grid;
    gap: 0.75rem;
    align-items: end;
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));

    @container (min-width: 32rem) {
      grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto;
    }
  }

  .store-price-embed-additional-row-actions {
    display: flex;
    justify-content: flex-end;
  }

  .store-price-embed-additional-actions {
    margin-block-start: 0.75rem;
  }

  .store-price-form-advanced {
    margin-block: 0.5rem 1rem;
    border-block-end: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
    padding-block-end: 0.75rem;
  }

  .store-price-form-advanced__summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
    margin-block-end: 0.75rem;
  }

  .store-price-form-advanced__fields {
    display: grid;
    gap: 0.75rem;
    padding-block-start: 0.25rem;
  }

  .store-price-product-fixed {
    display: grid;
    gap: 0.25rem;
  }

  .store-price-product-fixed-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: light-dark(oklch(0.42 0.02 260), oklch(0.78 0.02 260));
  }

  .store-price-product-fixed-value {
    margin: 0;
    font-size: 0.9375rem;
  }

  .store-price-product-fixed-hint {
    margin: 0;
    font-size: 0.75rem;
    color: light-dark(oklch(0.5 0.02 260), oklch(0.68 0.02 260));
  }

  .store-price-config-panel {
    display: grid;
    gap: 0.75rem;
  }

  .store-price-voluntary-row {
    display: grid;
    gap: 0.75rem;
    align-items: end;

    @container (min-width: 28rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .store-price-tier-mode-hint {
    margin: 0;
    font-size: 0.75rem;
    color: light-dark(oklch(0.5 0.02 260), oklch(0.68 0.02 260));
  }

  .store-price-tier-rows {
    display: grid;
    gap: 0.5rem;
  }

  .store-price-tier-row {
    display: grid;
    gap: 0.5rem;
    align-items: end;

    @container (min-width: 28rem) {
      grid-template-columns: 6rem 1fr auto;
    }
  }

  .store-price-tier-row--labels {
    display: grid;
    align-items: end;
  }

  .store-price-tier-col-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: light-dark(oklch(0.42 0.02 260), oklch(0.78 0.02 260));
  }

  .store-price-flat-amount--no-label {
    .store-price-flat-amount-input {
      margin-block-start: 0;
    }
  }

  .store-price-tier-row:not(.store-price-tier-row--labels) {
    q-form-number,
    q-form-text {
      q-form-field-label {
        display: none;
      }
    }
  }

  .store-price-tier-row-actions {
    display: flex;
    justify-content: flex-end;
  }
}
.gifting-validity-extension-eligibility-view {
  .gifting-validity-extension-eligibility-explainer {
    max-width: 28rem;
    padding: 1rem 1.25rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    border-radius: 0.75rem;
    background: light-dark(oklch(0.99 0.005 260), oklch(0.2 0.02 260));
  }

  .gifting-validity-extension-eligibility-explainer-lede {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
  }
}
.billing-view {
  container-type: inline-size;

  .billing-hub-section {
    display: grid;
    gap: 0.75rem;
    padding-block: 0.5rem;
  }

  .billing-hub-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
  }

  .billing-hub-subtitle {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: light-dark(oklch(0.4 0 0), oklch(0.75 0 0));
  }

  .billing-payment-method-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .billing-payment-method-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .billing-text-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: light-dark(oklch(0.45 0.12 255), oklch(0.72 0.14 255));
    cursor: pointer;
    padding: 0;
  }

  .billing-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;

    label {
      display: grid;
      gap: 0.25rem;
      font-size: 0.8125rem;
    }

    input {
      min-inline-size: 8rem;
      padding: 0.4rem 0.5rem;
      border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.35 0 0));
      border-radius: 0.375rem;
      background: light-dark(oklch(1 0 0), oklch(0.22 0 0));
      color: inherit;
    }

    button {
      padding: 0.45rem 0.75rem;
      border: 0;
      border-radius: 0.375rem;
      background: light-dark(oklch(0.35 0.08 255), oklch(0.55 0.1 255));
      color: oklch(0.98 0 0);
      cursor: pointer;
    }

    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    select {
      min-inline-size: 8rem;
      padding: 0.4rem 0.5rem;
      border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.35 0 0));
      border-radius: 0.375rem;
      background: light-dark(oklch(1 0 0), oklch(0.22 0 0));
      color: inherit;
    }
  }

  .billing-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
  }

  .billing-danger-button {
    justify-self: start;
    padding: 0.45rem 0.75rem;
    border: 0;
    border-radius: 0.375rem;
    background: light-dark(oklch(0.45 0.14 25), oklch(0.5 0.14 25));
    color: oklch(0.98 0 0);
    cursor: pointer;
  }

  .billing-danger-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .billing-usage-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .billing-usage-row {
    display: grid;
    grid-template-columns: 7.5rem 1fr auto auto;
    gap: 0.75rem;
    font-size: 0.875rem;
    align-items: center;
  }

  .billing-entry-type {
    display: inline-flex;
    justify-content: center;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: lowercase;
    background: light-dark(oklch(0.94 0.01 255), oklch(0.3 0.02 255));
    color: light-dark(oklch(0.35 0.04 255), oklch(0.85 0.04 255));
  }

  .billing-entry-type-commission {
    background: light-dark(oklch(0.93 0.05 145), oklch(0.32 0.05 145));
    color: light-dark(oklch(0.35 0.08 145), oklch(0.85 0.06 145));
  }

  .billing-entry-type-metered {
    background: light-dark(oklch(0.93 0.04 75), oklch(0.32 0.04 75));
    color: light-dark(oklch(0.38 0.07 75), oklch(0.85 0.05 75));
  }

  .billing-entry-type-topup {
    background: light-dark(oklch(0.93 0.04 250), oklch(0.32 0.05 250));
    color: light-dark(oklch(0.35 0.08 250), oklch(0.85 0.06 250));
  }

  .billing-entry-order-ref {
    color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
    font-size: 0.8125rem;
  }
}
.support-inbox-client {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: min(70vh, 40rem);

  .support-inbox-client__panes {
    display: grid;
    grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
    flex: 1;
    min-height: 24rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    border-radius: 0.5rem;
    overflow: hidden;
    background: light-dark(oklch(0.99 0.005 260), oklch(0.16 0.02 260));
  }

  .support-inbox-client__list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
    background: light-dark(oklch(0.98 0.008 260), oklch(0.18 0.02 260));
  }

  .inbox-list-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
    background: light-dark(oklch(0.97 0.01 260), oklch(0.2 0.02 260));
    position: sticky;
    top: 0;
    z-index: 1;

    .inbox-list-filters__tab {
      margin: 0;
      padding: 0.25rem 0.625rem;
      border: 1px solid transparent;
      border-radius: 999px;
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: lowercase;
      cursor: pointer;
      opacity: 0.75;

      &:hover {
        opacity: 1;
        background: light-dark(oklch(0.94 0.015 260), oklch(0.26 0.025 260));
      }

      &.inbox-list-filters__tab--active {
        opacity: 1;
        border-color: light-dark(oklch(0.82 0.03 250), oklch(0.42 0.05 250));
        background: light-dark(oklch(0.94 0.03 250), oklch(0.26 0.04 250));
      }
    }
  }

  .support-inbox-client__list-status {
    margin: 1rem;
    font-size: 0.875rem;
    opacity: 0.75;
  }

  .support-inbox-client__detail {
    overflow-y: auto;
    min-width: 0;
  }

  @container (max-width: 52rem) {
    .support-inbox-client__panes {
      grid-template-columns: 1fr;
      grid-template-rows: minmax(12rem, 40%) minmax(0, 1fr);
    }

    .support-inbox-client__list {
      border-right: none;
      border-bottom: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
    }
  }
}

.inbox-list-row {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: none;
  border-bottom: 1px solid light-dark(oklch(0.92 0.01 260), oklch(0.24 0.02 260));
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;

  &:hover {
    background: light-dark(oklch(0.96 0.015 260), oklch(0.22 0.025 260));
  }

  &.inbox-list-row--selected {
    background: light-dark(oklch(0.94 0.03 250), oklch(0.24 0.04 250));
    box-shadow: inset 3px 0 0 light-dark(oklch(0.55 0.18 250), oklch(0.72 0.14 250));
  }

  .inbox-list-row__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }

  .inbox-list-row__title {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .inbox-list-row__preview {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.inbox-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: lowercase;
  background: light-dark(oklch(0.93 0.02 260), oklch(0.28 0.03 260));
  color: light-dark(oklch(0.35 0.05 260), oklch(0.88 0.02 260));
  flex-shrink: 0;

  &.inbox-status-pill--compact {
    font-size: 0.625rem;
    padding: 0.0625rem 0.375rem;
  }

  &.inbox-status-pill--open,
  &.inbox-status-pill--acknowledged {
    background: light-dark(oklch(0.92 0.04 250), oklch(0.3 0.06 250));
  }

  &.inbox-status-pill--in_progress {
    background: light-dark(oklch(0.92 0.06 85), oklch(0.32 0.08 85));
  }

  &.inbox-status-pill--waiting {
    background: light-dark(oklch(0.92 0.05 55), oklch(0.32 0.07 55));
  }

  &.inbox-status-pill--snoozed {
    background: light-dark(oklch(0.9 0.03 300), oklch(0.3 0.05 300));
  }

  &.inbox-status-pill--resolved {
    background: light-dark(oklch(0.9 0.04 145), oklch(0.28 0.06 145));
  }
}

.inbox-detail-pane {
  padding: 1.25rem 1.5rem;
  display: grid;
  gap: 1rem;
  align-content: start;

  &.inbox-detail-pane--empty,
  &.inbox-detail-pane--loading {
    place-content: center;
    min-height: 12rem;
  }

  .inbox-detail-pane-placeholder {
    margin: 0;
    opacity: 0.6;
    font-size: 0.9375rem;
  }

  .inbox-detail-pane__header {
    display: grid;
    gap: 0.5rem;
  }

  .inbox-detail-pane__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .inbox-detail-pane__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .inbox-detail-pane__meta {
    font-size: 0.8125rem;
    opacity: 0.85;

    &.inbox-detail-pane__meta--muted {
      opacity: 0.6;
      font-family: ui-monospace, monospace;
      font-size: 0.75rem;
    }
  }

  .inbox-detail-pane__summary {
    margin: 0;
    line-height: 1.5;
    white-space: pre-wrap;
  }

  .inbox-detail-pane__section-title {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: lowercase;
  }

  .inbox-detail-pane__status-actions {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
    border-bottom: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
  }

  .inbox-detail-pane__status-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }
}
.inbox-detail-view {
  display: grid;
  gap: 1.5rem;
  max-width: 48rem;

  .inbox-detail-meta {
    display: grid;
    gap: 0.25rem;
  }

  .inbox-detail-thread ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
  }

  .thread-message {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: light-dark(oklch(0.97 0.01 260), oklch(0.22 0.02 260));
  }

  .thread-message-direction {
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .inbox-detail-reply textarea {
    width: 100%;
    margin-bottom: 0.75rem;
  }

  .inbox-detail-error {
    color: light-dark(oklch(45% 0.15 25), oklch(75% 0.12 25));
  }
}
.support-messaging-client {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: min(70vh, 40rem);

  .support-messaging-client__panes {
    display: grid;
    grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
    flex: 1;
    min-height: 24rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    border-radius: 0.5rem;
    overflow: hidden;
    background: light-dark(oklch(0.99 0.005 260), oklch(0.16 0.02 260));
  }

  .support-messaging-client__list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
    background: light-dark(oklch(0.98 0.008 260), oklch(0.18 0.02 260));
  }

  .support-messaging-client__list-status {
    margin: 1rem;
    font-size: 0.875rem;
    opacity: 0.75;
  }

  .support-messaging-client__detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }

  @container (max-width: 52rem) {
    .support-messaging-client__panes {
      grid-template-columns: 1fr;
      grid-template-rows: minmax(12rem, 40%) minmax(0, 1fr);
    }

    .support-messaging-client__list {
      border-right: none;
      border-bottom: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
    }
  }
}

.messaging-list-row {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: none;
  border-bottom: 1px solid light-dark(oklch(0.92 0.01 260), oklch(0.24 0.02 260));
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;

  &:hover {
    background: light-dark(oklch(0.96 0.015 260), oklch(0.22 0.025 260));
  }

  &.messaging-list-row--selected {
    background: light-dark(oklch(0.94 0.03 250), oklch(0.24 0.04 250));
    box-shadow: inset 3px 0 0 light-dark(oklch(0.55 0.18 250), oklch(0.72 0.14 250));
  }

  .messaging-list-row__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }

  .messaging-list-row__title {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    word-break: break-word;
  }

  .messaging-list-row__channel {
    flex-shrink: 0;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
  }

  .messaging-list-row__preview {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    opacity: 0.8;
  }
}
.messaging-conversation-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;

  .messaging-conversation-pane__header {
    flex-shrink: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
  }

  .messaging-conversation-pane__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
  }

  .messaging-conversation-pane__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
  }

  .messaging-conversation-pane__subject-link {
    color: light-dark(oklch(0.45 0.14 250), oklch(0.72 0.12 250));
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .messaging-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: light-dark(oklch(0.97 0.008 260), oklch(0.14 0.02 260));
  }

  .messaging-bubble {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: min(28rem, 85%);

    &.messaging-bubble--inbound {
      align-self: flex-start;
    }

    &.messaging-bubble--outbound {
      align-self: flex-end;
      align-items: flex-end;
    }

    .messaging-bubble__body {
      margin: 0;
      padding: 0.65rem 0.85rem;
      border-radius: 1rem;
      line-height: 1.45;
      font-size: 0.875rem;
      white-space: pre-wrap;
      word-break: break-word;
    }

    &.messaging-bubble--inbound .messaging-bubble__body {
      background: light-dark(oklch(0.99 0.005 260), oklch(0.22 0.025 260));
      border: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.3 0.02 260));
      border-bottom-left-radius: 0.25rem;
    }

    &.messaging-bubble--outbound .messaging-bubble__body {
      background: light-dark(oklch(0.55 0.16 250), oklch(0.42 0.12 250));
      color: light-dark(oklch(0.99 0.01 260), oklch(0.98 0.01 260));
      border-bottom-right-radius: 0.25rem;
    }

    .messaging-bubble__image {
      display: block;
      max-width: min(16rem, 100%);
      border-radius: 0.5rem;
      border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    }

    .messaging-bubble__time {
      font-size: 0.6875rem;
      opacity: 0.65;
      padding: 0 0.25rem;
    }

    .messaging-bubble__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding: 0.25rem 0.15rem 0;
    }

    .messaging-bubble__resolved {
      margin: 0.25rem 0 0;
      font-size: 0.75rem;
      opacity: 0.75;
    }
  }

  .messaging-compose {
    flex-shrink: 0;
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
    background: light-dark(oklch(0.99 0.005 260), oklch(0.16 0.02 260));

    textarea {
      width: 100%;
      min-height: 4.5rem;
      resize: vertical;
      font: inherit;
      padding: 0.5rem 0.65rem;
      border-radius: 0.5rem;
      border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
      background: light-dark(oklch(1 0 0), oklch(0.2 0.02 260));
      color: inherit;
    }

    .messaging-compose__kind,
    .messaging-compose__attach {
      display: grid;
      gap: 0.35rem;
      font-size: 0.8125rem;
    }

    .messaging-compose__kind select {
      font: inherit;
      padding: 0.35rem 0.5rem;
      border-radius: 0.5rem;
      border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
      background: light-dark(oklch(1 0 0), oklch(0.2 0.02 260));
      color: inherit;
    }

    .messaging-compose__error {
      margin: 0;
      font-size: 0.8125rem;
      color: light-dark(oklch(0.5 0.18 25), oklch(0.72 0.14 25));
    }

    .messaging-compose__actions {
      display: flex;
      justify-content: flex-end;
    }
  }
}

.support-messaging-client {
  .support-messaging-client__detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
}
inbox-routing-settings-view {
  display: block;
  container-type: inline-size;

  .inbox-routing-settings-intro {
    margin: 0 0 1rem;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
    max-width: 52rem;
  }

  .inbox-routing-settings-table-wrap {
    overflow-x: auto;
  }

  .inbox-routing-settings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;

    th,
    td {
      padding: 0.65rem 0.75rem;
      text-align: left;
      border-bottom: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.32 0.02 260));
      vertical-align: middle;
    }

    th {
      font-weight: 600;
      color: light-dark(oklch(0.35 0.02 260), oklch(0.85 0.02 260));
    }

    td.inbox-routing-settings-trigger {
      min-width: 12rem;
    }

    .inbox-routing-settings-trigger-code {
      display: block;
      font-size: 0.75rem;
      color: light-dark(oklch(0.55 0.02 260), oklch(0.62 0.02 260));
      margin-top: 0.15rem;
    }
  }

  .inbox-routing-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
  }

  .inbox-routing-settings-status {
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
  }
}
.settings-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-block-end: 0.25rem;

  .settings-nav-link {
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
    text-decoration: none;
    font-size: 0.875rem;
  }

  .settings-nav-link:hover {
    color: light-dark(oklch(28% 0.02 260), oklch(92% 0.01 260));
  }

  .settings-nav-link.is-active {
    color: light-dark(oklch(28% 0.02 260), oklch(92% 0.01 260));
    font-weight: 600;
  }
}

.settings-access-requests,
.settings-hidden-features {
  container-type: inline-size;
  display: grid;
  gap: 1rem;

  .settings-feature-status {
    margin: 0;
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
  }

  .settings-feature-status-error {
    color: light-dark(oklch(48% 0.14 25), oklch(72% 0.12 25));
  }

  .settings-feature-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .settings-feature-row {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: light-dark(oklch(97% 0.005 260), oklch(22% 0.015 260));
  }

  .settings-feature-row-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
  }

  .settings-feature-meta {
    display: grid;
    gap: 0.15rem;
  }

  .settings-feature-title {
    margin: 0;
    font-weight: 600;
    color: light-dark(oklch(28% 0.02 260), oklch(92% 0.01 260));
  }

  .settings-feature-copy {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
  }

  .settings-feature-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  @container (max-width: 32rem) {
    .settings-feature-row-head {
      flex-direction: column;
      align-items: stretch;
    }
  }
}
.settings-page {
  display: grid;
  gap: 1.5rem;
  inline-size: 100%;
  max-inline-size: 48rem;

  .settings-page__groups {
    display: grid;
    gap: 1.5rem;
  }
}
q-timestamp {
  position: relative;
  display: inline;
  color: inherit;
  font: inherit;

  .timestamp {
    position: relative;
    display: inline;
    font: inherit;
  }

  .timestamp-trigger {
    all: unset;
    display: inline;
    cursor: help;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    border-radius: 0.125rem;
    anchor-name: var(--timestamp-anchor-name);

    &:focus-visible {
      outline: 2px solid light-dark(oklch(55% 0.12 250), oklch(72% 0.12 250));
      outline-offset: 2px;
    }
  }

  &[tone="muted"] .timestamp-trigger {
    color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
  }

  &[data-preview-tooltip] {
    .timestamp {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
    }

    .timestamp-tooltip {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
      position: relative;
      position-anchor: unset;
      translate: none;
      margin-block-start: 0.5rem;
      inset: unset;
    }

    .timestamp-tooltip::after {
      display: none;
    }
  }

  .timestamp-tooltip {
    --timestamp-arrow-border: light-dark(oklch(88% 0 0), oklch(32% 0 0));
    position: fixed;
    position-anchor: var(--timestamp-anchor-name);
    position-area: top;
    position-try-fallbacks: flip-block, flip-inline;
    inset: unset;
    margin: 0;
    inline-size: max-content;
    min-inline-size: 18rem;
    max-inline-size: min(36rem, 90vw);
    padding: 0.625rem 0.75rem;
    border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
    border-radius: 0.625rem;
    background: light-dark(oklch(99% 0 0), oklch(20% 0 0));
    box-shadow: 0 0.75rem 1.5rem light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.45));
    color: light-dark(oklch(22% 0 0), oklch(92% 0 0));
    font-size: 0.75rem;
    line-height: 1.35;
    overflow: visible;
  }

  .timestamp-tooltip[data-placement="top"],
  .timestamp-tooltip:not([data-placement]) {
    translate: 0 -0.5rem;
  }

  .timestamp-tooltip[data-placement="bottom"] {
    translate: 0 0.5rem;
  }

  .timestamp-tooltip[data-placement="inline-start"] {
    translate: -0.5rem 0;
  }

  .timestamp-tooltip[data-placement="inline-end"] {
    translate: 0.5rem 0;
  }

  .timestamp-tooltip:popover-open {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    pointer-events: auto;
  }

  .timestamp-tooltip::after {
    content: "";
    position: absolute;
    inline-size: 0.625rem;
    block-size: 0.625rem;
    rotate: 45deg;
    background: inherit;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
  }

  .timestamp-tooltip[data-placement="top"]::after,
  .timestamp-tooltip:not([data-placement])::after {
    inset-block-start: 100%;
    inset-inline-start: 50%;
    translate: -50% 0;
    margin-block-start: -0.3125rem;
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    border-inline-end-color: var(--timestamp-arrow-border);
    border-block-end-color: var(--timestamp-arrow-border);
  }

  .timestamp-tooltip[data-placement="bottom"]::after {
    inset-block-end: 100%;
    inset-inline-start: 50%;
    translate: -50% 0;
    margin-block-end: -0.3125rem;
    border-inline-start-width: 1px;
    border-block-start-width: 1px;
    border-inline-start-color: var(--timestamp-arrow-border);
    border-block-start-color: var(--timestamp-arrow-border);
  }

  .timestamp-tooltip[data-placement="inline-start"]::after {
    inset-inline-start: 100%;
    inset-block-start: 50%;
    translate: 0 -50%;
    margin-inline-start: -0.3125rem;
    border-block-end-width: 1px;
    border-inline-end-width: 1px;
    border-block-end-color: var(--timestamp-arrow-border);
    border-inline-end-color: var(--timestamp-arrow-border);
  }

  .timestamp-tooltip[data-placement="inline-end"]::after {
    inset-inline-end: 100%;
    inset-block-start: 50%;
    translate: 0 -50%;
    margin-inline-end: -0.3125rem;
    border-block-start-width: 1px;
    border-inline-start-width: 1px;
    border-block-start-color: var(--timestamp-arrow-border);
    border-inline-start-color: var(--timestamp-arrow-border);
  }

  .timestamp-tooltip__rows {
    display: grid;
    grid-template-columns: auto max-content auto auto;
    column-gap: 0.375rem;
    row-gap: 0.25rem;
    align-items: baseline;
    inline-size: 100%;
  }

  .timestamp-tooltip__row--zoned-datetime,
  .timestamp-tooltip__row--zoned-time,
  .timestamp-tooltip__row--zoned-date {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  .timestamp-tooltip__row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: baseline;
  }

  .timestamp-tooltip__row--separated {
    margin-block-start: 0.25rem;
    padding-block-start: 0.375rem;
    border-block-start: 1px solid light-dark(oklch(92% 0 0), oklch(28% 0 0));
  }

  .timestamp-tooltip__label {
    display: contents;
  }

  .timestamp-tooltip__row:not(.timestamp-tooltip__row--zoned-datetime):not(.timestamp-tooltip__row--zoned-time):not(.timestamp-tooltip__row--zoned-date) {
    .timestamp-tooltip__label-text {
      grid-column: 1 / 3;
    }

    .timestamp-tooltip__value,
    .timestamp-tooltip__value--copyable {
      grid-column: 3 / -1;
      justify-self: end;
    }
  }

  .timestamp-tooltip__row--zoned-datetime .timestamp-tooltip__time,
  .timestamp-tooltip__row--zoned-time .timestamp-tooltip__time,
  .timestamp-tooltip__row--zoned-date .timestamp-tooltip__time {
    margin-inline-start: calc(1.25rem - 0.375rem);
  }

  .timestamp-tooltip__zone-badge {
    justify-self: start;
    white-space: nowrap;
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: light-dark(oklch(68% 0 0), oklch(50% 0 0));
  }

  .timestamp-tooltip__label-text {
    justify-self: start;
    white-space: nowrap;
    color: light-dark(oklch(62% 0 0), oklch(54% 0 0));
  }

  .timestamp-tooltip__time:empty,
  .timestamp-tooltip__date:empty {
    display: none;
  }

  .timestamp-tooltip__time,
  .timestamp-tooltip__date,
  .timestamp-tooltip__value {
    white-space: nowrap;
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    text-align: end;
    color: light-dark(oklch(24% 0 0), oklch(90% 0 0));
  }

  .timestamp-tooltip__row--zoned-datetime .timestamp-tooltip__date {
    margin-inline-start: calc(1rem - 0.375rem);
  }

  .timestamp-tooltip__value--copyable {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    cursor: copy;
    font: inherit;
    color: inherit;
    text-align: end;

    &:focus-visible {
      outline: 2px solid light-dark(oklch(55% 0.12 250), oklch(72% 0.12 250));
      outline-offset: 1px;
      border-radius: 0.1875rem;
    }
  }

  .timestamp-tooltip__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
    opacity: 0;
    transition: opacity 120ms ease;
  }

  .timestamp-tooltip__value--copyable:hover .timestamp-tooltip__copy,
  .timestamp-tooltip__value--copyable:focus-visible .timestamp-tooltip__copy {
    opacity: 1;
  }

  .timestamp-tooltip__value-text {
    font: inherit;
    color: inherit;
  }
}
.booking-flow-builder-view {
  container-type: inline-size;

  .booking-flow-editor-layout {
    display: grid;
    gap: 1.5rem;
    align-items: start;

    @container (min-width: 58rem) {
      grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
    }
  }

  .booking-flow-editor-main {
    min-inline-size: 0;
  }

  .booking-flow-editor-aside {
    min-inline-size: 0;
  }

  .booking-flow-editor-layout--companion {
    @container (min-width: 58rem) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .booking-flow-form {
    display: grid;
    gap: 1.25rem;
  }

  .booking-flow-panel {
    padding: 1.25rem 1.35rem;
    border-radius: 0.75rem;
    border: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
    background: light-dark(oklch(0.99 0.005 260), oklch(0.2 0.02 260));
    display: grid;
    gap: 1rem;
  }

  .booking-flow-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .booking-flow-panel-lede {
    margin: -0.35rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: light-dark(oklch(0.48 0.02 260), oklch(0.72 0.02 260));
  }

  .store-product-field-set-assignments-embedded {
    margin-block: 0;
    padding-top: 0.75rem;
    border-top: 1px solid light-dark(oklch(0.92 0.01 260), oklch(0.26 0.02 260));

    .store-product-field-set-assignments-title {
      font-size: 0.9375rem;
      font-weight: 600;
    }

    .store-product-field-set-assignments-lede {
      margin-bottom: 0.75rem;
      font-size: 0.8125rem;
      line-height: 1.45;
    }
  }

  .booking-flow-steps-layout {
    display: grid;
    gap: 1rem;
    align-items: start;

    @container (min-width: 36rem) {
      grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr);
    }
  }

  .booking-flow-step-nav {
    display: grid;
    gap: 0.75rem;
    align-content: start;
  }

  .booking-flow-step-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
  }

  .booking-flow-step-nav-button {
    display: grid;
    gap: 0.15rem;
    inline-size: 100%;
    text-align: start;
    font: inherit;
    font-size: 0.8125rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    background: light-dark(oklch(1 0 0), oklch(0.18 0.02 260));
    color: inherit;
    cursor: pointer;

    &.is-active {
      border-color: light-dark(oklch(0.55 0.08 260), oklch(0.62 0.1 260));
      background: light-dark(oklch(0.94 0.03 260), oklch(0.26 0.05 260));
    }
  }

  .booking-flow-step-nav-label {
    font-weight: 600;
    text-transform: lowercase;
    word-break: break-word;
  }

  .booking-flow-step-nav-meta {
    font-size: 0.7rem;
    color: light-dark(oklch(0.5 0.02 260), oklch(0.68 0.02 260));
  }

  .booking-flow-step-editor {
    min-inline-size: 0;
  }

  .booking-flow-step-editor-empty {
    margin: 0;
    padding: 1rem;
    font-size: 0.875rem;
    color: light-dark(oklch(0.5 0 0), oklch(0.7 0 0));
    border-radius: 0.625rem;
    border: 1px dashed light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
  }

  .booking-flow-step {
    margin: 0;
    padding: 1rem 1.1rem;
    border-radius: 0.625rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.3 0.02 260));
    background: light-dark(oklch(1 0 0), oklch(0.17 0.02 260));
  }

  .booking-flow-add-step-nav {
    margin-top: 0;
    padding-top: 0.75rem;
    border-top: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
  }

  .booking-flow-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
  }

  .booking-flow-step-head-title {
    margin: 0;
    flex: 1 1 auto;
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: lowercase;
    color: light-dark(oklch(0.38 0.03 260), oklch(0.82 0.03 260));
  }

  .booking-flow-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .booking-flow-section-type-field {
    display: grid;
    gap: 0.35rem;
    flex: 1 1 12rem;
    font-size: 0.8125rem;
    text-transform: lowercase;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
  }

  .booking-flow-section-type-field select {
    font: inherit;
    font-size: 0.875rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.375rem;
    border: 1px solid light-dark(oklch(0.85 0.01 260), oklch(0.35 0.02 260));
    background: light-dark(oklch(1 0 0), oklch(0.15 0.02 260));
    color: inherit;
  }

  .booking-flow-add-section,
  .booking-flow-add-step {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));

    label {
      display: grid;
      gap: 0.35rem;
      flex: 1 1 12rem;
      font-size: 0.8125rem;
      text-transform: lowercase;
      color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
    }

    select {
      font: inherit;
      font-size: 0.875rem;
      padding: 0.4rem 0.55rem;
      border-radius: 0.375rem;
      border: 1px solid light-dark(oklch(0.85 0.01 260), oklch(0.35 0.02 260));
      background: light-dark(oklch(1 0 0), oklch(0.15 0.02 260));
      color: inherit;
    }
  }

  .booking-flow-add-section.is-collapsed {
    align-items: center;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
  }

  .booking-flow-add-section-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem;
    flex: 1 1 100%;
  }

  .booking-flow-add-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .booking-flow-add-step {
    margin-top: 1rem;
    border-top: none;
    padding-top: 0;
  }

  .booking-flow-sections {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
  }

  .booking-flow-section {
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    background: light-dark(oklch(0.97 0.008 260), oklch(0.22 0.02 260));
    display: grid;
    gap: 0.5rem;
  }

  .booking-flow-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .booking-flow-section-type {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: lowercase;
  }

  .booking-flow-section-actions {
    display: flex;
    gap: 0.25rem;
  }

  .booking-flow-section label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
    text-transform: lowercase;
  }

  .booking-flow-section select {
    font: inherit;
    font-size: 0.875rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.375rem;
    border: 1px solid light-dark(oklch(0.85 0.01 260), oklch(0.35 0.02 260));
    background: light-dark(oklch(1 0 0), oklch(0.15 0.02 260));
    color: inherit;
  }

  .booking-flow-guest-picker-config {
    display: grid;
    gap: 0.65rem;

    .booking-flow-guest-picker-config-hint {
      margin: 0;
      font-size: 0.8125rem;
      line-height: 1.45;
      color: light-dark(oklch(0.48 0.02 260), oklch(0.7 0.02 260));
    }

    label,
    fieldset {
      display: grid;
      gap: 0.35rem;
      font-size: 0.8125rem;
      text-transform: lowercase;
      color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
    }

    select,
    input[type="number"] {
      font: inherit;
      font-size: 0.875rem;
      padding: 0.4rem 0.55rem;
      border-radius: 0.375rem;
      border: 1px solid light-dark(oklch(0.85 0.01 260), oklch(0.35 0.02 260));
      background: light-dark(oklch(1 0 0), oklch(0.15 0.02 260));
      color: inherit;
    }

    .booking-flow-guest-picker-categories {
      margin: 0;
      padding: 0.5rem 0.65rem;
      border-radius: 0.375rem;
      border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    }

    .booking-flow-guest-picker-category-rows {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.75rem;
    }

    .booking-flow-guest-picker-category-row {
      display: grid;
      gap: 0.45rem;
    }

    .booking-flow-guest-picker-category {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      text-transform: lowercase;
    }

    .booking-flow-guest-picker-limit-fields {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 0.5rem 0.65rem;
      padding-left: 1.35rem;

      label {
        display: grid;
        gap: 0.25rem;
        flex: 0 0 auto;
        width: 4.25rem;
      }

      input[type="number"] {
        width: 100%;
        min-width: 0;
        padding-inline: 0.4rem;
      }
    }
  }

  .booking-flow-preferred-config {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;

  label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
  }

  .booking-flow-preferred-config-summary {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
  }
  }

  .booking-flow-billing-config {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;

    input[type="text"] {
      font: inherit;
      font-size: 0.875rem;
      padding: 0.4rem 0.55rem;
      border-radius: 0.375rem;
      border: 1px solid light-dark(oklch(0.85 0.01 260), oklch(0.35 0.02 260));
      background: light-dark(oklch(1 0 0), oklch(0.15 0.02 260));
      color: inherit;
    }

    .booking-flow-billing-config-summary {
      margin: 0;
      font-size: 0.8125rem;
      line-height: 1.45;
      color: light-dark(oklch(0.48 0.02 260), oklch(0.7 0.02 260));
    }
  }

  .booking-flow-contacts-config {
    display: grid;
    gap: 0.5rem;

    @container (min-width: 28rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .booking-flow-form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.25rem;
  }
}
.booking-flow-preview-panel {
  container-type: inline-size;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  position: sticky;
  top: 1rem;

  .booking-flow-preview-panel-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
    text-transform: lowercase;
  }

  .booking-flow-preview-path {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.4;
    color: light-dark(oklch(0.5 0.02 260), oklch(0.7 0.02 260));
    word-break: break-word;
  }

  .booking-flow-preview-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .booking-flow-preview-tab {
    font: inherit;
    font-size: 0.75rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    background: light-dark(oklch(1 0 0), oklch(0.18 0.02 260));
    color: inherit;
    cursor: pointer;

    &.is-active {
      border-color: light-dark(oklch(0.55 0.08 260), oklch(0.62 0.1 260));
      background: light-dark(oklch(0.94 0.03 260), oklch(0.26 0.05 260));
    }
  }

  .booking-flow-preview-frame {
    padding: 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
    background: light-dark(oklch(0.985 0.005 260), oklch(0.16 0.02 260));
    min-block-size: 12rem;
    display: grid;
    gap: 0.55rem;
    align-content: start;
  }

  .booking-flow-preview-step-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: lowercase;
    color: light-dark(oklch(0.45 0.03 260), oklch(0.75 0.03 260));
  }

  .booking-flow-preview-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.52 0 0), oklch(0.68 0 0));
  }

  .booking-flow-preview-section {
    padding: 0.55rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px dashed light-dark(oklch(0.86 0.01 260), oklch(0.34 0.02 260));
    background: light-dark(oklch(0.99 0 0), oklch(0.2 0.02 260));
    display: grid;
    gap: 0.35rem;
  }

  .booking-flow-preview-section-type {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: lowercase;
    color: light-dark(oklch(0.5 0.02 260), oklch(0.68 0.02 260));
  }

  .booking-flow-preview-block-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .booking-flow-preview-block {
    border-radius: 0.35rem;
    background: light-dark(oklch(0.93 0.01 260), oklch(0.28 0.02 260));

    &.is-pill {
      block-size: 1.35rem;
      inline-size: 2.5rem;
    }

    &.is-field {
      block-size: 1.1rem;
      inline-size: 100%;
    }

    &.is-button {
      block-size: 1.6rem;
      inline-size: 5rem;
      border-radius: 999px;
    }

    &.is-grid {
      block-size: 3.5rem;
      inline-size: 100%;
    }
  }
}
.store-product-field-set-assignments {
  display: block;
  margin-block: 1.5rem;

  .store-product-field-set-assignments-title {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
  }

  .store-product-field-set-assignments-lede {
    margin: 0 0 1rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.75 0 0));
  }

  .store-product-field-set-assignments-link-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
  }

  .store-product-field-set-switch-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  .store-product-field-set-switch-row-label {
    font-size: 0.9375rem;
  }

  .store-product-field-set-assignments-preview {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: light-dark(oklch(0.97 0 0), oklch(0.22 0 0));
  }

  .store-product-logistics-metrics-preview {
    display: grid;
    gap: 0.5rem 1rem;
    margin: 0;
    grid-template-columns: minmax(8rem, auto) 1fr;

    div {
      display: contents;
    }

    dt {
      margin: 0;
      color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
      font-size: 0.875rem;
    }

    dd {
      margin: 0;
      font-size: 0.9375rem;
    }
  }

  .store-product-tag-create {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid light-dark(oklch(0.9 0 0), oklch(0.28 0 0));
  }

  .store-product-tag-create-label {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .store-product-tag-create-fields {
    display: grid;
    gap: 0.75rem;

    @container (min-width: 32rem) {
      grid-template-columns: 1fr 1fr auto;
      align-items: end;
    }
  }

  .store-product-tag-create-error {
    margin: 0.5rem 0 0;
    color: light-dark(oklch(0.45 0.12 25), oklch(0.72 0.14 25));
    font-size: 0.875rem;
  }

  .store-product-field-set-assignments-preview-label {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: light-dark(oklch(0.5 0 0), oklch(0.7 0 0));
  }

  .store-product-field-set-assignments-preview-meta {
    margin-inline-start: 0.5rem;
    font-size: 0.85rem;
    color: light-dark(oklch(0.55 0 0), oklch(0.65 0 0));
  }
}
.feature-gate {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
  max-inline-size: 36rem;

  .feature-gate-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: light-dark(oklch(28% 0.02 260), oklch(92% 0.01 260));
  }

  .feature-gate-copy {
    margin: 0;
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
    line-height: 1.45;
  }

  .feature-gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  .feature-gate-form {
    display: grid;
    gap: 0.75rem;
  }

  .feature-gate-status {
    margin: 0;
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
  }

  .feature-gate-status-error {
    color: light-dark(oklch(48% 0.14 25), oklch(72% 0.12 25));
  }

  .feature-gate-locked {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .feature-gate-lock-icon {
    flex: none;
  }

  .feature-gate-active {
    display: contents;
  }

  @container (max-width: 28rem) {
    .feature-gate-actions {
      flex-direction: column;
      align-items: stretch;
    }
  }
}
.booking-service-form-note {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
}

.booking-service-form-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.booking-service-form-section__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: light-dark(oklch(35% 0.02 260), oklch(80% 0.02 260));
}

.booking-service-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.booking-service-advance-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.booking-service-complimentary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.booking-service-scope-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.booking-service-scope-group__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: light-dark(oklch(40% 0.02 260), oklch(75% 0.02 260));
}

.booking-service-scope-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.booking-service-checkout-unit {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;

  .booking-service-checkout-unit-prefix {
    font-size: 0.875rem;
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
  }
}

.booking-service-category-pricing-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid light-dark(oklch(90% 0.01 260), oklch(28% 0.02 260));

  &:first-of-type {
    border-top: none;
    padding-top: 0;
  }
}
qasima-manage-app .booking-reminders-view {
  display: block;
  max-width: 40rem;
}

qasima-manage-app .booking-reminders-head {
  margin-bottom: 1.5rem;
}

qasima-manage-app .booking-reminders-off-note {
  color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
}
.booking-preauth-policy-view {
  .booking-preauth-policy-head {
    margin-bottom: 1.25rem;

    h1 {
      margin: 0 0 0.5rem;
      font-size: 1.25rem;
    }

    p {
      margin: 0 0 0.75rem;
      font-size: 0.875rem;
      line-height: 1.45;
      color: light-dark(oklch(40% 0.02 260), oklch(75% 0.02 260));
    }

    code {
      font-size: 0.8125rem;
    }
  }

  .booking-preauth-policy-meta {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
  }
}
.booking-resources-floor-view {
  display: block;
  padding: 0 0 2rem;

  .booking-resources-floor-head {
    margin-bottom: 1.5rem;

    h1 {
      margin: 0 0 0.5rem;
      font-size: 1.25rem;
    }

    p {
      margin: 0;
      font-size: 0.875rem;
      color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
    }
  }

  .booking-floor-zone {
    margin-bottom: 1.75rem;
  }

  .booking-floor-zone__title {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .booking-floor-zone__empty {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(50% 0.02 260), oklch(68% 0.02 260));
  }

  .booking-floor-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .booking-floor-table-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(88% 0.01 260), oklch(32% 0.02 260));
    background: light-dark(oklch(98% 0.005 260), oklch(22% 0.02 260));
    text-decoration: none;
    color: inherit;
    min-height: 3.5rem;

    &:hover {
      border-color: light-dark(oklch(70% 0.08 260), oklch(50% 0.06 260));
    }
  }

  .booking-floor-table-card__name {
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .booking-floor-table-card__meta {
    font-size: 0.75rem;
    color: light-dark(oklch(48% 0.02 260), oklch(70% 0.02 260));
  }

  .booking-floor-seats {
    margin: 0.35rem 0 0;
    padding: 0 0 0 0.5rem;
    list-style: none;
    font-size: 0.6875rem;
    color: light-dark(oklch(50% 0.02 260), oklch(68% 0.02 260));

    a {
      text-decoration: none;
      color: inherit;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
.location-detail-image-preview {
  display: block;
  width: min(100%, 14rem);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-block-end: 0.75rem;
}

.location-detail-opening-body {
  margin: 0;
  white-space: pre-wrap;
}

.location-detail-address-body {
  margin: 0;
  white-space: pre-line;
  line-height: 1.5;
}

.location-detail-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.location-detail-contact-item {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.32 0.02 260));
}

.location-detail-contact-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.location-detail-contact-form {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid light-dark(oklch(0.92 0.01 260), oklch(0.28 0.02 260));

  .location-detail-contact-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
}
merchant-contacts-section {
  display: block;

  .merchant-contacts-section-list {
    display: grid;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .merchant-contacts-section-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .merchant-contacts-section-form {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    max-width: 32rem;
  }

  .merchant-contacts-section-form-footer {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
}
.location-opening-hours-editor-host {
  container-type: inline-size;
}

.location-opening-hours-editor {
  display: grid;
  gap: 1.5rem;
}

.location-opening-hours-editor-section {
  display: grid;
  gap: 0.75rem;

  &.is-muted {
    opacity: 0.55;
    pointer-events: none;
  }
}

.location-opening-hours-editor-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.location-opening-hours-editor-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.location-opening-hours-editor-section-hint {
  margin: 0;
  color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  font-size: 0.875rem;
  line-height: 1.45;
}

.location-opening-hours-editor-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.location-opening-hours-editor-type-chip {
  border-radius: 999px;
}

.location-opening-hours-editor-type-block {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid light-dark(oklch(88% 0 0), oklch(30% 0 0));
}

.location-opening-hours-editor-type-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;

  h4 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
  }
}

.location-opening-hours-week-grid {
  display: grid;
  gap: 0.5rem;
}

.location-opening-hours-week-row {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
  background: light-dark(oklch(99% 0 0), oklch(17% 0 0));
}

.location-opening-hours-week-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.location-opening-hours-week-day {
  font-weight: 600;
  min-width: 6rem;
}

.location-opening-hours-week-closed {
  margin: 0;
  color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
  font-size: 0.875rem;
}

.location-opening-hours-week-segments {
  display: grid;
  gap: 0.5rem;
}

.location-opening-hours-week-segment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.5rem;

  @container (max-width: 40rem) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    .location-opening-hours-week-segment-spacer,
    q-button {
      grid-column: 1 / -1;
      justify-self: start;
    }
  }
}

.location-opening-hours-week-separator {
  align-self: center;
  color: light-dark(oklch(50% 0 0), oklch(68% 0 0));
  padding-block-end: 0.65rem;
}

.location-opening-hours-week-segment-spacer {
  width: 1px;
}

.location-opening-hours-editor-time {
  display: grid;
  gap: 0.25rem;
  font-size: 0.875rem;

  span {
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  }

  input {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.375rem;
    border: 1px solid light-dark(oklch(82% 0 0), oklch(34% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(14% 0 0));
    color: inherit;
    font: inherit;
  }
}

.location-opening-hours-editor-special-list {
  display: grid;
  gap: 0.75rem;
}

.location-opening-hours-editor-special-row {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
}

.location-opening-hours-editor-special-fields {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  align-items: end;
}

.location-opening-hours-editor-special-segments {
  display: grid;
  gap: 0.5rem;
}
.entity-list-view.settings-locations-view {
  .locations-list-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
    gap: 1rem;
    padding-inline: 0.25rem;
  }

  .locations-list-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.5rem;
    background: light-dark(oklch(0.99 0 0), oklch(0.2 0 0));
    overflow: hidden;
  }

  .locations-list-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: light-dark(oklch(0.94 0 0), oklch(0.26 0 0));
  }

  .locations-list-card__media--empty {
    display: grid;
    place-items: center;
    color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
    font-size: 0.8125rem;
  }

  .locations-list-card__body {
    display: grid;
    gap: 0.5rem;
    padding: 1rem 1rem 1.125rem;
  }

  .locations-list-card__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;

    a {
      color: inherit;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }
  }

  .locations-list-card__meta {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
  }

  .locations-list-card__meta-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: light-dark(oklch(0.5 0 0), oklch(0.62 0 0));
  }

  .locations-list-card__actions {
    margin-block-start: 0.25rem;
  }

  @container (min-width: 48rem) {
    .locations-list-cards {
      grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
      gap: 1.25rem;
    }
  }
}
q-view-stats {
  display: block;
  margin-block-end: 1rem;

  .view-stats {
    position: relative;

    &[hidden] {
      display: none;
    }

    .view-stats__dismiss {
      position: absolute;
      top: 0.125rem;
      right: 0.125rem;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.75rem;
      padding: 0;
      border: 0;
      border-radius: 0.375rem;
      background: transparent;
      color: light-dark(
        oklch(from var(--color-neutral-foreground) l c h / 0.72),
        oklch(from var(--color-neutral-foreground) l c h / 0.72)
      );
      font: inherit;
      line-height: 1;
      cursor: pointer;
      opacity: 0;
      transition: opacity 120ms ease, background 120ms ease;

      &:hover {
        background: light-dark(
          oklch(from var(--color-neutral-foreground) l c h / 0.08),
          oklch(from var(--color-neutral-foreground) l c h / 0.12)
        );
      }

      &:focus-visible {
        opacity: 1;
        outline: 2px solid light-dark(oklch(0.55 0.12 260), oklch(0.72 0.1 260));
        outline-offset: 1px;
      }
    }

    &:hover .view-stats__dismiss,
    &:focus-within .view-stats__dismiss {
      opacity: 1;
    }

    .view-stats__grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      padding-right: 1.5rem;

      q-stats-card {
        inline-size: min(100%, 9rem);
      }
    }
  }

  .view-stats__restore {
    padding: 0;
    border: 0;
    background: transparent;
    color: light-dark(
      oklch(from var(--color-neutral-foreground) l c h / 0.72),
      oklch(from var(--color-neutral-foreground) l c h / 0.72)
    );
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.15em;

    &[hidden] {
      display: none;
    }

    &:hover {
      color: var(--color-neutral-foreground);
    }

    &:focus-visible {
      outline: 2px solid light-dark(oklch(0.55 0.12 260), oklch(0.72 0.1 260));
      outline-offset: 2px;
    }
  }
}
q-stats-card {
  display: block;
  inline-size: fit-content;
  min-inline-size: 8.5rem;
  max-inline-size: 100%;

  .stats-card {
    border-radius: 0.625rem;
    padding: 1rem 1.125rem;
    background-color: light-dark(
      oklch(from var(--color-neutral) calc(l + 0.02) c h),
      oklch(from var(--color-neutral) calc(l - 0.04) c h)
    );
    border: 1px solid light-dark(
      oklch(from var(--color-accent) 0.9 calc(c * 0.05) h),
      oklch(from var(--color-accent) 0.4 calc(c * 0.1) h)
    );
    color: var(--color-neutral-foreground);
    display: grid;
    gap: 0.375rem;
  }

  .stats-card__label {
    font-size: 0.8125rem;
    line-height: 1.4;
    white-space: nowrap;
    color: light-dark(
      oklch(from var(--color-neutral-foreground) l c h / 0.72),
      oklch(from var(--color-neutral-foreground) l c h / 0.72)
    );
  }

  .stats-card__value {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .stats-card__description {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: light-dark(
      oklch(from var(--color-neutral-foreground) l c h / 0.68),
      oklch(from var(--color-neutral-foreground) l c h / 0.68)
    );
  }
}
.global-hub-view {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.global-hub-intro {
  margin: 0;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: light-dark(oklch(0.42 0 0), oklch(0.72 0 0));
}

.global-hub-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.global-hub-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: light-dark(oklch(0.28 0 0), oklch(0.9 0 0));
}

.global-hub-section-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: light-dark(oklch(0.48 0 0), oklch(0.68 0 0));
}

.global-hub-section-header {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-block-end: 0;
}

.global-hub-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.global-hub-region-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-hub-region-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
  background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
}

.global-hub-region-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.global-hub-region-card-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  flex: 1;
  min-width: 0;
}

.global-hub-region-name {
  font-size: 1rem;
  font-weight: 600;
  color: light-dark(oklch(0.28 0 0), oklch(0.92 0 0));
}

.global-hub-region-meta {
  font-size: 0.8125rem;
  color: light-dark(oklch(0.48 0 0), oklch(0.68 0 0));
}

.global-hub-region-card-body {
  display: grid;
  gap: 0.75rem;

  @container (min-width: 32rem) {
    grid-template-columns: 1fr 1fr;
  }
}

.global-hub-region-dimension {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.global-hub-region-dimension-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: lowercase;
  color: light-dark(oklch(0.48 0 0), oklch(0.68 0 0));
}

.global-hub-region-empty {
  font-size: 0.8125rem;
  color: light-dark(oklch(0.48 0 0), oklch(0.68 0 0));
}

.global-hub-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-hub-chip {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: 0.4rem;
  border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.35 0 0));
  font-size: 0.8125rem;
  color: light-dark(oklch(0.32 0 0), oklch(0.88 0 0));
}

.global-hub-chip-default {
  border-color: light-dark(oklch(0.72 0.12 250), oklch(0.55 0.12 250));
  background: light-dark(oklch(0.96 0.03 250), oklch(0.28 0.06 250));
}

.global-hub-region-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.settings-store-view {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.settings-store-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scroll-margin-top: 1rem;
}

.settings-store-currencies {
  gap: 1.5rem;
}

.settings-store-taxes {
  gap: 1rem;
}

google-product-category-picker {
  display: block;

  .google-product-category-picker-field {
    display: grid;
    gap: 0.35rem;
  }

  .google-product-category-picker-label {
    font-size: 0.875rem;
    font-weight: 500;
  }

  .google-product-category-picker-hint {
    font-size: 0.8125rem;
    opacity: 0.75;
  }

  .google-product-category-picker-search {
    width: 100%;
  }

  .google-product-category-picker-selected {
    font-size: 0.8125rem;
    margin: 0;
  }

  .google-product-category-picker-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
  }

  .google-product-category-picker-option {
    width: 100%;
    text-align: start;
  }

  .google-product-category-picker-actions {
    display: flex;
    gap: 0.5rem;
  }
}
.store-delivery-method-form {
  display: block;

  .store-delivery-method-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    border-radius: 0.75rem;
    background: light-dark(oklch(0.99 0.005 260), oklch(0.2 0.02 260));
  }

  .store-delivery-method-section-lede {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
  }

  .store-delivery-method-subtitle {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .store-delivery-method-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .store-delivery-method-field-label {
    font-size: 0.8125rem;
    font-weight: 500;
  }

  .store-delivery-method-input,
  .store-delivery-method-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(0.82 0.01 260), oklch(0.38 0.02 260));
    background: light-dark(oklch(1 0 0), oklch(0.16 0.02 260));
    color: inherit;
    font: inherit;
  }

  .store-delivery-method-field-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .store-delivery-method-rate-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px dashed light-dark(oklch(0.78 0.02 260), oklch(0.4 0.02 260));
  }

  .store-delivery-method-rate-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .store-delivery-method-rate-card-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .store-delivery-method-switch-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .store-delivery-method-switch-label {
    font-size: 0.875rem;
  }

  .store-delivery-method-basics {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  @container (max-width: 36rem) {
    .store-delivery-method-field-grid {
      grid-template-columns: 1fr;
    }
  }
}
.regions-form-view {
  .regions-form {
    display: grid;
    gap: 1rem;
    max-inline-size: 36rem;
  }

  .regions-form-field {
    display: grid;
    gap: 0.3rem;
    font-size: 0.8125rem;
  }

  .regions-form-field input {
    box-sizing: border-box;
    inline-size: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
    color: inherit;
    font: inherit;
  }

  .regions-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .regions-form-danger {
    max-inline-size: 36rem;
    margin-block-start: 1.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
  }

  .regions-delete-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }
}
.region-string-list {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem 0;

  .region-string-list-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .region-string-list-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
  }

  .region-string-list-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.25rem 0.4rem;
      border-radius: 0.4rem;
      border: 1px solid light-dark(oklch(88% 0 0), oklch(35% 0 0));
      font-size: 0.8125rem;
    }
  }

  .region-string-list-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;

    input {
      box-sizing: border-box;
      min-inline-size: 8rem;
      flex: 1 1 8rem;
      padding: 0.45rem 0.6rem;
      border-radius: 0.4rem;
      border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
      background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
      color: inherit;
      font: inherit;
    }
  }

  .region-locales-rows {
    display: grid;
    gap: 0.45rem;
  }

  .region-locales-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.45rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
  }

  .region-locales-default {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
  }
}
.channels-detail-view {
  .channel-locales-panel {
    container-type: inline-size;
    display: grid;
    gap: 0.85rem;
    margin-block-start: 1.25rem;
  }

  .channel-site-settings-panel {
    display: grid;
    gap: 0.75rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid light-dark(oklch(0.9 0 0), oklch(0.28 0 0));
  }

  .channel-site-settings-select {
    display: grid;
    gap: 0.35rem;
    font-size: 0.875rem;

    select {
      max-width: 20rem;
      padding: 0.4rem 0.5rem;
      border-radius: 0.375rem;
      border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.35 0 0));
      background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
      color: inherit;
    }
  }

  .channel-locales-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .hub-editor {
    container-type: inline-size;
    margin-block-start: 1.5rem;

    .hub-editor-status {
      margin: 0;
      color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
    }
  }
}
.hub-sections-editor {
  container-type: inline-size;
  display: grid;
  gap: 1rem;

  .hub-sections-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
  }

  .hub-sections-editor-publish-errors {
    padding: 0.75rem 0.85rem;
    border-radius: 0.6rem;
    border: 1px solid light-dark(oklch(0.75 0.12 25), oklch(0.45 0.1 25));
    background: light-dark(oklch(0.97 0.02 25), oklch(0.28 0.04 25));
    color: light-dark(oklch(0.4 0.12 25), oklch(0.82 0.08 25));

    .hub-sections-editor-publish-errors-title {
      margin: 0 0 0.35rem;
      font-weight: 600;
      font-size: 0.875rem;
    }

    ul {
      margin: 0;
      padding-inline-start: 1.1rem;
      font-size: 0.8125rem;
    }
  }

  .hub-sections-editor-locale-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .hub-sections-editor-locale-tab {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;

    &.is-selected {
      border-color: light-dark(oklch(0.55 0.14 255), oklch(0.65 0.14 255));
      background: light-dark(oklch(96% 0.02 255), oklch(28% 0.03 255));
      font-weight: 600;
    }
  }

  .hub-sections-editor-allow-indexing {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
  }

  .hub-sections-editor-preview-link {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(40% 0 0), oklch(70% 0 0));

    a {
      color: light-dark(oklch(0.45 0.12 255), oklch(0.72 0.14 255));
    }
  }

  .hub-sections-editor-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  .hub-sections-editor-workspace {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    align-content: start;
    min-width: 0;
  }

  .hub-sections-editor-list-column {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    min-width: 0;
  }

  .hub-sections-editor-list-head {
    display: flex;
    justify-content: flex-end;
  }

  .hub-sections-editor-list {
    display: grid;
    gap: 0.5rem;
    align-content: start;
  }

  .hub-sections-editor-detail {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 32rem;
    min-width: 0;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(20% 0 0));
  }

  @container (min-width: 40rem) {
    .hub-sections-editor-workspace {
      grid-template-columns: minmax(12rem, 17rem) minmax(0, 32rem);
      align-items: start;
    }
  }

  .hub-sections-editor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
    cursor: pointer;
    text-align: start;
    font: inherit;
    color: inherit;

    &.is-selected {
      border-color: light-dark(oklch(0.55 0.14 255), oklch(0.65 0.14 255));
      background: light-dark(oklch(96% 0.02 255), oklch(28% 0.03 255));
    }

    &.is-dragging {
      opacity: 0.55;
    }

    &.is-drag-over {
      border-color: light-dark(oklch(0.55 0.14 255), oklch(0.65 0.14 255));
      box-shadow: inset 0 0 0 1px light-dark(oklch(0.55 0.14 255), oklch(0.65 0.14 255));
    }
  }

  .hub-sections-editor-list.is-reorder-active .hub-sections-editor-item {
    cursor: default;
  }

  span.hub-sections-editor-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.65rem;
    block-size: 1.65rem;
    margin: 0;
    border: none;
    border-radius: 0.35rem;
    background: transparent;
    color: light-dark(oklch(0.58 0.02 260), oklch(0.62 0.02 260));
    cursor: grab;
    touch-action: none;
    user-select: none;
    flex-shrink: 0;

    &::before {
      content: "";
      display: block;
      inline-size: 0.42rem;
      block-size: 0.72rem;
      background: radial-gradient(circle, currentColor 0.11rem, transparent 0.12rem) 0 0 / 0.42rem 0.24rem repeat-y;
      box-shadow: 0.55rem 0 0 currentColor;
      opacity: 0.85;
    }

    &:hover {
      background: light-dark(oklch(0.94 0.01 260), oklch(0.28 0.02 260));
      color: light-dark(oklch(0.42 0.02 260), oklch(0.78 0.02 260));
    }

    &:active {
      cursor: grabbing;
    }
  }

  .hub-sections-editor-item-text {
    flex: 1;
    min-width: 0;
  }

  .hub-sections-editor-item-trailing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .hub-sections-editor-item-label {
    font-weight: 500;
  }

  .hub-sections-editor-item-meta {
    font-size: 0.75rem;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
  }

  .hub-sections-editor-item-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border-radius: 999px;
    line-height: 0;

    &.is-complete {
      color: light-dark(oklch(0.4 0.1 145), oklch(0.8 0.1 145));
      background: light-dark(oklch(0.95 0.03 145), oklch(0.3 0.04 145));
    }

    &.is-incomplete {
      color: light-dark(oklch(0.45 0.12 55), oklch(0.85 0.1 55));
      background: light-dark(oklch(0.96 0.04 55), oklch(0.32 0.05 55));
    }
  }

  .hub-sections-editor-preview-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
  }

  .hub-sections-editor-preview-head {
    display: grid;
    gap: 0.45rem;
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: var(--hub-preview-max-width, 24rem);
    margin-inline: auto;
  }

  .hub-sections-editor-preview-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
  }

  .hub-sections-editor-preview-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
  }

  .hub-sections-editor-preview-width {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .hub-sections-editor-preview-width-tab {
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
    color: inherit;
    font: inherit;
    font-size: 0.6875rem;
    cursor: pointer;

    &.is-selected {
      border-color: light-dark(oklch(0.55 0.14 255), oklch(0.65 0.14 255));
      background: light-dark(oklch(96% 0.02 255), oklch(28% 0.03 255));
      font-weight: 600;
    }
  }

  .hub-sections-editor-preview {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: var(--hub-preview-max-width, 24rem);
    margin-inline: auto;
    min-block-size: 28rem;
    border-radius: 1.25rem;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(0.98 0.01 85), oklch(0.16 0.01 85));
    overflow: auto;

    &.hub-sections-editor-preview--html {
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;

      .hub-sections-editor-empty {
        padding: 1rem;
      }

      .email-sections-editor-preview {
        display: block;
        flex: 1 1 auto;
        align-self: stretch;
        inline-size: 100%;
        min-block-size: 28rem;
        overflow: auto;
        border-radius: inherit;
        background: light-dark(oklch(100% 0 0), oklch(18% 0 0));
      }

      .email-sections-editor-preview[hidden] {
        display: none;
      }
    }

    /* hub-page caps at 75rem in hub-page.css; shrink to frame when preview is narrower */
    .hub-page {
      inline-size: 100%;
      max-inline-size: min(75rem, 100%);
      min-block-size: 100%;
      margin-inline: auto;
    }
  }

  .hub-sections-editor-preview-panel.is-preview-width-mobile {
    --hub-preview-max-width: 32rem;
  }

  .hub-sections-editor-preview-panel.is-preview-width-tablet {
    --hub-preview-max-width: 48rem;
  }

  .hub-sections-editor-preview-panel.is-preview-width-desktop {
    --hub-preview-max-width: 80rem;
  }

  .hub-sections-editor-preview-panel.is-preview-width-auto {
    --hub-preview-max-width: none;

    .hub-sections-editor-preview-head,
    .hub-sections-editor-preview {
      margin-inline: 0;
    }
  }

  .hub-sections-editor-add {
    display: flex;
    justify-content: center;
  }

  .hub-sections-editor-detail-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 0.75rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
  }

  .hub-sections-editor-detail-variant {
    display: grid;
    gap: 0.25rem;
    font-size: 0.8125rem;
    min-width: 0;
    flex: 1;

    select {
      font: inherit;
      padding: 0.35rem 0.5rem;
      border-radius: 0.35rem;
      border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
      background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
      color: inherit;
    }
  }

  .hub-sections-editor-detail-type {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .hub-sections-editor-add-picker {
    display: grid;
    gap: 0.75rem;
    min-block-size: 12rem;
  }

  .hub-sections-editor-add-picker-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .hub-sections-editor-add-type-list {
    display: grid;
    gap: 0.35rem;
  }

  .hub-sections-editor-add-type {
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    text-align: start;
    cursor: pointer;

    &:hover {
      border-color: light-dark(oklch(0.55 0.14 255), oklch(0.65 0.14 255));
      background: light-dark(oklch(96% 0.02 255), oklch(28% 0.03 255));
    }
  }

  .hub-sections-editor-empty {
    margin: 0;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
    font-size: 0.875rem;
  }

  @container (min-width: 48rem) {
    .hub-sections-editor-layout {
      grid-template-columns: max-content minmax(0, 1fr);
      align-items: start;
    }

    .hub-sections-editor-workspace {
      justify-self: start;
      inline-size: max-content;
      max-inline-size: 100%;
    }
  }
}

.section-config-image-locale-field {
  display: grid;
  gap: 0.5rem;

  .section-config-image-locale-field__label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .section-config-image-locale-field__locales {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .section-config-image-locale-field__locale {
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;

    &.is-selected {
      border-color: light-dark(oklch(0.55 0.14 255), oklch(0.65 0.14 255));
      font-weight: 600;
    }
  }

  .section-config-image-locale-field__preview {
    img {
      display: block;
      width: 100%;
      max-width: 16rem;
      border-radius: 0.5rem;
      border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
      object-fit: cover;
      aspect-ratio: 16 / 9;
    }
  }
}

.hub-section-config-form {
  display: grid;
  gap: 0.75rem;

  .hub-section-config-field {
    display: grid;
    gap: 0.3rem;
    font-size: 0.8125rem;
  }

  q-form-text-locales,
  q-form-textarea-locales {
    display: block;
  }

  .hub-section-config-field select {
    box-sizing: border-box;
    inline-size: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
    color: inherit;
    font: inherit;
  }

  .hub-section-config-field textarea {
    min-block-size: 4rem;
    resize: vertical;
  }

  .hub-section-config-list {
    display: grid;
    gap: 0.5rem;
  }

  .hub-section-config-list-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .hub-section-config-row {
    display: grid;
    gap: 0.4rem;
    padding: 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
  }

  .hub-section-config-row-actions {
    display: flex;
    justify-content: end;
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-hero {
  .hub-section-hero {
    position: relative;
    overflow: clip;
    min-block-size: 16rem;
    border-radius: 0.375rem;
    color: oklch(0.98 0.01 85);
  }

  .hub-section-hero-compact {
    min-block-size: 11rem;
  }

  section.hub-section-hero.hub-section-hero-story {
    min-block-size: 22rem;
    inline-size: 100%;
  }

  section.hub-section-hero.hub-section-hero-story .hub-section-hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: clamp(0.75rem, 2.5vw, 1rem);
  }

  section.hub-section-hero.hub-section-hero-story .hub-section-hero-header {
    flex: 0 0 auto;
  }

  .hub-section-hero-inner > .hub-section-hero-story {
    display: grid;
    gap: 0.75rem;
    max-inline-size: 20rem;
    flex: 0 0 auto;
  }

  .hub-section-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-section-hero-shade {
    position: absolute;
    inset-inline: 0;
    pointer-events: none;
  }

  .hub-section-hero-shade-top {
    inset-block-start: 0;
    block-size: 40%;
    background: linear-gradient(to bottom, oklch(0.16 0.02 55 / 0.55), transparent);
  }

  .hub-section-hero-shade-bottom {
    inset-block-end: 0;
    block-size: 55%;
    background: linear-gradient(to top, oklch(0.16 0.02 55 / 0.7), transparent);
  }

  .hub-section-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.5rem;
    min-block-size: inherit;
    padding: var(--hub-section-padding-inline, clamp(0.875rem, 3.5vw, 1.25rem));
  }

  .hub-section-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .hub-section-hero-location,
  .hub-section-hero-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .hub-section-hero-brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .hub-section-hero-brand-name {
    font-family: "Segoe Print", "Bradley Hand", "Snell Roundhand", cursive;
    font-size: 1.25rem;
    font-weight: 600;
  }

  .hub-section-hero-subtitle {
    font-size: 0.8rem;
    opacity: 0.85;
  }

  .hub-section-hero-logo {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    object-fit: cover;
  }

  .hub-section-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .hub-section-hero-langs {
    display: flex;
    gap: 0.25rem;
  }

  .hub-section-hero-lang {
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 0.75rem;
    opacity: 0.75;
  }

  .hub-section-hero-lang-active {
    background: oklch(1 0 0 / 0.18);
    opacity: 1;
  }

  .hub-section-hero-cart,
  .hub-section-hero-account {
    position: relative;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: inherit;
    text-decoration: none;
  }

  .hub-section-hero-cart-badge {
    position: absolute;
    inset-block-start: -0.125rem;
    inset-inline-end: -0.25rem;
    min-width: 1rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: light-dark(oklch(0.55 0.18 25), oklch(0.72 0.16 25));
    color: oklch(0.99 0.01 85);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
  }

  .hub-section-hero-title {
    margin: 0;
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    line-height: 1.1;
  }

  .hub-section-hero-lede {
    margin: 0;
    opacity: 0.9;
  }

  .hub-section-hero-cta {
    margin-block-start: 0.25rem;
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-brand-banner {
  .hub-section-brand-banner {
    display: grid;
    justify-items: center;
    gap: 0.625rem;
    padding-inline: 0.25rem;
  }

  .hub-section-brand-banner-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
  }

  .hub-section-brand-banner-line {
    block-size: 1px;
    background: light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
  }

  .hub-section-brand-banner-mark {
    display: grid;
    place-items: center;
    color: inherit;
    text-decoration: none;
    min-inline-size: 0.5rem;
  }

  .hub-section-brand-banner-logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
    object-fit: cover;
    background: light-dark(oklch(0.97 0.01 85), oklch(0.24 0.01 85));
  }

  .hub-section-brand-banner-name-link {
    color: inherit;
    text-decoration: none;
  }

  .hub-section-brand-banner-name {
    font-family: "Segoe Print", "Bradley Hand", "Snell Roundhand", cursive;
    font-size: 1.35rem;
    font-weight: 600;
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-intro {
  .hub-section-intro-copy {
    display: grid;
    gap: 0.75rem;
  }

  .hub-section-intro-title {
    margin: 0;
    font-size: clamp(2.25rem, 9vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-wrap: balance;
  }

  .hub-section-intro-body {
    max-inline-size: min(42rem, 100%);
    margin: 0;
    color: light-dark(oklch(0.45 0.02 55), oklch(0.75 0.02 85));
    font-size: 0.9375rem;
    line-height: 1.45;
    text-wrap: pretty;
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-location {
  .hub-section-location-feature {
    display: grid;
    gap: 1rem;
    min-width: 0;
  }

  .hub-section-location-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    min-block-size: clamp(11rem, 42cqi, 16rem);
    object-fit: cover;
    border-radius: 0.5rem;
  }

  .hub-section-location-body {
    display: grid;
    gap: 0.5rem;
  }

  .hub-section-location-name {
    margin: 0;
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }

  .hub-section-location-hours,
  .hub-section-location-address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: light-dark(oklch(0.45 0.02 55), oklch(0.75 0.02 85));
    font-size: 0.9375rem;

    .hub-icon {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }
  }

  .hub-section-location-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 0.5rem;
  }

  @container (min-width: 40rem) {
    .hub-section-location-feature {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      align-items: center;
    }

    .hub-section-location-media {
      min-block-size: 14rem;
    }
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-locations {
  display: block;
  container-type: inline-size;

  .hub-section-locations--scroll {
    padding-inline-end: 0;

    .hub-section-head {
      padding-inline-end: var(--hub-section-padding-inline);
    }
  }

  .hub-section-locations--cards {
    .hub-section-locations-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
      gap: 1rem;
      padding-inline: var(--hub-section-padding-inline);
    }
  }

  .hub-section-locations-card {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.875rem;
    width: min(19rem, 88cqi);
    min-width: 0;
    padding: 0.875rem;
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
    border-radius: 0.5rem;
    background: light-dark(oklch(0.98 0.005 85), oklch(0.22 0.01 85));
  }

  .hub-section-locations-card--stacked {
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    gap: 0;
  }

  .hub-section-locations-card-media {
    width: 100%;
    height: 100%;
    min-block-size: 7rem;
    object-fit: cover;
    border-radius: 0.375rem;
  }

  .hub-section-locations-card-media--feature {
    min-block-size: clamp(10rem, 32cqi, 14rem);
    aspect-ratio: 16 / 10;
    border-radius: 0;
  }

  .hub-section-locations-card--stacked .hub-section-locations-card-body {
    padding: 1rem 1rem 1.125rem;
    gap: 0.5rem;
  }

  .hub-section-locations-card-body {
    display: grid;
    align-content: start;
    gap: 0.375rem;
    min-width: 0;
  }

  .hub-section-locations-card-name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  .hub-section-locations-card--stacked .hub-section-locations-card-name {
    font-size: clamp(1.25rem, 4.5cqi, 1.5rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  .hub-section-locations-card-summary {
    margin: 0;
    color: light-dark(oklch(0.42 0.02 55), oklch(0.78 0.02 85));
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .hub-section-locations-card-hours,
  .hub-section-locations-card-address {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
    color: light-dark(oklch(0.45 0.02 55), oklch(0.75 0.02 85));
    font-size: 0.8125rem;
    line-height: 1.35;

    .hub-icon {
      width: 0.875rem;
      height: 0.875rem;
      flex-shrink: 0;
      margin-block-start: 0.15em;
    }
  }

  .hub-section-locations-card--stacked .hub-section-locations-card-hours,
  .hub-section-locations-card--stacked .hub-section-locations-card-address {
    font-size: 0.875rem;

    .hub-icon {
      width: 1rem;
      height: 1rem;
    }
  }

  .hub-section-locations-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-start: 0.375rem;

    .hub-button {
      min-block-size: 2rem;
      padding-inline: 0.75rem;
      font-size: 0.75rem;
    }
  }

  .hub-section-locations-card--stacked .hub-section-locations-card-actions {
    flex-wrap: wrap;
    margin-block-start: 0.625rem;

    .hub-button {
      min-block-size: 2.5rem;
      padding-inline: 1rem;
      font-size: 0.8125rem;
    }
  }

  .hub-section-locations-detail-button {
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.42 0.01 85));
    background: transparent;
    color: inherit;
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 500;
  }

  @container (min-width: 40rem) {
    .hub-section-locations--cards .hub-section-locations-grid {
      grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
      gap: 1.25rem;
    }
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-links {
  .hub-section-title {
    margin-block-end: 1rem;
  }

  .hub-section-links-list {
    display: grid;
    gap: 0.75rem;
  }

  .hub-section-links-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
    border-radius: 999px;
    background: light-dark(oklch(0.98 0.005 85), oklch(0.22 0.01 85));
    color: inherit;
    font-size: 0.9375rem;
    text-decoration: none;

    .hub-icon {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      opacity: 0.7;
    }
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-socials {
  .hub-section-title {
    margin-block-end: 1rem;
  }

  .hub-section-socials-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .hub-section-socials-link {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-shop {
  .hub-section-shop {
    padding-inline-end: 0;
  }

  .hub-section-head {
    padding-inline-end: var(--hub-section-padding-inline);
  }

  .hub-section-shop-card {
    display: block;
    width: min(10.5rem, 58cqi);
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
  }

  .hub-section-shop-media {
    position: relative;

    .hub-section-shop-media-link {
      display: block;
      color: inherit;
      text-decoration: none;
      cursor: pointer;
    }

    .hub-section-shop-added {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: grid;
      place-items: center;
      padding: 0.5rem;
      border-radius: 0.5rem;
      background: light-dark(oklch(0.2 0.02 85 / 0.72), oklch(0.12 0.01 85 / 0.82));
      color: light-dark(oklch(0.98 0.01 85), oklch(0.96 0.01 85));
      font-size: 0.8125rem;
      font-weight: 600;
      text-align: center;
      line-height: 1.25;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    &.hub-section-shop-media--added .hub-section-shop-added {
      opacity: 1;
    }

    img,
    .hub-media-placeholder {
      display: block;
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 0.5rem;
    }
  }

  .hub-section-shop-cart {
    position: absolute;
    z-index: 2;
    inset-inline-end: 0.625rem;
    inset-block-end: 0.625rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
    border-radius: 999px;
    background: light-dark(oklch(0.98 0.01 85), oklch(0.24 0.01 85));
    color: inherit;
    cursor: pointer;

    .hub-icon {
      width: 1rem;
      height: 1rem;
    }
  }

  .hub-section-shop-meta,
  .hub-section-shop-meta-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-start: 0.625rem;
    font-size: 0.9375rem;
  }

  .hub-section-shop-meta-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .hub-section-shop-price {
    color: light-dark(oklch(0.45 0.02 55), oklch(0.75 0.02 85));
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-gallery {
  .hub-section-gallery {
    padding-inline-end: 0;
  }

  .hub-section-head {
    padding-inline-end: var(--hub-section-padding-inline);
  }

  .hub-section-gallery-item {
    width: min(18rem, 78cqi);
    min-width: 0;
    margin: 0;

    img,
    .hub-media-placeholder {
      display: block;
      width: 100%;
      max-width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      border-radius: 0.5rem;
    }
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-blog {
  .hub-section-blog {
    padding-inline-end: 0;
  }

  .hub-section-head {
    padding-inline-end: var(--hub-section-padding-inline);
  }

  .hub-section-blog-card {
    display: grid;
    grid-template-columns: 1fr 4.5rem;
    gap: 0.875rem;
    align-items: start;
    width: min(18rem, 84cqi);
    min-width: 0;
    padding: 1rem;
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
    border-radius: 0.5rem;
    background: light-dark(oklch(0.98 0.005 85), oklch(0.22 0.01 85));
    color: inherit;
    text-decoration: none;
  }

  .hub-section-blog-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2;
  }

  .hub-section-blog-meta {
    margin: 0.5rem 0 0;
    color: light-dark(oklch(0.45 0.02 55), oklch(0.75 0.02 85));
    font-size: 0.8125rem;
  }

  .hub-section-blog-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.375rem;
  }

  .hub-section-blog-thumb.hub-media-placeholder {
    min-block-size: 0;
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-faq {
  .hub-section-title {
    margin-block-end: 1rem;
  }

  .hub-section-faq-list {
    display: grid;
    gap: 0;
    border-block-start: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
  }

  .hub-section-faq-item {
    border-block-end: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
  }

  .hub-section-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    font-size: 1.0625rem;
    cursor: pointer;
    list-style: none;
  }

  .hub-section-faq-item summary::-webkit-details-marker {
    display: none;
  }

  .hub-section-faq-icons {
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }

  .hub-section-faq-icon-close {
    display: none;
  }

  .hub-section-faq-item[open] .hub-section-faq-icon-open {
    display: none;
  }

  .hub-section-faq-item[open] .hub-section-faq-icon-close {
    display: block;
  }

  .hub-section-faq-item p {
    margin: 0 0 1rem;
    color: light-dark(oklch(0.45 0.02 55), oklch(0.75 0.02 85));
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}
:where(
  q-hub-section-hero,
  q-hub-section-brand-banner,
  q-hub-section-intro,
  q-hub-section-location,
  q-hub-section-locations,
  q-hub-section-links,
  q-hub-section-socials,
  q-hub-section-shop,
  q-hub-section-gallery,
  q-hub-section-blog,
  q-hub-section-faq,
  q-hub-section-contact
) {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  display: block;
  container-type: inline-size;
  color-scheme: light dark;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.4;

  .hub-section:not(.hub-section-hero) {
    padding-inline: var(--hub-section-padding-inline);
    padding-block: var(--hub-section-padding-block);
  }

  .hub-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }

  .hub-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .hub-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-scroll-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  .hub-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
    fill: currentColor;
  }

  .hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: light-dark(oklch(0.28 0.03 55), oklch(0.88 0.02 85));
    color: light-dark(oklch(0.98 0.01 85), oklch(0.18 0.02 55));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hub-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .hub-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hub-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-block-size: 8rem;
    background: light-dark(oklch(0.92 0.01 85), oklch(0.28 0.01 85));
    color: light-dark(oklch(0.5 0.02 55), oklch(0.7 0.02 85));
    font-size: 0.75rem;
  }
}

q-hub-section-contact {
  min-inline-size: 0;
  max-inline-size: 100%;

  .hub-section-title {
    margin-block-end: 1rem;
  }

  .hub-section-contact-form {
    display: grid;
    gap: 1rem;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .hub-section-contact-field {
    display: grid;
    gap: 0.5rem;
    min-inline-size: 0;
  }

  .hub-section-contact-label {
    font-size: 0.9375rem;
  }

  .hub-section-contact-input {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid light-dark(oklch(0.85 0.01 85), oklch(0.35 0.01 85));
    border-radius: 0.5rem;
    background: light-dark(oklch(0.98 0.005 85), oklch(0.22 0.01 85));
    color: inherit;
    font: inherit;
  }

  .hub-section-contact-textarea {
    resize: vertical;
    min-block-size: 7rem;
  }
}
body.hub-site {
  background: light-dark(oklch(0.98 0.01 85), oklch(0.16 0.01 85));
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
}

@media (prefers-color-scheme: dark) {
  html:not([data-color-scheme="light"]) body.hub-site {
    background: oklch(0.16 0.01 85);
    color: oklch(0.94 0.01 85);
  }
}

html[data-color-scheme="dark"] body.hub-site {
  background: oklch(0.16 0.01 85);
  color: oklch(0.94 0.01 85);
}

.hub-page {
  --hub-section-padding-inline: clamp(0.875rem, 3.5vw, 1.25rem);
  --hub-section-padding-block: clamp(1.25rem, 5vw, 1.75rem);

  box-sizing: border-box;
  container-type: inline-size;
  inline-size: 100%;
  max-inline-size: min(75rem, 100%);
  margin-inline: auto;
  color: light-dark(oklch(0.22 0.02 55), oklch(0.94 0.01 85));
  background: light-dark(oklch(0.98 0.01 85), oklch(0.16 0.01 85));
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.hub-sections {
  display: grid;
  gap: 0;
  min-inline-size: 0;
  padding-block-end: var(--hub-section-padding-block);
}

.hub-sections > q-hub-section-hero:first-child .hub-section-hero {
  border-radius: 0;
}
q-dialog.file-library-picker-dialog .dialog {
  max-width: min(36rem, 92vw);
}

.file-library-picker {
  display: grid;
  gap: 1rem;
}

.file-library-picker-list {
  display: grid;
  gap: 0.5rem;
  max-height: min(24rem, 50vh);
  overflow: auto;
}

.file-library-picker-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.35 0 0));
  border-radius: 0.5rem;
  background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
  text-align: left;
  cursor: pointer;
}

.file-library-picker-thumb {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 0.25rem;
  background: light-dark(oklch(0.94 0 0), oklch(0.28 0 0));
}

.file-library-picker-thumb--empty {
  display: block;
}

.file-library-picker-meta {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.file-library-picker-sub {
  font-size: 0.75rem;
  color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-library-picker-empty {
  color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
}
.store-sections-editor {
  container-type: inline-size;
  display: grid;
  gap: 1rem;

  .store-sections-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  .store-sections-editor-publish-errors {
    padding: 0.75rem 0.85rem;
    border-radius: 0.6rem;
    border: 1px solid light-dark(oklch(0.75 0.12 25), oklch(0.45 0.1 25));
    background: light-dark(oklch(0.97 0.02 25), oklch(0.28 0.04 25));
    color: light-dark(oklch(0.4 0.12 25), oklch(0.82 0.08 25));

    .store-sections-editor-publish-errors-title {
      margin: 0 0 0.35rem;
      font-weight: 600;
      font-size: 0.875rem;
    }

    ul {
      margin: 0;
      padding-inline-start: 1.1rem;
      font-size: 0.8125rem;
    }
  }

  .store-sections-editor-locale-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .store-sections-editor-locale-tab {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;

    &.is-selected {
      border-color: light-dark(oklch(0.55 0.14 255), oklch(0.65 0.14 255));
      background: light-dark(oklch(96% 0.02 255), oklch(28% 0.03 255));
      font-weight: 600;
    }
  }

  .store-sections-editor-allow-indexing {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
  }

  .store-sections-editor-preview-link {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(40% 0 0), oklch(70% 0 0));

    a {
      color: light-dark(oklch(0.45 0.12 255), oklch(0.72 0.14 255));
    }
  }

  .store-sections-editor-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  .store-sections-editor-list {
    display: grid;
    gap: 0.5rem;
    align-content: start;
  }

  .store-sections-editor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
    cursor: pointer;
    text-align: start;
    font: inherit;
    color: inherit;

    &.is-selected {
      border-color: light-dark(oklch(0.55 0.14 255), oklch(0.65 0.14 255));
      background: light-dark(oklch(96% 0.02 255), oklch(28% 0.03 255));
    }
  }

  .store-sections-editor-item-label {
    font-weight: 500;
  }

  .store-sections-editor-item-meta {
    font-size: 0.75rem;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
  }

  .store-sections-editor-item-badge {
    display: inline-block;
    margin-inline-start: 0.45rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;

    &.is-complete {
      color: light-dark(oklch(0.4 0.1 145), oklch(0.8 0.1 145));
      background: light-dark(oklch(0.95 0.03 145), oklch(0.3 0.04 145));
    }

    &.is-incomplete {
      color: light-dark(oklch(0.45 0.12 55), oklch(0.85 0.1 55));
      background: light-dark(oklch(0.96 0.04 55), oklch(0.32 0.05 55));
    }
  }

  .store-sections-editor-item-actions {
    display: flex;
    gap: 0.25rem;
  }

  .store-sections-editor-preview-panel {
    display: grid;
    gap: 0.65rem;
    align-content: start;
  }

  .store-sections-editor-preview-head {
    display: grid;
    gap: 0.45rem;
  }

  .store-sections-editor-preview-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
  }

  .store-sections-editor-preview {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 24rem;
    min-block-size: 28rem;
    margin-inline: auto;
    border-radius: 1.25rem;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(98% 0 0), oklch(18% 0 0));
    overflow: auto;
  }

  .store-sections-editor-config {
    display: grid;
    gap: 0.75rem;
  }

  .store-sections-editor-add {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px dashed light-dark(oklch(80% 0 0), oklch(40% 0 0));
  }

  .store-sections-editor-add-field {
    display: grid;
    gap: 0.25rem;
    font-size: 0.8125rem;
  }

  .store-sections-editor-empty {
    margin: 0;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
    font-size: 0.875rem;
  }

  @container (min-width: 48rem) {
    .store-sections-editor-layout {
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }
  }
}

.store-section-config-form {
  display: grid;
  gap: 0.75rem;

  .store-section-config-field {
    display: grid;
    gap: 0.3rem;
    font-size: 0.8125rem;
  }

  q-form-text-locales,
  q-form-textarea-locales {
    display: block;
  }

  .store-section-config-field select {
    box-sizing: border-box;
    inline-size: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
    color: inherit;
    font: inherit;
  }

  .store-section-config-field textarea {
    min-block-size: 4rem;
    resize: vertical;
  }

  .store-section-config-list {
    display: grid;
    gap: 0.5rem;
  }

  .store-section-config-list-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .store-section-config-row {
    display: grid;
    gap: 0.4rem;
    padding: 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
  }

  .store-section-config-row-actions {
    display: flex;
    justify-content: end;
  }
}
:where(
  q-store-section-site-header,
  q-store-section-hero,
  q-store-section-featured-collections,
  q-store-section-product-grid,
  q-store-section-promo-banner
) {
  display: block;
}
q-store-section-site-header {
  display: block;

  .store-section-site-header {
    padding-block: 1rem 0.75rem;
    padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px));
    border-block-end: 1px solid light-dark(oklch(0.88 0.02 250 / 0.9), oklch(0.28 0.02 250 / 0.9));
    background: inherit;
    color: inherit;
  }

  .store-section-site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-sizing: border-box;
    width: min(100%, 72rem);
    margin-inline: auto;
  }

  .store-section-site-header-brand {
    overflow: hidden;
    min-width: 0;
    color: inherit;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .store-section-site-header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
  }

  .store-section-site-header-regions,
  .store-section-site-header-langs {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem;
    border: 1px solid light-dark(oklch(0.82 0.02 250), oklch(0.35 0.02 250));
    border-radius: 999px;
    background: light-dark(oklch(0.99 0.005 250), oklch(0.2 0.02 250));
  }

  .store-section-site-header-region,
  .store-section-site-header-lang {
    display: inline-block;
    max-width: 8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    color: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0.75;
  }

  .store-section-site-header-region-active,
  .store-section-site-header-lang-active {
    background: light-dark(oklch(0.52 0.14 250), oklch(0.62 0.14 250));
    color: light-dark(oklch(0.99 0.01 250), oklch(0.99 0.01 250));
    opacity: 1;
  }

  .store-section-site-header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid light-dark(oklch(0.82 0.02 250), oklch(0.35 0.02 250));
    border-radius: 0.75rem;
    background: light-dark(oklch(0.99 0.005 250), oklch(0.2 0.02 250));
    color: inherit;
    text-decoration: none;
  }

  .store-section-site-header-cart-icon {
    width: 1.35rem;
    height: 1.35rem;
  }

  .store-section-site-header-cart-badge {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    box-sizing: border-box;
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: 0.25rem;
    border: 1px solid light-dark(oklch(0.99 0.005 250), oklch(0.16 0.02 250));
    border-radius: 999px;
    background: light-dark(oklch(0.52 0.2 25), oklch(0.62 0.2 25));
    color: light-dark(oklch(0.99 0.01 250), oklch(0.99 0.01 250));
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;

    &[hidden] {
      display: none;
    }
  }
}
q-store-section-hero {
  display: block;

  .store-section-hero {
    display: grid;
    gap: 1rem;
    padding: 2rem 1.25rem;
  }

  .store-section-hero-media {
    width: 100%;
    max-height: 28rem;
    object-fit: cover;
  }

  .store-section-hero-title {
    font-size: 2rem;
    line-height: 1.15;
    margin: 0;
  }

  .store-section-hero-lede {
    margin: 0.5rem 0 0;
    max-width: 40rem;
  }

  .store-section-hero-cta {
    display: inline-flex;
    margin-top: 1rem;
    padding: 0.65rem 1rem;
    background: light-dark(oklch(0.25 0.02 250), oklch(0.92 0.01 250));
    color: light-dark(oklch(0.98 0 0), oklch(0.2 0.02 250));
    text-decoration: none;
  }
}
q-store-section-featured-collections {
  display: block;

  .store-section-featured-collections {
    padding: 2rem 1.25rem;
  }

  .store-section-title {
    margin: 0 0 1rem;
    font-size: 1.5rem;
  }

  .store-section-featured-collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem;
  }

  .store-collection-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
  }

  .store-collection-card-image {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    background: light-dark(oklch(0.94 0.01 250), oklch(0.3 0.02 250));
  }

  .store-collection-card-name {
    font-weight: 600;
  }
}
q-store-section-product-grid {
  display: block;

  .store-section-product-grid {
    padding: 2rem 1.25rem;
  }

  .store-section-title {
    margin: 0 0 1rem;
    font-size: 1.5rem;
  }

  .store-section-product-grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1rem;
  }

  .store-product-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
  }

  .store-product-card-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .store-product-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .store-product-card-image {
    aspect-ratio: 1;
    width: 100%;
    object-fit: cover;
    background: light-dark(oklch(0.94 0.01 250), oklch(0.3 0.02 250));
  }

  .store-product-card-name {
    font-weight: 600;
  }

  .store-product-card-price {
    opacity: 0.9;
  }

  q-store-commerce-price.store-product-card-price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    opacity: 0.9;

    .store-commerce-price-compare {
      text-decoration: line-through;
      opacity: 0.65;
      font-weight: 400;
    }

    .store-commerce-price-current {
      font-weight: 600;
    }
  }
}
q-store-section-promo-banner {
  display: block;

  .store-section-promo-banner {
    padding: 1.25rem;
    background: light-dark(oklch(0.95 0.03 85), oklch(0.28 0.03 85));
  }

  .store-section-promo-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
  }

  .store-section-promo-banner-title {
    margin: 0;
    font-size: 1.15rem;
  }

  .store-section-promo-banner-body {
    margin: 0;
    flex: 1 1 12rem;
  }

  .store-section-promo-banner-cta {
    text-decoration: underline;
  }
}
.store-page {
  display: block;
  min-height: 100dvh;
  color: inherit;
  background: transparent;
}

.store-site-chrome {
  display: block;
}

.store-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.store-section-unknown {
  padding: 1rem;
  color: oklch(0.45 0.02 250);
}
.channel-locales-block {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem 0;

  .channel-locales-block-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .channel-locales-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
  }

  .channel-locales-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
  }

  .channel-locales-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
  }

  .channel-locales-rows {
    display: grid;
    gap: 0.75rem;
  }

  .channel-locales-row {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
  }

  .channel-locales-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .channel-locales-field {
    display: grid;
    gap: 0.25rem;
    font-size: 0.8125rem;
  }

  .channel-locales-field input,
  .channel-locales-field select {
    box-sizing: border-box;
    inline-size: 100%;
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
    color: inherit;
    font: inherit;
  }

  .channel-locales-example {
    margin: 0;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: light-dark(oklch(40% 0 0), oklch(72% 0 0));
    word-break: break-all;
  }

  .channel-locales-routing {
    margin-block-start: 0.25rem;
  }
}
.channel-store-badge-settings {
  display: block;
}

.channel-store-badge-settings {
  margin-block: 1.5rem;
}

.channel-store-badge-settings-lede {
  margin-block: 0.5rem 1rem;
  color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
}

.channel-store-badge-rules {
  display: block;
  margin-block-start: 1.25rem;
}

.channel-store-badge-rule-row {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  margin-block-end: 0.75rem;
  border: 1px solid light-dark(oklch(88% 0.01 260), oklch(32% 0.02 260));
  border-radius: 0.5rem;
}
.channels-new-type-view {
  .channels-new-slug-preview {
    margin: -0.25rem 0 0.75rem;
    font-size: 0.875rem;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.75 0.01 260));

    a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }
  }
}
.channels-new-view {
  container-type: inline-size;
  display: grid;
  gap: 1rem;

  .channels-new-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1rem;
    align-items: start;
  }

  .channels-new-card-link {
    display: block;
    min-inline-size: 0;
    color: inherit;
    text-decoration: none;
    border-radius: 0.75rem;

    &:hover .card,
    &:focus-visible .card {
      background-color: light-dark(
        oklch(from var(--color-canvas) calc(l - 0.04) c h),
        oklch(from var(--color-canvas) calc(l + 0.02) c h)
      );
    }

    &:focus-visible {
      outline: 2px solid light-dark(oklch(0.55 0.14 250), oklch(0.72 0.12 250));
      outline-offset: 2px;
    }
  }

  .channels-new-card {
    min-inline-size: 0;
    block-size: 100%;

    .card {
      display: grid;
      gap: 0.75rem;
      align-content: start;
      block-size: 100%;
      border: none;
      cursor: pointer;
      background-color: light-dark(
        oklch(from var(--color-canvas) calc(l - 0.02) c h),
        oklch(from var(--color-canvas) calc(l - 0.002) c h)
      );
      transition: background-color 120ms ease;
    }
  }

  .channels-new-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 0.625rem;
    color: light-dark(oklch(0.45 0.12 145), oklch(0.78 0.12 145));
    background: light-dark(oklch(0.95 0.02 145), oklch(0.28 0.03 145));
  }

  .channels-new-card-examples {
    display: grid;
    gap: 0.35rem;
    margin-block-start: 0.25rem;
  }

  .channels-new-card-examples-label {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
  }

  .channels-new-card-examples ul {
    margin: 0;
    padding-inline-start: 1rem;
    font-family: monospace;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.42 0.02 260), oklch(0.72 0.01 260));
  }

  .channels-new-card-examples li {
    margin-block-end: 0.15rem;
  }
}
.channels-view {
  container-type: inline-size;
  display: grid;
  gap: 1rem;

  .channels-view-status {
    margin: 0;
    color: light-dark(oklch(0.45 0 0), oklch(0.65 0 0));
  }

  .channels-view-empty {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
    max-width: 28rem;
  }

  .channels-view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
    align-items: start;
  }

  .channels-view-card-link {
    display: block;
    min-inline-size: 0;
    color: inherit;
    text-decoration: none;
    border-radius: 0.75rem;

    &:hover .card,
    &:focus-visible .card {
      background-color: light-dark(
        oklch(from var(--color-canvas) calc(l - 0.04) c h),
        oklch(from var(--color-canvas) calc(l + 0.02) c h)
      );
    }

    &:focus-visible {
      outline: 2px solid light-dark(oklch(0.55 0.14 250), oklch(0.72 0.12 250));
      outline-offset: 2px;
    }
  }

  .channels-view-card {
    min-inline-size: 0;
    block-size: 100%;

    .card {
      display: grid;
      gap: 0.65rem;
      align-content: start;
      block-size: 100%;
      border: none;
      cursor: pointer;
      background-color: light-dark(
        oklch(from var(--color-canvas) calc(l - 0.02) c h),
        oklch(from var(--color-canvas) calc(l - 0.002) c h)
      );
      transition: background-color 120ms ease;
    }
  }

  .channels-view-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .channels-view-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 0.625rem;
    color: light-dark(oklch(0.45 0.12 145), oklch(0.78 0.12 145));
    background: light-dark(oklch(0.95 0.02 145), oklch(0.28 0.03 145));
  }

  .channels-view-card-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
  }

  .channels-view-card-meta {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.8125rem;

    div {
      display: grid;
      grid-template-columns: 3.25rem minmax(0, 1fr);
      gap: 0.5rem;
      align-items: baseline;
    }

    dt {
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-size: 0.6875rem;
      color: light-dark(oklch(0.5 0 0), oklch(0.62 0 0));
    }

    dd {
      margin: 0;
      min-inline-size: 0;
      overflow-wrap: anywhere;
      font-family: monospace;
      color: light-dark(oklch(0.38 0.02 260), oklch(0.78 0.01 260));
    }
  }
}
.domains-connect-view {
  container-type: inline-size;
  display: grid;
  gap: 1.5rem;

  .domains-connect-steps {
    display: grid;
    gap: 1rem;
  }

  .domains-connect-step {
    border: none;
    border-radius: 0.75rem;
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
    background-color: light-dark(
      oklch(from var(--color-canvas) calc(l - 0.02) c h),
      oklch(from var(--color-canvas) calc(l - 0.002) c h)
    );
  }

  .domains-connect-step-title {
    margin: 0;
    font-size: 1rem;
  }

  .domains-connect-step-intro {
    margin: 0;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  }

  .domains-connect-step-status {
    margin: 0;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  }

  .domains-connect-step-verification {
    .domain-verification-panel {
      gap: 0.75rem;
    }
  }

  .domains-connect-dns-missing {
    color: light-dark(oklch(55% 0.15 25), oklch(72% 0.12 25));
    font-family: inherit;
    font-size: 0.85rem;
  }

  .domains-connect-confirm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .domains-connect-verify {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

}
.domain-verification-records {
  container-type: inline-size;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;

  @container (min-width: 30rem) {
    grid-template-columns: minmax(4.5rem, 0.55fr) minmax(3.5rem, 0.55fr) minmax(0, 2.9fr);
  }

  .domain-verification-record {
    border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    display: grid;
    gap: 0.35rem;
    min-width: 0;

    dt {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: light-dark(oklch(50% 0 0), oklch(68% 0 0));
    }

    dd {
      margin: 0;
      font-family: ui-monospace, monospace;
      word-break: break-all;
    }
  }
}

.domain-verification-records-instruction {
  grid-template-columns: 1fr;

  .domain-verification-records-meta {
    container-type: inline-size;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(3.25rem, 0.4fr) minmax(3.5rem, 0.75fr) minmax(9.5rem, 1.35fr);

    @container (max-width: 22rem) {
      grid-template-columns: 1fr;
    }

    &:not(:has(.domain-verification-record:nth-child(3))) {
      grid-template-columns: minmax(3.25rem, 0.45fr) minmax(0, 1fr);
    }

    .domain-verification-record {
      dd {
        overflow-wrap: anywhere;
        word-break: normal;
      }
    }
  }

  > .domain-verification-record:last-child {
    dd {
      word-break: break-all;
    }
  }
}

.domain-verification-panel {
  container-type: inline-size;
  display: grid;
  gap: 1rem;

  .domain-verification-intro {
    color: light-dark(oklch(40% 0 0), oklch(75% 0 0));
    margin: 0;
  }

  .domain-verification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .domain-verification-error {
    margin: 0;
    color: light-dark(oklch(45% 0.18 25), oklch(72% 0.16 25));
  }
}
.cms-chip-group {
  display: grid;
  gap: 0.4rem;
  margin-block: 0.75rem;

  .cms-chip-group-label {
    font-size: 0.85rem;
    color: light-dark(oklch(0.4 0.02 260), oklch(0.75 0.02 260));
  }

  .cms-chip-group-buttons {
    flex-wrap: wrap;
  }
}

.cms-field-form {
  display: grid;
  gap: 0.5rem;
}

.cms-field-form-hint {
  margin: 0;
  font-size: 0.85rem;
  color: light-dark(oklch(0.45 0.02 260), oklch(0.7 0.02 260));
}

.cms-entry-fields-form {
  display: grid;
  gap: 0.75rem;
}

.cms-entry-field {
  display: grid;
  gap: 0.35rem;
}

.cms-entry-field-caption {
  margin: 0;
  font-size: 0.8rem;
  color: light-dark(oklch(0.45 0.02 260), oklch(0.7 0.02 260));
}

/* widen native dialog for model picker (default q-dialog max-width is 24rem) */
q-dialog.cms-model-picker-dialog .dialog {
  max-width: min(32rem, calc(100vw - 2rem));
  width: min(32rem, calc(100vw - 2rem));
  box-sizing: border-box;
}

.cms-model-picker {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cms-model-picker-list {
  display: grid;
  gap: 0.35rem;
  max-height: min(20rem, 50vh);
  overflow: auto;
}

.cms-model-picker-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: start;
  padding: 0.6rem 0.75rem;
  border: 1px solid light-dark(oklch(0.85 0.02 260), oklch(0.35 0.02 260));
  border-radius: 0.4rem;
  background: light-dark(oklch(0.99 0.01 260), oklch(0.22 0.02 260));
  cursor: pointer;
  overflow: hidden;
}

.cms-model-picker-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-model-picker-item:hover {
  border-color: light-dark(oklch(0.65 0.08 260), oklch(0.55 0.08 260));
}

.cms-model-picker-meta {
  font-size: 0.8rem;
  color: light-dark(oklch(0.45 0.02 260), oklch(0.7 0.02 260));
}

.cms-model-fields-table {
  width: 100%;
  border-collapse: collapse;
  margin-block-start: 1rem;

  th,
  td {
    text-align: start;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.01 260));
    font-size: 0.9rem;
  }

  th {
    font-weight: 600;
    color: light-dark(oklch(0.4 0.02 260), oklch(0.75 0.02 260));
  }
}

.cms-model-fields-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cms-help-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16.5rem;
  gap: 1.5rem;
  align-items: start;
}

.cms-help-main {
  min-inline-size: 0;
}

.cms-help {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 0;
  padding: 0;
  border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
  border-radius: 0.625rem;
  background: light-dark(oklch(99% 0 0), oklch(20% 0 0));
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: light-dark(oklch(38% 0 0), oklch(78% 0 0));

  .cms-help-header {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    background: light-dark(oklch(96.5% 0 0), oklch(24% 0 0));
    border-block-end: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));

    h2 {
      margin: 0;
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: light-dark(oklch(22% 0 0), oklch(92% 0 0));
    }

    p {
      margin: 0;
      font-size: 0.75rem;
      line-height: 1.45;
      color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
    }
  }

  .cms-help-section {
    display: grid;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid light-dark(oklch(92% 0 0), oklch(28% 0 0));

    &:last-child {
      border-block-end: none;
    }

    h3 {
      margin: 0;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: light-dark(oklch(42% 0 0), oklch(72% 0 0));
    }

    p {
      margin: 0;
      font-size: 0.75rem;
      color: light-dark(oklch(42% 0 0), oklch(74% 0 0));
    }

    code {
      font-size: 0.6875rem;
      padding: 0.1rem 0.3rem;
      border-radius: 0.25rem;
      background: light-dark(oklch(94% 0 0), oklch(26% 0 0));
    }
  }

  .cms-help-meta {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: light-dark(oklch(55% 0 0), oklch(60% 0 0));
  }
}

@container (max-width: 56rem) {
  .cms-help-layout {
    grid-template-columns: 1fr;
  }

  .cms-help {
    position: static;
    order: -1;
  }
}
.files-library-selection-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-block-end: 1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.35 0 0));
  border-radius: 0.5rem;
  background: light-dark(oklch(0.98 0 0), oklch(0.2 0 0));
}

.files-list-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
}

.files-list-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem;
  border: none;
  background: transparent;
}

.files-list-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.files-list-card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.35rem;
  background: light-dark(oklch(0.94 0 0), oklch(0.25 0 0));
}

.files-list-card__thumb--empty {
  display: block;
}

.files-list-card__name {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  word-break: break-word;
}

.files-list-card__meta {
  font-size: 0.75rem;
  color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
  margin: 0;
}

.files-list-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.files-list-card__tag {
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.4 0 0));
}
.files-new-view {
  container-type: inline-size;
  display: grid;
  gap: 1rem;

  .files-new-view__form {
    display: grid;
    gap: 1rem;
    max-inline-size: 32rem;
  }

  .files-new-view__field {
    display: grid;
    gap: 0.35rem;
  }

  .files-new-view__field-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: light-dark(oklch(0.35 0.02 260), oklch(0.85 0.02 260));
  }

  .files-new-view__status {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
  }

  .files-new-view__error {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(0.5 0.15 25), oklch(0.72 0.12 25));
  }
}
.files-detail-view {
  container-type: inline-size;
  display: grid;
  gap: 1.25rem;

  .files-detail-view__preview {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 1rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.75rem;
    background: light-dark(oklch(0.98 0 0), oklch(0.18 0 0));
  }

  .files-detail-view__preview q-image {
    display: block;
    max-width: min(100%, 28rem);
  }

  .files-detail-view__preview-caption,
  .files-detail-view__status {
    margin: 0;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
    font-size: 0.875rem;
  }

  .files-detail-view__meta {
    display: grid;
    gap: 0.5rem 1rem;
    margin: 0;

    dt {
      color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
    }

    dd {
      margin: 0;
    }
  }

  @container (min-width: 40rem) {
    .files-detail-view__meta {
      grid-template-columns: 8rem 1fr;
    }
  }

  .file-tag-assignments {
    display: grid;
    gap: 0.75rem;
  }

  .file-tag-assignments-lede {
    margin: 0;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
    font-size: 0.875rem;
  }

  .file-tag-assignments-system {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.35rem;
  }

  .file-tag-assignments-system-badge {
    margin-inline-start: 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: light-dark(oklch(0.5 0 0), oklch(0.68 0 0));
  }

  .file-tag-assignments-error {
    margin: 0;
    color: light-dark(oklch(0.4 0 0), oklch(0.75 0 0));
  }
}
.service-playbook-editor {
  display: grid;
  gap: 1rem;
}

.service-playbook-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.service-playbook-editor-layout {
  display: grid;
  gap: 1rem;
}

@container (min-width: 56rem) {
  .service-playbook-editor-layout {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    align-items: start;
  }
}

.service-playbook-editor-graph-panel {
  min-width: 0;
}

.service-playbook-editor-side {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
  background: light-dark(oklch(0.99 0.005 260), oklch(0.2 0.02 260));
}

.service-playbook-editor-side h3 {
  margin: 0;
  font-size: 1rem;
}

.service-playbook-editor-side label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.service-playbook-editor-side input,
.service-playbook-editor-side select,
.service-playbook-editor-side textarea {
  font: inherit;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid light-dark(oklch(0.85 0.01 260), oklch(0.38 0.02 260));
  background: light-dark(oklch(1 0 0), oklch(0.18 0.02 260));
  color: inherit;
}

.service-playbook-editor-advanced textarea {
  min-height: 16rem;
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
}

.service-playbook-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.service-playbook-editor-message {
  margin: 0;
  font-size: 0.875rem;
}

.service-playbook-editor-message.is-error {
  color: light-dark(oklch(0.45 0.18 25), oklch(0.72 0.14 25));
}

.service-playbook-editor-message.is-success {
  color: light-dark(oklch(0.42 0.12 150), oklch(0.72 0.12 150));
}

.service-playbook-editor-empty-side {
  margin: 0;
  opacity: 0.75;
  font-size: 0.875rem;
}
q-service-playbook-graph {
  display: block;
  container-type: inline-size;
}

q-service-playbook-graph .service-playbook-graph {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

q-service-playbook-graph .service-playbook-graph-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

q-service-playbook-graph .service-playbook-graph-track-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

q-service-playbook-graph .service-playbook-graph-branch-layer {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(16rem, 80cqw);
  gap: 0.75rem;
  min-height: 1.75rem;
  padding: 0 0.75rem;
  pointer-events: none;
}

q-service-playbook-graph .service-playbook-graph-branch-edge {
  grid-column: var(--branch-from) / span var(--branch-span);
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.25rem;
  border-bottom: 2px dashed light-dark(oklch(0.62 0.12 280), oklch(0.58 0.1 280));
  position: relative;
}

q-service-playbook-graph .service-playbook-graph-branch-edge.is-skip {
  border-bottom-style: solid;
  border-color: light-dark(oklch(0.55 0.14 250), oklch(0.72 0.12 250));
}

q-service-playbook-graph .service-playbook-graph-branch-edge-label {
  position: absolute;
  top: -0.125rem;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: light-dark(oklch(0.94 0.04 280), oklch(0.28 0.05 280));
  color: light-dark(oklch(0.35 0.08 280), oklch(0.92 0.02 280));
  white-space: nowrap;
}

q-service-playbook-graph .service-playbook-graph-milestone-branch {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  opacity: 0.85;
}

q-service-playbook-graph .service-playbook-graph-track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  align-items: stretch;
}

q-service-playbook-graph .service-playbook-graph-column {
  flex: 0 0 min(16rem, 80cqw);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid light-dark(oklch(0.85 0.01 260), oklch(0.35 0.02 260));
  background: light-dark(oklch(0.98 0.005 260), oklch(0.22 0.02 260));
}

q-service-playbook-graph .service-playbook-graph-column.is-selected {
  border-color: light-dark(oklch(0.55 0.14 250), oklch(0.72 0.12 250));
  box-shadow: 0 0 0 1px light-dark(oklch(0.55 0.14 250), oklch(0.72 0.12 250));
}

q-service-playbook-graph .service-playbook-graph-column-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

q-service-playbook-graph .service-playbook-graph-milestone-button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: light-dark(oklch(0.94 0.02 250), oklch(0.28 0.03 260));
  color: inherit;
  cursor: pointer;
  font: inherit;
}

q-service-playbook-graph .service-playbook-graph-milestone-button.is-selected {
  border-color: light-dark(oklch(0.55 0.14 250), oklch(0.72 0.12 250));
}

q-service-playbook-graph .service-playbook-graph-milestone-key {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
}

q-service-playbook-graph .service-playbook-graph-milestone-label {
  display: block;
  font-weight: 600;
}

q-service-playbook-graph .service-playbook-graph-column-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

q-service-playbook-graph .service-playbook-graph-tasks {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

q-service-playbook-graph .service-playbook-graph-task {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
  background: light-dark(oklch(1 0 0), oklch(0.2 0.02 260));
}

q-service-playbook-graph .service-playbook-graph-task.is-selected {
  border-color: light-dark(oklch(0.55 0.14 250), oklch(0.72 0.12 250));
}

q-service-playbook-graph .service-playbook-graph-task-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

q-service-playbook-graph .service-playbook-graph-task-button {
  flex: 1;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

q-service-playbook-graph .service-playbook-graph-task-title {
  display: block;
  font-weight: 500;
}

q-service-playbook-graph .service-playbook-graph-task-meta {
  display: block;
  font-size: 0.75rem;
  opacity: 0.75;
}

q-service-playbook-graph .service-playbook-graph-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

q-service-playbook-graph .service-playbook-graph-connector {
  flex: 0 0 auto;
  align-self: center;
  width: 1.25rem;
  height: 2px;
  background: light-dark(oklch(0.75 0.02 260), oklch(0.45 0.02 260));
}

q-service-playbook-graph .service-playbook-graph-empty {
  margin: 0;
  opacity: 0.75;
  font-size: 0.875rem;
}
.balances-detail-view {
  container-type: inline-size;

  .balances-detail-overview {
    display: grid;
    gap: 1rem;
  }

  .balances-detail-overview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
  }

  .balances-detail-provenance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
  }

  .balances-detail-provenance-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: lowercase;
    border: 1px solid light-dark(oklch(0.86 0.02 260), oklch(0.36 0.02 260));
    background: light-dark(oklch(0.97 0.01 260), oklch(0.24 0.015 260));
    color: light-dark(oklch(0.4 0.03 260), oklch(0.86 0.01 260));
  }

  .balances-detail-provenance-chip--purpose {
    border-color: light-dark(oklch(0.78 0.08 280), oklch(0.42 0.08 280));
    background: light-dark(oklch(0.95 0.04 280), oklch(0.26 0.05 280));
  }

  .balances-detail-provenance-chip--via {
    border-color: light-dark(oklch(0.82 0.04 220), oklch(0.38 0.04 220));
    background: light-dark(oklch(0.96 0.02 220), oklch(0.24 0.03 220));
  }

  .balances-detail-provenance-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: light-dark(oklch(0.42 0.12 250), oklch(0.78 0.08 250));
    text-decoration: none;
  }

  .balances-detail-provenance-link:hover {
    text-decoration: underline;
  }

  .balances-detail-provenance-mono {
    font-size: 0.75rem;
    font-family: ui-monospace, monospace;
    color: light-dark(oklch(0.48 0.02 260), oklch(0.72 0.01 260));
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .balances-detail-overview-names {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
  }

  .balances-detail-overview-primary {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .balances-detail-overview-secondary {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(0.48 0.02 260), oklch(0.72 0.01 260));
  }

  .balances-detail-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: lowercase;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.34 0.02 260));
    background: light-dark(oklch(0.96 0.006 260), oklch(0.22 0.01 260));
    color: light-dark(oklch(0.42 0.02 260), oklch(0.82 0.01 260));
  }

  .balances-detail-status--active {
    border-color: light-dark(oklch(0.78 0.12 145), oklch(0.42 0.1 145));
    background: light-dark(oklch(0.94 0.06 145), oklch(0.28 0.06 145));
    color: light-dark(oklch(0.38 0.1 145), oklch(0.88 0.06 145));
  }

  .balances-detail-stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));

    @container (min-width: 40rem) {
      grid-template-columns: minmax(12rem, 1.4fr) repeat(4, minmax(8rem, 1fr));
    }

    q-stats-card {
      display: block;
      inline-size: auto;
      min-inline-size: 0;
    }
  }

  .balances-detail-stat--primary {
    @container (min-width: 40rem) {
      grid-row: span 1;
    }
  }

  .balances-detail-system {
    font-size: 0.8125rem;
    border: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.32 0.02 260));
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: light-dark(oklch(0.98 0.004 260), oklch(0.2 0.01 260));
  }

  .balances-detail-system-summary {
    cursor: pointer;
    font-weight: 600;
    color: light-dark(oklch(0.42 0.02 260), oklch(0.78 0.01 260));
    list-style-position: outside;

    &::marker {
      color: light-dark(oklch(0.55 0.02 260), oklch(0.65 0.02 260));
    }
  }

  .balances-detail-facts {
    display: grid;
    gap: 0.35rem 1rem;
    margin: 0.75rem 0 0;
    padding: 0;

    @container (min-width: 36rem) {
      grid-template-columns: minmax(6rem, auto) 1fr;
    }

    dt {
      margin: 0;
      font-weight: 600;
      color: light-dark(oklch(0.48 0.02 260), oklch(0.68 0.01 260));
    }

    dd {
      margin: 0 0 0.35rem;
      word-break: break-word;
    }
  }

  .balances-detail-mono {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    line-height: 1.45;
    word-break: break-all;
  }

  .balances-detail-transact {
    margin-block-start: 1.25rem;
  }

  .balances-detail-transactions {
    margin-block-start: 1.25rem;
  }

  .balances-detail-transactions-wrap {
    overflow-x: auto;
  }

  .balances-detail-transactions-table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    border: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.32 0.02 260));
    border-radius: 0.5rem;
    overflow: hidden;

    thead th {
      padding: 0.5rem 0.75rem;
      text-align: start;
      font-weight: 700;
      color: light-dark(oklch(0.5 0 0), oklch(0.6 0 0));
      background: light-dark(oklch(0.94 0.008 260), oklch(0.28 0.01 260));
      border-block-end: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.32 0.02 260));
      border-inline-end: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.32 0.02 260));

      &:last-child {
        border-inline-end: none;
      }
    }

    tbody td {
      padding: 0.5rem 0.75rem;
      border-block-end: 1px solid light-dark(oklch(0.92 0.008 260), oklch(0.28 0.01 260));
      border-inline-end: 1px solid light-dark(oklch(0.92 0.008 260), oklch(0.28 0.01 260));

      &:last-child {
        border-inline-end: none;
      }
    }

    tbody tr:last-child td {
      border-block-end: none;
    }
  }

  .balances-detail-debit-override {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid light-dark(oklch(0.9 0 0), oklch(0.28 0 0));
  }

  .balances-detail-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
  }

  .balances-detail-override-hint {
    margin: 0;
    font-size: 0.75rem;
  }

  .balances-detail-note-label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.8125rem;
  }

  .balances-detail-note {
    width: 100%;
    max-width: 28rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.34 0 0));
    background: light-dark(oklch(1 0 0), oklch(0.18 0 0));
    font: inherit;
  }

  .balances-detail-note:disabled {
    opacity: 0.55;
  }
}
.store-product-preview-panel {
  container-type: inline-size;
  display: grid;
  gap: 0.65rem;
  align-content: start;

  .store-product-preview-panel-head {
    display: grid;
    gap: 0.5rem;
  }

  .store-product-preview-panel-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
    text-transform: lowercase;
  }

  .store-product-preview-sim-row {
    display: grid;
    gap: 0.35rem;
  }

  .store-product-preview-sim-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: light-dark(oklch(0.48 0.02 260), oklch(0.72 0.02 260));
  }

  .store-product-preview-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .store-product-preview-tax-summary,
  .store-product-preview-pricing-summary {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0.45rem 0.55rem;
    border-radius: 0.65rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.97 0.01 260), oklch(0.2 0.02 260));
    font-size: 0.75rem;
    line-height: 1.35;

    &.is-no-tax-region,
    &.is-no-rule,
    &.is-no-price,
    &.is-no-currency {
      border-color: light-dark(oklch(0.88 0.04 75), oklch(0.38 0.05 75));
      background: light-dark(oklch(0.97 0.02 85), oklch(0.22 0.03 85));
    }
  }

  .store-product-preview-pricing-summary {
    background: light-dark(oklch(0.97 0.01 230), oklch(0.2 0.03 230));
  }

  .store-product-preview-tax-summary-label {
    font-weight: 600;
    color: light-dark(oklch(0.4 0.02 260), oklch(0.78 0.02 260));
  }

  .store-product-preview-tax-summary-detail {
    color: light-dark(oklch(0.45 0 0), oklch(0.74 0 0));
  }

  .store-product-preview-tax-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
    font-size: 0.7rem;
  }

  .store-product-preview-tax-flow-step {
    display: inline-grid;
    gap: 0.05rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.34 0 0));
    background: light-dark(oklch(1 0 0), oklch(0.24 0 0));

    &.is-emphasis {
      border-color: light-dark(oklch(0.62 0.1 260), oklch(0.55 0.1 260));
      background: light-dark(oklch(0.95 0.03 260), oklch(0.26 0.05 260));
    }

    &.is-result {
      display: grid;
      gap: 0.12rem;
      justify-items: start;
      border-color: light-dark(oklch(0.5 0.12 145), oklch(0.52 0.12 145));
      background: light-dark(oklch(0.94 0.04 145), oklch(0.24 0.05 145));
    }

    &.is-pricing-result {
      border-color: light-dark(oklch(0.52 0.1 250), oklch(0.55 0.1 250));
      background: light-dark(oklch(0.94 0.04 250), oklch(0.24 0.05 250));
    }
  }

  .store-product-preview-tax-flow-vat-line {
    font-weight: 600;
    color: light-dark(oklch(0.38 0.02 260), oklch(0.82 0.02 260));
  }

  .store-product-preview-tax-flow-checkout-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-weight: 700;
    color: light-dark(oklch(0.32 0.04 145), oklch(0.86 0.04 145));
  }

  .store-product-preview-tax-flow-checkout-total {
    font-variant-numeric: tabular-nums;
  }

  .store-product-preview-tax-flow-entity {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: light-dark(oklch(0.52 0.02 260), oklch(0.66 0.02 260));
  }

  .store-product-preview-tax-flow-name {
    font-weight: 600;
    color: light-dark(oklch(0.38 0.02 260), oklch(0.82 0.02 260));
  }

  .store-product-preview-tax-flow-percent {
    font-weight: 700;
    color: light-dark(oklch(0.35 0.04 260), oklch(0.84 0.04 260));
  }

  .store-product-preview-tax-flow-note {
    font-size: 0.65rem;
    color: light-dark(oklch(0.52 0 0), oklch(0.68 0 0));
  }

  .store-product-preview-tax-flow-arrow {
    color: light-dark(oklch(0.55 0 0), oklch(0.65 0 0));
    font-weight: 600;
  }

  .store-product-preview-tab {
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.36 0 0));
    background: light-dark(oklch(1 0 0), oklch(0.22 0 0));
    color: light-dark(oklch(0.38 0 0), oklch(0.82 0 0));

    &.is-selected {
      border-color: light-dark(oklch(0.55 0.12 260), oklch(0.62 0.12 260));
      background: light-dark(oklch(0.94 0.04 260), oklch(0.28 0.06 260));
    }
  }

  .store-product-preview-frame {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 26rem;
    min-block-size: 22rem;
    margin-inline: auto;
    padding: 0.75rem;
    border-radius: 1.25rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.34 0 0));
    background: light-dark(oklch(0.98 0 0), oklch(0.18 0 0));
    overflow: auto;
  }

  qasima-product {
    display: block;
    inline-size: 100%;
  }
}

.store-product-editor-layout {
  container-type: inline-size;
  display: grid;
  gap: 1.5rem;
  align-items: start;

  @container (min-width: 58rem) {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  }

  .store-product-editor-main {
    display: grid;
    gap: 1rem;
    min-inline-size: 0;
  }

  .store-product-editor-aside {
    min-inline-size: 0;
  }

  &.store-product-editor-layout--companion {
    @container (min-width: 58rem) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

.balance-transaction-simulator-panel {
  container-type: inline-size;
  display: grid;
  gap: 0.65rem;
  align-content: start;

  .balance-transaction-simulator-panel__hint {
    margin: 0;
    font-size: 0.75rem;
    color: light-dark(oklch(0.5 0 0), oklch(0.72 0 0));
  }

  .balance-transaction-simulator-panel__fields {
    display: grid;
    gap: 0.5rem;
  }

  .balance-transaction-simulator-panel__checkbox {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
  }

  .balance-transaction-simulator-panel__amount {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.34 0 0));
    background: light-dark(oklch(1 0 0), oklch(0.18 0 0));
    font: inherit;
  }

  .balance-transaction-simulator-panel__result {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-radius: 0.65rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.97 0.01 260), oklch(0.2 0.02 260));
    font-size: 0.75rem;
    line-height: 1.4;

    &.is-allow {
      border-color: light-dark(oklch(0.82 0.06 145), oklch(0.38 0.06 145));
    }

    &.is-deny {
      border-color: light-dark(oklch(0.86 0.05 25), oklch(0.38 0.06 25));
    }
  }

  .balance-transaction-simulator-panel__outcome {
    margin: 0;
    font-weight: 600;
    text-transform: lowercase;
  }

  .balance-transaction-simulator-panel__fifo {
    margin: 0;
    padding-left: 1rem;
  }
}
.balances-credit-bulk-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.balances-credit-bulk-view {
  .bulk-credit-fields {
    display: grid;
    gap: 0.75rem;
    max-width: 24rem;
  }

  .bulk-credit-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .bulk-credit-field input {
    padding: 0.5rem 0.75rem;
    border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.35 0 0));
    border-radius: 0.375rem;
    background: light-dark(oklch(1 0 0), oklch(0.22 0 0));
    color: inherit;
  }

  .bulk-credit-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 36rem;
    max-height: 24rem;
    overflow: auto;
    border: 1px solid light-dark(oklch(0.85 0 0), oklch(0.35 0 0));
    border-radius: 0.5rem;
    padding: 0.5rem;
  }

  .bulk-credit-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0.25rem;
  }

  .bulk-credit-row-header {
    font-weight: 600;
    border-bottom: 1px solid light-dark(oklch(0.9 0 0), oklch(0.3 0 0));
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem;
  }

  .bulk-credit-row-label {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .bulk-credit-row-meta {
    font-size: 0.85em;
    color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
  }

  .bulk-credit-actions {
    display: flex;
    gap: 0.5rem;
  }
}
.rule-constraints-editor {
  display: block;

  .rule-editor-panel {
    display: grid;
    gap: 0.75rem;
    margin-block: 0.75rem;
  }

  .rule-editor-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .rule-editor-panel-toggle {
    display: flex;
    flex: 1;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .rule-editor-panel-toggle-text {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
  }

  .rule-editor-panel-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
  }

  .rule-editor-panel-summary {
    font-size: 0.82rem;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
    line-height: 1.35;
  }

  .rule-editor-panel-chevron {
    flex-shrink: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: light-dark(oklch(0.5 0.02 260), oklch(0.68 0.02 260));
  }

  .rule-editor-panel-body {
    display: grid;
    gap: 0.75rem;
  }

  .rule-editor-panel.is-collapsed {
    padding-block: 0.65rem;
  }

  .rule-editor-panel-grid {
    display: grid;
    gap: 0.75rem;
  }

  .rule-constraint-card {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px dashed light-dark(oklch(0.82 0.01 260), oklch(0.38 0.02 260));
    border-radius: 0.375rem;
  }

  .rule-constraint-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .rule-constraint-fields {
    display: grid;
    gap: 0.5rem;
  }

  .rule-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}
section.store-promotion-rules-detail-view {
  display: grid;
  gap: 1.5rem;

  .ruleset-detail-profile {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.625rem;
    background: light-dark(oklch(0.99 0 0), oklch(0.19 0 0));
  }

  .ruleset-detail-lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: light-dark(oklch(0.32 0 0), oklch(0.88 0 0));
  }

  .ruleset-detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 0;
  }

  .ruleset-detail-stat {
    display: grid;
    gap: 0.25rem;

    dt {
      margin: 0;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: lowercase;
      color: light-dark(oklch(0.5 0 0), oklch(0.62 0 0));
    }

    dd {
      margin: 0;
      font-size: 0.9375rem;
    }
  }

  .ruleset-detail-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: lowercase;
    background: light-dark(oklch(0.94 0 0), oklch(0.28 0 0));
    color: light-dark(oklch(0.35 0 0), oklch(0.85 0 0));

    &.is-active {
      background: light-dark(oklch(0.93 0.04 145), oklch(0.28 0.06 145));
      color: light-dark(oklch(0.38 0.1 145), oklch(0.85 0.08 145));
    }

    &.is-inactive {
      background: light-dark(oklch(0.92 0.02 25), oklch(0.32 0.04 25));
      color: light-dark(oklch(0.45 0.08 25), oklch(0.82 0.06 25));
    }

    &.is-action-apply {
      background: light-dark(oklch(0.93 0.05 155), oklch(0.28 0.07 155));
      color: light-dark(oklch(0.36 0.11 155), oklch(0.88 0.08 155));
    }

    &.is-action-deny {
      background: light-dark(oklch(0.92 0.04 25), oklch(0.3 0.06 25));
      color: light-dark(oklch(0.42 0.12 25), oklch(0.88 0.07 25));
    }

    &.is-action-allow {
      background: light-dark(oklch(0.93 0.04 240), oklch(0.28 0.06 240));
      color: light-dark(oklch(0.38 0.1 240), oklch(0.85 0.08 240));
    }
  }

  .ruleset-detail-technical {
    font-size: 0.875rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));

    summary {
      cursor: pointer;
      font-weight: 600;
      text-transform: lowercase;
      color: light-dark(oklch(0.4 0 0), oklch(0.75 0 0));
    }
  }

  .ruleset-detail-rules {
    display: grid;
    gap: 1rem;
  }

  .ruleset-detail-rules-hint {
    font-size: 0.8125rem;
    color: light-dark(oklch(0.5 0 0), oklch(0.62 0 0));
  }

  .ruleset-detail-rule-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
  }

  .ruleset-detail-rule-card {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.3 0 0));
    border-radius: 0.5rem;
    background: light-dark(oklch(1 0 0), oklch(0.17 0 0));
  }

  .ruleset-detail-rule-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .ruleset-detail-rule-priority {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: lowercase;
  }

  .ruleset-detail-rule-description {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
  }

  .ruleset-detail-rule-logic {
    margin: 0 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: lowercase;
    color: light-dark(oklch(0.5 0 0), oklch(0.62 0 0));
  }

  .ruleset-detail-constraint-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.375rem;
  }

  .ruleset-detail-constraint {
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: light-dark(oklch(0.97 0 0), oklch(0.22 0 0));
    color: light-dark(oklch(0.32 0 0), oklch(0.88 0 0));

    &.is-empty {
      font-style: italic;
      color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
    }
  }

  .ruleset-detail-rule-footer {
    padding-block-start: 0.25rem;
    border-block-start: 1px solid light-dark(oklch(0.94 0 0), oklch(0.26 0 0));
  }

  .ruleset-detail-rule-id {
    font-size: 0.6875rem;
    color: light-dark(oklch(0.55 0 0), oklch(0.55 0 0));
    word-break: break-all;
  }
}
section.store-cart-policy-rules-detail-view {
  display: grid;
  gap: 1.5rem;

  .ruleset-detail-profile {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.625rem;
    background: light-dark(oklch(0.99 0 0), oklch(0.19 0 0));
  }

  .ruleset-detail-lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: light-dark(oklch(0.32 0 0), oklch(0.88 0 0));
  }

  .ruleset-detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 0;
  }

  .ruleset-detail-stat {
    display: grid;
    gap: 0.25rem;

    dt {
      margin: 0;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: lowercase;
      color: light-dark(oklch(0.5 0 0), oklch(0.62 0 0));
    }

    dd {
      margin: 0;
      font-size: 0.9375rem;
    }
  }

  .ruleset-detail-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: lowercase;
    background: light-dark(oklch(0.94 0 0), oklch(0.28 0 0));
    color: light-dark(oklch(0.35 0 0), oklch(0.85 0 0));

    &.is-active {
      background: light-dark(oklch(0.93 0.04 145), oklch(0.28 0.06 145));
      color: light-dark(oklch(0.38 0.1 145), oklch(0.85 0.08 145));
    }

    &.is-inactive {
      background: light-dark(oklch(0.92 0.02 25), oklch(0.32 0.04 25));
      color: light-dark(oklch(0.45 0.08 25), oklch(0.82 0.06 25));
    }

    &.is-action-apply {
      background: light-dark(oklch(0.93 0.05 155), oklch(0.28 0.07 155));
      color: light-dark(oklch(0.36 0.11 155), oklch(0.88 0.08 155));
    }

    &.is-action-deny {
      background: light-dark(oklch(0.92 0.04 25), oklch(0.3 0.06 25));
      color: light-dark(oklch(0.42 0.12 25), oklch(0.88 0.07 25));
    }

    &.is-action-allow {
      background: light-dark(oklch(0.93 0.04 240), oklch(0.28 0.06 240));
      color: light-dark(oklch(0.38 0.1 240), oklch(0.85 0.08 240));
    }
  }

  .ruleset-detail-technical {
    font-size: 0.875rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));

    summary {
      cursor: pointer;
      font-weight: 600;
      text-transform: lowercase;
      color: light-dark(oklch(0.4 0 0), oklch(0.75 0 0));
    }
  }

  .ruleset-detail-rules {
    display: grid;
    gap: 1rem;
  }

  .ruleset-detail-rules-hint {
    font-size: 0.8125rem;
    color: light-dark(oklch(0.5 0 0), oklch(0.62 0 0));
  }

  .ruleset-detail-rule-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
  }

  .ruleset-detail-rule-card {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.3 0 0));
    border-radius: 0.5rem;
    background: light-dark(oklch(1 0 0), oklch(0.17 0 0));
  }

  .ruleset-detail-rule-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .ruleset-detail-rule-priority {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: lowercase;
  }

  .ruleset-detail-rule-description {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
  }

  .ruleset-detail-rule-logic {
    margin: 0 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: lowercase;
    color: light-dark(oklch(0.5 0 0), oklch(0.62 0 0));
  }

  .ruleset-detail-constraint-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.375rem;
  }

  .ruleset-detail-constraint {
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: light-dark(oklch(0.97 0 0), oklch(0.22 0 0));
    color: light-dark(oklch(0.32 0 0), oklch(0.88 0 0));

    &.is-empty {
      font-style: italic;
      color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
    }
  }

  .ruleset-detail-rule-footer {
    padding-block-start: 0.25rem;
    border-block-start: 1px solid light-dark(oklch(0.94 0 0), oklch(0.26 0 0));
  }

  .ruleset-detail-rule-id {
    font-size: 0.6875rem;
    color: light-dark(oklch(0.55 0 0), oklch(0.55 0 0));
    word-break: break-all;
  }
}
qasima-manage-app .automations-form-view {
  display: block;
  container-type: inline-size;
  padding-block-end: 5rem;

  .automation-form-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-block-end: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    background: light-dark(oklch(0.99 0.005 260), oklch(0.22 0.02 260));
  }

  .automation-form-hero-kicker {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: light-dark(oklch(0.5 0.02 260), oklch(0.72 0.02 260));
  }

  .automation-form-hero-title {
    margin: 0.25rem 0 0;
    font-size: 1.35rem;
    font-weight: 600;
  }

  .automation-form-hero-meta {
    margin: 0.35rem 0 0;
  }

  .automation-form-key {
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.75 0.02 260));
  }

  .automation-form-enabled-toggle {
    min-width: 8rem;
  }

  .automation-form-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block-end: 1.75rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
    background: light-dark(oklch(1 0 0), oklch(0.2 0.02 260));
  }

  .automation-form-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.25rem;
  }

  .automation-trigger-readonly {
    .automation-trigger-label {
      margin: 0;
      font-size: 1rem;
      font-weight: 500;
    }

    .automation-trigger-type {
      margin: 0.35rem 0 0;
      font-family: ui-monospace, monospace;
      font-size: 0.8rem;
      color: light-dark(oklch(0.5 0.02 260), oklch(0.7 0.02 260));
    }
  }

  .automation-schedule-fields {
    display: grid;
    gap: 0.75rem;
    margin-block-start: 0.75rem;
  }

  .automation-step-card {
    border: 1px dashed light-dark(oklch(0.85 0.02 260), oklch(0.35 0.02 260));
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .automation-condition-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: light-dark(oklch(0.97 0.005 260), oklch(0.24 0.02 260));
  }

  .automation-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 1.5rem;
    padding: 1rem 0;
    border-block-start: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
    background: light-dark(oklch(0.99 0.005 260 / 0.92), oklch(0.16 0.02 260 / 0.92));
    backdrop-filter: blur(8px);
  }

  .automation-form-error {
    margin: 0;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    color: light-dark(oklch(0.45 0.15 25), oklch(0.85 0.12 25));
    background: light-dark(oklch(0.95 0.04 25), oklch(0.28 0.06 25));
  }
}
qasima-manage-app .automations-form-view {
  display: block;
  container-type: inline-size;
  padding-block-end: 5rem;
}

qasima-manage-app .automation-form-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-block-end: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
  background: light-dark(oklch(0.99 0.005 260), oklch(0.22 0.02 260));
}

qasima-manage-app .automation-form-hero-kicker {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: light-dark(oklch(0.5 0.02 260), oklch(0.72 0.02 260));
}

qasima-manage-app .automation-form-hero-title {
  margin: 0.25rem 0 0;
  font-size: 1.35rem;
  font-weight: 600;
}

qasima-manage-app .automation-form-hero-meta {
  margin: 0.35rem 0 0;
}

qasima-manage-app .automation-form-key {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  color: light-dark(oklch(0.45 0.02 260), oklch(0.75 0.02 260));
}

qasima-manage-app .automation-form-enabled-toggle {
  min-width: 8rem;
}

qasima-manage-app .automation-form-section {
  margin-block-end: 1.75rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
  background: light-dark(oklch(1 0 0), oklch(0.2 0.02 260));

  .automation-form-section-title {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
}

qasima-manage-app .automation-trigger-readonly {
  .automation-trigger-label {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
  }

  .automation-trigger-type {
    margin: 0.35rem 0 0;
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    color: light-dark(oklch(0.5 0.02 260), oklch(0.7 0.02 260));
  }
}

qasima-manage-app .automation-schedule-fields {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 0.75rem;
}

qasima-manage-app .automation-condition-row {
  display: grid;
  gap: 0.5rem;
  margin-block-end: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: light-dark(oklch(0.97 0.005 260), oklch(0.24 0.02 260));
}

@container (min-width: 40rem) {
  qasima-manage-app .automation-condition-row {
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: end;
  }
}

qasima-manage-app .automation-step-card {
  display: grid;
  gap: 0.75rem;
  margin-block-end: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px dashed light-dark(oklch(0.85 0.02 260), oklch(0.35 0.02 260));
}

qasima-manage-app .automation-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1.5rem;
  padding: 1rem 0;
  border-block-start: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.28 0.02 260));
  background: light-dark(oklch(0.99 0.005 260 / 0.92), oklch(0.16 0.02 260 / 0.92));
  backdrop-filter: blur(8px);
}

qasima-manage-app .automation-form-error {
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  color: light-dark(oklch(0.45 0.15 25), oklch(0.85 0.12 25));
  background: light-dark(oklch(0.95 0.04 25), oklch(0.28 0.06 25));
}
.currencies-edit-layout {
  container-type: inline-size;
}
.balance-currency-conversion-preview {
  .balance-currency-conversion-preview__hint {
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
    font-size: 0.8125rem;
    margin: 0;
  }

  .balance-currency-conversion-preview__sample {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 1rem;
  }

  .balance-currency-conversion-preview__sample-label {
    font-size: 0.8125rem;
    font-weight: 500;
  }

  .balance-currency-conversion-preview__sample-input {
    width: 5.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid light-dark(oklch(85% 0.01 260), oklch(35% 0.02 260));
    border-radius: 0.375rem;
    background: light-dark(oklch(100% 0 0), oklch(22% 0.02 260));
    color: inherit;
    font: inherit;
  }

  .balance-currency-conversion-preview__empty {
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
    font-size: 0.875rem;
    margin: 0;
  }

  .balance-currency-conversion-preview__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .balance-currency-conversion-preview__card {
    padding: 0.75rem;
    border-radius: 0.375rem;
    background: light-dark(oklch(100% 0 0), oklch(24% 0.02 260));
    border: 1px solid light-dark(oklch(92% 0.01 260), oklch(28% 0.02 260));
  }

  .balance-currency-conversion-preview__card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    margin-block-end: 0.5rem;
  }

  .balance-currency-conversion-preview__currency {
    font-weight: 600;
    font-size: 0.875rem;
  }

  .balance-currency-conversion-preview__currency-name {
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
    font-size: 0.8125rem;
  }

  .balance-currency-conversion-preview__ratios {
    color: light-dark(oklch(40% 0.02 260), oklch(75% 0.02 260));
    font-size: 0.75rem;
    margin-block-end: 0.5rem;
  }

  .balance-currency-conversion-preview__flow {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .balance-currency-conversion-preview__flow-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
  }

  .balance-currency-conversion-preview__flow-label {
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
    min-width: 3.5rem;
  }

  .balance-currency-conversion-preview__flow-value {
    font-variant-numeric: tabular-nums;
  }

  .balance-currency-conversion-preview__source {
    color: light-dark(oklch(50% 0.03 260), oklch(68% 0.02 260));
    font-size: 0.6875rem;
    text-transform: lowercase;
  }
}
.balance-currency-conversions-editor {
  display: block;
  container-type: inline-size;
}

.balance-currency-conversions-editor__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 3.25rem) minmax(0, 3.25rem) min-content;
  gap: 0.4rem 0.45rem;
  align-items: end;
  margin-block-end: 0.5rem;

  q-form-select {
    display: block;
    min-width: 0;
  }

  .balance-currency-conversions-editor__label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
  }

  q-button {
    align-self: end;
    margin-block-end: 0.15rem;
  }
}

.balance-currency-conversions-editor__label-text {
  color: light-dark(oklch(35% 0.02 260), oklch(85% 0.02 260));
  font-size: 0.8125rem;
  font-weight: 500;
}

.balance-currency-conversions-editor__input {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.45rem 0.5rem;
  border: 1px solid light-dark(oklch(85% 0.01 260), oklch(35% 0.02 260));
  border-radius: 0.375rem;
  background: light-dark(oklch(100% 0 0), oklch(22% 0.02 260));
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
}

.balance-currency-conversions-editor__add {
  margin-block-start: 0.15rem;
}
.currency-form-section {
  display: grid;
  gap: 0.5rem;
  margin-block-end: 1.25rem;
}

.currency-form-section__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.currency-form-section__subtitle {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
}

.currency-form-section__row {
  min-width: 0;
}

.currency-form-section__row--pair {
  display: grid;
  gap: 0.5rem 0.65rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  q-form-field,
  q-form-number {
    display: block;
    min-width: 0;
  }
}

.currency-form-section__name-fields {
  display: grid;
  gap: 0.5rem 0.65rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-width: 0;

  q-form-text-locales {
    display: block;
    min-width: 0;
  }
}
.store-taxes-sections {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.store-tax-region-list {
  margin-block-start: 0;
}

.store-tax-chip-link {
  text-decoration: none;
  color: inherit;

  &:hover {
    border-color: light-dark(oklch(0.72 0.12 250), oklch(0.55 0.12 250));
    background: light-dark(oklch(0.97 0.02 250), oklch(0.26 0.04 250));
  }
}
.product-units-settings-form {
  display: grid;
  gap: 1rem;

  .product-units-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .product-units-list-row {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.45rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
  }

  .product-units-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
  }

  .product-units-list-code {
    font-size: 0.875rem;
    font-weight: 600;
    font-family: ui-monospace, monospace;
  }

  .product-units-list-default-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  }

  .product-units-list-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;

    q-form-text {
      flex: 1 1 10rem;
    }
  }
}
.product-identifiers-settings-form {
  display: grid;
  gap: 1rem;

  .product-identifiers-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .product-identifiers-list-row {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.45rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
  }

  .product-identifiers-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
  }

  .product-identifiers-list-code {
    font-size: 0.875rem;
    font-weight: 600;
    font-family: ui-monospace, monospace;
  }

  .product-identifiers-list-label {
    font-size: 0.875rem;
    color: light-dark(oklch(40% 0 0), oklch(75% 0 0));
  }

  .product-identifiers-list-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: auto;
  }

  .product-identifiers-list-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;

    q-form-text {
      flex: 1 1 10rem;
    }
  }
}
.catalog-taxonomies-settings-form {
  display: grid;
  gap: 1rem;

  .catalog-taxonomies-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .catalog-taxonomies-list-row {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.45rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
  }

  .catalog-taxonomies-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
  }

  .catalog-taxonomies-list-code {
    font-size: 0.875rem;
    font-weight: 600;
    font-family: ui-monospace, monospace;
  }

  .catalog-taxonomies-list-label {
    font-size: 0.875rem;
    color: light-dark(oklch(40% 0 0), oklch(75% 0 0));
  }

  .catalog-taxonomies-list-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: auto;
  }

  .catalog-taxonomies-list-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;

    q-form-text {
      flex: 1 1 10rem;
    }
  }
}
.currency-rates-settings {
  display: block;

  .currency-rates-settings-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 40rem;
  }

  .currency-rate-overrides {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .currency-rate-overrides-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
  }

  .currency-rate-overrides-hint {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
  }

  .currency-rate-override-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .currency-rate-override-row {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 0.75rem;
    align-items: end;
  }

  .currency-rate-override-code {
    font-size: 0.875rem;
    font-weight: 600;
    padding-bottom: 0.65rem;
  }
}
.store-checkout-documents-settings {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  .store-checkout-documents-panel {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(17% 0 0));
  }

  .store-checkout-documents-panel-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .store-checkout-documents-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
  }

  .store-checkout-tax-invoice-template {
    max-width: 28rem;
  }

  .store-checkout-documents-tax-invoice-hint {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  }

  .store-checkout-documents-workspace {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
  }

  .store-checkout-documents-workspace-grid {
    display: grid;
    grid-template-columns: minmax(10.5rem, 13.5rem) minmax(18rem, 26rem) minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
  }

  .store-checkout-documents-workspace-body {
    .store-checkout-documents-policy-stack {
      grid-column: 1 / 3;
      min-width: 0;
    }

    .store-checkout-documents-flow-preview {
      grid-column: 3;
      grid-row: 1;
      min-width: 0;
    }
  }

  .store-checkout-documents-stack-grid {
    display: grid;
    grid-template-columns: minmax(10.5rem, 13.5rem) minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
  }

  .store-checkout-documents-flow-preview-toolbar-fallback {
    display: none;
    justify-content: flex-end;
  }

  .store-checkout-documents-flow-preview-body {
    min-width: 0;
    overflow-x: auto;

    .store-checkout-flow-diagram {
      margin: 0;
    }
  }

  .store-checkout-documents-eval-grid {
    display: grid;
    grid-template-columns: minmax(10.5rem, 13.5rem) minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
  }

  .store-checkout-documents-columns-head {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
    padding-bottom: 0.15rem;
    border-bottom: 1px solid light-dark(oklch(92% 0 0), oklch(26% 0 0));

    .store-checkout-documents-flow-preview-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.35rem;
      min-width: 0;
      text-transform: none;
      letter-spacing: normal;
      font-weight: normal;
    }

    .store-checkout-documents-flow-preview-label {
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
    }
  }

  .store-checkout-documents-policy-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
  }

  .store-checkout-documents-policy-list-items {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .store-checkout-documents-policy-pick {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    width: 100%;
    padding: 0.5rem 0.55rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(88% 0 0), oklch(30% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(19% 0 0));
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;

    &[data-selected="true"] {
      border-color: light-dark(oklch(55% 0.12 250), oklch(68% 0.1 250));
      background: light-dark(oklch(95% 0.04 250), oklch(22% 0.04 250));
    }

    &.is-fallback[data-selected="true"] {
      border-color: light-dark(oklch(52% 0.08 250), oklch(55% 0.06 250));
    }
  }

  .store-checkout-documents-policy-pick-priority {
    flex-shrink: 0;
    min-width: 1.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: light-dark(oklch(50% 0 0), oklch(68% 0 0));
  }

  .store-checkout-documents-policy-pick-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .store-checkout-documents-policy-pick-label {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .store-checkout-documents-policy-pick-when {
    font-size: 0.68rem;
    line-height: 1.35;
    color: light-dark(oklch(44% 0 0), oklch(72% 0 0));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .store-checkout-documents-policy-list-actions {
    display: flex;
    justify-content: center;
    padding-top: 0.35rem;
    border-top: 1px dashed light-dark(oklch(88% 0 0), oklch(32% 0 0));

    q-button {
      min-width: 2.25rem;
    }
  }

  .store-checkout-documents-policy-config {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem;
    border-radius: 0.45rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(18% 0 0));

    q-form-disclosure-select {
      display: block;
    }
  }

  .store-checkout-documents-policy-config-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .store-checkout-documents-policy-config-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
  }

  .store-checkout-documents-policy-config-when {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.35;
    color: light-dark(oklch(42% 0 0), oklch(74% 0 0));
  }

  .store-checkout-documents-policy-preview-summary {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
  }

  .store-checkout-documents-template-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .store-checkout-documents-template-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  }

  .store-checkout-documents-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .store-checkout-documents-override-conditions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
    padding: 0.65rem;
    border: 0;
    border-radius: 0.45rem;
    background: light-dark(oklch(97% 0.01 250), oklch(20% 0.02 250));
  }

  .store-checkout-documents-override-conditions-desc {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: light-dark(oklch(42% 0 0), oklch(72% 0 0));
  }

  .store-checkout-documents-override-conditions-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 1fr;

    @container (min-width: 22rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .store-checkout-documents-preset-chip {
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(86% 0 0), oklch(32% 0 0));
    background: light-dark(oklch(98% 0 0), oklch(22% 0 0));
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    color: inherit;

    &[data-active="true"] {
      border-color: light-dark(oklch(55% 0.12 250), oklch(72% 0.1 250));
      background: light-dark(oklch(94% 0.04 250), oklch(26% 0.04 250));
    }
  }

  .store-checkout-documents-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  .store-checkout-documents-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
  }

  .store-checkout-flow-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
  }

  :where(.store-checkout-flow-preview-mode-toggle, .store-checkout-flow-layout-toggle) {
    display: inline-flex;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(86% 0 0), oklch(32% 0 0));
    overflow: hidden;

    button {
      padding: 0.3rem 0.55rem;
      border: 0;
      background: light-dark(oklch(98% 0 0), oklch(22% 0 0));
      font: inherit;
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      color: inherit;

      &[data-active="true"] {
        background: light-dark(oklch(55% 0.12 250), oklch(42% 0.08 250));
        color: light-dark(oklch(99% 0 0), oklch(96% 0 0));
      }

      &:not([data-active="true"]):hover {
        background: light-dark(oklch(94% 0 0), oklch(26% 0 0));
      }
    }
  }
}

@container (max-width: 56rem) {
  .store-checkout-documents-settings .store-checkout-documents-workspace-grid,
  .store-checkout-documents-settings .store-checkout-documents-columns-head.store-checkout-documents-workspace-grid {
    grid-template-columns: 1fr;
  }

  .store-checkout-documents-settings .store-checkout-documents-workspace-body {
    .store-checkout-documents-policy-stack,
    .store-checkout-documents-flow-preview {
      grid-column: auto;
      grid-row: auto;
    }
  }

  .store-checkout-documents-settings .store-checkout-documents-stack-grid {
    grid-template-columns: 1fr;
  }

  .store-checkout-documents-settings .store-checkout-documents-eval-grid,
  .store-checkout-documents-settings .store-checkout-documents-columns-head.store-checkout-documents-eval-grid {
    grid-template-columns: 1fr;
  }

  .store-checkout-documents-settings .store-checkout-documents-columns-head {
    display: none;
  }

  .store-checkout-documents-settings .store-checkout-documents-flow-preview-toolbar-fallback {
    display: flex;
    margin-bottom: 0.5rem;
  }
}
.store-checkout-documents-settings {
  .checkout-mixed-preview-section-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .checkout-mixed-preview-section-desc {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    max-width: 48rem;
    opacity: 0.9;
  }

  .checkout-mixed-preview-stack {
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    background: light-dark(oklch(0.99 0.005 260), oklch(0.17 0.02 260));
  }

  .checkout-mixed-preview-stack-head {
    margin-bottom: 0.65rem;
  }

  .checkout-mixed-preview-stack-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .checkout-mixed-preview-stack-item {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.45rem 0.55rem;
    border-radius: 0.45rem;
    border: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.34 0.02 260));
    background: light-dark(oklch(1 0 0), oklch(0.2 0.02 260));

    &.is-fallback {
      opacity: 0.92;
    }
  }

  .checkout-mixed-preview-stack-priority {
    flex-shrink: 0;
    min-width: 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.7;
    text-align: center;
  }

  .checkout-mixed-preview-stack-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .checkout-mixed-preview-stack-label {
    font-size: 0.82rem;
    font-weight: 600;
  }

  .checkout-mixed-preview-stack-when {
    font-size: 0.72rem;
    opacity: 0.78;
  }

  .checkout-mixed-preview-settlement {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.3 0.02 260));
  }

  .checkout-mixed-preview-settlement-shipped {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    opacity: 0.82;
  }

  .checkout-mixed-preview-settlement-groups {
    margin: 0.65rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.55rem;
  }

  .checkout-mixed-preview-settlement-card {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.6rem 0.65rem;
    border-radius: 0.55rem;
    border: 1px solid light-dark(oklch(0.85 0.03 145), oklch(0.32 0.04 145));
    background: light-dark(oklch(0.98 0.02 145), oklch(0.19 0.03 145));
  }

  .checkout-mixed-preview-settlement-kicker {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
  }

  .checkout-mixed-preview-settlement-title {
    font-size: 0.88rem;
    font-weight: 600;
  }

  .checkout-mixed-preview-settlement-intent,
  .checkout-mixed-preview-settlement-customer {
    font-size: 0.72rem;
    opacity: 0.8;
    line-height: 1.35;
  }

  .checkout-mixed-preview-settlement-lines {
    margin: 0.35rem 0 0;
    padding: 0 0 0 1rem;
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .checkout-mixed-preview-settlement-flow {
    margin-top: 0.45rem;
    overflow-x: auto;

    .store-checkout-flow-diagram {
      margin: 0;
    }
  }

  .checkout-mixed-preview-board {
    margin-bottom: 1.25rem;
  }

  .checkout-mixed-preview-board-head {
    margin-bottom: 0.65rem;
  }

  .checkout-mixed-preview-order {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.55rem;
    border: 1px solid light-dark(oklch(0.82 0.04 250), oklch(0.38 0.06 250));
    background: light-dark(oklch(0.97 0.02 250), oklch(0.22 0.04 250));
    text-align: left;
  }

  .checkout-mixed-preview-order-flow {
    width: 100%;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid light-dark(oklch(0.88 0.02 250), oklch(0.34 0.04 250));
    overflow-x: auto;

    .store-checkout-flow-diagram {
      margin: 0;
    }
  }

  .checkout-mixed-preview-order-kicker,
  .checkout-mixed-preview-fulfillment-kicker {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
  }

  .checkout-mixed-preview-order-title,
  .checkout-mixed-preview-fulfillment-title {
    font-size: 0.88rem;
    font-weight: 600;
  }

  .checkout-mixed-preview-order-summary {
    font-size: 0.78rem;
    opacity: 0.85;
  }

  .checkout-mixed-preview-order-note {
    font-size: 0.72rem;
    opacity: 0.75;
    line-height: 1.4;

    &.checkout-mixed-preview-order-scope {
      opacity: 0.65;
    }
  }

  .checkout-mixed-preview-fulfillments {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.55rem;
  }

  .checkout-mixed-preview-fulfillment {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0.6rem 0.65rem;
    border-radius: 0.55rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.35 0.02 260));
    background: light-dark(oklch(1 0 0), oklch(0.19 0.02 260));
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;

    &.is-active {
      border-color: light-dark(oklch(0.55 0.14 250), oklch(0.62 0.12 250));
    }

    &.is-dimmed {
      opacity: 0.72;
    }
  }

  .checkout-mixed-preview-fulfillment-sub {
    font-size: 0.72rem;
    opacity: 0.75;
  }

  .checkout-mixed-preview-fulfillment-lines {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .checkout-mixed-preview-line {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding-top: 0.25rem;
    border-top: 1px solid light-dark(oklch(0.92 0.01 260), oklch(0.3 0.02 260));

    &:first-child {
      border-top: none;
      padding-top: 0;
    }
  }

  .checkout-mixed-preview-line-label {
    font-size: 0.78rem;
    font-weight: 600;
  }

  .checkout-mixed-preview-line-rule {
    font-size: 0.7rem;
    opacity: 0.8;
  }

  .checkout-mixed-preview-board-foot {
    margin: 0.55rem 0 0;
    font-size: 0.72rem;
    opacity: 0.8;
  }

  .checkout-mixed-preview-timeline {
    padding: 0.75rem 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    background: light-dark(oklch(0.99 0.005 260), oklch(0.17 0.02 260));
  }

  .checkout-mixed-preview-timeline-diagram {
    min-width: 0;
    overflow-x: auto;

    .store-checkout-flow-diagram {
      margin: 0;
    }
  }

  .checkout-mixed-preview-column-flow {
    margin-bottom: 0.5rem;
  }

  .checkout-mixed-preview-column-flow-diagram {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    background: light-dark(oklch(0.99 0.005 260), oklch(0.17 0.02 260));
    overflow-x: auto;
  }

  .checkout-mixed-preview-line-bands {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
  }

  .checkout-mixed-preview-line-band {
    padding: 0.4rem 0.45rem;
    border-radius: 0.45rem;
    border: 1px dashed light-dark(oklch(0.78 0.03 260), oklch(0.42 0.03 260));
    background: light-dark(oklch(0.995 0.005 260), oklch(0.19 0.02 260));

    .store-checkout-flow-node-list {
      margin-top: 0.25rem;
    }

    &.is-shared {
      border-style: solid;
      border-color: light-dark(oklch(0.86 0.02 260), oklch(0.36 0.02 260));
      background: light-dark(oklch(0.99 0.005 260), oklch(0.18 0.02 260));
    }
  }

  .checkout-mixed-preview-line-band-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.3;
    opacity: 0.82;
  }

  .checkout-mixed-preview-line-band-detail,
  .checkout-mixed-preview-line-band-kicker {
    display: block;
    font-size: 0.65rem;
    line-height: 1.35;
    opacity: 0.72;
  }

  .checkout-mixed-preview-line-band.is-settlement {
    border-color: light-dark(oklch(0.72 0.06 145), oklch(0.42 0.05 145));
    background: light-dark(oklch(0.98 0.02 145), oklch(0.19 0.03 145));
  }

  .store-checkout-flow-node.is-fulfillment-tax-invoice {
    border-width: 2px;
    border-color: light-dark(oklch(0.72 0.08 55), oklch(0.55 0.08 55));
  }

  .checkout-mixed-preview-invoice-bands {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.35rem;
    padding-top: 0.4rem;
    border-top: 1px dashed light-dark(oklch(0.82 0.02 260), oklch(0.38 0.02 260));
  }

  .checkout-mixed-preview-invoice-bands-kicker {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.65;
  }

  .checkout-mixed-preview-line-band.is-tax-invoice-fulfillment {
    border-color: light-dark(oklch(0.75 0.07 55), oklch(0.45 0.06 55));
    background: light-dark(oklch(0.99 0.02 55), oklch(0.2 0.03 55));
  }

  .checkout-mixed-preview-line-band.is-fulfillment-episode {
    border-color: light-dark(oklch(0.72 0.05 260), oklch(0.4 0.04 260));
  }
}
.store-checkout-documents-settings {
  .checkout-policy-match-conditions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .checkout-policy-match-conditions-empty {
    margin: 0;
    font-size: 0.76rem;
    opacity: 0.8;
    line-height: 1.4;
  }

  .checkout-policy-match-conditions-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .checkout-policy-match-condition-row {
    display: grid;
    grid-template-columns: minmax(6rem, 1fr) minmax(8rem, 1.4fr) auto;
    gap: 0.35rem;
    align-items: center;
    padding: 0.4rem 0.45rem;
    border-radius: 0.45rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.34 0.02 260));
    background: light-dark(oklch(0.99 0.005 260), oklch(0.19 0.02 260));
  }

  .checkout-policy-match-condition-row.checkout-policy-setting-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding-inline-end: 1.75rem;

    q-form-disclosure-select.checkout-policy-setting-value {
      display: block;
      width: 100%;
      min-width: 0;

      q-form-field-label label {
        font-size: 0.72rem;
        font-weight: 600;
      }
    }

    .checkout-policy-match-condition-remove {
      position: absolute;
      inset-block-start: 0.4rem;
      inset-inline-end: 0.45rem;
      margin: 0;
    }
  }

  .checkout-policy-match-condition-label {
    font-size: 0.72rem;
    font-weight: 600;
  }

  .checkout-policy-match-condition-value {
    width: 100%;
    font-size: 0.78rem;
    padding: 0.25rem 0.35rem;
    border-radius: 0.35rem;
    border: 1px solid light-dark(oklch(0.85 0.02 260), oklch(0.38 0.02 260));
    background: light-dark(oklch(1 0 0), oklch(0.22 0.02 260));
  }

  .checkout-policy-match-condition-row.is-money-threshold {
    grid-template-columns: minmax(5rem, 0.9fr) minmax(0, 2fr) auto;
  }

  .checkout-policy-match-condition-money {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    min-width: 0;
  }

  .checkout-policy-match-condition-money-amount {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1 1 6rem;
    min-width: 0;
  }

  .checkout-policy-match-condition-money-currency {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.72;
  }

  .checkout-policy-match-condition-money-input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .checkout-policy-match-condition-boolean {
    font-size: 0.72rem;
    opacity: 0.75;
  }

  .checkout-policy-match-condition-remove {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
    padding: 0.15rem 0.35rem;
  }

  .checkout-policy-match-conditions-add-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
    margin-bottom: 0.25rem;
  }

  .checkout-policy-match-conditions-add-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .checkout-policy-match-conditions-add-button {
    font-size: 0.72rem;
    padding: 0.28rem 0.45rem;
    border-radius: 0.4rem;
    border: 1px dashed light-dark(oklch(0.78 0.03 260), oklch(0.42 0.03 260));
    background: light-dark(oklch(0.99 0.005 260), oklch(0.18 0.02 260));
    cursor: pointer;
  }
}
q-form-disclosure-select {
  display: block;

  .disclosure-select {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .disclosure-select-control {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.34 0.02 260));
    background: light-dark(oklch(0.99 0.005 260), oklch(0.22 0.02 260));

    &.is-disabled {
      opacity: 0.65;
      pointer-events: none;
    }
  }

  .disclosure-select-summary {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
  }

  .disclosure-select-summary-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: start;
  }

  .disclosure-select-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.25rem;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    cursor: pointer;
    color: inherit;

    &:hover {
      background: light-dark(oklch(0.95 0.01 260), oklch(0.28 0.02 260));
    }

    &:focus-visible {
      outline: 2px solid light-dark(oklch(0.55 0.18 255), oklch(0.72 0.14 255));
      outline-offset: 2px;
    }
  }

  .disclosure-select-chevron {
    display: block;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-inline-end: 1.5px solid light-dark(oklch(0.55 0 0), oklch(0.65 0 0));
    border-block-end: 1.5px solid light-dark(oklch(0.55 0 0), oklch(0.65 0 0));
    rotate: 45deg;
    translate: 0 -15%;
    transition: rotate 120ms ease;
  }

  .disclosure-select-control.is-expanded .disclosure-select-chevron {
    rotate: -135deg;
    translate: 0 10%;
  }

  .disclosure-select-option-label {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .disclosure-select-option-description {
    font-size: 0.76rem;
    line-height: 1.4;
    color: light-dark(oklch(0.46 0 0), oklch(0.72 0 0));
  }

  .disclosure-select-options {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0 0.5rem 0.5rem;
    list-style: none;
    border-block-start: 1px solid light-dark(oklch(0.9 0 0), oklch(0.3 0 0));
    padding-block-start: 0.5rem;
  }

  .disclosure-select-option-item {
    margin: 0;
    padding: 0;
  }

  .disclosure-select-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    padding: 0.6rem 0.65rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.3 0 0));
    background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
    font: inherit;
    text-align: start;
    color: inherit;
    cursor: pointer;

    &:hover {
      border-color: light-dark(oklch(0.72 0.04 255), oklch(0.48 0.04 255));
    }

    &[aria-selected="true"] {
      border-color: light-dark(oklch(0.55 0.14 255), oklch(0.68 0.12 255));
      box-shadow: 0 0 0 1px light-dark(oklch(0.55 0.14 255), oklch(0.68 0.12 255));
    }

    &:focus-visible {
      outline: 2px solid light-dark(oklch(0.55 0.18 255), oklch(0.72 0.14 255));
      outline-offset: 2px;
    }
  }
}
.store-checkout-flow-diagram {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  border: 0;

  .store-checkout-flow-diagram-caption {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
  }

  .store-checkout-flow-diagram-caption-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
  }

  .store-checkout-flow-layout-toggle {
    display: inline-flex;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(86% 0 0), oklch(32% 0 0));
    overflow: hidden;

    button {
      padding: 0.3rem 0.55rem;
      border: 0;
      background: light-dark(oklch(98% 0 0), oklch(22% 0 0));
      font: inherit;
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      color: inherit;

      &[data-active="true"] {
        background: light-dark(oklch(55% 0.12 250), oklch(42% 0.08 250));
        color: light-dark(oklch(99% 0 0), oklch(96% 0 0));
      }

      &:not([data-active="true"]):hover {
        background: light-dark(oklch(94% 0 0), oklch(26% 0 0));
      }
    }
  }

  &.is-stage-rows {
    .store-checkout-flow-stage-grid {
      grid-template-columns: 1fr;
    }

    .store-checkout-flow-stage {
      min-height: auto;
    }
  }

  .store-checkout-flow-diagram-title {
    font-weight: 600;
    font-size: 0.95rem;
  }

  .store-checkout-flow-diagram-subtitle {
    font-size: 0.8rem;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
    line-height: 1.35;
  }

  .store-checkout-flow-stage-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(7.5rem, 1fr));
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  &.is-compact {
    .store-checkout-flow-stage-grid {
      grid-template-columns: repeat(5, minmax(6.5rem, 1fr));
    }

    .store-checkout-flow-stage {
      padding: 0.5rem;
    }

    .store-checkout-flow-node {
      padding: 0.35rem 0.45rem;
      font-size: 0.72rem;
    }
  }
}

.store-checkout-flow-stage {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 6rem;
  padding: 0.65rem;
  border-radius: 0.45rem;
  border: 1px solid light-dark(oklch(88% 0 0), oklch(30% 0 0));
  background: light-dark(oklch(99% 0 0), oklch(17% 0 0));
}

.store-checkout-flow-stage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
}

.store-checkout-flow-stage-heading {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.store-checkout-flow-stage-phases {
  font-size: 0.62rem;
  line-height: 1.35;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: light-dark(oklch(48% 0.02 250), oklch(68% 0.02 250));
}

.store-checkout-flow-stage-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: light-dark(oklch(42% 0 0), oklch(75% 0 0));
}

.store-checkout-flow-stage-count {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: light-dark(oklch(94% 0 0), oklch(24% 0 0));
  color: light-dark(oklch(48% 0 0), oklch(70% 0 0));
}

.store-checkout-flow-node-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-checkout-flow-node {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.35rem;
  border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
  background: light-dark(oklch(100% 0 0), oklch(20% 0 0));
  font-size: 0.78rem;
  line-height: 1.3;

  &.is-empty {
    align-items: center;
    justify-content: center;
    color: light-dark(oklch(70% 0 0), oklch(45% 0 0));
    font-style: italic;
    min-height: 2.5rem;
  }

  &.is-emphasis {
    border-color: light-dark(oklch(62% 0.12 250), oklch(68% 0.1 250));
    box-shadow: inset 0 0 0 1px light-dark(oklch(62% 0.12 250), oklch(68% 0.1 250));
  }

  &.is-muted {
    opacity: 0.72;
    border-style: dashed;
  }

  &.is-payment {
    background: light-dark(oklch(97% 0.03 145), oklch(22% 0.04 145));
  }

  &.is-email {
    background: light-dark(oklch(97% 0.03 280), oklch(22% 0.04 280));
  }

  &.is-document {
    background: light-dark(oklch(97% 0.04 55), oklch(22% 0.05 55));
  }

  &.is-manual {
    background: light-dark(oklch(97% 0.02 25), oklch(22% 0.03 25));
  }

  &.is-system {
    background: light-dark(oklch(96% 0 0), oklch(21% 0 0));
  }
}

.store-checkout-flow-node-kind {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: light-dark(oklch(50% 0 0), oklch(68% 0 0));
}

.store-checkout-flow-node-label {
  font-weight: 600;
}

.store-checkout-flow-node-detail {
  font-size: 0.68rem;
  color: light-dark(oklch(46% 0 0), oklch(72% 0 0));
}

.store-checkout-flow-lane-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.store-checkout-flow-lane-stack-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.store-checkout-flow-lane-stack-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.store-checkout-flow-lane-stack-subtitle {
  margin: 0;
  font-size: 0.82rem;
  color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  line-height: 1.4;
  max-width: 42rem;
}

.store-checkout-flow-lane-stack-rows {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

@container (max-width: 52rem) {
  .store-checkout-flow-diagram .store-checkout-flow-stage-grid {
    grid-template-columns: repeat(5, minmax(6.25rem, 1fr));
  }
}
.store-order-workflow-settings {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  .store-order-workflow-section {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .store-order-workflow-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .store-order-workflow-stage-nav-tag {
    display: inline-block;
    margin-inline-start: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: lowercase;
    border: 1px solid light-dark(oklch(78% 0.08 250), oklch(42% 0.06 250));
    color: light-dark(oklch(38% 0.1 250), oklch(82% 0.06 250));
  }

  .store-order-workflow-chip {
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    border: 1px solid light-dark(oklch(86% 0 0), oklch(32% 0 0));
    background: light-dark(oklch(98% 0 0), oklch(20% 0 0));
  }

  .store-order-workflow-stage-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    font-size: 0.9rem;
    color: light-dark(oklch(45% 0 0), oklch(75% 0 0));
  }

  .store-order-workflow-stages-split {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
    min-height: 14rem;

    @container (min-width: 40rem) {
      grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
      align-items: start;
    }
  }

  .store-order-workflow-stage-nav {
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    background: light-dark(oklch(98% 0 0), oklch(17% 0 0));
    max-height: min(28rem, 70vh);
    overflow: auto;
  }

  .store-order-workflow-stage-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
  }

  .store-order-workflow-stage-nav-item {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;

    &:hover {
      background: light-dark(oklch(95% 0 0), oklch(22% 0 0));
    }

    &.is-selected {
      border-color: light-dark(oklch(78% 0.06 250), oklch(42% 0.06 250));
      background: light-dark(oklch(96% 0.02 250), oklch(24% 0.03 250));
    }

    &.is-off-board {
      opacity: 0.72;
    }
  }

  .store-order-workflow-stage-nav-index {
    flex: 0 0 1.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
    padding-top: 0.1rem;
  }

  .store-order-workflow-stage-nav-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }

  .store-order-workflow-stage-nav-name {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .store-order-workflow-stage-nav-phase {
    font-size: 0.68rem;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .store-order-workflow-stage-detail {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(18% 0 0));
  }

  .store-order-workflow-stage-detail-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid light-dark(oklch(92% 0 0), oklch(26% 0 0));
  }

  .store-order-workflow-stage-detail-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
  }

  .store-order-workflow-stage-detail-meta {
    margin: 0;
    font-size: 0.75rem;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
  }

  .store-order-workflow-stage-detail-phase-hint {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: light-dark(oklch(42% 0 0), oklch(72% 0 0));
  }

  .store-order-workflow-stage-detail-flags {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .store-order-workflow-stage-detail-flags-lede {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: light-dark(oklch(42% 0 0), oklch(72% 0 0));
  }

  .store-order-workflow-phase-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;

    th,
    td {
      text-align: left;
      padding: 0.45rem 0.55rem;
      border-bottom: 1px solid light-dark(oklch(92% 0 0), oklch(28% 0 0));
      vertical-align: top;
    }

    th {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
    }

    code {
      font-size: 0.78rem;
    }
  }

  .store-order-workflow-transitions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;

    li {
      padding: 0.3rem 0.45rem;
      border-radius: 0.35rem;
      background: light-dark(oklch(96% 0 0), oklch(19% 0 0));
    }
  }

  .store-order-workflow-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .store-order-workflow-more {
    font-size: 0.88rem;

    summary {
      cursor: pointer;
      font-weight: 600;
    }
  }

  .store-order-workflow-more-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.65rem;
  }

  .store-order-workflow-board-mini {
    display: grid;
    gap: 0.85rem;
    max-width: 36rem;

    @container (min-width: 36rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .store-order-workflow-phase-details {
    font-size: 0.85rem;

    summary {
      cursor: pointer;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
  }

  .store-order-workflow-section-compact {
    padding-top: 0.25rem;
  }

  .store-order-workflow-profile-select {
    max-width: 22rem;
  }

  .store-order-workflow-profile-editor {
    min-height: 12rem;
  }

  .store-order-workflow-column-detail {
    .store-order-workflow-stage-detail-meta {
      line-height: 1.45;
    }
  }
}
.store-order-workflow-stage-chip-picker {
  display: block;
  margin: 0;
  padding: 0;
  border: none;

  legend {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: light-dark(oklch(40% 0.02 260), oklch(75% 0.02 260));
  }

  .store-order-workflow-stage-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .store-order-workflow-stage-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(84% 0 0), oklch(34% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(20% 0 0));
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.25;
    color: inherit;
    cursor: pointer;

    &:hover {
      border-color: light-dark(oklch(72% 0.04 250), oklch(42% 0.04 250));
      background: light-dark(oklch(96% 0.02 250), oklch(24% 0.02 250));
    }

    &.is-selected {
      border-color: light-dark(oklch(58% 0.1 250), oklch(62% 0.1 250));
      background: light-dark(oklch(94% 0.04 250), oklch(28% 0.05 250));
      font-weight: 600;
    }
  }

  .store-order-workflow-stage-chip-empty {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(55% 0.02 260), oklch(65% 0.02 260));
  }
}
.store-order-reference-settings {
  container-type: inline-size;
  display: block;

  .store-order-reference-loading {
    margin: 1rem 0;
  }

  .store-order-reference-workspace {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .store-order-reference-workspace-head {
    display: grid;
    grid-template-columns: minmax(10.5rem, 13.5rem) minmax(22rem, 2fr) minmax(15rem, 20rem);
    gap: 1rem 1.25rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
    padding-bottom: 0.15rem;
    border-bottom: 1px solid light-dark(oklch(92% 0 0), oklch(26% 0 0));
  }

  .store-order-reference-workspace-body {
    display: grid;
    grid-template-columns: minmax(10.5rem, 13.5rem) minmax(22rem, 2fr) minmax(15rem, 20rem);
    gap: 1rem 1.25rem;
    align-items: start;
  }

  .store-order-reference-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(17% 0 0));
    min-width: 0;
  }

  .store-order-reference-wordlists-shell {
    grid-column: 1 / -1;
    padding: 0;
    border: none;
    background: transparent;
    min-width: 0;
  }

  .store-order-reference-policy-list-items {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .store-order-reference-policy-pick {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    width: 100%;
    padding: 0.5rem 0.55rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(88% 0 0), oklch(30% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(19% 0 0));
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;

    &[data-selected="true"] {
      border-color: light-dark(oklch(55% 0.12 250), oklch(68% 0.1 250));
      background: light-dark(oklch(95% 0.04 250), oklch(22% 0.04 250));
    }
  }

  .store-order-reference-policy-pick-priority {
    flex-shrink: 0;
    min-width: 1.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: light-dark(oklch(50% 0 0), oklch(68% 0 0));
  }

  .store-order-reference-policy-pick-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .store-order-reference-policy-pick-label {
    font-size: 0.8rem;
    font-weight: 600;
  }

  .store-order-reference-policy-pick-when {
    font-size: 0.68rem;
    line-height: 1.35;
    color: light-dark(oklch(44% 0 0), oklch(72% 0 0));
  }

  .store-order-reference-policy-list-actions {
    display: flex;
    justify-content: center;
    padding-top: 0.35rem;
    margin-top: 0.35rem;
    border-top: 1px dashed light-dark(oklch(88% 0 0), oklch(32% 0 0));
  }

  .store-order-reference-config {
    padding: 0.75rem;
  }

  .store-order-reference-config-grid {
    display: grid;
    grid-template-columns: minmax(9.5rem, 11.5rem) minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
  }

  .store-order-reference-kind-nav {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
  }

  .store-order-reference-kind-nav-group-label {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
  }

  .store-order-reference-kind-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
  }

  .store-order-reference-kind-pick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(88% 0 0), oklch(30% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(19% 0 0));
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;

    &[data-selected="true"] {
      border-color: light-dark(oklch(55% 0.12 250), oklch(68% 0.1 250));
      background: light-dark(oklch(95% 0.04 250), oklch(22% 0.04 250));
    }
  }

  .store-order-reference-kind-pick-label {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .store-order-reference-kind-pick-meta {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.12rem 0.35rem;
    border-radius: 999px;
    color: light-dark(oklch(42% 0.02 260), oklch(82% 0.02 260));
    background: light-dark(oklch(93% 0.02 260), oklch(28% 0.03 260));
  }

  .store-order-reference-kind-pick[data-live="true"] .store-order-reference-kind-pick-meta {
    color: light-dark(oklch(38% 0.08 145), oklch(88% 0.06 145));
    background: light-dark(oklch(93% 0.04 145), oklch(26% 0.05 145));
  }

  .store-order-reference-kind-editor {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.75rem;
    border-radius: 0.45rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(18% 0 0));
  }

  .store-order-reference-kind-editor-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid light-dark(oklch(92% 0 0), oklch(26% 0 0));
  }

  .store-order-reference-kind-editor-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
  }

  .store-order-reference-kind-editor-desc {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: light-dark(oklch(44% 0 0), oklch(72% 0 0));
  }

  .store-order-reference-kind-status {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    color: light-dark(oklch(42% 0.02 260), oklch(82% 0.02 260));
    background: light-dark(oklch(94% 0.02 260), oklch(28% 0.03 260));

    &[data-live="true"] {
      color: light-dark(oklch(38% 0.08 145), oklch(88% 0.06 145));
      background: light-dark(oklch(93% 0.04 145), oklch(26% 0.05 145));
    }
  }

  .store-order-reference-override-match {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: none;
    margin: 0;
    padding: 0;
  }

  .store-order-reference-profile-editor {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .store-order-reference-profile-meta {
    display: grid;
    gap: 0.75rem;
    border: none;
    margin: 0;
    padding: 0;

    @container (min-width: 36rem) {
      grid-template-columns: 1fr 1fr;
    }

    legend {
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 0.35rem;
    }
  }

  .store-order-reference-segment-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(19% 0 0));
  }

  .store-order-reference-segment-list-head {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;

    h5 {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 600;
    }
  }

  .store-order-reference-segment-list-hint {
    margin: 0;
    font-size: 0.75rem;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  }

  .store-order-reference-segment-add-row {
    display: grid;
    gap: 0.5rem;
    align-items: end;

    @container (min-width: 28rem) {
      grid-template-columns: 1fr auto;
    }
  }

  .store-order-reference-segments {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .store-order-reference-segment-empty {
    margin: 0;
    padding: 0.65rem;
    font-size: 0.8rem;
    color: light-dark(oklch(48% 0 0), oklch(70% 0 0));
    border-radius: 0.35rem;
    border: 1px dashed light-dark(oklch(88% 0 0), oklch(32% 0 0));
  }

  .store-order-reference-segment-row {
    display: flex;
    align-items: stretch;
    gap: 0.45rem;

    &.is-dragging {
      opacity: 0.55;
    }

    &.is-drag-over .store-order-reference-segment-card {
      border-color: light-dark(oklch(55% 0.14 255), oklch(65% 0.14 255));
      box-shadow: inset 0 0 0 1px light-dark(oklch(55% 0.14 255), oklch(65% 0.14 255));
    }
  }

  .store-order-reference-segment-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.65rem;
    flex-shrink: 0;
    margin-block-start: 0.35rem;
    border: none;
    border-radius: 0.35rem;
    background: transparent;
    color: light-dark(oklch(58% 0.02 260), oklch(62% 0.02 260));
    cursor: grab;
    touch-action: none;
    user-select: none;

    &::before {
      content: "";
      display: block;
      inline-size: 0.42rem;
      block-size: 0.9rem;
      background: currentColor;
      opacity: 0.55;
      border-radius: 0.12rem;
      box-shadow:
        0 -0.32rem 0 currentColor,
        0 0.32rem 0 currentColor;
    }

    &:active {
      cursor: grabbing;
    }
  }

  .store-order-reference-segment-card {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
  }

  .store-order-reference-segment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .store-order-reference-segment-type-readonly {
    flex: 1 1 12rem;
    min-width: 10rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .store-order-reference-segment-type-readonly-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: light-dark(oklch(48% 0 0), oklch(70% 0 0));
  }

  .store-order-reference-segment-type-readonly-value {
    display: block;
    padding: 0.5rem 0.65rem;
    border-radius: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    color: light-dark(oklch(32% 0 0), oklch(92% 0 0));
    background: light-dark(oklch(96% 0 0), oklch(24% 0 0));
    border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
  }

  .store-order-reference-segment-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    color: light-dark(oklch(42% 0.02 260), oklch(88% 0.02 260));
    background: light-dark(oklch(94% 0.02 260), oklch(30% 0.03 260));
  }

  .store-order-reference-segment-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    margin-inline-start: auto;
  }

  .store-order-reference-segment-fields {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .store-order-reference-segment-inline {
    display: grid;
    gap: 0.65rem;

    @container (min-width: 22rem) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .store-order-reference-segment-summary {
    margin: 0.5rem 0 0;
    padding-block-start: 0.35rem;
    border-block-start: 1px solid light-dark(oklch(93% 0 0), oklch(26% 0 0));
    font-size: 0.75rem;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  }

  .store-order-reference-preview-shell {
    position: sticky;
    top: 0.75rem;
    align-self: start;
  }

  .store-order-reference-preview-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
  }

  .store-order-reference-preview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.5rem;
  }

  .store-order-reference-preview-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: capitalize;
  }

  .store-order-reference-preview-kind {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    color: light-dark(oklch(42% 0.02 260), oklch(88% 0.02 260));
    background: light-dark(oklch(94% 0.02 260), oklch(28% 0.03 260));
  }

  .store-order-reference-preview-hint {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  }

  .store-order-reference-preview-context {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.65rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(19% 0 0));
  }

  .store-order-reference-preview-results {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .store-order-reference-preview-result {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.65rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(21% 0 0));
  }

  .store-order-reference-preview-result-api {
    gap: 0.55rem;
  }

  .store-order-reference-preview-result-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .store-order-reference-preview-result-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: light-dark(oklch(48% 0 0), oklch(70% 0 0));
  }

  .store-order-reference-preview-result-note {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.35;
    color: light-dark(oklch(44% 0 0), oklch(72% 0 0));
  }

  .store-order-reference-preview-result-values {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .store-order-reference-preview-result-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    dt {
      margin: 0;
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
    }

    dd {
      margin: 0;

      code {
        display: block;
        padding: 0.35rem 0.45rem;
        border-radius: 0.3rem;
        font-size: 0.82rem;
        line-height: 1.35;
        word-break: break-all;
        background: light-dark(oklch(96% 0 0), oklch(16% 0 0));
        border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
      }
    }
  }

  .store-order-reference-preview-result-empty {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  }

  .store-order-reference-preview-result-api q-button {
    margin-block-start: 0.15rem;
  }

  .store-order-reference-wordlists-panel {
    display: block;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    background: light-dark(oklch(100% 0 0), oklch(17% 0 0));
    min-width: 0;
  }

  .store-order-reference-wordlists-head {
    margin-block-end: 0.75rem;
  }

  .store-order-reference-wordlists-title {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
  }

  .store-order-reference-wordlists-desc {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: light-dark(oklch(42% 0 0), oklch(72% 0 0));
  }

  .store-order-reference-wordlists-layout {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  .store-order-reference-wordlists-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  .store-order-reference-wordlists-list-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .store-order-reference-wordlists-pick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(88% 0 0), oklch(30% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(19% 0 0));
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .store-order-reference-wordlists-pick[data-selected="true"] {
    border-color: light-dark(oklch(55% 0.12 250), oklch(62% 0.14 250));
    background: light-dark(oklch(97% 0.02 250), oklch(22% 0.04 250));
  }

  .store-order-reference-wordlists-pick-name {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
  }

  .store-order-reference-wordlists-pick-meta {
    font-size: 0.68rem;
    color: light-dark(oklch(48% 0 0), oklch(68% 0 0));
  }

  .store-order-reference-wordlists-editor {
    min-width: 0;
  }

  .store-order-reference-wordlists-empty {
    margin: 0;
    font-size: 0.78rem;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));
  }

  .store-order-reference-wordlists-editor-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }

  .store-order-reference-wordlists-words {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
  }

  .store-order-reference-wordlists-words-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .store-order-reference-wordlists-words-head h5 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
  }

  .store-order-reference-wordlists-bulk {
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.4rem;
    border: 1px dashed light-dark(oklch(85% 0 0), oklch(32% 0 0));
    background: light-dark(oklch(98.5% 0 0), oklch(16% 0 0));
  }

  .store-order-reference-wordlists-entry-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .store-order-reference-wordlists-entry-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: start;
  }

  .store-order-reference-wordlists-entry-index {
    padding-block-start: 1.65rem;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: light-dark(oklch(50% 0 0), oklch(65% 0 0));
  }

  .store-order-reference-wordlists-entry-input {
    min-width: 0;
  }

  .store-order-reference-wordlists-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-block-start: 0.25rem;
  }

  @container (max-width: 52rem) {
    .store-order-reference-workspace-head {
      display: none;
    }

    .store-order-reference-workspace-body {
      grid-template-columns: 1fr;
    }

    .store-order-reference-config-grid {
      grid-template-columns: 1fr;
    }

    .store-order-reference-wordlists-layout {
      grid-template-columns: 1fr;
    }
  }
}
.store-cart-hold-settings {
  .store-cart-hold-settings-head {
    margin-bottom: var(--space-lg, 1.5rem);
  }

  .store-cart-hold-settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 1rem);
    max-width: 28rem;
  }

  .store-cart-hold-settings-off-note {
    margin: 0;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
    font-size: var(--text-sm, 0.875rem);
  }
}
.store-stock-policy-settings {
  .store-stock-policy-settings-head {
    margin-bottom: var(--space-lg, 1.5rem);
  }

  .store-stock-policy-settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 1rem);
    max-width: 28rem;
  }
}
.store-product-field-set-form {
  display: block;

  .store-product-field-set-form-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .store-product-field-set-form-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .store-product-field-set-form-field-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.99 0 0), oklch(0.2 0 0));
  }

  .store-product-field-set-form-field-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .store-product-field-set-form-field-head-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
  }

  .store-product-field-set-form-reorder {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .store-product-field-set-switch-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  .store-product-field-set-switch-row-label {
    font-size: 0.9375rem;
  }

  .store-product-field-set-form-text-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .store-product-field-set-form-text-subsection {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .store-product-field-set-form-panel-hidden {
    display: none !important;
  }

  .store-product-field-set-form-field-grid {
    display: grid;
    gap: 0.75rem;

    @container (min-width: 36rem) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .store-product-field-set-form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .store-product-field-set-form-choice-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px dashed light-dark(oklch(0.82 0 0), oklch(0.38 0 0));
  }

  .store-product-field-set-form-choice-options-label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .store-product-field-set-form-choice-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.5rem 0.75rem;

    .store-product-field-set-form-choice-option-fields {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      min-width: 0;
    }
  }

  .store-product-field-set-form-choice-option-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
}

.store-product-detail-snippet-detail-view {
  display: block;

  .store-product-detail-snippet-body {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.5;
  }

  .store-product-detail-snippet-faq {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    li {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    p {
      margin: 0;
    }
  }
}
.store-product-field-set-editor-layout {
  container-type: inline-size;
  display: grid;
  gap: 1.5rem;
  align-items: start;

  @container (min-width: 58rem) {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  }

  .store-product-field-set-editor-main {
    display: grid;
    gap: 1rem;
    min-inline-size: 0;
  }

  .store-product-field-set-editor-aside {
    min-inline-size: 0;
  }

  &.store-product-field-set-editor-layout--companion {
    @container (min-width: 58rem) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

.store-product-field-set-preview-panel {
  container-type: inline-size;
  display: grid;
  gap: 0.65rem;
  align-content: start;

  .store-product-field-set-preview-panel-head {
    display: grid;
    gap: 0.5rem;
  }

  .store-product-field-set-preview-panel-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
    text-transform: lowercase;
  }

  .store-product-field-set-preview-panel-note {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: light-dark(oklch(0.48 0 0), oklch(0.72 0 0));
  }

  .store-product-field-set-preview-sim-row {
    display: grid;
    gap: 0.35rem;
  }

  .store-product-field-set-preview-sim-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: light-dark(oklch(0.48 0.02 260), oklch(0.72 0.02 260));
  }

  .store-product-field-set-preview-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .store-product-field-set-preview-tab {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid light-dark(oklch(0.86 0 0), oklch(0.34 0 0));
    background: light-dark(oklch(0.99 0 0), oklch(0.22 0 0));
    font-size: 0.75rem;
    cursor: pointer;

    &.is-selected {
      border-color: light-dark(oklch(0.55 0.12 260), oklch(0.62 0.1 260));
      background: light-dark(oklch(0.94 0.04 260), oklch(0.28 0.05 260));
    }
  }

  .store-product-field-set-preview-frame {
    border-radius: 0.75rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.995 0 0), oklch(0.19 0 0));
    padding: 0.85rem;
  }

  .store-product-field-set-preview-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .store-product-field-set-preview-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.5 0 0), oklch(0.7 0 0));
  }

  .store-product-field-set-preview-multi-label {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .store-product-field-set-preview-optional {
    margin-inline-start: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: light-dark(oklch(0.52 0 0), oklch(0.68 0 0));
  }

  .store-product-field-set-preview-multi-options {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .store-product-field-set-preview-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .store-product-field-set-preview-color-swatch {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.34 0 0));
    background: transparent;
    cursor: pointer;
    max-width: 5.5rem;
  }

  .store-product-field-set-preview-color-swatch-chip {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--swatch-color, oklch(0.5 0 0));
    border: 1px solid light-dark(oklch(0.75 0 0 / 0.5), oklch(0.4 0 0 / 0.6));
  }

  .store-product-field-set-preview-color-swatch-label {
    font-size: 0.6875rem;
    line-height: 1.2;
    text-align: center;
    color: light-dark(oklch(0.45 0 0), oklch(0.74 0 0));
  }
}
.store-price-rule-form-view {
  container-type: inline-size;

  q-form {
    max-width: 36rem;
  }

  .store-price-rule-form-fields {
    display: grid;
    gap: 1rem;
  }

  .store-price-rule-kind-fixed {
    display: grid;
    gap: 0.35rem;
  }

  .store-price-rule-kind-fixed-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: light-dark(oklch(0.45 0.02 260), oklch(0.72 0.02 260));
  }

  .store-price-rule-kind-fixed-value {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: light-dark(oklch(0.22 0 0), oklch(0.94 0 0));
  }

  .store-price-rule-kind-fixed-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.5 0.02 260), oklch(0.65 0.02 260));
  }

  .store-price-rule-matchers {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.35 0.02 260));
    background: light-dark(oklch(0.98 0.005 260), oklch(0.22 0.02 260));

    .entity-detail-section-title {
      margin: 0;
    }
  }

  .store-price-rule-switch-row-wrap {
    display: grid;
    gap: 0.35rem;
  }

  .store-price-rule-switch-row {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;

    q-form-switch {
      display: inline-flex;
    }

    .store-price-rule-switch-row-label {
      font-size: 0.9375rem;
      font-weight: 500;
      color: light-dark(oklch(0.28 0 0), oklch(0.92 0 0));
    }
  }

  .store-price-rule-context-pickers {
    display: grid;
    gap: 1rem;
  }

  .store-price-rule-schedule-grid {
    display: grid;
    gap: 0.75rem;

    @container (min-width: 32rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .store-price-rule-adjustments {
    display: grid;
    gap: 0.75rem;
  }

  .store-price-rule-config-panel {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid light-dark(oklch(0.9 0.01 260), oklch(0.35 0.02 260));
    background: light-dark(oklch(0.98 0.005 260), oklch(0.22 0.02 260));
  }
}
.store-tax-region-edit-footer {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-block-start: 2rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
}

.store-tax-region-edit-block {
  gap: 0.75rem;
}

.store-tax-region-edit-list {
  margin-block-start: 0;
}
.store-orders-detail-view {
  container-type: inline-size;

  .store-orders-detail-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1rem;
  }

  .store-orders-detail-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: light-dark(oklch(94% 0 0), oklch(28% 0 0));
    color: light-dark(oklch(30% 0 0), oklch(90% 0 0));
  }

  .store-orders-detail-fulfillment-list {
    display: grid;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .store-orders-detail-fulfillment {
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.4rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(20% 0 0));
  }

  .store-orders-detail-fulfillment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
  }

  .store-orders-detail-acceptance-note {
    margin-block-start: 0.35rem;
  }

  .store-orders-detail-stage-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.25rem;
  }

  .store-orders-detail-stage-select {
    font: inherit;
    min-inline-size: 10rem;
  }

  .store-orders-detail-lines {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;

    th,
    td {
      padding: 0.4rem 0.5rem;
      border-block-end: 1px solid light-dark(oklch(92% 0 0), oklch(28% 0 0));
      text-align: start;
    }

    th {
      font-size: 0.75rem;
      font-weight: 600;
      color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
    }
  }

  .store-orders-detail-line-title {
    font-weight: 500;
  }

  .store-orders-detail-line-breakdown {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: light-dark(oklch(42% 0 0), oklch(74% 0 0));
  }

  .store-orders-detail-line-breakdown-item {
    display: grid;
    gap: 0.1rem 0.75rem;

    @container (min-width: 28rem) {
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: baseline;
    }
  }

  .store-orders-detail-line-breakdown-label {
    font-weight: 500;
    color: light-dark(oklch(35% 0 0), oklch(82% 0 0));
  }

  .store-orders-detail-line-breakdown-amount,
  .store-orders-detail-line-breakdown-tax {
    white-space: nowrap;
  }

  .store-orders-detail-facts {
    display: grid;
    gap: 0.5rem 1rem;
    margin: 0;

    @container (min-width: 36rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .store-orders-detail-fact {
    display: grid;
    gap: 0.15rem;

    dt {
      margin: 0;
      font-size: 0.75rem;
      font-weight: 600;
      color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
      text-transform: lowercase;
    }

    dd {
      margin: 0;
      font-size: 0.9375rem;
      color: light-dark(oklch(22% 0 0), oklch(92% 0 0));
    }
  }

  .store-orders-detail-edit-form {
    display: grid;
    gap: 0.65rem;
    max-inline-size: 28rem;

    label {
      display: grid;
      gap: 0.25rem;
      font-size: 0.8125rem;
      font-weight: 600;
      color: light-dark(oklch(40% 0 0), oklch(75% 0 0));
    }

    input,
    select {
      font: inherit;
      padding: 0.4rem 0.5rem;
      border-radius: 0.35rem;
      border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
      background: light-dark(oklch(100% 0 0), oklch(18% 0 0));
      color: inherit;
    }
  }

  .store-orders-detail-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.25rem;
  }

  .store-orders-detail-invoice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 0.5rem;
  }

  .store-orders-detail-invoice-preview {
    white-space: pre-wrap;
    font-size: 0.75rem;
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.35rem;
    background: light-dark(oklch(97% 0 0), oklch(16% 0 0));
    border: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
    overflow: auto;
  }
}
.store-order-messages-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  container-type: inline-size;

  .store-order-messages-section__lede {
    margin: 0;
    font-size: 0.8125rem;
    opacity: 0.85;
    line-height: 1.45;
  }

  .store-order-messages-section__thread {
    display: flex;
    flex-direction: column;
    min-height: 16rem;
    max-height: min(32rem, 60vh);
    overflow: hidden;
    border: 1px solid light-dark(oklch(0.88 0.01 260), oklch(0.32 0.02 260));
    border-radius: 0.5rem;
    background: light-dark(oklch(0.98 0.008 260), oklch(0.14 0.02 260));

    .messaging-conversation-pane {
      flex: 1;
      min-height: 0;
    }

    .messaging-conversation-pane__header {
      display: none;
    }
  }
}
.store-emails-template-view {
  container-type: inline-size;
  display: grid;
  gap: 1.25rem;

  > p:first-child a {
    color: light-dark(oklch(0.45 0.12 255), oklch(0.72 0.14 255));
    font-size: 0.875rem;
    text-decoration: none;
  }

  .store-emails-template-header {
    display: grid;
    gap: 0.35rem;

    h1 {
      margin: 0;
      font-size: 1.375rem;
      font-weight: 600;
    }

    p {
      margin: 0;
      font-size: 0.875rem;
      color: light-dark(oklch(0.48 0.02 260), oklch(0.72 0.01 260));
    }
  }

  .store-emails-template-meta {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
    background: light-dark(oklch(99% 0 0), oklch(20% 0 0));

    label {
      display: grid;
      gap: 0.35rem;
      min-inline-size: 0;

      > span {
        font-size: 0.8125rem;
        font-weight: 500;
        color: light-dark(oklch(0.42 0.02 260), oklch(0.75 0.02 260));
      }

      input {
        box-sizing: border-box;
        inline-size: 100%;
        margin: 0;
        padding: 0.5rem 0.65rem;
        border-radius: 0.4rem;
        border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
        background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
        color: inherit;
        font: inherit;
        font-size: 0.875rem;

        &:disabled {
          opacity: 0.72;
          cursor: not-allowed;
        }
      }
    }
  }

  @container (min-width: 40rem) {
    .store-emails-template-meta {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }
  }

  .store-emails-template-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid light-dark(oklch(90% 0 0), oklch(28% 0 0));
  }

  .store-emails-template-test {
    display: grid;
    gap: 0.35rem;
    flex: 1 1 14rem;
    min-inline-size: min(100%, 18rem);
    max-inline-size: 24rem;

    > span {
      font-size: 0.8125rem;
      font-weight: 500;
      color: light-dark(oklch(0.42 0.02 260), oklch(0.75 0.02 260));
    }

    input {
      box-sizing: border-box;
      inline-size: 100%;
      margin: 0;
      padding: 0.5rem 0.65rem;
      border-radius: 0.4rem;
      border: 1px solid light-dark(oklch(85% 0 0), oklch(35% 0 0));
      background: light-dark(oklch(100% 0 0), oklch(22% 0 0));
      color: inherit;
      font: inherit;
      font-size: 0.875rem;
    }
  }
}
.pdf-template-designer {
  container-type: inline-size;
  display: grid;
  gap: 1.25rem;
  align-items: start;

  @container (min-width: 52rem) {
    grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr);
  }

  .pdf-template-designer__slots {
    display: grid;
    gap: 0.75rem;
    align-content: start;

    h2 {
      margin: 0;
      font-size: 1.125rem;
      font-weight: 700;
    }

    label {
      display: grid;
      gap: 0.35rem;
      font-size: 0.875rem;
      color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
    }

    input[type="text"] {
      box-sizing: border-box;
      inline-size: 100%;
      padding: 0.45rem 0.6rem;
      border-radius: 0.5rem;
      border: 1px solid light-dark(oklch(0.86 0 0), oklch(0.34 0 0));
      background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
      color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
    }
  }

  .pdf-template-designer__readonly {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
  }

  .pdf-template-designer__main {
    display: grid;
    gap: 0.75rem;
    min-inline-size: 0;
  }

  .pdf-template-designer__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  .pdf-template-designer__preview {
    box-sizing: border-box;
    display: grid;
    align-content: start;
    gap: 0.35rem;
    inline-size: 100%;
    min-block-size: min(78vh, 52rem);
    border-radius: 0.75rem;
    border: 1px solid light-dark(oklch(0.86 0 0), oklch(0.34 0 0));
    background: light-dark(oklch(0.96 0.01 260), oklch(0.2 0.01 260));
    padding: 0.75rem;
    overflow: auto;

    p {
      margin: 0;
      color: light-dark(oklch(0.45 0 0), oklch(0.75 0 0));
    }

    .pdf-template-designer__preview-error {
      color: light-dark(oklch(0.45 0.14 25), oklch(0.78 0.12 25));
      font-weight: 600;
    }

    .pdf-template-designer__status {
      font-size: 0.875rem;
      padding-inline: 0.25rem;
    }

    .pdf-template-designer__hint {
      font-size: 0.8125rem;
      color: light-dark(oklch(0.42 0 0), oklch(0.72 0 0));
      padding-inline: 0.25rem;
    }

    .pdf-template-designer__open-link {
      font-size: 0.875rem;
      padding-block: 0.25rem;
    }

    .pdf-template-designer__text-action {
      display: inline;
      padding: 0;
      margin: 0;
      border: none;
      background: none;
      font: inherit;
      color: light-dark(oklch(0.45 0.14 250), oklch(0.72 0.1 250));
      text-decoration: underline;
      cursor: pointer;
    }
  }

  .pdf-template-designer__page-frame {
    position: relative;
    inline-size: min(100%, 36rem);
    margin-inline: auto;
    box-shadow: 0 0.15rem 0.75rem light-dark(oklch(0 0 0 / 0.08), oklch(0 0 0 / 0.35));
    background: light-dark(oklch(0.99 0 0), oklch(0.14 0 0));
    touch-action: none;
  }

  .pdf-template-designer__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .pdf-template-designer__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: auto;
    cursor: default;
    background: transparent;

    .pdf-template-designer__box {
      position: absolute;
      box-sizing: border-box;
      border: 1px dashed light-dark(oklch(0.55 0.12 250 / 0.85), oklch(0.72 0.1 250 / 0.9));
      pointer-events: auto;
      cursor: move;
    }

    .pdf-template-designer__box--selected {
      border-style: solid;
      border-width: 2px;
      border-color: light-dark(oklch(0.5 0.16 250), oklch(0.75 0.12 250));
    }

    .pdf-template-designer__handle {
      position: absolute;
      inline-size: 0.55rem;
      block-size: 0.55rem;
      border-radius: 0.15rem;
      background: light-dark(oklch(0.5 0.16 250), oklch(0.78 0.12 250));
      border: 1px solid light-dark(oklch(1 0 0), oklch(0.2 0 0));
      pointer-events: auto;
    }

    .pdf-template-designer__handle[data-handle="nw"] {
      inset-block-start: -0.35rem;
      inset-inline-start: -0.35rem;
      cursor: nwse-resize;
    }

    .pdf-template-designer__handle[data-handle="ne"] {
      inset-block-start: -0.35rem;
      inset-inline-end: -0.35rem;
      cursor: nesw-resize;
    }

    .pdf-template-designer__handle[data-handle="sw"] {
      inset-block-end: -0.35rem;
      inset-inline-start: -0.35rem;
      cursor: nesw-resize;
    }

    .pdf-template-designer__handle[data-handle="se"] {
      inset-block-end: -0.35rem;
      inset-inline-end: -0.35rem;
      cursor: nwse-resize;
    }
  }
}
.platform-document-settings {
  container-type: inline-size;
  display: grid;
  gap: 1rem;

  .platform-document-settings__intro {
    margin: 0;
    font-size: 0.9375rem;
    color: light-dark(oklch(0.38 0 0), oklch(0.8 0 0));
  }

  .platform-document-settings__grid {
    display: grid;
    gap: 1.25rem;
    align-items: start;

    @container (min-width: 52rem) {
      grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr);
    }
  }

  .platform-document-settings__form {
    display: grid;
    gap: 0.85rem;

    h2 {
      margin: 0;
      font-size: 1.125rem;
      font-weight: 700;
    }

    label {
      display: grid;
      gap: 0.35rem;
      font-size: 0.875rem;
    }

    input[type="text"],
    textarea {
      box-sizing: border-box;
      inline-size: 100%;
      padding: 0.45rem 0.6rem;
      border-radius: 0.5rem;
      border: 1px solid light-dark(oklch(0.86 0 0), oklch(0.34 0 0));
      background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
      color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
      font: inherit;
    }
  }

  .platform-document-settings__hint {
    font-size: 0.8125rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
  }

  .platform-document-settings__readonly {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
  }

  .platform-document-settings__save {
    justify-self: start;
    padding: 0.5rem 0.9rem;
    border-radius: 0.5rem;
    border: none;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    background: light-dark(oklch(0.32 0.08 265), oklch(0.62 0.12 265));
    color: light-dark(oklch(0.98 0 0), oklch(0.12 0 0));
  }

  .platform-document-settings__error {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(0.48 0.14 25), oklch(0.72 0.12 25));
  }

  .platform-document-settings__preview {
    display: grid;
    gap: 0.65rem;
    min-inline-size: 0;
    justify-items: center;
  }

  .platform-document-settings__preview-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    max-inline-size: 40rem;

    h2 {
      margin: 0;
      font-size: 1.125rem;
      font-weight: 700;
    }
  }

  .platform-document-settings__download {
    padding: 0.45rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(0.86 0 0), oklch(0.34 0 0));
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
    background: light-dark(oklch(1 0 0), oklch(0.22 0 0));
  }

  .platform-document-settings__preview-frame {
    display: grid;
    place-items: start center;
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 40rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.97 0 0), oklch(0.16 0 0));

    canvas {
      display: block;
      max-inline-size: 100%;
      box-shadow: 0 0.35rem 1.25rem light-dark(oklch(0 0 0 / 12%), oklch(0 0 0 / 45%));
    }
  }
}
.store-promotions-detail-view {
  .store-promotions-bulk-panel {
    display: grid;
    gap: 0.75rem;
    max-inline-size: 22rem;
    padding: 1rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.5rem;
    background: light-dark(oklch(0.98 0 0), oklch(0.2 0 0));
  }

  .store-promotions-detail-codes {
    display: grid;
    gap: 0.75rem;
  }

  .store-promotions-detail-codes-table-wrap {
    overflow-x: auto;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.5rem;
    background: light-dark(oklch(1 0 0), oklch(0.18 0 0));
  }

  .store-promotions-detail-codes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;

    th,
    td {
      padding: 0.625rem 0.75rem;
      text-align: start;
      vertical-align: middle;
      border-block-end: 1px solid light-dark(oklch(0.92 0 0), oklch(0.28 0 0));
    }

    th {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: lowercase;
      color: light-dark(oklch(0.45 0 0), oklch(0.68 0 0));
      background: light-dark(oklch(0.97 0 0), oklch(0.22 0 0));
    }

    tbody tr:last-child td {
      border-block-end: none;
    }

    code {
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
  }

  .store-promotions-detail-code-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
  }

  .store-promotions-detail-status-pill {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: lowercase;
    background: light-dark(oklch(0.94 0 0), oklch(0.28 0 0));
    color: light-dark(oklch(0.35 0 0), oklch(0.85 0 0));

    &.is-disabled {
      background: light-dark(oklch(0.92 0.02 25), oklch(0.32 0.04 25));
      color: light-dark(oklch(0.45 0.08 25), oklch(0.82 0.06 25));
    }

    &.is-active {
      background: light-dark(oklch(0.93 0.04 145), oklch(0.28 0.06 145));
      color: light-dark(oklch(0.38 0.1 145), oklch(0.85 0.08 145));
    }
  }
}
.store-products-new-wizard-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.store-products-new-wizard-hint {
  color: light-dark(oklch(48% 0.02 260), oklch(72% 0.02 260));
  font-size: 0.85rem;
  margin: 0;
}

.store-products-wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.store-products-wizard-steps li {
  color: light-dark(oklch(55% 0.02 260), oklch(70% 0.02 260));
  font-size: 0.85rem;
}

.store-products-wizard-steps li.is-active {
  color: light-dark(oklch(30% 0.04 260), oklch(92% 0.02 260));
  font-weight: 600;
}

.store-products-wizard-panel h2 {
  margin-top: 0;
}

.store-products-wizard-choices {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  margin-bottom: 1rem;
}

.store-products-wizard-choice {
  background: light-dark(oklch(98% 0.01 260), oklch(22% 0.02 260));
  border: 1px solid light-dark(oklch(88% 0.02 260), oklch(35% 0.02 260));
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  text-align: left;
}

.store-products-wizard-choice-label {
  font-weight: 600;
}

.store-products-wizard-choice-hint {
  color: light-dark(oklch(48% 0.02 260), oklch(72% 0.02 260));
  font-size: 0.85rem;
}

.store-products-wizard-summary {
  font-size: 0.9rem;
}

.store-products-wizard-note {
  color: light-dark(oklch(48% 0.02 260), oklch(72% 0.02 260));
  font-size: 0.85rem;
}

.store-products-wizard-back {
  background: none;
  border: none;
  color: light-dark(oklch(40% 0.06 260), oklch(75% 0.04 260));
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
}
:where(.store-products-new-type-view, .store-products-detail-view) {
  .store-product-image-preview {
    display: grid;
    gap: 0.5rem;
    margin-block: 0.5rem 1rem;
  }

  .store-product-image-preview img {
    width: min(16rem, 100%);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.96 0 0), oklch(0.24 0 0));
  }

  .store-product-image-preview-caption {
    font-size: 0.875rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
  }

  .store-product-form-advanced {
    margin-block: 0.5rem 1rem;
    border-block-end: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
    padding-block-end: 0.75rem;
  }

  .store-product-form-advanced__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
    margin: 0 0 0.75rem;
  }

  .store-product-form-advanced__fields {
    display: grid;
    gap: 0.75rem;
    padding-block-start: 0.25rem;
  }

  .store-product-fulfillment-section {
    display: grid;
    gap: 0.75rem;
    container-type: inline-size;
  }

  .store-product-fulfillment-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: light-dark(oklch(0.28 0 0), oklch(0.92 0 0));
  }

  .store-product-fulfillment-section__lede {
    margin: 0;
  }

  .store-product-fulfillment-section__field {
    display: grid;
    gap: 0.25rem;
  }

  .store-product-fulfillment-section__label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: light-dark(oklch(0.32 0 0), oklch(0.88 0 0));
  }

  .store-product-fulfillment-section__label select,
  .store-product-fulfillment-section__label input[type="number"] {
    font: inherit;
    font-weight: 400;
    padding: 0.45rem 0.55rem;
    border-radius: 0.375rem;
    border: 1px solid light-dark(oklch(0.82 0 0), oklch(0.38 0 0));
    background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
    color: light-dark(oklch(0.22 0 0), oklch(0.94 0 0));
  }

}
.store-products-detail-view {
  container-type: inline-size;

  .store-product-hero {
    display: grid;
    gap: 1rem;
    margin-block-end: 1.25rem;

    @container (min-width: 40rem) {
      grid-template-columns: 8rem minmax(0, 1fr);
      align-items: start;
    }
  }

  .store-product-hero-image {
    inline-size: 100%;
    max-inline-size: 8rem;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.96 0 0), oklch(0.24 0 0));
  }

  .store-product-hero-placeholder {
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    color: light-dark(oklch(0.55 0 0), oklch(0.68 0 0));
  }

  .store-product-hero-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
  }

  .store-product-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    margin-block: 0.35rem 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.48 0 0), oklch(0.72 0 0));
  }

  .store-product-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-weight: 600;
    text-transform: lowercase;
    background: light-dark(oklch(0.93 0.03 145), oklch(0.28 0.04 145));
    color: light-dark(oklch(0.38 0.06 145), oklch(0.82 0.04 145));
  }

  .store-product-bundle-lines {
    display: grid;
    gap: 0.65rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .store-product-bundle-line {
    padding: 0.75rem 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.99 0 0), oklch(0.21 0 0));
  }

  .store-product-bundle-line-name {
    font-weight: 600;
    color: light-dark(oklch(0.35 0.08 250), oklch(0.78 0.06 250));
    text-decoration: none;
  }

  .store-product-bundle-line-name:hover {
    text-decoration: underline;
  }

  .store-product-bundle-line-meta {
    margin-block-start: 0.25rem;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.48 0 0), oklch(0.72 0 0));
  }

  .store-product-price-cards {
    display: grid;
    gap: 0.65rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .store-product-price-card {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.32 0 0));
    background: light-dark(oklch(0.99 0 0), oklch(0.21 0 0));

    @container (min-width: 36rem) {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }
  }

  .store-product-price-card-amount {
    font-size: 1.05rem;
    font-weight: 700;
  }

  .store-product-price-card-meta {
    font-size: 0.8125rem;
    color: light-dark(oklch(0.48 0 0), oklch(0.72 0 0));
  }

  .store-product-price-card-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
  }

  .store-product-detail-grid {
    display: grid;
    gap: 1.25rem;
  }

  .store-product-permalink-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;

    a {
      word-break: break-all;
    }
  }

  .store-product-permalink-locale {
    display: inline-block;
    min-inline-size: 2.5rem;
    margin-inline-end: 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: light-dark(oklch(50% 0 0), oklch(72% 0 0));
  }

  .store-product-facts {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.875rem;
  }

  .store-product-facts dt {
    font-weight: 600;
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
  }

  .store-product-facts dd {
    margin: 0 0 0.5rem;
  }

  .store-product-catalog-lede {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: light-dark(oklch(0.48 0 0), oklch(0.72 0 0));
  }
}
q-form-text-slug-locales {
  display: block;

  .text-slug-locales-slugs {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-block-start: 0.35rem;
  }

  .text-slug-locales__hiddens {
    display: none;
  }

  .text-slug {
    font-size: 0.75rem;
    color: light-dark(oklch(45% 0 0), oklch(70% 0 0));

    &[data-editing="true"] {
      .text-slug__view {
        display: none;
      }

      .text-slug__input-wrap {
        display: flex;
      }
    }

    &[data-editing="false"] {
      .text-slug__input-wrap {
        display: none;
      }
    }
  }

  .text-slug__view {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
  }

  .text-slug__label {
    font-weight: 600;
    color: light-dark(oklch(38% 0 0), oklch(78% 0 0));
  }

  .text-slug__value {
    font-family: ui-monospace, monospace;
    word-break: break-all;

    &[data-empty="true"] {
      font-style: italic;
      color: light-dark(oklch(62% 0 0), oklch(58% 0 0));
    }
  }

  .text-slug__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: light-dark(oklch(52% 0 0), oklch(68% 0 0));
    cursor: pointer;

    q-icon {
      display: block;
    }

    &:hover {
      color: light-dark(oklch(42% 0 0), oklch(78% 0 0));
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }
  }

  .text-slug__input-wrap {
    margin-block-start: 0.15rem;
  }
}
.store-product-seo-fields {
  display: grid;
  gap: 1rem;

  .store-product-seo-fields__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
  }

  .store-product-seo-fields__lede {
    margin: 0;
    color: light-dark(oklch(45% 0.02 260), oklch(72% 0.02 260));
    font-size: 0.875rem;
  }

  .store-product-seo-fields__image-preview {
    img {
      display: block;
      max-width: 12rem;
      border-radius: 0.5rem;
      border: 1px solid light-dark(oklch(88% 0.01 260), oklch(32% 0.02 260));
    }
  }
}
.store-product-identifiers-editor {
  display: grid;
  gap: 0.75rem;

  .store-product-identifiers-editor-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .store-product-identifiers-editor-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
  }

  .store-product-identifiers-editor-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .store-product-identifiers-editor-row {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 2fr) auto auto;
    align-items: end;
    padding: 0.65rem 0.75rem;
    border-radius: 0.45rem;
    border: 1px solid light-dark(oklch(90% 0 0), oklch(30% 0 0));
  }

  .store-product-identifiers-editor-empty {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(oklch(45% 0 0), oklch(72% 0 0));
  }
}
.store-product-catalog-taxonomies-editor {
  display: grid;
  gap: 1rem;
}

.store-product-catalog-taxonomies-row {
  display: grid;
  gap: 0.35rem;
}

.store-product-catalog-taxonomies-search {
  width: 100%;
}

.store-product-catalog-taxonomies-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.store-product-catalog-taxonomies-option {
  width: 100%;
  text-align: start;
}

.store-product-catalog-taxonomies-empty {
  opacity: 0.7;
}
.store-product-variant-group-lede {
  color: light-dark(oklch(45% 0.02 260), oklch(75% 0.02 260));
  font-size: 0.9rem;
  margin-block: 0 0.75rem;
}

.store-product-variant-group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.store-product-variant-group-siblings {
  margin: 0;
  padding-left: 1.1rem;
}
.store-product-group-editor {
  display: block;
  container-type: inline-size;

  .store-product-group-editor-error {
    margin: 0;
    color: light-dark(oklch(0.45 0.15 25), oklch(0.72 0.12 25));
  }

  .store-product-group-editor-hint {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
  }

  .store-product-group-editor-main {
    display: grid;
    gap: 1rem;
    max-width: 36rem;
  }

  .store-product-group-section h2 {
    font-size: 1.1rem;
    margin: 0;
  }

  .store-product-group-starters {
    display: grid;
    gap: 0.75rem;
  }

  .store-product-group-starter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .store-product-group-starter-button {
    background: light-dark(oklch(0.97 0 0), oklch(0.26 0 0));
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.35 0 0));
    border-radius: 0.5rem;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    padding: 0.65rem 1rem;
  }

  .store-product-group-versions {
    display: grid;
    gap: 0.65rem;
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
  }

  .store-product-group-versions-title {
    font-size: 1rem;
    margin: 0;
  }

  .store-product-group-section {
    display: grid;
    gap: 0.75rem;
    margin-block-end: 1.25rem;
  }

  .store-product-group-section-lede {
    margin: 0;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
    font-size: 0.9rem;
  }

  .store-product-group-i18n {
    display: grid;
    gap: 1rem;
  }

  .store-product-group-matrix-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .store-product-group-matrix-thumb {
    border-radius: 0.25rem;
    flex-shrink: 0;
    height: 2.25rem;
    object-fit: cover;
    width: 2.25rem;

    &.store-product-group-matrix-thumb--empty {
      align-items: center;
      background: light-dark(oklch(0.94 0 0), oklch(0.28 0 0));
      color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
      display: inline-flex;
      font-size: 0.65rem;
      justify-content: center;
    }
  }

  .store-product-group-matrix-label {
    flex: 1;
    min-width: 0;
  }

  .store-product-group-matrix-edit {
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .store-product-group-matrix-default {
    color: light-dark(oklch(0.45 0.08 145), oklch(0.72 0.1 145));
    font-size: 0.8rem;
    font-weight: 600;
  }

  .store-product-group-matrix-action {
    background: none;
    border: none;
    color: light-dark(oklch(0.45 0.1 250), oklch(0.72 0.1 250));
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    padding: 0;
    text-decoration: underline;
  }

  .store-product-group-link-existing {
    display: grid;
    gap: 0.65rem;
    margin-block-start: 1.25rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
  }

  .store-product-group-matrix-status {
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
    font-size: 0.85rem;
  }

  .store-product-group-matrix-checkbox {
    flex-shrink: 0;
  }

  .store-product-group-generate-button {
    display: inline-flex;
    margin-block-start: 0.5rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid light-dark(oklch(0.82 0 0), oklch(0.35 0 0));
    border-radius: 0.35rem;
    background: light-dark(oklch(0.97 0 0), oklch(0.28 0 0));
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  .store-product-group-generate-button:hover {
    background: light-dark(oklch(0.94 0 0), oklch(0.32 0 0));
  }

  .store-product-group-section-heading {
    display: grid;
    gap: 0.35rem;
  }

  .store-product-group-section-lede {
    margin: 0;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
    font-size: 0.9rem;
  }

  .store-product-group-options-empty,
  .store-product-group-options-limit {
    margin: 0;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
    font-size: 0.9rem;
  }

  .store-product-group-option-card {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.5rem;
  }

  .store-product-group-option-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    h3 {
      margin: 0;
      font-size: 1rem;
    }
  }

  .store-product-group-option-values {
    display: grid;
    gap: 0.75rem;

    h4 {
      margin: 0;
      font-size: 0.9rem;
    }
  }

  .store-product-group-option-value-row {
    display: grid;
    gap: 0.5rem;

    @container (min-width: 40rem) {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
    }
  }

  .store-product-group-option-value-fields {
    display: grid;
    gap: 0.5rem;
  }

  .store-product-group-internal-key-field {
    display: grid;
    gap: 0.35rem;
  }

  .store-product-group-internal-key-label {
    font-size: 0.85rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
  }

  .store-product-group-internal-key-input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.35rem;
    background: light-dark(oklch(1 0 0), oklch(0.22 0 0));
    color: inherit;
    font: inherit;
  }

  .store-product-group-variant-table {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
      padding: 0.5rem;
      text-align: start;
      border-block-end: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    }
  }

  .store-product-group-existing-versions {
    margin-block-start: 1.25rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));

    h3 {
      font-size: 1rem;
      margin: 0 0 0.35rem;
    }
  }

  .store-product-group-existing-versions-list {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
  }

  .store-product-group-existing-versions-item {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    font-size: 0.9rem;
  }

  .store-product-group-existing-versions-thumb {
    border-radius: 0.25rem;
    height: 2.25rem;
    object-fit: cover;
    width: 2.25rem;

    &.store-product-group-existing-versions-thumb--empty {
      align-items: center;
      background: light-dark(oklch(0.94 0 0), oklch(0.28 0 0));
      color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
      display: inline-flex;
      font-size: 0.65rem;
      justify-content: center;
      object-fit: none;
    }
  }

  .store-product-group-existing-versions-label {
    flex: 1;
    min-width: 6rem;
  }
}
.store-product-group-media-lede {
  color: light-dark(oklch(45% 0.02 260), oklch(75% 0.02 260));
  font-size: 0.9rem;
  margin-block: 0 1rem;
}

.store-product-group-media-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.store-product-group-media-upload {
  cursor: pointer;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 600;

  input[type="file"] {
    display: none;
  }
}

.store-product-group-media-import,
.store-product-group-media-save {
  background: light-dark(oklch(96% 0.01 260), oklch(28% 0.02 260));
  border: 1px solid light-dark(oklch(85% 0.02 260), oklch(40% 0.02 260));
  border-radius: 0.35rem;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.35rem 0.65rem;
}

.store-product-group-media-pool {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  margin-bottom: 1.25rem;
}

.store-product-group-media-pool-item {
  margin: 0;

  img {
    aspect-ratio: 1;
    border-radius: 0.35rem;
    display: block;
    object-fit: cover;
    width: 100%;
  }

  figcaption {
    display: flex;
    font-size: 0.75rem;
    gap: 0.5rem;
    justify-content: space-between;
    margin-top: 0.35rem;
  }

  button {
    background: none;
    border: none;
    color: light-dark(oklch(45% 0.08 25), oklch(70% 0.1 25));
    cursor: pointer;
    font-size: inherit;
    padding: 0;
  }
}

.store-product-group-media-missing {
  align-items: center;
  aspect-ratio: 1;
  background: light-dark(oklch(94% 0.01 260), oklch(25% 0.02 260));
  border-radius: 0.35rem;
  display: flex;
  font-size: 0.75rem;
  justify-content: center;
}

.store-product-group-variant-images {
  border-collapse: collapse;
  font-size: 0.9rem;
  width: 100%;

  th,
  td {
    border-bottom: 1px solid light-dark(oklch(90% 0.01 260), oklch(32% 0.02 260));
    padding: 0.5rem 0.35rem;
    text-align: left;
    vertical-align: middle;
  }

  select {
    max-width: 14rem;
    width: 100%;
  }
}

.store-product-group-variant-thumb {
  border-radius: 0.25rem;
  height: 2.5rem;
  object-fit: cover;
  width: 2.5rem;
}

.store-product-group-media-hint {
  color: light-dark(oklch(50% 0.02 260), oklch(70% 0.02 260));
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
}

.store-product-group-media-hero {
  aspect-ratio: 1;
  background: light-dark(oklch(94% 0.01 260), oklch(25% 0.02 260));
  border-radius: 0.5rem;
  margin: 0 0 1rem;
  max-width: 14rem;
  overflow: hidden;

  img {
    border-radius: 0.5rem;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
}

.store-product-group-media-placeholder {
  align-items: center;
  color: light-dark(oklch(50% 0.02 260), oklch(70% 0.02 260));
  display: flex;
  font-size: 0.9rem;
  height: 100%;
  justify-content: center;
  min-height: 8rem;
  width: 100%;
}

.store-product-group-media-pool-item {
  background: none;
  border: 1px solid light-dark(oklch(85% 0.02 260), oklch(40% 0.02 260));
  border-radius: 0.35rem;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.store-product-group-media-subhead {
  font-size: 1rem;
  margin: 0 0 0.35rem;
}

.store-product-group-media-main-label {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
  font-size: 0.75rem;
}

.store-product-group-media-remove {
  background: none;
  border: none;
  color: light-dark(oklch(45% 0.08 25), oklch(70% 0.1 25));
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
}

.store-product-group-version-photos {
  margin-block-start: 1.25rem;
}

.store-product-group-version-photos-list {
  display: grid;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.store-product-group-version-photos-row {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 12rem);

  @container (max-width: 24rem) {
    grid-template-columns: 1fr;
  }
}

.store-product-group-version-photos-label {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.store-product-group-version-photos-select {
  font: inherit;
  max-width: 100%;
  width: 100%;
}
.store-product-group-detail-view {
  display: block;
  container-type: inline-size;

  .store-product-hero {
    display: grid;
    gap: 1rem;
    margin-block-end: 1.25rem;

    @container (min-width: 40rem) {
      grid-template-columns: 8rem minmax(0, 1fr);
      align-items: start;
    }
  }

  .store-product-hero-image {
    aspect-ratio: 1;
    background: light-dark(oklch(0.96 0 0), oklch(0.24 0 0));
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.75rem;
    inline-size: 100%;
    max-inline-size: 8rem;
    object-fit: cover;
  }

  .store-product-hero-placeholder {
    color: light-dark(oklch(0.55 0 0), oklch(0.68 0 0));
    display: grid;
    font-size: 0.75rem;
    place-items: center;
  }

  .store-product-hero-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
  }

  .store-product-hero-meta {
    color: light-dark(oklch(0.48 0 0), oklch(0.72 0 0));
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    gap: 0.35rem 0.65rem;
    margin-block: 0.35rem 0;
  }

  .store-product-status-chip {
    align-items: center;
    background: light-dark(oklch(0.93 0.03 145), oklch(0.28 0.04 145));
    border-radius: 999px;
    color: light-dark(oklch(0.38 0.06 145), oklch(0.82 0.04 145));
    display: inline-flex;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    text-transform: lowercase;
  }

  .store-product-group-variant-list {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .store-product-group-variant-row {
    align-items: center;
    border: 1px solid light-dark(oklch(0.9 0 0), oklch(0.3 0 0));
    border-radius: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
  }

  .store-product-group-variant-thumb {
    border-radius: 0.35rem;
    flex-shrink: 0;
    height: 3rem;
    object-fit: cover;
    width: 3rem;

    &.store-product-group-variant-thumb--empty {
      align-items: center;
      background: light-dark(oklch(0.94 0 0), oklch(0.28 0 0));
      color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
      display: inline-flex;
      font-size: 0.65rem;
      justify-content: center;
    }
  }

  .store-product-group-variant-main {
    display: grid;
    flex: 1;
    gap: 0.15rem;
    min-width: 8rem;
  }

  .store-product-group-variant-name {
    font-weight: 600;
  }

  .store-product-group-variant-meta {
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
    font-size: 0.85rem;
  }

  .store-product-group-variant-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .store-product-group-variant-action {
    background: none;
    border: none;
    color: light-dark(oklch(0.45 0.1 250), oklch(0.72 0.1 250));
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    padding: 0;
    text-decoration: underline;
  }

  .store-product-group-danger {
    border-block-start: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    margin-block-start: 0.5rem;
    padding-block-start: 1rem;
  }

  .store-product-group-option-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .store-product-group-option-chip {
    background: light-dark(oklch(0.96 0 0), oklch(0.28 0 0));
    border-radius: 999px;
    font-size: 0.85rem;
    padding: 0.2rem 0.65rem;
  }

  .store-product-detail-grid {
    display: grid;
    gap: 1.25rem;
  }

  .store-product-facts {
    display: grid;
    font-size: 0.875rem;
    gap: 0.35rem;
    margin: 0;
  }

  .store-product-facts dt {
    color: light-dark(oklch(0.42 0 0), oklch(0.78 0 0));
    font-weight: 600;
  }

  .store-product-facts dd {
    margin: 0 0 0.5rem;
  }
}
.store-product-group-wizard {
  display: block;
  max-width: 40rem;

  .store-product-group-wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
  }

  .store-product-group-wizard-steps li.is-active {
    color: inherit;
    font-weight: 600;
  }

  .store-product-group-wizard-steps li.is-done {
    color: light-dark(oklch(0.55 0.08 145), oklch(0.72 0.1 145));
  }

  .store-product-group-wizard-panel {
    display: grid;
    gap: 1rem;
  }

  .store-product-group-wizard-choices {
    display: grid;
    gap: 0.5rem;
  }

  .store-product-group-wizard-choice {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem 1rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.5rem;
    background: light-dark(oklch(1 0 0), oklch(0.22 0 0));
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .store-product-group-wizard-choice.is-selected {
    border-color: light-dark(oklch(0.55 0.12 250), oklch(0.65 0.12 250));
  }

  .store-product-group-wizard-axis {
    display: grid;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.5rem;
  }

  .store-product-group-wizard-value-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .store-product-group-wizard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
  }

  .store-product-group-wizard-summary-list {
    margin: 0;
    padding-inline-start: 1.25rem;
  }

  .store-product-group-section-lede {
    margin: 0;
    color: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
    font-size: 0.9rem;
  }
}
.shell-layout {
  --shell-sidebar-width: 14rem;
  --shell-test-bar-height: 0px;
  display: flex;
  flex-direction: column;
  /* viewport-locked shell: .main is the only vertical scrollport (pairs with html/body overflow hidden) */
  block-size: 100dvb;
  overflow: hidden;
  overscroll-behavior: none;

  &:has(.preview-mode-bar) {
    --shell-test-bar-height: 1.75rem;
  }

  .shell {
    flex: 1;
    min-block-size: 0;
  }

  &.is-sidebar-hidden {
    .preview-mode-bar {
      grid-template-columns: 1fr;
    }

    .preview-mode-bar-label {
      justify-self: start;
      padding-inline: 1rem 0.5rem;
    }
  }
}

.shell {
  --shell-sidebar-width: 14rem;
  --shell-top-bar-height: 3.25rem;
  --shell-test-bar-height: 0px;
  --shell-sidebar-slide-duration: 0.28s;
  --shell-sidebar-bg: light-dark(
    oklch(from var(--color-canvas) calc(l - 0.01) c h),
    var(--color-canvas)
  );
  --shell-canvas-bg: light-dark(
    var(--color-canvas),
    oklch(from var(--color-canvas) calc(l - 0.022) c h)
  );
  --shell-divider: light-dark(oklch(92% 0 0), oklch(32% 0 0));
  --shell-menu-divider: light-dark(
    oklch(92% 0 0),
    oklch(from var(--color-canvas) calc(l - 0.055) c h)
  );
  color-scheme: var(--q-color-scheme, light dark);
  interpolate-size: allow-keywords;
  display: grid;
  grid-template-rows: auto 1fr;
  color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
  background-color: var(--shell-canvas-bg);
  container-type: inline-size;
  container-name: shell;

  .top-bar {
    display: grid;
    grid-template-columns: var(--shell-sidebar-width) 1fr;
    align-items: stretch;
    min-block-size: 3.25rem;
  }

  .top-bar-sidebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 0.5rem 0.75rem 1rem;
    background-color: var(--shell-sidebar-bg);
    border-inline-end: 1px solid var(--shell-menu-divider);
    min-inline-size: 0;
  }

  .top-bar-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
  }

  .top-bar-search-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: inherit;
    cursor: pointer;

    &:focus-visible {
      outline: none;
    }

    .top-bar-search-trigger-icon {
      display: flex;
      line-height: 0;
      opacity: 0.55;
    }

    &:hover .top-bar-search-trigger-icon,
    &:focus-visible .top-bar-search-trigger-icon {
      opacity: 0.78;
    }
  }

  .top-bar-logo {
    display: flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border: none;
    text-decoration: none;
    min-inline-size: 0;
    flex: 1;
  }

  .top-bar-logo-mark {
    display: block;
    inline-size: 100%;
    max-inline-size: 6.5rem;
  }

  .top-bar-logo-image {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .top-bar-logo-image-for-dark {
    display: none;
  }

  .top-bar-logo--emblem {
    align-self: flex-start;
    flex: 0 0 auto;

    .top-bar-logo-mark {
      inline-size: 2rem;
      max-inline-size: 2rem;
    }
  }

  .top-bar-page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    min-inline-size: 0;
    background-color: var(--shell-canvas-bg);
  }

  .shell-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .shell-menu-toggle-icon {
    display: flex;
    line-height: 0;
    opacity: 0.55;
  }

  .shell-menu-toggle:hover .shell-menu-toggle-icon {
    opacity: 0.78;
  }

  .shell-menu-toggle-sidebar {
    margin-inline-start: auto;
  }

  .environment-switcher-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
  }

  .environment-switcher {
    flex-shrink: 0;
  }

  .environment-switcher-error {
    font-size: 0.7rem;
    color: light-dark(oklch(0.5 0.15 25), oklch(0.75 0.12 25));
    padding-inline: 0.35rem;
  }

  .top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: 1;
    min-inline-size: 0;
  }

  .top-bar-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-inline-size: 0;
  }

  .top-bar-title-wrap {
    display: grid;
    gap: 0.125rem;
    min-inline-size: 0;
  }

  .top-bar-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &.top-bar-title--breadcrumb {
      display: flex;
      align-items: baseline;
      gap: 0.375rem;
      min-inline-size: 0;
    }
  }

  .top-bar-breadcrumb-parent {
    color: inherit;
    font: inherit;
    text-decoration: none;
    flex-shrink: 0;

    &:hover {
      text-decoration: underline;
    }
  }

  .top-bar-breadcrumb-separator {
    color: light-dark(oklch(0.62 0 0), oklch(0.48 0 0));
    flex-shrink: 0;
  }

  .top-bar-breadcrumb-segment {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    min-inline-size: 0;
  }

  .top-bar-breadcrumb-middle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
    color: light-dark(oklch(0.52 0 0), oklch(0.68 0 0));
  }

  .top-bar-breadcrumb-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
  }

  .top-bar-meta {
    margin: 0;
    font-family: monospace;
    font-size: 0.75rem;
    color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &.top-bar-meta--rich {
      display: grid;
      gap: 0.2rem;
      font-family: inherit;
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
    }
  }

  .top-bar-meta-site {
    display: grid;
    gap: 0.15rem;
  }

  .top-bar-meta-site-kind {
    font-size: 0.8125rem;
    color: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
  }

  .top-bar-meta-site-url {
    font-family: monospace;
    font-size: 0.75rem;
    color: light-dark(oklch(0.45 0.12 255), oklch(0.72 0.14 255));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &.top-bar-meta-site-url--muted {
      color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
      text-decoration: none;
    }
  }

  .top-bar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;

    q-button {
      --button-size: 0.875em;
    }

    q-form-field {
      min-inline-size: min(100%, 14rem);

      div.input-wrapper {
        padding-block: 0.375rem;
      }
    }
  }

  .top-bar-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .body {
    position: relative;
    display: grid;
    grid-template-columns: var(--shell-sidebar-width) 1fr;
    min-block-size: 0;
  }

  &.is-companion-panel-open {
    grid-template-columns:
      var(--shell-sidebar-width)
      minmax(0, 1fr)
      var(--shell-companion-panel-width, 21rem);
  }

  &.is-companion-panel-open .top-bar {
    display: contents;
  }

  &.is-companion-panel-open .top-bar-sidebar {
    grid-column: 1;
    grid-row: 1;
  }

  &.is-companion-panel-open .top-bar-page {
    grid-column: 2;
    grid-row: 1;
    min-inline-size: 0;
  }

  &.is-companion-panel-open .body {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  &.is-companion-panel-open .shell-companion-rail {
    grid-column: 3;
    grid-row: 1 / -1;
    min-block-size: 0;
    min-inline-size: 0;
  }

  &.is-sidebar-hidden.is-companion-panel-open {
    grid-template-columns: minmax(0, 1fr) var(--shell-companion-panel-width, 21rem);
  }

  &.is-sidebar-hidden.is-companion-panel-open .body {
    grid-column: 1;
  }

  &.is-sidebar-hidden.is-companion-panel-open .top-bar-page {
    grid-column: 1;
    grid-row: 1;
  }

  .main-page-toggle {
    position: absolute;
    z-index: 1;
    inset-block-start: 1rem;
    inset-inline-start: calc(var(--shell-sidebar-width) + 1rem);
    display: flex;
    align-items: center;
    min-block-size: calc(1.25rem * 1.25);
    pointer-events: auto;
  }

  &.is-page-chrome-minimal:not(.is-sidebar-hidden) {
    position: relative;
    grid-template-rows: 1fr;

    .top-bar {
      /* companion open uses display:contents on .top-bar; that drops the logo header box in minimal chrome */
      display: grid;
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      z-index: 2;
      inline-size: var(--shell-sidebar-width);
      min-block-size: var(--shell-top-bar-height);
      grid-template-columns: 1fr;
    }

    .top-bar-page {
      display: none;
    }

    .body {
      grid-row: 1;
      min-block-size: 0;
    }

    .sidebar {
      padding-block-start: calc(var(--shell-top-bar-height) + 0.75rem);
    }
  }

  &.is-sidebar-hidden.is-page-chrome-minimal {
    .top-bar {
      display: none;
    }

    .main-page-toggle {
      inset-inline-start: 1rem;
    }

    q-app-view .app-view__header {
      padding-inline-start: calc(1.75rem + 0.75rem);
    }
  }

  .sidebar {
    --menu-row-padding-block: 0.375rem;
    --menu-row-padding-inline: 0.625rem;
    --menu-row-content-size: 1rem;
    --menu-row-min-block-size: calc(var(--menu-row-padding-block) * 2 + var(--menu-row-content-size));
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.5rem;
    background-color: var(--shell-sidebar-bg);
    border-inline-end: 1px solid var(--shell-menu-divider);
    min-block-size: 0;

    .menu {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 0.375rem;
      min-block-size: 0;
      overflow: auto;
      overscroll-behavior: none;
      --menu-text: light-dark(oklch(0.52 0 0), oklch(0.74 0 0));
      --menu-text-active: light-dark(oklch(0.38 0 0), oklch(0.9 0 0));
      --menu-text-recent: light-dark(oklch(0.74 0 0), oklch(0.54 0 0));
      --menu-text-recent-active: light-dark(oklch(0.6 0 0), oklch(0.66 0 0));
      --menu-icon: light-dark(oklch(0.78 0 0), oklch(0.42 0 0));
      --menu-icon-active: light-dark(oklch(0.58 0 0), oklch(0.5 0 0));
      --menu-chevron: light-dark(oklch(0.86 0 0), oklch(0.36 0 0));
      --menu-group-icon-size: var(--menu-row-content-size);
      --menu-group-heading-gap: 0.5rem;
      --menu-group-expand-duration: 0.28s;
    }

    .menu-group {
      display: flex;
      flex-direction: column;
      gap: 0.0625rem;
    }

    .menu-group--home,
    .menu-shortcuts {
      margin-block-end: 1rem;
    }

    .menu-products {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .menu-admin {
      margin-block-start: 0.75rem;
      padding-block-start: 0.75rem;
      border-block-start: 1px solid var(--shell-menu-divider);
    }

    .menu-admin-items {
      display: flex;
      flex-direction: column;
      gap: 0.0625rem;
      margin-block-end: 0.25rem;
    }

    .menu-section-label {
      margin: 0;
      padding: 0.25rem 0.625rem 0.125rem;
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: light-dark(oklch(0.68 0 0), oklch(0.48 0 0));
    }

    .menu-back {
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: flex-start;
      color: var(--menu-text);
      padding: 0.375rem 0.625rem;
      margin-block-end: 0.25rem;
      border: none;
      border-radius: 0.5rem;
      background: transparent;
      cursor: pointer;
      line-height: 1.25;
    }

    .menu-back:hover {
      background: light-dark(oklch(95% 0 0), oklch(26% 0 0));
    }

    .menu-group-toggle {
      appearance: none;
      font: inherit;
      margin: 0;
      inline-size: 100%;
      border: none;
      background: transparent;
      cursor: pointer;
      text-align: start;
      justify-content: space-between;
      align-items: center;

      .menu-group-toggle-main {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
        min-inline-size: 0;
      }

      .menu-group-chevron {
        transition: transform var(--menu-group-expand-duration) ease;
      }

      &.is-expanded .menu-group-chevron {
        transform: rotate(180deg);
      }
    }

    .menu-group-chevron {
      flex-shrink: 0;
    }

    /*
      hugeicons set fill="currentColor" but q-icon also sets svg color="currentColor"
      which resolves against shell body text — set path fill so menu tokens apply
    */
    .menu-icon path,
    .menu-shortcut-action svg path {
      fill: var(--menu-icon);
    }

    .menu-group-chevron path {
      fill: var(--menu-chevron);
    }

    .menu-row.is-active .menu-icon path {
      fill: var(--menu-icon-active);
    }

    .menu-group--labeled {
      .menu-group-items-wrap {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows var(--menu-group-expand-duration) ease;
      }

      .menu-group-items-wrap.is-expanded {
        grid-template-rows: 1fr;
      }

      @media (prefers-reduced-motion: reduce) {
        .menu-group-items-wrap {
          transition: none;
        }

        .menu-group-toggle .menu-group-chevron {
          transition: none;
        }
      }
    }

    .menu-group-items {
      display: flex;
      flex-direction: column;
      gap: 0;
      overflow: hidden;
      min-block-size: 0;
      padding-inline-start: calc(var(--menu-group-icon-size) + var(--menu-group-heading-gap));
    }

    .menu-subgroup-label {
      margin: 0.375rem 0 0.125rem;
      padding: 0.125rem 0.625rem 0;
      font-size: 0.625rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: light-dark(oklch(0.62 0 0), oklch(0.52 0 0));
    }

    .menu-shortcuts {
      .menu-section-label {
        padding: 0.25rem 0.625rem 0.125rem;
      }

      .menu-row--recent {
        color: var(--menu-text-recent);
      }

      .menu-row--recent.is-active {
        color: var(--menu-text-recent-active);
      }
    }

    .menu-row.is-disabled {
      opacity: 0.55;
      pointer-events: none;
    }

    .menu-link-disabled {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex: 1;
      min-inline-size: 0;
      color: inherit;
      box-sizing: border-box;
    }

    .menu-lock-icon {
      flex-shrink: 0;
      opacity: 0.85;
    }

    .menu-row {
      display: flex;
      align-items: stretch;
      gap: 0.25rem;
      padding: 0;
      border-radius: 0.5rem;
      font-size: 0.8125rem;
      line-height: 1.25;
      color: var(--menu-text);
      min-block-size: var(--menu-row-min-block-size);
      box-sizing: border-box;

      > a,
      > .menu-link-disabled {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
        min-inline-size: 0;
        min-block-size: var(--menu-row-min-block-size);
        padding: var(--menu-row-padding-block) var(--menu-row-padding-inline);
        border-radius: 0.5rem;
        color: inherit;
        text-decoration: none;
        box-sizing: border-box;
      }
    }

    .menu-row:has(.menu-shortcut-action) {
      padding-inline-end: 0.375rem;

      > a,
      > .menu-link-disabled {
        padding-inline-end: 0.125rem;
      }
    }

    .menu-row.menu-group-toggle {
      align-items: center;
      padding: var(--menu-row-padding-block) var(--menu-row-padding-inline);
    }

    .menu-row:hover {
      background: light-dark(oklch(95% 0 0), oklch(26% 0 0));
    }

    .menu-row.is-active {
      background: light-dark(oklch(94% 0 0), oklch(20% 0 0));
      color: var(--menu-text-active);
    }

    .menu-shortcut-action {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: inherit;
      padding: 0.125rem;
      border: none;
      border-radius: 0.25rem;
      background: transparent;
      cursor: pointer;
      opacity: 0;
      line-height: 0;
    }

    .menu-row:hover .menu-shortcut-action,
    .menu-row:focus-within .menu-shortcut-action {
      opacity: 0.55;
    }

    .menu-shortcut-action:hover {
      opacity: 0.85;
    }

    a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: inherit;
      text-decoration: none;
      padding: 0.375rem 0.625rem;
      border-radius: 0.5rem;
      font-size: 0.8125rem;
      line-height: 1.25;
    }

    .menu-icon {
      flex-shrink: 0;
    }

    .menu-label {
      min-inline-size: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: inherit;
    }

    a:hover {
      background: light-dark(oklch(95% 0 0), oklch(26% 0 0));
    }

    .menu-row:hover a,
    .menu-row.is-active a {
      background: transparent;
    }
  }

  .sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-start: auto;
    padding-block-start: 1rem;
  }

  .sidebar-corner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
  }

  .sidebar-corner-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--shell-divider);
    background: light-dark(oklch(96% 0 0), oklch(24% 0 0));
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;

    &:hover {
      background: light-dark(oklch(93% 0 0), oklch(28% 0 0));
    }
  }

  .sidebar-corner-trigger-user {
    border-radius: 999px;
    inline-size: 2rem;
    block-size: 2rem;
    anchor-name: --shell-user-anchor;
  }

  .sidebar-corner-user-initial {
    font-size: 0.75rem;
    font-weight: 600;
  }

  .sidebar-corner-trigger-merchant {
    border-radius: 0.375rem;
    inline-size: 2rem;
    block-size: 2rem;
    anchor-name: --shell-merchant-anchor;
  }

  .sidebar-corner-merchant-initial {
    font-size: 0.75rem;
    font-weight: 600;
  }

  .sidebar-corner-popover {
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--shell-divider);
    border-radius: 0.625rem;
    background: light-dark(oklch(99% 0 0), oklch(22% 0 0));
    color: light-dark(oklch(0.2 0 0), oklch(0.92 0 0));
    box-shadow: light-dark(
      oklch(0.2 0 0 / 0.08),
      oklch(0.05 0 0 / 0.35)
    );
    position: fixed;
    inset: unset;
    top: auto;
    right: auto;
    bottom: anchor(top);
    left: max(0.75rem, anchor(left));
    translate: 0 -0.5rem;
    position-try-fallbacks: flip-block, flip-inline;

    .tenant-switcher-controls {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
      min-inline-size: 0;

      .organization-switcher,
      .merchant-switcher,
      .environment-switcher-wrap {
        display: flex;
        flex-direction: column;
        inline-size: 100%;
        min-inline-size: 0;
      }

      .environment-switcher {
        inline-size: 100%;
      }

      .tenant-switcher-error {
        font-size: 0.7rem;
        color: light-dark(oklch(0.5 0.15 25), oklch(0.75 0.12 25));
      }
    }
  }

  .sidebar-corner-popover-user {
    position-anchor: --shell-user-anchor;
    inline-size: min(16rem, calc(100vw - 2rem));
  }

  .sidebar-corner-popover-merchant {
    position-anchor: --shell-merchant-anchor;
    inline-size: min(18rem, calc(100vw - 2rem));
  }

  .sidebar-corner-user-panel {
    display: grid;
    gap: 0.5rem;

    .sidebar-corner-appearance {
      justify-self: start;
      margin-block: 0.15rem 0.25rem;
    }
  }

  .sidebar-corner-user-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    margin-inline: -0.5rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      background: light-dark(oklch(95% 0 0), oklch(26% 0 0));
    }
  }

  .sidebar-corner-user-logout {
    color: light-dark(oklch(0.48 0.15 25), oklch(0.72 0.12 25));

    &:hover {
      background: light-dark(
        oklch(from oklch(0.55 0.15 25) calc(l + 0.42) calc(c * 0.35) h),
        oklch(from oklch(0.55 0.15 25) calc(l - 0.22) calc(c * 0.35) h)
      );
    }
  }

  .sidebar-corner-user-name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .sidebar-corner-user-email {
    margin: 0;
    font-size: 0.8125rem;
    color: light-dark(oklch(0.5 0 0), oklch(0.65 0 0));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .main {
    padding: 1rem;
    min-block-size: 0;
    /* constrained by shell grid 1fr + html/body height lock — this is the page scroll */
    overflow: auto;
    overscroll-behavior: contain;
    background-color: var(--shell-canvas-bg);
  }

  &.is-sidebar-hidden {
    overflow-x: clip;

    .top-bar {
      grid-template-columns: 1fr;
    }

    .body {
      grid-template-columns: 1fr;
    }

    .top-bar-sidebar,
    .sidebar {
      position: fixed;
      inset-inline-start: 0;
      inline-size: var(--shell-sidebar-width);
      transform: translateX(-100%);
      transition: transform var(--shell-sidebar-slide-duration) ease;
      pointer-events: none;
      will-change: transform;
    }

    .top-bar-sidebar {
      inset-block-start: var(--shell-test-bar-height);
      z-index: 42;
      block-size: auto;
      min-block-size: var(--shell-top-bar-height);
    }

    .sidebar {
      inset-block-start: calc(
        var(--shell-test-bar-height) + var(--shell-peek-header-height, var(--shell-top-bar-height))
      );
      inset-block-end: 0;
      z-index: 41;
      box-shadow: light-dark(
        0.25rem 0 1.5rem oklch(0 0 0 / 0.08),
        0.25rem 0 1.5rem oklch(0 0 0 / 0.35)
      );
    }

    &.is-sidebar-peek {
      .top-bar-sidebar,
      .sidebar {
        transform: translateX(0);
        pointer-events: auto;
      }
    }
  }

  .shell-mobile-menu-toggle {
    display: none;
  }

  .sidebar-mobile-menu-toggle {
    display: none;
  }

  .shell-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    margin: 0;
    padding: 0;
    border: none;
    background: light-dark(oklch(0 0 0 / 0.35), oklch(0 0 0 / 0.55));
    cursor: pointer;
  }

  .shell-sidebar-edge {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 43;
    inline-size: 0.75rem;
  }

  @container shell (max-width: 40rem) {
    .shell-sidebar-edge {
      display: none;
    }

    &:not(.is-sidebar-hidden) .shell-mobile-backdrop {
      display: block;
    }
    .top-bar {
      grid-template-columns: 1fr;
    }

    .top-bar-sidebar {
      display: none;
    }

    .top-bar-page > .shell-menu-toggle {
      display: none;
    }

    .top-bar-inner {
      flex-direction: column;
      align-items: stretch;
    }

    .top-bar-actions {
      justify-content: flex-end;
    }

    .body {
      grid-template-columns: 1fr;
    }

    .main {
      grid-column: 1;
      grid-row: 1;
    }

    .sidebar {
      position: fixed;
      inset-inline-start: 0;
      inset-block-start: calc(var(--shell-test-bar-height) + var(--shell-top-bar-height));
      inset-block-end: 0;
      z-index: 41;
      inline-size: min(var(--shell-sidebar-width), 100vw);
      border-inline-end: 1px solid var(--shell-menu-divider);
      box-shadow: light-dark(
        0.25rem 0 1.5rem oklch(0 0 0 / 0.08),
        0.25rem 0 1.5rem oklch(0 0 0 / 0.35)
      );
      transform: translateX(0);
      transition: transform var(--shell-sidebar-slide-duration) ease;
      pointer-events: auto;
    }

    &.is-sidebar-hidden .sidebar {
      transform: translateX(-100%);
      pointer-events: none;
    }

    .main-page-toggle {
      display: none;
    }

    .shell-mobile-menu-toggle {
      position: fixed;
      z-index: 45;
      display: flex;
      align-items: center;
      min-block-size: calc(1.25rem * 1.25);
      inset-block-end: 1rem;
      inset-inline-start: 1rem;
      pointer-events: auto;

      .shell-menu-toggle-icon {
        opacity: 0.85;
      }
    }

    .sidebar-mobile-menu-toggle {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-block-end: 0.5rem;
      padding-inline: 0.125rem;
    }
  }
}

html[data-color-scheme="dark"] .top-bar-logo-image-for-light {
  display: none;
}

html[data-color-scheme="dark"] .top-bar-logo-image-for-dark {
  display: block;
}

.preview-mode-bar {
  position: relative;
  display: grid;
  grid-template-columns: var(--shell-sidebar-width) 1fr;
  align-items: center;
  flex-shrink: 0;
  inline-size: 100%;
  block-size: 1.75rem;
  line-height: 1;
  color: oklch(1 0 0);
  background: light-dark(oklch(0.78 0.17 55), oklch(0.58 0.14 55));

  .preview-mode-bar-label {
    grid-column: 1;
    justify-self: start;
    padding: 0 0.5rem 0 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .preview-mode-bar-message {
    position: absolute;
    inset-inline: 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    pointer-events: none;
  }
}
.app-color-scheme-toggle.app-color-scheme-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  min-inline-size: 2.25rem;
  min-block-size: 2rem;
  padding: 0.45rem 0.65rem;
  font: inherit;
  cursor: pointer;
  background: light-dark(oklch(95% 0 0), oklch(26% 0 0));
  color: inherit;
  box-shadow: inset 0 0 0 1px light-dark(oklch(88% 0 0), oklch(34% 0 0));

  &:focus-visible {
    outline: 2px solid light-dark(oklch(45% 0 0), oklch(78% 0 0));
    outline-offset: 2px;
  }

  .app-color-scheme-toggle-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
  }
}
.shell-companion-trigger {
  position: fixed;
  z-index: 46;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid light-dark(oklch(0.86 0 0), oklch(0.34 0 0));
  border-radius: 999px;
  background: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));
  color: light-dark(oklch(0.32 0 0), oklch(0.88 0 0));
  box-shadow: light-dark(
    0 0.25rem 1rem oklch(0 0 0 / 0.12),
    0 0.25rem 1rem oklch(0 0 0 / 0.4)
  );
  cursor: pointer;
  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
  inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px));

  &:hover {
    background: light-dark(oklch(0.95 0 0), oklch(0.26 0 0));
  }

  &.is-open {
    border-color: light-dark(oklch(0.78 0 0), oklch(0.42 0 0));
    background: light-dark(oklch(0.92 0 0), oklch(0.28 0 0));
  }

  .shell-companion-trigger-icon {
    transform: scaleX(-1);
  }
}

.shell-companion-rail {
  --shell-companion-panel-width: 21rem;
  display: flex;
  flex-direction: column;
  inline-size: var(--shell-companion-panel-width);
  max-inline-size: 100%;
  block-size: auto;
  align-self: stretch;
  min-block-size: 0;
  min-inline-size: 0;
  overflow: hidden;
  border-inline-start: 1px solid var(--shell-divider);
  background-color: var(--shell-sidebar-bg);

  .shell-companion-rail-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-block-size: 0;
    min-inline-size: 0;
    overflow: hidden;
  }

  .shell-companion-rail-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-block-end: 1px solid var(--shell-divider);
  }

  .shell-companion-rail-panel-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: light-dark(oklch(0.28 0 0), oklch(0.9 0 0));
  }

  .shell-companion-rail-subview-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--shell-divider);
  }

  .shell-companion-rail-subview-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 999px;
    background: transparent;
    font-size: 0.75rem;
    color: light-dark(oklch(0.42 0 0), oklch(0.74 0 0));
    cursor: pointer;

    &.is-active {
      border-color: light-dark(oklch(0.8 0 0), oklch(0.38 0 0));
      background: light-dark(oklch(0.96 0 0), oklch(0.24 0 0));
      color: light-dark(oklch(0.28 0 0), oklch(0.9 0 0));
    }
  }

  .shell-companion-rail-panel-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-block-size: 0;
    overflow: hidden;
  }

  .shell-companion-rail-panel-mount {
    flex: 1;
    min-block-size: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0.75rem;
  }

  .shell-companion-rail-empty {
    margin: 0;
    padding: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: light-dark(oklch(0.48 0 0), oklch(0.68 0 0));
  }

  .shell-companion-rail-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    min-block-size: 1.75rem;
    padding: 0;
    border: 1px solid light-dark(oklch(0.88 0 0), oklch(0.32 0 0));
    border-radius: 0.375rem;
    background: transparent;
    color: light-dark(oklch(0.42 0 0), oklch(0.72 0 0));
    cursor: pointer;

    &:hover {
      background: light-dark(oklch(0.94 0 0), oklch(0.26 0 0));
    }
  }
}

.shell-companion-help {
  display: grid;
  gap: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: light-dark(oklch(0.38 0 0), oklch(0.78 0 0));

  .shell-companion-help-header {
    display: grid;
    gap: 0.35rem;
    margin-block-end: 0.75rem;

    h2 {
      margin: 0;
      font-size: 0.875rem;
      font-weight: 600;
      color: light-dark(oklch(0.22 0 0), oklch(0.92 0 0));
    }

    p {
      margin: 0;
      font-size: 0.75rem;
      color: light-dark(oklch(0.48 0 0), oklch(0.68 0 0));
    }
  }

  .shell-companion-help-section {
    display: grid;
    gap: 0.35rem;
    padding-block: 0.65rem;
    border-block-start: 1px solid light-dark(oklch(0.92 0 0), oklch(0.28 0 0));

    &:first-of-type {
      border-block-start: none;
      padding-block-start: 0;
    }

    h3 {
      margin: 0;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: light-dark(oklch(0.42 0 0), oklch(0.72 0 0));
    }

    p {
      margin: 0;
      font-size: 0.75rem;
    }
  }
}

.shell-companion-rail-panel-mount .store-product-preview-panel {
  padding: 0;
}

.has-shell-companion.is-companion-panel-open .shell-companion-trigger {
  inset-inline-end: calc(var(--shell-companion-panel-width, 21rem) + 1rem);
}

.service-dock-shell.has-shell-companion .shell-companion-trigger,
.account-shell.has-shell-companion .shell-companion-trigger {
  inset-block-end: calc(5rem + env(safe-area-inset-bottom, 0px));
}

.service-dock-shell.has-shell-companion.is-companion-panel-open .shell-companion-trigger,
.account-shell.has-shell-companion.is-companion-panel-open .shell-companion-trigger {
  inset-inline-end: calc(var(--shell-companion-panel-width, 21rem) + 1rem);
}
q-dialog.manage-platform-search-dialog {
  display: block;

  .dialog {
    inline-size: min(36rem, calc(100vw - 2rem));
    max-block-size: min(28rem, calc(100dvb - 4rem));
    padding: 0;
    border: 1px solid light-dark(oklch(88% 0 0), oklch(32% 0 0));
    border-radius: 0.75rem;
    background: light-dark(oklch(99% 0 0), oklch(18% 0 0));
    box-shadow: 0 1rem 2.5rem light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.45));
  }

  .manage-platform-search {
    display: flex;
    flex-direction: column;
    min-block-size: 12rem;
  }

  .manage-platform-search-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid light-dark(oklch(92% 0 0), oklch(28% 0 0));
  }

  .manage-platform-search-input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: inherit;
    outline: none;
  }

  .manage-platform-search-hint {
    font-size: 0.6875rem;
    color: light-dark(oklch(55% 0 0), oklch(62% 0 0));
    white-space: nowrap;
  }

  .manage-platform-search-results {
    flex: 1;
    overflow: auto;
    padding: 0.375rem 0;
  }

  .manage-platform-search-section-label {
    margin: 0;
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: light-dark(oklch(50% 0 0), oklch(58% 0 0));
  }

  .manage-platform-search-hit {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    inline-size: 100%;
    padding: 0.5rem 1rem;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: start;
    color: inherit;
    cursor: pointer;

    &:hover,
    &:focus-visible {
      background: light-dark(oklch(96% 0 0), oklch(24% 0 0));
      outline: none;
    }

    &.is-active {
      background: light-dark(oklch(94% 0 0), oklch(26% 0 0));
    }
  }

  .manage-platform-search-hit-copy {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
  }

  .manage-platform-search-hit-title {
    font-size: 0.875rem;
    font-weight: 500;
  }

  .manage-platform-search-hit-subtitle {
    font-size: 0.75rem;
    color: light-dark(oklch(48% 0 0), oklch(65% 0 0));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .manage-platform-search-empty {
    padding: 1.5rem 1rem;
    font-size: 0.875rem;
    color: light-dark(oklch(48% 0 0), oklch(62% 0 0));
    text-align: center;
  }
}