/** * Custom Quantity Add to Cart – Shortcode * Eckig (kein Radius), kein Schatten, saubere Einzel-1px-Linien (keine Doppelungen). * Zahl drücken = sofort hinzufügen; Feld + OK = eigene Menge. * Selektoren spezifisch + !important, da der Block ans wandert. */ .cqatc { --cqatc-accent: #b35a4d; /* Rot/Terrakotta bei Hover/Klick */ --cqatc-success: #2e7d32; --cqatc-error: #c0392b; position: relative; display: block; margin-top: .5em; text-align: center; /* Button + Meldung zentriert */ } /* --- "+"-Button: Standard weiß/schwarz, rot erst bei Hover/Klick --- */ .cqatc .cqatc-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; margin: 0 auto; box-sizing: border-box; border: 1px solid #000 !important; border-radius: 0 !important; background: #fff !important; color: #000 !important; cursor: pointer; line-height: 1; box-shadow: none !important; transition: background-color .15s ease, color .15s ease, border-color .15s ease; -webkit-appearance: none; appearance: none; } .cqatc .cqatc-toggle:hover, .cqatc .cqatc-toggle:active, .cqatc.is-open .cqatc-toggle { background: var(--cqatc-accent) !important; color: #fff !important; border-color: var(--cqatc-accent) !important; } .cqatc .cqatc-toggle-icon { font-size: 22px; font-weight: 400; color: inherit; pointer-events: none; } /* Sichtbarer Tastatur-Fokus */ .cqatc-toggle:focus-visible, .cqatc-pad .cqatc-num:focus-visible, .cqatc-pad .cqatc-ok:focus-visible, .cqatc-pad .cqatc-qty-input:focus-visible { outline: 3px solid #1d6fb8 !important; outline-offset: -3px; } /* --- Ziffernblock (Dropdown): weißer Grund, äußerer 1px-Rahmen --- */ .cqatc-pad { width: 174px; max-width: 80vw; padding: 0 !important; background: #fff !important; border: 1px solid #000 !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box; } .cqatc-pad.is-floating { position: fixed; z-index: 2147483600; } /* Zahlenraster: Linien NUR über rechts/unten-Rahmen der Zellen -> nie doppelt */ .cqatc-pad .cqatc-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 0; background: transparent; } .cqatc-pad .cqatc-num { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0; font-size: 15px; box-sizing: border-box; color: #000 !important; background: #fff !important; border: 0 !important; border-right: 1px solid #000 !important; /* senkrechte Trennlinie */ border-bottom: 1px solid #000 !important; /* waagrechte Trennlinie */ border-radius: 0 !important; box-shadow: none !important; cursor: pointer; transition: background-color .12s ease, color .12s ease; -webkit-appearance: none; appearance: none; } /* letzte Spalte: keine rechte Linie (der Pad-Rahmen übernimmt den Rand) */ .cqatc-pad .cqatc-num:nth-child( 3n ) { border-right: 0 !important; } /* Gedrückt / Hover => rot (deutlich sichtbar) */ .cqatc-pad .cqatc-num:hover, .cqatc-pad .cqatc-num:active { background: var(--cqatc-accent) !important; color: #fff !important; } /* --- Fußzeile: eigenes Mengenfeld + OK, exakt gleiche Höhe --- */ .cqatc-pad .cqatc-footer { display: flex; align-items: stretch; gap: 0; margin: 0; background: transparent; border: 0; /* die obere Trennlinie liefert die border-bottom der untersten Zahlenzeile */ } .cqatc-pad .cqatc-qty-input { flex: 1 1 auto; width: 100%; height: 40px; min-height: 40px; padding: 0 8px; font-size: 16px; /* 16px verhindert iOS-Auto-Zoom */ text-align: center; box-sizing: border-box; color: #000 !important; background: #fff !important; border: 0 !important; border-right: 1px solid #000 !important; /* Trennlinie zu OK */ border-radius: 0 !important; box-shadow: none !important; -moz-appearance: textfield; } .cqatc-pad .cqatc-qty-input::-webkit-outer-spin-button, .cqatc-pad .cqatc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cqatc-pad .cqatc-ok { flex: 0 0 auto; min-width: 54px; height: 40px; min-height: 40px; /* gleiche Höhe wie das Eingabefeld */ padding: 0 12px; font-size: 14px; box-sizing: border-box; color: #000 !important; background: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer; transition: background-color .12s ease, color .12s ease; -webkit-appearance: none; appearance: none; } .cqatc-pad .cqatc-ok:hover, .cqatc-pad .cqatc-ok:active { background: var(--cqatc-accent) !important; color: #fff !important; } /* --- Erfolgs-/Fehlermeldung (unter dem Button, zentriert) --- */ .cqatc-message { margin: .5em 0 0; font-size: .82em; line-height: 1.4; min-height: 1.2em; text-align: center; } .cqatc.is-loading .cqatc-message { color: #555; } .cqatc.is-success .cqatc-message { color: var(--cqatc-success); font-weight: 600; } .cqatc.is-error .cqatc-message { color: var(--cqatc-error); font-weight: 600; } .cqatc-cart-link { display: block; margin: .25em auto 0; text-align: center; text-decoration: underline; } .cqatc-unavailable { margin-top: .5em; font-size: .82em; color: #888; text-align: center; } /* --- Mobil: Ziffernblock als Sheet am unteren Rand --- */ .cqatc-pad.is-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: 100%; z-index: 2147483600; } @media ( max-width: 600px ) { .cqatc-pad.is-sheet .cqatc-num { min-height: 48px; } .cqatc-pad.is-sheet .cqatc-qty-input, .cqatc-pad.is-sheet .cqatc-ok { height: 50px; min-height: 50px; } } @media ( prefers-reduced-motion: reduce ) { .cqatc .cqatc-toggle, .cqatc-pad .cqatc-num, .cqatc-pad .cqatc-ok { transition: none; } }