.crown-product-display {
  display: grid;
  gap: 4rem; }
  .crown-product-display.loading {
    animation-name: loading;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease; }
  @media (min-width: 800px) {
    .crown-product-display {
      grid-template-columns: 350px 1fr; } }
  .crown-product-display .section-label {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.25rem; }
  .crown-product-display .form-section {
    margin-bottom: 2.625rem; }
    .crown-product-display .form-section label {
      font-weight: 500;
      display: block;
      margin: 0 0 0.625rem;
      font-size: 1.125rem; }
  .crown-product-display [type="search"],
  .crown-product-display select {
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 1rem;
    font-family: var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--blue);
    background: var(--wp--preset--color--light-blue);
    border: none;
    appearance: none;
    border-radius: 0.25rem; }
  .crown-product-display .searchfield {
    position: relative; }
    .crown-product-display .searchfield [type="search"] {
      padding-right: 3rem; }
    .crown-product-display .searchfield [type="submit"] {
      text-indent: -999999px;
      width: 23px;
      height: 23px;
      background-image: url("../img/search.svg");
      position: absolute;
      top: calc(50% - 11.5px);
      right: 1rem;
      border: none;
      appearance: none;
      background-color: transparent; }
  .crown-product-display .select-wrap {
    position: relative;
    margin-bottom: 1.375rem; }
    .crown-product-display .select-wrap select {
      padding-right: 2.5rem; }
  .crown-product-display .select-wrap::after {
    position: absolute;
    width: 22px;
    height: 13px;
    background-image: url("../img/chevron-down.svg");
    content: '';
    top: calc(50% - 6.5px);
    right: 1rem;
    border: none;
    display: block;
    pointer-events: none; }
  .crown-product-display .wp-element-button {
    display: inline-block;
    margin-top: 1rem; }
  .crown-product-display .crown-product-results {
    display: grid;
    gap: 1.5rem; }
    .crown-product-display .crown-product-results .crown-product {
      padding: 2.625rem 1.125rem;
      font-family: var(--wp--preset--font-family--body);
      color: var(--wp--preset--color--blue);
      background: var(--wp--preset--color--light-blue);
      border-radius: 0.25rem; }
      .crown-product-display .crown-product-results .crown-product h3 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0; }
        .crown-product-display .crown-product-results .crown-product h3 + h4 {
          margin: 0.75rem 0 0;
          font-weight: 500;
          font-size: 1.125rem; }
      .crown-product-display .crown-product-results .crown-product ul {
        margin: 0.55rem 0 0;
        list-style: none;
        padding: 0; }
        .crown-product-display .crown-product-results .crown-product ul li {
          padding: 0.75rem 0; }
          .crown-product-display .crown-product-results .crown-product ul li:not(:last-child) {
            border-bottom: 1px dashed rgba(3, 9, 123, 0.5); }
  .crown-product-display .crown-product-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-top: 5rem; }
    .crown-product-display .crown-product-pagination button {
      font-family: var(--wp--preset--font-family--body);
      border: none;
      min-width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      display: inline-block;
      appearance: none;
      border-radius: 15px;
      background: transparent;
      color: var(--wp--preset--color--light-blue);
      cursor: pointer; }
      .crown-product-display .crown-product-pagination button.active {
        background: var(--wp--preset--color--gold);
        color: var(--wp--preset--color--blue); }
      .crown-product-display .crown-product-pagination button.next, .crown-product-display .crown-product-pagination button.previous {
        background-image: url("../img/chevron-right.svg");
        background-size: 8px 16px;
        background-repeat: no-repeat;
        background-position: center; }
        .crown-product-display .crown-product-pagination button.next[disabled], .crown-product-display .crown-product-pagination button.previous[disabled] {
          opacity: 0.5;
          cursor: not-allowed; }
      .crown-product-display .crown-product-pagination button.previous {
        transform-origin: center;
        transform: rotate(180deg); }

@keyframes loading {
  0% {
    opacity: 0.25; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 0.25; } }