/* Shared rounded buttons across all pages and responsive layouts. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
a.btn,
a.button,
a.cta,
a.gallery-button {
  border-radius: 9999px !important;
}
/* Keep compact close controls circular. */
button.close,
button.close-dialog,
button.project-close {
  border-radius: 50% !important;
}

/* Image thumbnails fill their circular controls without an inner gap. */
.thumbnails button,
.project-thumbs button,
.product-thumbnails > button {
  box-sizing: border-box;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  padding: 0;
  overflow: hidden;
}
.thumbnails button > img,
.project-thumbs button > img,
.product-thumbnails > button > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  mix-blend-mode: normal;
}

/* Match the touch-view button colors when using a mouse. */
a.btn, a.btn:hover,
a.btn.outline, a.btn.outline:hover,
a.cta, a.cta:hover,
a.gallery-button, a.gallery-button:hover,
button.load, button.load:hover {
  background: #061704;
  color: #fff;
  border-color: #546c50;
}
.categories button[aria-pressed=true],
.subcollection-buttons button[aria-pressed=true],
.gallery-filters button[aria-pressed=true],
.size-tabs button[aria-selected=true],
.size-units button[aria-pressed=true] {
  background: #061704;
  border-color: #546c50;
  color: #fff;
}

/* The catalog category controls use the same outline at every width. */
.categories button { border: 1px solid var(--line); }

/* Keep button labels regular weight throughout the site. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
a.btn,
a.button,
a.cta,
a.gallery-button,
.size-nav a {
  font-weight: 400 !important;
}

/* Match the dark green category arrows shown on mobile. */
.sport:after { background: #194a0c; color: #fff; }

/* Outline only the homepage action currently being hovered or focused. */
.hero .actions a.btn {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid transparent;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hero .actions a.btn:is(:hover, :focus-visible, :active) {
  border-color: #b6f02b;
  box-shadow: 0 0 0 2px #b6f02b;
}
@media (prefers-reduced-motion: reduce) {
  .hero .actions a.btn { transition: none; }
}