/* Korrekturen fuer die Warenkorbseite. Bewusst eine eigene Datei: puzzlemap-cart-flyout.php bleibt unangetastet. Laedt nach pm-cart-pill.css, gewinnt also gegen dessen Regeln. ACHTUNG bei Selektoren: die Klasse .woocommerce-cart sitzt auf dem , das zugleich die id #top traegt. "#top .woocommerce-cart" mit Leerzeichen trifft deshalb nichts. Wir schreiben body.woocommerce-cart. */ /* --- Entfernen-Button: zurueck zum klassischen X --------------------------- */ body.woocommerce-cart table.shop_table.cart td.product-remove a.remove, body.woocommerce-cart table.shop_table.cart a.remove, body.woocommerce-checkout table.shop_table a.remove{ background:transparent!important; background-color:transparent!important; color:#8a93a5!important; border:0!important; border-radius:0!important; box-shadow:none!important; text-shadow:none!important; text-decoration:none!important; display:inline-block!important; width:auto!important; height:auto!important; min-width:0!important; line-height:1!important; font-size:26px!important; font-weight:400!important; padding:2px 8px!important; margin:0!important; text-indent:0!important; text-align:center!important; text-overflow:clip!important; white-space:nowrap!important; visibility:visible!important; opacity:1!important; transition:color .15s ease; } body.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover, body.woocommerce-cart table.shop_table.cart a.remove:hover{ background:transparent!important; background-color:transparent!important; color:#c0392b!important; } /* --- Mobil --------------------------------------------------------------- Enfold blendet bei max-width 767px .product-quantity komplett aus, dadurch fehlen die Kopfzeile "Anzahl" und der Mengen-Stepper. Wir holen die Spalte zurueck und verteilen die Breiten neu, damit die Zeile nicht bricht. */ @media (max-width:767px){ /* Anzahl-Spalte zurueck in Kopfzeile und Zeile */ body.woocommerce-cart table.shop_table th.product-quantity, body.woocommerce-cart table.shop_table td.product-quantity, body.woocommerce-cart table.shop_table.cart .product-quantity{ display:table-cell!important; width:25%!important; text-align:center!important; padding:8px 2px!important; } /* Entfernen-Spalte sichtbar und gross genug fuer den Daumen */ body.woocommerce-cart table.shop_table.cart th.product-remove, body.woocommerce-cart table.shop_table.cart td.product-remove{ display:table-cell!important; width:11%!important; text-align:center!important; padding:8px 0!important; visibility:visible!important; overflow:visible!important; } body.woocommerce-cart table.shop_table.cart td.product-remove a.remove{ font-size:30px!important; color:#5f6b7f!important; padding:6px 4px!important; } /* Restliche Spalten schmaler, damit alles hineinpasst */ body.woocommerce-cart table.shop_table.cart .product-name{ width:30%!important; text-align:left!important; padding:8px 4px!important; } body.woocommerce-cart table.shop_table.cart .product-price{ width:17%!important; padding:8px 2px!important; } body.woocommerce-cart table.shop_table.cart .product-subtotal{ width:17%!important; padding:8px 2px!important; } body.woocommerce-cart table.shop_table.cart th{ font-size:11px!important; line-height:1.3!important; padding:6px 2px!important; } /* Mengenwahl: Plus oben, Minus unten. DOM ist minus, Zahl, plus - column-reverse dreht die Reihenfolge visuell um. */ body.woocommerce-cart table.shop_table td.product-quantity .pm-qty-cart, body.woocommerce-cart table.shop_table .pm-qty-cart, body.woocommerce-cart .pm-qty-cart{ display:inline-flex!important; flex-direction:column-reverse!important; align-items:center!important; justify-content:center!important; gap:6px!important; } body.woocommerce-cart .pm-qty-cart .pm-qty-btn{ width:38px!important; height:38px!important; font-size:20px!important; } /* Das Spaltenlabel in der Zelle ist jetzt doppelt, weil die Kopfzeile wieder sichtbar ist. Eine Inline-Regel setzt content: attr(data-title). */ body.woocommerce-cart table.shop_table td.product-quantity::before, body.woocommerce-cart .shop_table td.product-quantity::before{ content:none!important; display:none!important; } body.woocommerce-cart .pm-qty-cart .pm-qty-num{ min-width:0!important; font-size:18px!important; } }