/* Common */

:root {
  --carrot-icon: url('data:image/svg+xml,<svg viewBox="0 0 21 14" xmlns="http://www.w3.org/2000/svg"><path fill="%23004C43" d="M1.74906 1.13775C1.83021 0.926984 2.07539 0.81788 2.2979 0.894748L20.4287 7.155C20.5674 7.20294 20.5674 7.38809 20.4287 7.43685L2.09808 13.8451C1.87034 13.9244 1.61992 13.8087 1.54314 13.5913C0.129602 9.54702 0.200279 5.14236 1.74819 1.13858L1.74906 1.13775Z"/></svg>');
}


/* Buttons */

button, input[type="submit"], input[type="button"] {
  -webkit-appearance: none;
  appearance: none;
  font-size: .9375rem;
  border: 0;
}

.btn, a.btn, .button, a.button {
  position: relative;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  line-height: 1.2;
  font-size: .9375rem;
  font-weight: var(--bold);
  padding: .6em 1.5em .65em;
  border-radius: 1.25em;
  color: var(--white);
  background-color: var(--orange);
}

button.btn, input[type="submit"].btn, input[type="button"].btn, button.button, input[type="submit"].button, input[type="button"].button {
  vertical-align: top;
}

.btn:hover, .button:hover {
  text-decoration: none;
  color: var(--white);
}

@media (hover: hover) {
  .btn, a.btn, .button, a.button {
    transition: all 160ms cubic-bezier(.6, 0, .4, .9);
  }

  .btn:hover, .button:hover {
    transition-duration: 80ms;
    scale: 1.1;
  }
}

.btn:active, .button:active {
  transition: none;
  transform: translateY(1px);
}

.btn:active:after, .button:active:after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: rgba(0, 0, 0, .1);
}

.btn:disabled, .btn.disabled, .button:disabled, .button.disabled {
  opacity: .65;
  pointer-events: none;
  cursor: default;
}

.btn-compact, a.btn-compact, .button-compact, a.button-compact {
  font-size: .875rem;
  padding: .5em 1em .425em;
}

.btn.loading, .button.loading {
  opacity: .65;
  pointer-events: none;
  cursor: default;
  color: rgba(0, 0, 0, 0);
}

.btn.loading:before, .button.loading:before {
  --iconcolor: var(--white);
  content: '';
  display: inline-block;
  position: absolute;
  left: calc(50% - .625em);
  top: calc(50% - .625em);
  width: 1.25em;
  aspect-ratio: 1;
  --_c: no-repeat radial-gradient(farthest-side, var(--iconcolor) 92%, #0000);
  background:
    var(--_c) top,
    var(--_c) left,
    var(--_c) right,
    var(--_c) bottom;
  background-size: .3125em .3125em;
  animation: spinner 1s infinite;
}

.btn.yellow.loading:before, .button.yellow.loading:before {
  --iconcolor: var(--green-dark);
}

@keyframes spinner {
  to {
    transform: rotate(.5turn);
  }
}


/* Button colors */

.btn.green, a.btn.green, .button.green, a.button.green {
  background-color: var(--green);
}

.btn.green-dark, a.btn.green-dark, .button.green-dark, a.button.green-dark {
  background-color: var(--green-dark);
}

.btn.yellow, a.btn.yellow, .button.yellow, a.button.yellow {
  background-color: var(--yellow);
  color: var(--green-dark);
}


/* Link button */

.link-btn, a.link-btn, a.added_to_cart {
  display: inline-flex;
  align-items: center;
  line-height: 1.25;
  font-size: .9375rem;
  font-weight: var(--bold);
  color: var(--green-dark);
  border-radius: 1em;
  text-decoration: none;
}

.link-btn:hover {
  color: var(--green-dark);
  letter-spacing: .05em;
}

a.added_to_cart:hover {
  color: var(--green-dark);
}

.link-btn:active, a.added_to_cart:active {
  transition: none;
  transform: translateY(2px);
  background-color: rgba(0, 0, 0, .04);
  box-shadow: 0 0 0 .75em rgba(0, 0, 0, .04);
}

a.added_to_cart:active {}


.link-btn:after, a.added_to_cart:after {
  content: '';
  flex: none;
  width: 1em;
  height: 1em;
  margin-left: .5em;
  margin-bottom: .1em;
  background: var(--carrot-icon) no-repeat center;
  background-size: contain;
}

.bg-green-dark .link-btn, .bg-green-dark a.link-btn, .bg-green-dark .link-btn:hover, .bg-green-dark a.added_to_cart, .bg-green-dark a.added_to_cart:hover {
  color: var(--yellow);
}


/* Pagination */

ul.page-numbers {
  list-style: none;
  padding: 0;
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .25em;
  font-size: var(--h5);
  font-weight: var(--bold);
}

.page-numbers a, .page-numbers .current {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-1);
  padding-top: .05em;
  width: 2em;
  height: 2.5em;
  text-decoration: none;
  color: var(--green-dark);
}

.page-numbers .current {
  color: var(--white);
  background-color: var(--green-dark);
  cursor: default;
}

.page-numbers a.next, .page-numbers a.prev {
  padding-inline: .625em;
  width: auto;
}

.page-numbers a:hover {
  text-decoration: underline;
  color: var(--green-dark);
}

.page-numbers a:active {
  transform: translateY(1px);
  background-color: rgba(0, 0, 0, .04);
}