:root {
  --theme-palette-color-1: #ef5f56;
  --theme-palette-color-2: #d8453c;
  --theme-palette-color-3: #5b5346;
  --theme-palette-color-4: #34503d;
  --theme-palette-color-5: #e7e0d3;
  --theme-palette-color-6: #e5f0e8;
  --theme-palette-color-7: #fbf7f0;
  --theme-palette-color-8: #ffffff;
  --hamimi-honey: #f6ce5e;
  --hamimi-green: #94caa0;
  --theme-font-family: "Nunito", system-ui, sans-serif;
  --theme-button-font-family: "Nunito", system-ui, sans-serif;
  --theme-button-background-initial-color: var(--theme-palette-color-1);
  --theme-button-background-hover-color: var(--theme-palette-color-2);
  --theme-button-text-initial-color: #ffffff;
  --theme-button-text-hover-color: #ffffff;
  --theme-button-border-radius: 999px;
  --theme-form-field-font-family: "Nunito", system-ui, sans-serif;
  --theme-form-field-border-initial-color: var(--theme-palette-color-5);
  --theme-form-field-border-focus-color: var(--theme-palette-color-1);
  --theme-form-field-background-initial-color: var(--theme-palette-color-8);
  --theme-form-field-border-radius: 12px;
}

body {
  background: var(--theme-palette-color-7);
  color: var(--theme-palette-color-3);
  font-family: var(--theme-font-family);
}

h1, h2, h3, h4,
.entry-title,
.page-title {
  color: var(--theme-palette-color-4);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
}

/* Die Kopfzeile ist hell, und ein Hintergrund-Override auf diese Zeile greift
   nicht: Blocksy malt den Grund an einer anderen Stelle. Deshalb traegt hier die
   Schrift die Markenfarbe, statt sich auf einen Grund zu verlassen, der nie kam.
   Live gemessen am 25.08.: Grund rgb(255,255,255), Schrift war ebenfalls weiss. */
header [data-row="middle"] .menu > li > a,
header [data-row="middle"] .ct-header-trigger {
  color: var(--theme-palette-color-4);
}

header [data-row="middle"] .menu > li > a:hover {
  color: var(--theme-palette-color-1);
}

.hero-section {
  background: var(--theme-palette-color-6);
}

.woocommerce ul.products li.product,
[data-products] .product,
.woocommerce-product-gallery,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-MyAccount-navigation,
.woocommerce-checkout-review-order,
.woocommerce table.shop_table,
.wc-block-cart-items,
.wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--theme-palette-color-8);
  border: 1px solid var(--theme-palette-color-5);
  border-radius: 14px;
}

.woocommerce ul.products li.product,
[data-products] .product,
.woocommerce-product-gallery,
.woocommerce-MyAccount-navigation {
  overflow: hidden;
}

.woocommerce div.product div.images img,
.woocommerce ul.products li.product img {
  border-radius: 12px;
}

.woocommerce .price,
.woocommerce .woocommerce-Price-amount {
  color: var(--theme-palette-color-1);
}

.woocommerce span.onsale {
  background: var(--hamimi-honey);
  color: var(--theme-palette-color-4);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.ct-button {
  border-radius: 999px;
}

.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea,
.select2-container .select2-selection,
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input {
  background: var(--theme-palette-color-8);
  border-color: var(--theme-palette-color-5);
  border-radius: 12px;
}

.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: .75rem 1rem;
}

.woocommerce-MyAccount-navigation .is-active a {
  background: var(--theme-palette-color-6);
  color: var(--theme-palette-color-4);
}

/* Auswahlfelder tragen sonst das Browser-Blau, sichtbar an der Anrede im Wizard
   und an "Angemeldet bleiben" im Konto. Eine Zeile statt nachgebauter Felder. */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--theme-palette-color-1);
}