/* 10-COLOUR-PICKER — UI colour picker component */
@layer pages {

  /* ── UI colour picker ── */
  .ui-colour-picker {
    position: fixed;
    background: var(--clr-berry-900);
    border: 1px solid rgba(var(--clr-berry-500-rgb),0.4);
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    z-index: var(--z-modal, 1055);
    min-width: 160px;
  }

  .ui-picker-title {
    font-size: var(--fs-sm-s);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--white-a35);
    margin-bottom: 8px;
  }

  .ui-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-bottom: 8px;
  }

  .ui-swatch {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.1s, border-color 0.1s;
  }

  .ui-swatch:hover {
    transform: scale(1.15);
    border-color: var(--white-a60) !important;
  }

  .ui-picker-reset {
    font-size: var(--fs-sm-s);
    color: var(--white-a35);
    cursor: pointer;
    text-align: center;
    padding-top: 6px;
    border-top: 1px solid var(--white-a08);
  }

  .ui-picker-reset:hover {
    color: var(--white-a70);
  }


} /* end @layer pages */