:root {
  --button-green: #467c76;
  --button-hover: #386762;
  --button-radius: 4px;
}

:is(.btn, .language, .quantity-control button, #header-basket, #close-basket, #close-photo) {
  background: var(--button-green);
  border: 1px solid var(--button-green);
  border-radius: var(--button-radius);
  color: #fff;
}

:is(.btn, .language, .quantity-control button, #header-basket, #close-basket, #close-photo, #basket-link):is(:hover, :active, :focus-visible) {
  background: var(--button-hover);
  border-color: var(--button-hover);
  color: #fff;
}

:is(.btn, .language, .quantity-control button, #header-basket, #close-basket, #close-photo, #basket-link, .product-thumbs button):focus-visible {
  outline: 2px solid var(--button-green);
  outline-offset: 3px;
}

.btn:is(:disabled, .disabled, [aria-disabled="true"]) {
  background: var(--button-green);
  border-color: var(--button-green);
  color: #fff;
}

#basket-link,
#basket-count {
  background: var(--button-green);
  color: #fff;
}

.variant-button {
  background: #fff;
  border-color: var(--button-green);
  border-radius: var(--button-radius);
  color: var(--button-green);
}

.variant-button:hover {
  background: #e8f2ec;
  border-color: var(--button-green);
}

.btn-check:checked + .variant-button {
  background: var(--button-green);
  border-color: var(--button-green);
  box-shadow: none;
  color: #fff;
}

.product-thumbs button {
  border-color: var(--button-green);
  border-radius: var(--button-radius);
}

.product-thumbs button[aria-pressed="true"] {
  border-color: var(--button-green);
  background: #e8f2ec;
}

.store-header #header-basket,
.store-footer #language {
  background: transparent;
  border-color: transparent;
  color: #25231f;
}

.store-header #header-basket:is(:hover, :active, :focus-visible),
.store-footer #language:is(:hover, :active, :focus-visible) {
  color: var(--button-green);
}
