/* ============================================================
   OM-EVENTS — WooCommerce-Schicht (funktional-hell)
   Lädt nach oe.css und nach den WC-Default-Styles und überschreibt deren
   Flächen ins helle oe-Designsystem (Sand, Gold, Marcellus/Jost).
   Alles unter .oe-woo gekapselt (Wrapper aus woocommerce.php / page.php).
   Der Shop trägt die Hauptrolle, die farbstarken Produktbilder tragen die
   Lebendigkeit, das Chrome bleibt ruhig. Gold führt Preis und Kaufaktion,
   Petrol codiert Werkzeuge/Waren als dünne Umriss-Marke.
   ============================================================ */

.oe-woo{padding:72px 0 100px;}
.oe-woo .woocommerce{color:var(--body);}
.oe-woo a{color:var(--gold-deep);text-underline-offset:3px;}

/* ---- Überschriften ---- */
.oe-woo h1,.oe-woo h2,.oe-woo h3,
.oe-woo .woocommerce-products-header__title,
.oe-woo .product_title,
.oe-woo .cart_totals h2,
.oe-woo #order_review_heading,
.oe-woo #customer_details h3,
.oe-woo .woocommerce-column__title,
.oe-woo .woocommerce-order-details__title,
.oe-woo .woocommerce-MyAccount-content h2,
.oe-woo .related > h2,
.oe-woo .upsells > h2{
  font-family:var(--font-display);font-weight:400;color:var(--ink);line-height:1.2;
}
.oe-woo .woocommerce-products-header__title,
.oe-woo .product_title{font-size:40px;margin:0 0 10px;}
.oe-woo h2,.oe-woo #order_review_heading,.oe-woo .cart_totals h2,
.oe-woo #customer_details h3,.oe-woo .related > h2,.oe-woo .upsells > h2{font-size:28px;}

/* ---- Vorspann-Texte ---- */
.oe-woo .woocommerce-products-header,
.oe-woo .term-description,
.oe-woo-intro{max-width:720px;}
.oe-woo-intro{font:400 19px/1.7 var(--font-ui);color:var(--muted);margin:0 0 8px;}

/* ---- Breadcrumb ---- */
.oe-woo .woocommerce-breadcrumb{
  font:500 11px/1.6 var(--font-ui);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:36px;
}
.oe-woo .woocommerce-breadcrumb a{color:var(--muted);}
.oe-woo .woocommerce-breadcrumb a:hover{color:var(--gold-deep);}

/* ---- Notices ---- */
.oe-woo .woocommerce-message,
.oe-woo .woocommerce-info,
.oe-woo .woocommerce-error,
.oe-woo .woocommerce-noreviews,
.oe-woo .wc-block-components-notice-banner{
  background:var(--card);border:1px solid var(--hairline);
  border-left:2px solid var(--gold);border-radius:var(--radius);
  color:var(--body);font:400 16px/1.6 var(--font-ui);
  padding:16px 20px;list-style:none;
}
.oe-woo .woocommerce-error{border-left-color:#a4442f;}
.oe-woo .woocommerce-message::before,
.oe-woo .woocommerce-info::before{color:var(--gold-deep);}

/* ============================================================
   Buttons: eine starke gold-gefüllte Aktion (.alt), Rest ist Linie.
   ============================================================ */
.oe-woo a.button,
.oe-woo button.button,
.oe-woo input.button,
.oe-woo .woocommerce a.button,
.oe-woo .woocommerce button.button,
.oe-woo .woocommerce input.button,
.oe-woo #respond input#submit,
.oe-woo .woocommerce-Button{
  font:600 12px/1 var(--font-ui);letter-spacing:0.2em;text-transform:uppercase;
  border-radius:var(--radius);border:1px solid var(--hairline-strong);background:transparent;color:var(--ink);
  padding:16px 28px;min-height:48px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.oe-woo a.button:hover,
.oe-woo button.button:hover,
.oe-woo input.button:hover,
.oe-woo .woocommerce-Button:hover{border-color:var(--gold-deep);color:var(--gold-deep);}
/* Primäre Aufrufe (In den Warenkorb .alt, Weiter zur Kasse, Bestellen):
   gold gefüllt, die einzige satte Fläche. */
.oe-woo a.button.alt,
.oe-woo button.button.alt,
.oe-woo input.button.alt,
.oe-woo .single_add_to_cart_button,
.oe-woo button#place_order,
.oe-woo a.checkout-button.button,
.oe-woo .wc-proceed-to-checkout .checkout-button{
  background:var(--gold);border-color:var(--gold);color:#231703;
}
.oe-woo a.button.alt:hover,
.oe-woo button.button.alt:hover,
.oe-woo input.button.alt:hover,
.oe-woo .single_add_to_cart_button:hover,
.oe-woo button#place_order:hover,
.oe-woo a.checkout-button.button:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:#231703;}
.oe-woo .button[disabled],.oe-woo .button:disabled,.oe-woo .button.disabled{opacity:0.45;cursor:not-allowed;}

/* ============================================================
   Formularfelder auf Hell.
   ============================================================ */
.oe-woo input[type=text],
.oe-woo input[type=email],
.oe-woo input[type=tel],
.oe-woo input[type=password],
.oe-woo input[type=number],
.oe-woo input[type=search],
.oe-woo input[type=url],
.oe-woo input.input-text,
.oe-woo textarea,
.oe-woo select,
.oe-woo .select2-container--default .select2-selection--single{
  background:#fff !important;color:var(--ink) !important;
  border:1px solid var(--hairline-strong) !important;border-radius:var(--radius);
  font:400 16px/1.5 var(--font-ui);padding:13px 16px;min-height:48px;width:100%;box-shadow:none;
}
.oe-woo textarea{min-height:120px;}
.oe-woo input::placeholder,.oe-woo textarea::placeholder{color:var(--muted);}
.oe-woo input:focus,.oe-woo textarea:focus,.oe-woo select:focus{
  outline:none;border-color:var(--gold) !important;box-shadow:0 0 0 2px rgba(192,137,46,0.22);
}
.oe-woo label{color:var(--body);font:400 15px/1.5 var(--font-ui);}
.oe-woo .required{color:var(--gold-deep);}

/* ============================================================
   Preise: Gold führt.
   ============================================================ */
.oe-woo .woocommerce-Price-amount,
.oe-woo .amount,
.oe-woo .price,
.oe-woo p.price{color:var(--gold-deep);font-feature-settings:'tnum';}

/* ============================================================
   Shop-Archiv (Produkt-Loop) als Karten im oe-Stil.
   ============================================================ */
.oe-woo .woocommerce-result-count{font:500 11px/1.6 var(--font-ui);letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
.oe-woo .woocommerce-ordering select{width:auto;display:inline-block;}
/* Flexbox statt CSS-Grid: bei wenigen Produkten (aktuell 5) zentriert eine
   unvollständige letzte Zeile, statt links mit Lücke zu wirken. Außerdem
   killt das die WooCommerce-Legacy-Clearfix-Pseudoelemente unten, die als
   Grid-Items sonst den ganzen Raster um eine Zelle verschieben würden. */
.oe-woo ul.products{margin:44px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:36px;}
.oe-woo ul.products::before,.oe-woo ul.products::after{content:none !important;display:none !important;}
.oe-woo ul.products li.product{
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);
  width:calc(33.333% - 24px) !important;flex:0 0 auto;float:none !important;margin:0;padding:0;text-align:left;overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.oe-woo ul.products li.product:hover{border-color:var(--hairline-strong);transform:translateY(-2px);}
.oe-woo ul.products li.product a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1;text-decoration:none;}
.oe-woo ul.products li.product img{width:100%;aspect-ratio:4/5;object-fit:cover;margin:0;background:var(--tile);border:none;border-radius:0;}
.oe-woo ul.products li.product .woocommerce-loop-product__title{
  font:400 22px/1.3 var(--font-display);color:var(--ink);padding:20px 22px 0;margin:0;
}
.oe-woo ul.products li.product .price{display:block;color:var(--gold-deep);font:500 17px/1.5 var(--font-ui);
  letter-spacing:0.02em;margin:0;padding:12px 22px 0;}
.oe-woo ul.products li.product .price del{color:var(--muted);opacity:0.8;margin-right:8px;font-weight:400;}
.oe-woo ul.products li.product .price ins{text-decoration:none;color:var(--gold-deep);}
.oe-woo ul.products li.product .button,
.oe-woo ul.products li.product .added_to_cart{margin:16px 22px 22px;align-self:flex-start;}
/* Sale-Marke als ruhiges Versalien-Label */
.oe-woo span.onsale{
  position:absolute;top:14px;right:14px;z-index:2;min-height:0;min-width:0;margin:0;
  background:var(--gold);color:#231703;border-radius:2px;line-height:1;
  font:600 10px/1 var(--font-ui);letter-spacing:0.16em;text-transform:uppercase;padding:7px 10px;
}

/* ---- Kategorie-Marke am Kartenkopf (Gold/Petrol-Logik) ----
   functions.php hängt .oe-kind-gold / .oe-kind-petrol an li.product.
   Gold = Erlebnisse/Events, Petrol = Werkzeuge/Waren. */
.oe-woo ul.products li.product::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;opacity:0.9;
}
.oe-woo ul.products li.product.oe-kind-gold::before{background:var(--gold);}
.oe-woo ul.products li.product.oe-kind-petrol::before{background:var(--petrol);}
.oe-woo .oe-kind-badge{position:absolute;top:14px;left:14px;z-index:2;}

/* Pagination */
.oe-woo .woocommerce-pagination ul{border:none;display:flex;gap:8px;justify-content:center;margin-top:56px;list-style:none;padding:0;}
.oe-woo .woocommerce-pagination ul li{border:none;margin:0;}
.oe-woo .woocommerce-pagination ul li a,
.oe-woo .woocommerce-pagination ul li span{
  background:var(--card);border:1px solid var(--hairline);color:var(--body);border-radius:var(--radius);
  min-width:44px;min-height:44px;line-height:42px;padding:0 6px;
}
.oe-woo .woocommerce-pagination ul li span.current{border-color:var(--gold);color:var(--ink);}
.oe-woo .woocommerce-pagination ul li a:hover{border-color:var(--gold-deep);color:var(--gold-deep);}

/* ============================================================
   Produkt-Einzelseite.
   ============================================================ */
.oe-woo div.product{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:64px;align-items:start;}
/* WooCommerce-Kernstylesheet vergibt div.images/div.summary (Legacy-Klassen
   der Galerie bzw. Summary) eine feste width:48% fürs alte Float-Layout.
   Das kollidiert mit unserem Grid und quetscht Bild UND Text auf knapp die
   Hälfte ihrer Spalte, mit riesigem Leerraum drumherum. Gleiches Muster wie
   schon bei ul.products li.product: auf 100% der Grid-Zelle zurücksetzen. */
.oe-woo div.product div.images,
.oe-woo div.product div.summary{width:100% !important;float:none !important;}
.oe-woo div.product .woocommerce-product-gallery{margin:0;}
.oe-woo div.product .woocommerce-product-gallery img{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--tile);}
.oe-woo div.product .summary{margin:0;}
.oe-woo div.product .summary > .price,
.oe-woo div.product p.price{color:var(--gold-deep);font:500 24px/1.4 var(--font-ui);letter-spacing:0.02em;margin:0 0 24px;font-feature-settings:'tnum';}
.oe-woo div.product p.price del{color:var(--muted);margin-right:10px;}
.oe-woo div.product p.price ins{text-decoration:none;color:var(--gold-deep);}
.oe-woo .woocommerce-product-details__short-description{font:400 19px/1.75 var(--font-ui);color:var(--body);margin:0 0 28px;max-width:600px;}
.oe-woo .woocommerce-product-details__short-description p{margin:0 0 16px;}
.oe-woo form.cart{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 32px;}
.oe-woo form.cart .quantity .qty{width:84px;text-align:center;background:#fff;color:var(--ink);border:1px solid var(--hairline-strong);border-radius:var(--radius);min-height:48px;}
.oe-woo .product_meta{border-top:1px solid var(--hairline);padding-top:20px;margin-top:8px;font:400 14px/1.7 var(--font-ui);color:var(--muted);}
.oe-woo .product_meta a{color:var(--gold-deep);}

/* Produkt-Tabs */
.oe-woo .woocommerce-tabs{grid-column:1 / -1;margin-top:24px;}
.oe-woo .woocommerce-tabs ul.tabs{margin:0 0 32px;padding:0;border:none;display:flex;gap:36px;flex-wrap:wrap;}
.oe-woo .woocommerce-tabs ul.tabs::before{display:none;}
.oe-woo .woocommerce-tabs ul.tabs li{background:transparent;border:none;border-radius:0;margin:0;padding:0 0 8px;}
.oe-woo .woocommerce-tabs ul.tabs li a{font:500 12px/1.4 var(--font-ui);letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);padding:0;}
.oe-woo .woocommerce-tabs ul.tabs li.active{border-bottom:2px solid var(--gold);}
.oe-woo .woocommerce-tabs ul.tabs li.active a{color:var(--ink);}
.oe-woo .woocommerce-tabs .panel{font:400 18px/1.75 var(--font-ui);color:var(--body);}
.oe-woo .related,.oe-woo .upsells{grid-column:1 / -1;margin-top:80px;border-top:1px solid var(--hairline);padding-top:64px;}

/* ============================================================
   Tabellen (Warenkorb, Kasse, Konto).
   ============================================================ */
.oe-woo table.shop_table,.oe-woo table.woocommerce-table{
  border:1px solid var(--hairline);border-collapse:collapse;border-radius:0;background:transparent;color:var(--body);width:100%;
}
.oe-woo table.shop_table th,.oe-woo table.woocommerce-table th{
  font:500 11px/1.5 var(--font-ui);letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-deep);
  text-align:left;padding:16px 18px;border-bottom:1px solid var(--hairline);background:var(--card);
}
.oe-woo table.shop_table td,.oe-woo table.woocommerce-table td{
  padding:18px;border-top:1px solid var(--hairline);font:400 16px/1.6 var(--font-ui);color:var(--body);vertical-align:middle;
}
.oe-woo table.shop_table tfoot th,.oe-woo table.shop_table tfoot td{background:var(--card);color:var(--ink);}
.oe-woo table.shop_table .product-name a{color:var(--ink);text-decoration:none;}
.oe-woo td.product-thumbnail img{width:64px;border:1px solid var(--hairline);border-radius:2px;}
.oe-woo .cart_totals{max-width:480px;margin-left:auto;margin-top:48px;}
.oe-woo .wc-proceed-to-checkout{padding-top:24px;}
.oe-woo .wc-proceed-to-checkout .checkout-button{display:block;width:100%;}
.oe-woo a.remove{color:var(--muted) !important;border:1px solid var(--hairline);border-radius:50%;width:24px;height:24px;line-height:22px;}
.oe-woo a.remove:hover{color:#fff !important;background:var(--gold) !important;border-color:var(--gold);}

/* ============================================================
   Kasse.
   ============================================================ */
.oe-woo #customer_details .col-1,.oe-woo #customer_details .col-2{width:100%;float:none;}
.oe-woo #order_review{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:32px;}
.oe-woo .wc_payment_methods{list-style:none;margin:0 0 24px;padding:0;}
.oe-woo .wc_payment_methods li{border-top:1px solid var(--hairline);padding:16px 0;}
.oe-woo .wc_payment_methods li:last-child{border-bottom:1px solid var(--hairline);}
.oe-woo .wc_payment_methods label{color:var(--ink);font:500 15px/1.5 var(--font-ui);}
.oe-woo .payment_box{background:#fff !important;border:1px solid var(--hairline);border-radius:var(--radius);color:var(--body);font:400 14px/1.6 var(--font-ui);margin-top:12px;}
.oe-woo .payment_box::before{display:none;}
.oe-woo #place_order{display:block;width:100%;margin-top:24px;}

/* ============================================================
   Mein Konto.
   ============================================================ */
.oe-woo .woocommerce-account .woocommerce{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start;}
.oe-woo .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;}
.oe-woo .woocommerce-MyAccount-navigation li{border-top:1px solid var(--hairline);}
.oe-woo .woocommerce-MyAccount-navigation li:last-child{border-bottom:1px solid var(--hairline);}
.oe-woo .woocommerce-MyAccount-navigation li a{display:block;padding:14px 0;text-decoration:none;color:var(--muted);
  font:500 12px/1.4 var(--font-ui);letter-spacing:0.16em;text-transform:uppercase;}
.oe-woo .woocommerce-MyAccount-navigation li a:hover{color:var(--gold-deep);}
.oe-woo .woocommerce-MyAccount-navigation li.is-active a{color:var(--ink);}
.oe-woo .woocommerce-MyAccount-content{font:400 17px/1.7 var(--font-ui);color:var(--body);}
.oe-woo .woocommerce-form-login,.oe-woo .woocommerce-form-register,.oe-woo .login,.oe-woo .register{
  border:1px solid var(--hairline);border-radius:var(--radius);background:var(--card);padding:32px;
}

/* ============================================================
   Multi-Currency-Umschalter (CHF/EUR).
   ============================================================ */
.oe-woo .wmc-currency-wrapper,
.oe-woo .woocommerce-currency-switcher-form,
.oe-woo .wcml-currency-switcher{font:500 12px/1.4 var(--font-ui);letter-spacing:0.1em;}
.oe-woo .wmc-currency-wrapper select{width:auto;display:inline-block;}

/* ============================================================
   WooCommerce-Blocks (Cart & Checkout). Diese Seiten laufen über die
   Block-Templates (wc-block-*-Klassen), nicht die klassischen Shortcode-
   Selektoren oben. Gleiche Gold/Hell-Sprache, eigene Klassenwelt.
   ============================================================ */
.oe-woo input[type=radio],
.oe-woo input[type=checkbox]{accent-color:var(--gold);}

.oe-woo .wc-block-components-button{
  font:600 12px/1 var(--font-ui) !important;letter-spacing:0.2em;text-transform:uppercase;
  border-radius:var(--radius) !important;border:1px solid var(--hairline-strong);background:transparent;color:var(--ink);
  padding:16px 28px;min-height:48px;box-shadow:none;
}
.oe-woo .wc-block-components-button:hover{border-color:var(--gold-deep);color:var(--gold-deep);background:transparent;}
/* Primäre Kaufaktion (Weiter zur Kasse, Jetzt kaufen): gold gefüllt,
   dieselbe Regel wie bei den klassischen .button.alt-Aktionen. */
.oe-woo .wc-block-cart__submit-button,
.oe-woo .wc-block-components-checkout-place-order-button{
  background:var(--gold);border-color:var(--gold);color:#231703;
}
.oe-woo .wc-block-cart__submit-button:hover,
.oe-woo .wc-block-components-checkout-place-order-button:hover{
  background:var(--gold-bright);border-color:var(--gold-bright);color:#231703;
}

.oe-woo .wc-block-components-formatted-money-amount{color:var(--gold-deep);font-feature-settings:'tnum';}

.oe-woo .wc-block-checkout__sidebar{
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:28px;
}

.oe-woo .wc-block-components-radio-control__option{
  border:1px solid var(--hairline) !important;border-radius:var(--radius);background:var(--card);
}
.oe-woo .wc-block-components-radio-control__option-checked{border-color:var(--gold) !important;}

/* ============================================================
   Responsiv.
   ============================================================ */
@media(max-width:1000px){
  .oe-woo ul.products{gap:28px;}
  .oe-woo ul.products li.product{width:calc(50% - 14px) !important;}
}
@media(max-width:820px){
  .oe-woo{padding:52px 0 76px;}
  .oe-woo .woocommerce-products-header__title,.oe-woo .product_title{font-size:30px;}
  .oe-woo div.product{grid-template-columns:1fr;gap:36px;}
  .oe-woo .woocommerce-account .woocommerce{grid-template-columns:1fr;gap:32px;}
  .oe-woo .cart_totals{max-width:none;}
}
@media(max-width:520px){
  .oe-woo ul.products li.product{width:100% !important;}
}