/* ==========================================================================
   Strandkörbe Amrum – WooCommerce
   Bewusst nur gegen WooCommerce-Kernklassen geschrieben. Die sind über
   Versionen hinweg stabil. ATOMION-eigene Selektoren stehen gesammelt
   ganz unten – alles Weitere kommt, wenn ich die Parent-Stylesheets
   gesehen habe.

   Geometrie und Farbrollen der Buttons kommen aus denselben Tokens wie in
   components.css. Wer Höhe oder Rahmenstärke ändern will, ändert sie dort
   einmal, nicht hier.
   ========================================================================== */

/* --- Schaltflächen: gemeinsame Basis ----------------------------------
   Eine Liste für alle Button-Erscheinungsformen: klassisch, Checkout,
   Kommentarformular, Blocks. Wer hier nicht steht, sieht anders aus –
   also beim Nachrüsten neuer Woo-Bereiche zuerst diese Liste prüfen.

   Die Höhe entsteht über vertikales Padding, nicht über min-height.
   Deshalb sitzt der Text auch dann mittig, wenn eine fremde Regel
   display überschreibt. min-height ist nur noch Untergrenze für die
   Zielgröße nach 2.5.8.
   Der Rahmen steht bereits im Grundzustand in der Füllfarbe – so ändert
   der Hover-Wechsel auf Kontur die Box um keinen Pixel.                */

.woocommerce :is(a, button, input).button,
.woocommerce #respond input#submit,
.woocommerce #place_order,
.woocommerce a.added_to_cart,
.woocommerce .woocommerce-button,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  min-height: max(var(--field-height), 44px);
  border: var(--btn-border-width) solid var(--cta-bg);
  border-radius: var(--radius-pill);
  background-color: var(--cta-bg);
  background-image: var(--cta-gradient);
  color: var(--cta-text);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transform: none;
  transition: background-color .18s ease, background-image .18s ease,
              border-color .18s ease, color .18s ease;
}

/* --- Hover: Wechsel auf Kontur ----------------------------------------
   Hintergrund transparent, Text und Rahmen in #B8030E (6,32:1 auf
   Strandsand; #E30513 läge mit 4,50:1 auf der Grenze).
   transform und box-shadow werden ausdrücklich stillgelegt, damit der
   Button nicht wächst.                                                */

.woocommerce :is(a, button, input).button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #place_order:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce .woocommerce-button:hover,
.wc-block-components-button:hover {
  background-color: transparent;
  background-image: none;
  border-color: var(--cta-bg-hover);
  color: var(--cta-bg-hover);
  transform: none;
  box-shadow: none;
}

/* --- Sekundäre Schaltflächen ------------------------------------------
   Nachgeordnete Aktionen starten bereits als Kontur, sonst konkurrieren
   auf der Warenkorbseite drei gleichwertige rote Pillen um dieselbe
   Aufmerksamkeit. Im Hover füllen sie sich – der umgekehrte Weg.      */

.woocommerce .cart .button[name="update_cart"],
.woocommerce a.button.wc-backward,
.woocommerce a.added_to_cart,
.woocommerce .woocommerce-form-coupon .button {
  background-color: transparent;
  background-image: none;
  border-color: var(--cta-bg);
  color: var(--text);
}

.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce .woocommerce-form-coupon .button:hover {
  background-color: var(--cta-bg-hover);
  background-image: none;
  border-color: var(--cta-bg-hover);
  color: var(--cta-text);
}

/* --- Deaktivierte Schaltflächen ---------------------------------------
   Dürfen nicht wie aktive aussehen – auch nicht die sekundären.        */

.woocommerce a.button.disabled,
.woocommerce :is(button, input).button:disabled,
.woocommerce .button[aria-disabled="true"],
.woocommerce #place_order:disabled,
.wc-block-components-button:disabled {
  background-color: var(--divider);
  background-image: none;
  border-color: var(--divider);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.woocommerce a.button.disabled:hover,
.woocommerce :is(button, input).button:disabled:hover,
.woocommerce #place_order:disabled:hover {
  background-color: var(--divider);
  border-color: var(--divider);
  color: var(--text-secondary);
}

/* --- Fokus -------------------------------------------------------------
   Gefüllte Buttons: weißer Ring innen, Fokusfarbe außen – so bleibt der
   Indikator auf Rot sichtbar.                                          */

.woocommerce :is(a, button, input).button:focus-visible,
.woocommerce #respond input#submit:focus-visible,
.woocommerce #place_order:focus-visible,
.woocommerce .woocommerce-button:focus-visible,
.wc-block-components-button:focus-visible {
  outline: var(--focus-width) solid #FFFFFF;
  outline-offset: calc(var(--focus-offset) * -1);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* Sobald der Grund transparent ist – im Hover oder bei den sekundären
   Buttons – wäre ein weißer Innenring unsichtbar. */
.woocommerce :is(a, button, input).button:hover:focus-visible,
.woocommerce #place_order:hover:focus-visible,
.woocommerce .cart .button[name="update_cart"]:focus-visible,
.woocommerce a.button.wc-backward:focus-visible,
.woocommerce a.added_to_cart:focus-visible,
.woocommerce .woocommerce-form-coupon .button:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: none;
}

/* Die sekundären Buttons sind im Hover gefüllt – dort wieder weiß innen. */
.woocommerce .cart .button[name="update_cart"]:hover:focus-visible,
.woocommerce a.button.wc-backward:hover:focus-visible,
.woocommerce a.added_to_cart:hover:focus-visible,
.woocommerce .woocommerce-form-coupon .button:hover:focus-visible {
  outline-color: #FFFFFF;
  outline-offset: calc(var(--focus-offset) * -1);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* --- Ausnahmen zur Grundform ------------------------------------------
   Die Warenkorb-Leiste über dem Produktbild läuft an die Bildkante –
   dort wäre eine Pille eine optische Störung. Der Folgelink „Warenkorb
   anzeigen" erscheint direkt darunter und übernimmt die Kante.          */

.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product a.added_to_cart {
  border-radius: 0;
}

/* Seitlich kein Platz für die volle Breite im Kachelraster. Das vertikale
   Padding erzeugt die Höhe und damit die Zentrierung – nicht min-height.
   Nicht auf 0 setzen, sonst hängt der Text wieder oben. */
.woocommerce ul.products li.product .button {
  padding: var(--btn-padding-y) var(--btn-padding-x-compact);
}

/* Der Bestellabschluss ist die einzige Aktion seiner Seite. */
.woocommerce #place_order {
  width: 100%;
}

/* --- Angebots-Auszeichnung -------------------------------------------- */

.woocommerce span.onsale {
  background-color: var(--accent-lime);
  color: var(--on-lime);          /* 11,9:1 – deshalb schwarz, nicht weiß */
  border-radius: var(--radius);
  font-weight: 500;
  min-height: 0;
  line-height: 1.6;
  padding: 4px 12px;
}

/* --- Preise ------------------------------------------------------------ */

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--text);
}

/* Alter Preis: Durchstreichung trägt die Bedeutung, nicht die Farbe */
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: var(--text-secondary);
  opacity: 1;
  text-decoration: line-through;
  margin-right: .35em;            /* sonst klebt der neue Preis am alten */
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}

/* --- Formularfelder ---------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .woocommerce-ordering select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="search"] {
  min-height: max(var(--field-height), 44px);
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--field-border);   /* 3,75:1 – 1.4.11 */
  border-radius: var(--radius);
}

/* Mengenfeld und „In den Warenkorb" stehen nebeneinander und müssen
   deshalb dieselbe Höhe haben. */
.woocommerce div.product form.cart .quantity .qty,
.woocommerce .cart .quantity .qty {
  min-height: max(var(--field-height), 44px);
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--danger);
  border-width: 2px;
}

/* --- Meldungen --------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: 0;
  border-left: 3px solid;
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
}

.woocommerce-message {
  border-left-color: var(--success);
  background: var(--success-bg);
}

.woocommerce-info {
  border-left-color: var(--accent-sky);
}

.woocommerce-error {
  border-left-color: var(--danger);
  background: var(--danger-bg);
}

/* Der Button in einer Meldung ist eine Nebenaktion, keine Hauptaktion. */
.woocommerce-message .button,
.woocommerce-info .button {
  background-color: transparent;
  background-image: none;
  border-color: var(--cta-bg);
  color: var(--text);
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
  background-color: var(--cta-bg-hover);
  background-image: none;
  border-color: var(--cta-bg-hover);
  color: var(--cta-text);
}

/* --- Bewertungssterne -------------------------------------------------- */

/* Gold bleibt Gold – rote oder limefarbene Sterne liest niemand als
   Bewertung. Der Kontrast von etwa 1,9:1 ist nur vertretbar, weil die
   Bewertung zusätzlich als Text vorliegt. Genau das stellt die Regel
   unten sicher: Ist der Text versteckt, wird er wieder sichtbar
   gemacht, statt die Aussage allein der Grafik zu überlassen. */
.woocommerce .star-rating span::before {
  color: #F5C518;
}

.woocommerce .star-rating .rating,
.woocommerce .woocommerce-review-link {
  color: var(--text-secondary);
}

/* --- Preisfilter-Regler ------------------------------------------------ */

.woocommerce .price_slider_wrapper .ui-widget-content {
  background: var(--divider);
}

.woocommerce .ui-slider .ui-slider-range {
  background: var(--cta-bg);
}

.woocommerce .ui-slider .ui-slider-handle {
  background: var(--page);
  border: 2px solid var(--cta-bg);
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.woocommerce .ui-slider .ui-slider-handle:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* --- ATOMION-spezifisch ------------------------------------------------
   Alles ab hier hängt an Parent-Theme-Markup und muss nach jedem
   Theme-Update geprüft werden.                                          */

/* Warenkorb im Hauptmenü, Desktop */
#masthead #desktop-navigation .cart-item {
  display: flex;
  align-items: center;
  position: relative;
  border-left: 1px solid #C3D82C;
  border-right: 1px solid #C3D82C;
}