/* Schütz Dental – Shop: Produktkarte (Liste/Kacheln), Kopf mit Unterkategorien, beliebte Suchen, Filter */ :root { --sd-yellow: #fad420; --sd-yellow-d: #f5cb00; --sd-ink: #222529; --sd-muted: #777; --sd-line: #ececec; } /* ============================================================ Kopf über der Liste */ .sd-shop-head-wrap { width: 100%; } .sd-shop-head { margin: 0 0 6px; } .sd-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; } .sd-subcat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #e3e3e3; border-radius: 999px; background: #fafafa; color: var(--sd-ink) !important; font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none !important; transition: background-color .15s, border-color .15s; } .sd-subcat:hover, .sd-subcat:focus-visible { background: var(--sd-yellow); border-color: var(--sd-yellow); } .sd-subcat__count { font-size: 11.5px; font-weight: 600; color: #8a8a8a; background: #fff; border-radius: 999px; padding: 2px 7px; } .sd-subcat:hover .sd-subcat__count { color: var(--sd-ink); } .sd-shop-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 0 0 12px; border-bottom: 1px solid #eee; margin-bottom: 4px; } .sd-shop-bar__count { font-size: 13px; color: var(--sd-muted); } .sd-sort { margin: 0 0 0 auto !important; } .sd-sort select.orderby { height: 36px; min-width: 0; max-width: 240px; margin: 0; padding: 0 32px 0 14px; border: 1px solid #e3e3e3; border-radius: 999px; background-color: #fff; color: var(--sd-ink); font-size: 13px; font-weight: 600; cursor: pointer; } .sd-sort select.orderby:focus { outline: none; border-color: var(--sd-ink); } .sd-view { display: inline-flex; margin-left: 0; border: 1px solid #e3e3e3; border-radius: 999px; overflow: hidden; background: #fff; } .sd-view__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 34px; padding: 0; border: 0; background: #fff; color: #9a9a9a; cursor: pointer; transition: background-color .15s, color .15s; } .sd-view__btn:hover { color: var(--sd-ink); } html.sd-view-list .sd-view__btn[data-view="list"], html.sd-view-grid .sd-view__btn[data-view="grid"] { background: var(--sd-ink); color: #fff; } /* ============================================================ Raster/Liste von Porto */ .sd-shop-grid .porto-posts-grid { --porto-el-spacing: 24px !important; } html.sd-view-list .sd-shop-grid .porto-posts-grid { --porto-el-spacing: 0px !important; } html.sd-view-list .sd-shop-grid .products-container > .porto-tb-item { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin-bottom: 0 !important; } .sd-shop-grid .porto-tb-item > p:empty { display: none; } /* ============================================================ Karte – Grundform (Liste) */ .sd-card { display: grid; grid-template-columns: 104px minmax(0, 1fr) minmax(250px, 300px); gap: 22px; align-items: center; padding: 18px 6px; border-bottom: 1px solid #f0f0f0; background: #fff; height: 100%; box-sizing: border-box; transition: background-color .12s; } .sd-card:hover { background: #fcfcfc; } .sd-card__img { position: relative; display: block; width: 104px; height: 104px; overflow: hidden; border: 1px solid var(--sd-line); border-radius: 12px; background: #fff; } .sd-card__img img { display: block; width: 100% !important; height: 100% !important; object-fit: contain; padding: 6px; box-sizing: border-box; transition: transform .25s; } .sd-card:hover .sd-card__img img { transform: scale(1.04); } .sd-card__noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 32px; font-weight: 700; color: #ccc; background: #f7f7f7; } .sd-card__badge { position: absolute; top: 6px; left: 6px; padding: 3px 8px; border-radius: 999px; background: #d32f2f; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; } .sd-card__body { min-width: 0; } .sd-card__cat { display: inline-block; margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8a8a8a !important; text-decoration: none !important; } .sd-card__cat:hover { color: var(--sd-ink) !important; } .sd-card .sd-card__title { margin: 0 0 4px !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 0; } .sd-card__title a { color: var(--sd-ink) !important; text-decoration: none !important; } .sd-card__title a:hover { text-decoration: underline !important; text-decoration-color: var(--sd-yellow) !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; } .sd-card__meta { margin: 0 0 6px; font-size: 12.5px; color: var(--sd-muted); } .sd-card__dot { margin: 0 6px; color: #bbb; } .sd-card__vars { color: var(--sd-ink); font-weight: 600; } .sd-card__desc { margin: 0 !important; font-size: 13.5px; line-height: 1.5; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sd-card__buy { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 0; } .sd-card__price { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--sd-ink); text-align: right; } .sd-card__price del { margin-right: 4px; font-size: 13px; font-weight: 400; color: #999; } .sd-card__price ins { text-decoration: none; } .sd-card__price .price-prefix-ab { font-size: 13px; font-weight: 600; color: var(--sd-muted); } .sd-card__price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .sd-card__cart { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; } .sd-card__var { flex: 1 1 100%; width: 100%; max-width: 100%; height: 40px; padding: 0 34px 0 12px; margin: 0; border: 1px solid #dcdcdc; border-radius: 10px; background-color: #fff; color: var(--sd-ink); font-size: 13px; text-overflow: ellipsis; } .sd-card__var:focus { border-color: var(--sd-ink); outline: none; box-shadow: 0 0 0 3px rgba(250, 212, 32, .45); } .sd-card__var.sd-pulse { animation: sd-pulse .7s ease; } @keyframes sd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(250, 212, 32, 0); } 30% { box-shadow: 0 0 0 5px rgba(250, 212, 32, .8); } } .sd-card__qty { width: 64px !important; height: 40px !important; margin: 0 !important; padding: 0 6px !important; border: 1px solid #dcdcdc !important; border-radius: 999px !important; text-align: center; font-weight: 600; font-size: 14px; color: var(--sd-ink); background: #fff; -moz-appearance: textfield; } .sd-card__qty::-webkit-outer-spin-button, .sd-card__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sd-shop-grid .sd-card .sd-card__btn, .sd-card .sd-card__btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 0; padding: 0 18px !important; margin: 0 !important; border: 2px solid var(--sd-yellow) !important; border-radius: 999px !important; background: var(--sd-yellow) !important; color: var(--sd-ink) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; white-space: nowrap; box-shadow: none !important; transition: background-color .15s, border-color .15s, transform .1s, opacity .15s; } .sd-card .sd-card__btn::before, .sd-card .sd-card__btn::after { display: none !important; } .sd-card .sd-card__btn:hover { background: var(--sd-yellow-d) !important; border-color: var(--sd-yellow-d) !important; } .sd-card .sd-card__btn:active { transform: scale(.97); } .sd-card .sd-card__plus { font-size: 17px; font-weight: 800; line-height: 1; } .sd-card .sd-card__btn.is-disabled { opacity: .45; cursor: not-allowed; } .sd-card .sd-card__btn.loading { opacity: .6; pointer-events: none; } .sd-card .sd-card__btn.added { background: #2e7d32 !important; border-color: #2e7d32 !important; color: #fff !important; } .sd-card .sd-card__btn.added .sd-card__plus { display: none; } .sd-card .sd-card__btn.added::before { content: "\2713" !important; display: inline !important; font-size: 15px; font-family: inherit !important; } .sd-card .sd-card__btn--ghost { background: #fff !important; border-color: var(--sd-ink) !important; } .sd-card .sd-card__btn--ghost:hover { background: var(--sd-ink) !important; border-color: var(--sd-ink) !important; color: #fff !important; } .sd-card .added_to_cart { flex-basis: 100%; margin: 0 !important; padding: 0 !important; text-align: right; font-size: 12px; color: var(--sd-muted) !important; background: none !important; } /* Seiten/Beiträge in der Suche */ .sd-card--page .sd-card__img img { object-fit: cover; padding: 0; } /* ============================================================ Kacheln */ html.sd-view-grid .sd-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-items: stretch; gap: 12px; padding: 14px; border: 1px solid #eee; border-radius: 14px; } html.sd-view-grid .sd-card:hover { background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); border-color: #e2e2e2; } html.sd-view-grid .sd-card__img { width: 100%; height: auto; aspect-ratio: 1 / 1; border: 0; border-radius: 10px; } html.sd-view-grid .sd-card .sd-card__title { font-size: 15px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html.sd-view-grid .sd-card__desc { display: none; } html.sd-view-grid .sd-card__buy { align-items: stretch; } html.sd-view-grid .sd-card__price { text-align: left; font-size: 17px; } html.sd-view-grid .sd-card__cart { justify-content: stretch; flex-wrap: nowrap; } html.sd-view-grid .sd-card__cart--var { flex-wrap: wrap; } html.sd-view-grid .sd-card .sd-card__btn { flex: 1 1 auto; padding: 0 12px !important; } html.sd-view-grid .sd-card__btn-text { overflow: hidden; text-overflow: ellipsis; } html.sd-view-grid .sd-card .added_to_cart { text-align: left; } /* ============================================================ Tablet / Handy */ @media (max-width: 1199px) { .sd-card { grid-template-columns: 88px minmax(0, 1fr) minmax(220px, 250px); gap: 16px; } .sd-card__img { width: 88px; height: 88px; } } @media (max-width: 767px) { html.sd-view-list .sd-card { grid-template-columns: 72px minmax(0, 1fr); gap: 10px 14px; padding: 14px 0; align-items: start; } html.sd-view-list .sd-card__img { width: 72px; height: 72px; border-radius: 10px; } html.sd-view-list .sd-card .sd-card__title { font-size: 15px !important; } html.sd-view-list .sd-card__cat { font-size: 10px; margin-bottom: 2px; } html.sd-view-list .sd-card__desc { display: none; } html.sd-view-list .sd-card__buy { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; } html.sd-view-list .sd-card__price { text-align: left; font-size: 16px; white-space: nowrap; } html.sd-view-list .sd-card__cart { width: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; } html.sd-view-list .sd-card__cart--var { grid-column: 1 / -1; flex-wrap: wrap; } html.sd-view-list .sd-card__cart--var .sd-card__var { flex: 1 1 100%; } html.sd-view-list .sd-card__cart--var .sd-card__btn { flex: 1 1 auto; } html.sd-view-list .sd-card__buy > .sd-card__btn--ghost { justify-self: end; } .sd-card__qty { width: 52px !important; height: 40px !important; } .sd-card .sd-card__btn { padding: 0 14px !important; } .sd-card .sd-card__btn-text { font-size: 13px; } .sd-shop-bar__count { flex: 1 1 auto; } .sd-sort { order: 3; flex: 1 1 100%; } .sd-sort select.orderby { width: 100%; max-width: none; } html.sd-view-grid .sd-card { padding: 10px; gap: 10px; border-radius: 12px; } html.sd-view-grid .sd-card__qty { display: none; } html.sd-view-grid .sd-card .sd-card__btn { font-size: 12px !important; } html.sd-view-grid .sd-card__btn-text { display: none; } html.sd-view-grid .sd-card .sd-card__btn::after { content: "Warenkorb" !important; display: inline !important; font-family: inherit !important; } html[lang^="en"].sd-view-grid .sd-card .sd-card__btn::after { content: "Add" !important; } .sd-subcats { flex-wrap: nowrap; overflow-x: auto; margin-right: -15px; padding-bottom: 4px; scrollbar-width: none; } .sd-subcats::-webkit-scrollbar { display: none; } .sd-subcat { flex: 0 0 auto; } } /* ============================================================ Beliebte Suchen am Suchfeld */ .sd-sugg { position: absolute; z-index: 100001; display: none; box-sizing: border-box; padding: 16px 18px 14px; border: 1px solid #e9e9e9; border-radius: 14px; background: #fff; box-shadow: 0 16px 48px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .06); } .sd-sugg.is-open { display: block; animation: sd-fade .12s ease-out; } @keyframes sd-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .sd-sugg__title { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; } .sd-sugg__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .sd-sugg .sd-sugg__chip { display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 0; padding: 7px 13px !important; margin: 0 !important; border: 1px solid #e3e3e3 !important; border-radius: 999px !important; background: #fafafa !important; cursor: pointer; box-shadow: none !important; color: var(--sd-ink) !important; font-family: inherit; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; transition: background-color .15s, border-color .15s; } .sd-sugg .sd-sugg__chip svg { color: #999; } .sd-sugg .sd-sugg__chip:hover, .sd-sugg .sd-sugg__chip:focus-visible { background: var(--sd-yellow) !important; border-color: var(--sd-yellow) !important; } .sd-sugg__chip:hover svg { color: var(--sd-ink); } .sd-sugg__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; } .sd-sugg__cat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--sd-ink) !important; font-size: 14px; text-decoration: none !important; } .sd-sugg__cat:hover { background: #f5f5f5; } .sd-sugg__n { font-size: 12px; color: #9a9a9a; } @media (max-width: 767px) { .sd-sugg { left: 0 !important; width: 100% !important; border-radius: 0; border-left: 0; border-right: 0; box-shadow: 0 14px 28px rgba(0, 0, 0, .14); padding: 14px 16px 10px; } .sd-sugg.is-open { animation: none; } .sd-sugg__cats { grid-template-columns: 1fr; } .sd-sugg__cat { padding: 9px 4px; border-bottom: 1px solid #f3f3f3; border-radius: 0; font-size: 15px; } .sd-sugg__cat:last-child { border-bottom: 0; } } /* ============================================================ Filter (YITH) */ .yith-wcan-filters .yith-wcan-filter { margin-bottom: 18px !important; padding-bottom: 14px; border-bottom: 1px solid #f0f0f0; } .yith-wcan-filters .yith-wcan-filter .filter-title { margin: 0 0 10px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .07em; text-transform: uppercase; color: var(--sd-ink) !important; } .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item { margin-bottom: 4px; } .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item > a, .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item label { font-size: 14px; color: #333; } .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item .item-count { margin-left: 6px; font-size: 12px; color: #9a9a9a; } .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.active > a, .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.active label { font-weight: 700; color: var(--sd-ink); } .yith-wcan-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px !important; } .yith-wcan-active-filters .active-filter { display: contents; } .yith-wcan-active-filters .active-filter > b { display: none; } .yith-wcan-active-filters .active-filter-label { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 6px 12px !important; border: 0 !important; border-radius: 999px !important; background: var(--sd-yellow) !important; color: var(--sd-ink) !important; font-size: 12.5px !important; font-weight: 600; } .yith-wcan-active-filters .reset-filters, .yith-wcan-filters .yith-wcan-reset-filters { padding: 6px 12px !important; border: 1px solid var(--sd-ink) !important; border-radius: 999px !important; background: #fff !important; color: var(--sd-ink) !important; font-size: 12.5px !important; font-weight: 600 !important; text-transform: none !important; } /* „Varianten“-Badge aus den Porto-Optionen (eigenes JS): hier unnötig, das Auswahlfeld steht direkt in der Zeile */ .sd-shop-grid .badge-varianten, .sd-shop-grid .custom-badge.badge-varianten, .asp_r .badge-varianten { display: none !important; } /* iOS zoomt beim Antippen in Felder unter 16 px: auf Touch-Geräten alle Eingaben auf 16 px */ @media (max-width: 1024px), (pointer: coarse) { div.asp_m .probox .proinput input.orig, div.asp_m .probox .proinput input.autocomplete, div.asp_m .probox .proinput input.orig::placeholder { font-size: 16px !important; } .sd-card__qty, .sd-card__var, .sd-sort select.orderby, div.asp_r.vertical .sd-asp__cart .sd-card__var, .yith-wcan-filters input, .yith-wcan-filters select { font-size: 16px !important; } } /* Mengenfeld: Zahl mittig (Porto setzt bei Zahlenfeldern eigenen Innenabstand) */ .sd-card input.sd-card__qty { padding: 0 !important; text-align: center !important; text-indent: 0 !important; line-height: 40px !important; -webkit-appearance: none; appearance: textfield; } /* „Preis auf Anfrage“ + Anfrage-Button (weiß mit Rahmen, nicht gelb) */ .sd-card__onreq { font-size: 14px; font-weight: 600; color: var(--sd-muted); } .sd-shop-grid .sd-card .sd-card__btn.sd-card__btn--ghost, .sd-card .sd-card__btn.sd-card__btn--ghost { background: #fff !important; border-color: var(--sd-ink) !important; color: var(--sd-ink) !important; } .sd-shop-grid .sd-card .sd-card__btn.sd-card__btn--ghost:hover, .sd-card .sd-card__btn.sd-card__btn--ghost:hover { background: var(--sd-ink) !important; color: #fff !important; } @media (max-width: 767px) { html.sd-view-list .sd-card__buy > .sd-card__btn--ghost { justify-self: end; } } /* ============================================================ Leiste v2: Filter | Sortieren | Ansicht (Shopify-Muster) */ .sd-shop-bar-wrap { width: 100%; } .sd-shop-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 0 0 12px; margin: 0; border-bottom: 1px solid #eee; } .sd-shop-bar__count { flex: 1 1 auto; font-size: 13px; color: var(--sd-muted); } .sd-tool { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; margin: 0; border: 1px solid #dcdcdc; border-radius: 10px; background: #fff; color: var(--sd-ink); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; } .sd-tool svg { flex: 0 0 auto; color: var(--sd-ink); } .sd-tool--filter { display: none; } .sd-tool__n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--sd-yellow); font-size: 12px; font-weight: 700; } .sd-tool--sort { padding: 0 0 0 12px; } .sd-tool--sort .sd-sort { margin: 0 !important; flex: 1 1 auto; min-width: 0; } .sd-tool--sort .sd-sort select.orderby { width: 100%; max-width: 260px; height: 38px; margin: 0; padding: 0 30px 0 0; border: 0 !important; border-radius: 0; background-color: transparent; box-shadow: none !important; font-size: 14px; font-weight: 600; color: var(--sd-ink); text-overflow: ellipsis; cursor: pointer; } .sd-view { flex: 0 0 auto; border-radius: 10px; } .sd-view__btn { height: 38px; } /* aktive Filter als Chips */ .sd-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0 2px; } .sd-active__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--sd-ink); color: #fff !important; font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none !important; } .sd-active__x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 14px; line-height: 1; } .sd-active__chip:hover .sd-active__x { background: var(--sd-yellow); color: var(--sd-ink); } .sd-active__reset { margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--sd-ink) !important; text-decoration: underline !important; text-underline-offset: 3px; } /* YITHs eigene Aktiv-Chips/Zurücksetzen in der Seitenleiste: doppelt, wir zeigen sie über der Liste */ .yith-wcan-active-filters, .yith-wcan-filters .yith-wcan-reset-filters { display: none !important; } /* Schubladen-Button unten im Filter-Panel (Handy) */ .sd-drawer-done { display: none; } @media (max-width: 991px) { .sd-shop-bar-wrap { position: sticky; top: 0; z-index: 40; background: #fff; margin-left: -4px; margin-right: -4px; padding: 8px 4px 0; } .sd-shop-bar { gap: 8px; border-bottom: 0; padding-bottom: 8px; } .sd-shop-bar__count { display: none; } .sd-tool--filter, .sd-tool--sort { display: inline-flex; flex: 1 1 0; min-width: 0; justify-content: center; } .sd-tool--sort { justify-content: flex-start; } .sd-tool--sort .sd-sort select.orderby { max-width: none; } .sd-view__btn { width: 38px; } .sd-active { padding-top: 4px; padding-bottom: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .sd-active::-webkit-scrollbar { display: none; } .sd-active__chip, .sd-active__reset { flex: 0 0 auto; white-space: nowrap; } /* Portos schwebender Filter-Reiter links: ersetzt durch den Filter-Button */ body:has(.sd-tool--filter) .mobile-sidebar .sidebar-toggle { display: none !important; } /* Schublade: Abschnitte luftig, „Artikel anzeigen“ klebt unten */ html.sidebar-opened .mobile-sidebar .sidebar-content { padding-bottom: 84px; } .sd-drawer-done { display: flex; align-items: center; justify-content: center; position: sticky; bottom: 0; left: 0; right: 0; width: 100%; height: 52px; margin: 16px 0 0; border: 0; border-radius: 12px; background: var(--sd-ink); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 -10px 20px #fff; } } @media (min-width: 992px) { .sd-tool--sort { margin-left: auto; } } /* ============================================================ Warenkorb (Porto-Teile; Elemente des Checkout-Plugins sd-cx-* bleiben unberührt) */ /* Gutschein steht oben schon (functions.php), Portos zweites Feld in der Tabelle weg */ body.woocommerce-cart .woocommerce-cart-form td.actions .coupon { display: none !important; } @media (max-width: 767px) { /* Schritte Warenkorb > Kasse > Abschluss: eine kleine Zeile */ body.woocommerce-cart .woo-page-header, body.woocommerce-checkout .woo-page-header { padding: 12px 0 !important; min-height: 0 !important; } body.woocommerce-cart .woo-page-header .breadcrumb, body.woocommerce-checkout .woo-page-header .breadcrumb { display: flex !important; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 2px; margin: 0 !important; padding: 0 10px !important; } body.woocommerce-cart .woo-page-header .breadcrumb li, body.woocommerce-checkout .woo-page-header .breadcrumb li { display: inline-flex !important; align-items: center; margin: 0 !important; } body.woocommerce-cart .woo-page-header .breadcrumb li a, body.woocommerce-checkout .woo-page-header .breadcrumb li a { font-size: 13px !important; line-height: 1.3 !important; letter-spacing: 0 !important; white-space: nowrap; padding: 0 !important; } body.woocommerce-cart .woo-page-header .breadcrumb .delimiter, body.woocommerce-checkout .woo-page-header .breadcrumb .delimiter { display: inline-block !important; margin: 0 6px !important; font-size: 9px !important; transform: none !important; position: static !important; } /* Gutschein + Artikelnummer: je Zeile Feld + Button */ body.woocommerce-cart form.woocommerce-form-coupon { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px !important; margin: 0 0 16px !important; } body.woocommerce-cart form.woocommerce-form-coupon .short-input { width: 100% !important; height: 44px !important; font-size: 16px !important; margin: 0 !important; } body.woocommerce-cart form.woocommerce-form-coupon .button { height: 44px !important; padding: 0 14px !important; font-size: 14px !important; margin: 0 !important; border-radius: 8px !important; } /* Artikelzeilen kompakt: Bild | Name, Art.-Nr., Einzelpreis | Menge ... Summe */ body.woocommerce-cart table.cart thead { display: none !important; } body.woocommerce-cart table.cart tr.cart_item { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img name name" "img price price" "img qty total"; column-gap: 12px; row-gap: 4px; padding: 14px 0 !important; border-bottom: 1px solid #eee !important; } body.woocommerce-cart table.cart tr.cart_item > td { display: block !important; width: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; text-align: left !important; } body.woocommerce-cart table.cart tr.cart_item > td::before { content: none !important; display: none !important; } body.woocommerce-cart table.cart tr.cart_item td.product-thumbnail { grid-area: img; } body.woocommerce-cart table.cart tr.cart_item td.product-thumbnail img { width: 64px !important; height: 64px !important; max-width: none; object-fit: contain; padding: 4px; border: 1px solid #eee; border-radius: 10px; background: #fff; } body.woocommerce-cart table.cart tr.cart_item td.product-thumbnail .remove-product { top: -6px !important; left: -6px !important; transform: scale(.85); } body.woocommerce-cart table.cart tr.cart_item td.product-name { grid-area: name; font-size: 14px !important; line-height: 1.35 !important; } body.woocommerce-cart table.cart tr.cart_item td.product-name a { font-weight: 700; color: var(--sd-ink) !important; } body.woocommerce-cart table.cart tr.cart_item td.product-name .wc-sku { font-size: 12px; color: #888; } body.woocommerce-cart table.cart tr.cart_item td.product-name br { display: none; } body.woocommerce-cart table.cart tr.cart_item td.product-name .wc-sku { display: block; } body.woocommerce-cart table.cart tr.cart_item td.product-price { grid-area: price; font-size: 12.5px !important; color: #777; } body.woocommerce-cart table.cart tr.cart_item td.product-price .amount { font-weight: 500; color: #777; } body.woocommerce-cart table.cart tr.cart_item td.product-quantity { grid-area: qty; align-self: center; } body.woocommerce-cart table.cart tr.cart_item td.product-subtotal { grid-area: total; align-self: center; text-align: right !important; font-size: 15px !important; font-weight: 700; } body.woocommerce-cart table.cart tr.cart_item .quantity.buttons_added { display: inline-flex !important; align-items: center; height: 36px; width: auto !important; margin: 0 !important; border: 1px solid #dcdcdc; border-radius: 999px; overflow: hidden; background: #fff; } body.woocommerce-cart table.cart tr.cart_item .quantity .minus, body.woocommerce-cart table.cart tr.cart_item .quantity .plus { width: 36px !important; height: 34px !important; padding: 0 !important; border: 0 !important; background: #fff !important; font-size: 18px !important; line-height: 1 !important; color: var(--sd-ink); } body.woocommerce-cart table.cart tr.cart_item .quantity input.qty { width: 40px !important; height: 34px !important; padding: 0 !important; border: 0 !important; text-align: center; font-size: 16px !important; font-weight: 600; background: transparent; } body.woocommerce-cart table.cart td.actions { padding: 0 !important; border: 0 !important; } /* Summen kompakt */ body.woocommerce-cart .cart-collaterals .card { padding: 16px !important; border-radius: 12px; margin-top: 16px; } body.woocommerce-cart .cart_totals .card-sub-title { font-size: 12px !important; margin-bottom: 8px !important; letter-spacing: .06em; } body.woocommerce-cart .cart_totals table.cart-total th, body.woocommerce-cart .cart_totals table.cart-total td { padding: 8px 0 !important; font-size: 14px !important; } body.woocommerce-cart .cart_totals table.cart-total h4 { font-size: 14px !important; font-weight: 600 !important; } body.woocommerce-cart .cart_totals .order-total td, body.woocommerce-cart .cart_totals .order-total .amount { font-size: 18px !important; font-weight: 800 !important; } /* „Weiter zur Kasse“ klebt unten */ body.woocommerce-cart { padding-bottom: 84px; } body.woocommerce-cart .wc-proceed-to-checkout { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 90; margin: 0 !important; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important; background: #fff; box-shadow: 0 -6px 18px rgba(0, 0, 0, .1); } body.woocommerce-cart .wc-proceed-to-checkout .checkout-button, body.woocommerce-cart .wc-proceed-to-checkout a.btn { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 50px; margin: 0 !important; padding: 0 !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important; } } @media (max-width: 767px) { body.woocommerce-cart .wc-proceed-to-checkout a.btn i { padding-left: 10px !important; } body.woocommerce-cart .wc-proceed-to-checkout--top { display: none !important; } /* falls oben eine zweite Kopie steht */ } /* Kategorien über Suchergebnissen: aktive Kategorie dunkel */ .sd-subcat.is-active { background: var(--sd-ink); border-color: var(--sd-ink); color: #fff !important; } .sd-subcat.is-active .sd-subcat__count { background: rgba(255,255,255,.18); color: #fff; } /* Leiste: Porto färbt