/* =========================================================
   ANGRYLAND – WOOCOMMERCE
   Shop, Produktseiten, Warenkorb und Varianten
========================================================= */


/* =========================================================
   ALLGEMEINE WOOCOMMERCE-FLÄCHEN
========================================================= */

.woocommerce,
.woocommerce-page {
  color: var(--al-color-text);
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce h5,
.woocommerce h6 {
  color: var(--al-color-text-light);
}


/* =========================================================
   PRODUKTBILDER
========================================================= */

.woocommerce img,
.single-product div.product img {
  max-width: 100%;
  height: auto;
}

.single-product div.product .woocommerce-product-gallery {
  min-width: 0;
}

.single-product div.product .woocommerce-product-gallery__wrapper {
  margin: 0;
}


/* =========================================================
   WOOCOMMERCE-BUTTONS
========================================================= */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 48px;
  padding: 12px 24px;

  border: 1px solid var(--al-border-rust);
  border-radius: var(--al-radius-small);

  background:
    linear-gradient(
      180deg,
      var(--al-color-metal) 0%,
      var(--al-color-metal-dark) 52%,
      var(--al-color-charcoal) 100%
    );

  color: var(--al-color-text-light);

  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;

  box-shadow: var(--al-shadow-plate);

  cursor: pointer;

  transition:
    color var(--al-transition-fast),
    border-color var(--al-transition-fast),
    background var(--al-transition-fast),
    box-shadow var(--al-transition-fast),
    transform var(--al-transition-fast);
}


/* Hover und Tastaturfokus */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #respond input#submit:focus-visible,
.woocommerce a.button.alt:focus-visible,
.woocommerce button.button.alt:focus-visible,
.woocommerce input.button.alt:focus-visible,
.woocommerce #respond input#submit.alt:focus-visible {
  border-color: var(--al-color-rust-light);

  background:
    linear-gradient(
      180deg,
      #3a302a 0%,
      var(--al-color-metal) 48%,
      var(--al-color-metal-dark) 100%
    );

  color: var(--al-color-text-light);

  box-shadow:
    0 7px 14px rgb(0 0 0 / 82%),
    inset 0 1px 0 rgb(255 238 220 / 12%),
    inset 0 -2px 4px rgb(0 0 0 / 78%);

  transform: translateY(-2px);
}


/* Sichtbarer Tastaturfokus */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #respond input#submit:focus-visible {
  outline: 2px solid var(--al-color-rust-light);
  outline-offset: 3px;
}


/* Gedrückter Zustand */
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active {
  transform: translateY(0);
  box-shadow: var(--al-shadow-inset);
}


/* Deaktivierte Buttons */
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}


/* =========================================================
   PRIMÄRE KAUFBUTTONS
   In den Warenkorb, Bestellung abschicken usw.
========================================================= */

.single-product .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
  border-color: var(--al-color-rust-dark);

  background:
    linear-gradient(
      180deg,
      var(--al-color-rust-light) 0%,
      var(--al-color-rust) 45%,
      var(--al-color-rust-dark) 100%
    );

  color: var(--al-color-black);
}

.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus-visible,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible,
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus-visible {
  border-color: var(--al-color-rust-light);

  background:
    linear-gradient(
      180deg,
      #d27746 0%,
      var(--al-color-rust-light) 45%,
      var(--al-color-rust) 100%
    );

  color: var(--al-color-black);
}


/* =========================================================
   TABELLEN
========================================================= */

.woocommerce table,
.woocommerce table.shop_table {
  width: 100%;
  max-width: 100%;

  border: 1px solid var(--al-border-metal);
  border-collapse: collapse;
  border-radius: var(--al-radius-medium);

  background: var(--al-color-dark);
  color: var(--al-color-text);

  box-shadow: var(--al-shadow-inset);
}

.woocommerce table th,
.woocommerce table td,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 16px;

  border-color: var(--al-border-subtle);

  color: var(--al-color-text);
}

.woocommerce table th,
.woocommerce table.shop_table th {
  color: var(--al-color-text-light);
  background: var(--al-color-metal-dark);
}


/* =========================================================
   FORMULARE
========================================================= */

.woocommerce input.input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select {
  min-height: 46px;

  border: 1px solid var(--al-border-metal);
  border-radius: var(--al-radius-small);

  background: var(--al-color-dark);
  color: var(--al-color-text);

  box-shadow: var(--al-shadow-inset);
}

.woocommerce textarea {
  min-height: 140px;
  padding: 12px 14px;
}

.woocommerce input.input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce select {
  padding: 10px 14px;
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  border-color: var(--al-color-rust-light);
  outline: 2px solid rgb(198 106 59 / 30%);
  outline-offset: 1px;
}


/* =========================================================
   PRODUKTPREISE
========================================================= */

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: var(--al-color-rust-light);
  font-weight: 700;
}


/* =========================================================
   PRODUKTKARTEN
========================================================= */

.woocommerce ul.products {
  min-width: 0;
}

.woocommerce ul.products li.product {
  min-width: 0;

  padding: 20px;

  border: 1px solid var(--al-border-metal);
  border-radius: var(--al-radius-medium);

  background:
    linear-gradient(
      145deg,
      var(--al-color-metal-dark) 0%,
      var(--al-color-charcoal) 48%,
      var(--al-color-dark) 100%
    );

  box-shadow: var(--al-shadow-plate);

  transition:
    border-color var(--al-transition-standard),
    box-shadow var(--al-transition-standard),
    transform var(--al-transition-standard);
}

.woocommerce ul.products li.product:hover {
  border-color: var(--al-border-rust);

  box-shadow:
    0 14px 26px rgb(0 0 0 / 72%),
    inset 0 1px 0 rgb(255 238 220 / 7%),
    inset 0 -2px 3px rgb(0 0 0 / 78%);

  transform: translateY(-4px);
}


/* =========================================================
   WOOCOMMERCE-HINWEISE
========================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 18px 22px 18px 48px;

  border: 1px solid var(--al-border-metal);
  border-top: 0;
  border-left: 3px solid var(--al-color-rust);
  border-radius: var(--al-radius-small);

  background: var(--al-color-charcoal);
  color: var(--al-color-text);

  box-shadow: var(--al-shadow-plate);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--al-color-rust-light);
}

.woocommerce-error {
  border-left-color: #9f3e35;
}

.woocommerce-error::before {
  color: #c85a4d;
}


/* =========================================================
   LINKS
========================================================= */

.woocommerce a:not(.button) {
  color: var(--al-color-rust-light);
}

.woocommerce a:not(.button):hover,
.woocommerce a:not(.button):focus-visible {
  color: var(--al-color-text-light);
}