/* =========================================
SHOW ITEM RESPONSIVE PATCH V2
Produktseite: stabiler Desktop-Start
Mobile-Weiche bleibt zusätzlich mobile_shop_patch_v1.css
========================================= */
body.page-item #wrapper {
position: relative;
overflow: visible !important;
}
body.page-item #page-content-wrapper.product-item-page {
width: 100%;
max-width: 1040px;
margin: 0 auto;
padding: 42px 24px 96px 24px;
box-sizing: border-box;
}
body.page-item .product-page {
width: 100%;
max-width: 1040px;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Head */
body.page-item .product-head {
width: 100%;
margin: 0 0 28px 0;
padding: 0;
border: 0;
}
body.page-item .product-head h2 {
margin: 0 0 8px 0;
color: #111;
font-size: 31px;
line-height: 1.18;
font-weight: 900;
letter-spacing: -0.02em;
}
body.page-item .product-head h2 a {
color: inherit;
text-decoration: none;
}
body.page-item .product-head h2 a:hover {
color: #e30613;
}
body.page-item .product-head .subtitle {
margin: 0;
color: #666;
font-size: 15px;
line-height: 1.55;
font-weight: 700;
}
body.page-item .product-head .subtitle a {
color: #111;
font-weight: 800;
text-decoration: none;
}
body.page-item .product-head .subtitle a:hover {
color: #e30613;
}
body.page-item .product-head .sep {
display: inline-block;
margin: 0 7px;
color: #999;
}
/* Layout: Bild links, Kaufdaten rechts */
body.page-item .product-layout {
display: grid !important;
grid-template-columns: minmax(360px, 48%) minmax(360px, 1fr) !important;
gap: 34px !important;
align-items: start !important;
width: 100% !important;
max-width: 1040px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-card,
body.page-item .product-buy-card,
body.page-item .product-info-card,
body.page-item .product-description-card {
min-width: 0 !important;
box-sizing: border-box !important;
}
body.page-item .product-layout > .product-info-card,
body.page-item .product-layout > .product-description-card,
body.page-item .product-layout > .product-details,
body.page-item .product-layout > .product-tabs,
body.page-item .product-layout > .product-faq,
body.page-item .product-layout > .product-related {
grid-column: 1 / -1 !important;
}
/* Galerie */
body.page-item .product-gallery-card {
width: 100% !important;
}
body.page-item .product-gallery-main {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
min-height: 380px !important;
aspect-ratio: 4 / 3 !important;
border: 1px solid #dedede !important;
background: #fff !important;
box-sizing: border-box !important;
overflow: hidden !important;
text-decoration: none !important;
transition: border-color 0.16s ease !important;
}
body.page-item .product-gallery-main:hover {
border-color: #e30613 !important;
}
body.page-item .product-gallery-main img {
display: block !important;
width: 94% !important;
height: 94% !important;
max-width: 94% !important;
max-height: 94% !important;
object-fit: contain !important;
object-position: center center !important;
border: 0 !important;
padding: 0 !important;
margin: auto !important;
background: transparent !important;
}
body.page-item .product-gallery-actions {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px !important;
margin-top: 12px !important;
}
body.page-item .product-gallery-actions a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 66px !important;
height: 52px !important;
border: 1px solid #dedede !important;
background: #fff !important;
box-sizing: border-box !important;
text-decoration: none !important;
}
body.page-item .product-gallery-actions a:hover {
border-color: #e30613 !important;
}
body.page-item .product-gallery-actions img {
display: block !important;
max-width: 58px !important;
max-height: 44px !important;
object-fit: contain !important;
border: 0 !important;
}
/* Kaufbereich */
body.page-item .product-buy-card,
body.page-item .product-page form {
max-width: 100% !important;
}
body.page-item .product-page label,
body.page-item .product-page .form-label {
display: block;
margin: 0 0 7px 0;
color: #111;
font-size: 14px;
line-height: 1.3;
font-weight: 800;
}
body.page-item .product-page select,
body.page-item .product-page input[type="text"],
body.page-item .product-page input[type="number"],
body.page-item .product-page textarea {
max-width: 100% !important;
min-height: 42px;
padding: 0 12px;
border: 1px solid #cfcfcf;
background: #fff;
color: #333;
font-size: 15px;
box-sizing: border-box !important;
}
body.page-item .qty-input {
width: 72px !important;
min-height: 42px !important;
padding: 0 10px !important;
border: 1px solid #d7d7d7 !important;
background: #fff !important;
color: #111 !important;
font-size: 16px !important;
font-weight: 800 !important;
text-align: center !important;
box-sizing: border-box !important;
}
body.page-item .product-buy-card .prodbox_preis,
body.page-item .product-page .prodbox_preis {
color: #111;
font-size: 24px !important;
line-height: 1.25 !important;
font-weight: 900 !important;
}
body.page-item .product-buy-card .prodbox_preis strike,
body.page-item .product-page .prodbox_preis strike {
color: #777 !important;
font-size: 18px !important;
font-weight: 400 !important;
}
body.page-item .product-buy-card .prodbox_preis span,
body.page-item .product-page .prodbox_preis span,
body.page-item .js-total-price {
color: #e30613 !important;
font-size: 24px !important;
font-weight: 900 !important;
}
body.page-item .product-buy-card .prodbox_preis img,
body.page-item .product-page .prodbox_preis img {
width: 42px !important;
height: 24px !important;
object-fit: fill !important;
vertical-align: middle !important;
}
body.page-item .open-shipping-modal,
body.page-item .category-shipping-link {
color: #111;
text-decoration: none;
cursor: pointer;
}
body.page-item .open-shipping-modal:hover,
body.page-item .category-shipping-link:hover {
color: #e30613;
}
body.page-item .prodbox_liefer {
width: 58px !important;
min-width: 58px !important;
height: auto !important;
vertical-align: middle !important;
}
body.page-item button,
body.page-item input[type="submit"],
body.page-item .btn,
body.page-item .button {
max-width: 100% !important;
}
body.page-item .alert {
margin: 0 0 22px 0;
}
body.page-item .visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
border: 0 !important;
}
/* Sidebar default-closed wie auf Kategorie/Subcategory */
@media (min-width: 1024px) {
body.page-item #sidebar-wrapper,
body.page-item #wrapper:not(.toggled) #sidebar-wrapper {
position: fixed !important;
top: var(--topbar-height, 60px) !important;
left: calc(50% - (var(--desktop-header-max-width, 1120px) / 2)) !important;
right: auto !important;
width: var(--sidebar-width, 260px) !important;
max-width: var(--sidebar-width, 260px) !important;
height: calc(100vh - var(--topbar-height, 60px)) !important;
margin-left: 0 !important;
transform: translate3d(calc(-1 * var(--sidebar-width, 260px) - 12px), 0, 0) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 2147482500 !important;
overflow-y: auto !important;
background: #fff !important;
box-shadow: 0 8px 28px rgba(0,0,0,0.24) !important;
}
body.page-item #wrapper.toggled #sidebar-wrapper {
transform: translate3d(0, 0, 0) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
body.page-item #wrapper.toggled #page-content-wrapper {
margin-left: auto !important;
transform: none !important;
}
}
@media (min-width: 1024px) and (max-width: 1360px) {
body.page-item #sidebar-wrapper,
body.page-item #wrapper:not(.toggled) #sidebar-wrapper {
left: 16px !important;
}
}
@media (max-width: 1023px) {
body.page-item #page-content-wrapper.product-item-page {
max-width: 100% !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
body.page-item .product-layout {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
body.page-item .product-gallery-main {
min-height: 320px !important;
}
}
@media (max-width: 760px) {
body.page-item #page-content-wrapper.product-item-page {
padding: 28px 14px 54px 14px !important;
}
body.page-item .product-head {
margin-bottom: 22px !important;
}
body.page-item .product-head h2 {
font-size: 26px !important;
line-height: 1.18 !important;
}
body.page-item .product-layout {
gap: 24px !important;
}
body.page-item .product-gallery-main {
min-height: 235px !important;
}
body.page-item .product-page select {
width: 100% !important;
min-height: 44px !important;
font-size: 15px !important;
}
body.page-item .product-buy-card .prodbox_preis,
body.page-item .product-page .prodbox_preis {
font-size: 22px !important;
}
body.page-item .product-buy-card .prodbox_preis span,
body.page-item .product-page .prodbox_preis span,
body.page-item .js-total-price {
font-size: 22px !important;
}
}
@media (max-width: 420px) {
body.page-item .product-head h2 {
font-size: 24px !important;
}
body.page-item .product-gallery-main {
min-height: 205px !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V3
Nachschärfung:
- Produktseite Content wie Subcategory zentrieren
- Sidebar default-closed final
- Gallery/Kaufbereich stabilisieren
========================================= */
body.page-item #wrapper {
overflow: visible !important;
}
body.page-item #page-content-wrapper.product-item-page {
width: 100% !important;
max-width: 1040px !important;
margin-left: auto !important;
margin-right: auto !important;
transform: none !important;
}
body.page-item .product-layout {
display: grid !important;
grid-template-columns: minmax(360px, 48%) minmax(360px, 1fr) !important;
gap: 34px !important;
align-items: start !important;
}
body.page-item .product-gallery-card {
min-width: 0 !important;
width: 100% !important;
}
body.page-item .product-gallery-main {
width: 100% !important;
min-height: 380px !important;
}
body.page-item .product-buy-card {
min-width: 0 !important;
width: 100% !important;
}
/* Sidebar: exakt wie finaler Category/Subcategory-Fix */
@media (min-width: 1024px) {
body.page-item #sidebar-wrapper,
body.page-item #wrapper:not(.toggled) #sidebar-wrapper {
position: fixed !important;
top: var(--topbar-height, 60px) !important;
left: calc(50% - (var(--desktop-header-max-width, 1120px) / 2)) !important;
right: auto !important;
width: var(--sidebar-width, 260px) !important;
max-width: var(--sidebar-width, 260px) !important;
height: calc(100vh - var(--topbar-height, 60px)) !important;
margin-left: 0 !important;
transform: translate3d(calc(-1 * var(--sidebar-width, 260px) - 12px), 0, 0) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 2147482500 !important;
overflow-y: auto !important;
background: #fff !important;
box-shadow: 0 8px 28px rgba(0,0,0,0.24) !important;
transition: transform 0.26s ease, opacity 0.18s ease, visibility 0.18s ease !important;
}
body.page-item #wrapper.toggled #sidebar-wrapper {
left: calc(50% - (var(--desktop-header-max-width, 1120px) / 2)) !important;
right: auto !important;
transform: translate3d(0, 0, 0) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
body.page-item #wrapper.toggled #page-content-wrapper {
margin-left: auto !important;
transform: none !important;
}
}
@media (min-width: 1024px) and (max-width: 1360px) {
body.page-item #sidebar-wrapper,
body.page-item #wrapper:not(.toggled) #sidebar-wrapper {
left: 16px !important;
transform: translate3d(calc(-1 * var(--sidebar-width, 260px) - 12px), 0, 0) !important;
}
body.page-item #wrapper.toggled #sidebar-wrapper {
left: 16px !important;
transform: translate3d(0, 0, 0) !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V4
Struktur-/Sidebar-Finalisierung
========================================= */
body.page-item.page-subcategory #wrapper,
body.page-item #wrapper {
overflow: visible !important;
}
body.page-item #page-content-wrapper.product-item-page {
width: 100% !important;
max-width: 1040px !important;
margin-left: auto !important;
margin-right: auto !important;
transform: none !important;
}
body.page-item #wrapper:not(.toggled) #sidebar-wrapper {
pointer-events: none !important;
}
@media (min-width: 1024px) {
body.page-item #sidebar-wrapper,
body.page-item #wrapper:not(.toggled) #sidebar-wrapper {
position: fixed !important;
top: var(--topbar-height, 60px) !important;
left: calc(50% - (var(--desktop-header-max-width, 1120px) / 2)) !important;
right: auto !important;
width: var(--sidebar-width, 260px) !important;
max-width: var(--sidebar-width, 260px) !important;
height: calc(100vh - var(--topbar-height, 60px)) !important;
margin-left: 0 !important;
transform: translate3d(calc(-1 * var(--sidebar-width, 260px) - 12px), 0, 0) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 2147482500 !important;
overflow-y: auto !important;
background: #fff !important;
box-shadow: 0 8px 28px rgba(0,0,0,0.24) !important;
transition: transform 0.26s ease, opacity 0.18s ease, visibility 0.18s ease !important;
}
body.page-item #wrapper.toggled #sidebar-wrapper {
left: calc(50% - (var(--desktop-header-max-width, 1120px) / 2)) !important;
right: auto !important;
transform: translate3d(0, 0, 0) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
body.page-item #wrapper.toggled #page-content-wrapper {
margin-left: auto !important;
transform: none !important;
}
}
@media (min-width: 1024px) and (max-width: 1360px) {
body.page-item #sidebar-wrapper,
body.page-item #wrapper:not(.toggled) #sidebar-wrapper {
left: 16px !important;
transform: translate3d(calc(-1 * var(--sidebar-width, 260px) - 12px), 0, 0) !important;
}
body.page-item #wrapper.toggled #sidebar-wrapper {
left: 16px !important;
transform: translate3d(0, 0, 0) !important;
}
}
/* Produktlayout nicht durch alte row/col-Regeln zerlegen */
body.page-item .product-layout {
display: grid !important;
grid-template-columns: minmax(360px, 48%) minmax(360px, 1fr) !important;
gap: 34px !important;
align-items: start !important;
width: 100% !important;
}
body.page-item .product-buy-card,
body.page-item .product-gallery-card {
float: none !important;
width: auto !important;
max-width: 100% !important;
}
@media (max-width: 1023px) {
body.page-item .product-layout {
grid-template-columns: 1fr !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V5
Sidebar-Struktur wie show_subcategory.php
========================================= */
body.page-item #wrapper,
body.page-subcategory.page-item #wrapper {
position: relative !important;
overflow: visible !important;
}
/* Produktseite nutzt jetzt die Subcategory-Basisstruktur */
body.page-item #page-content-wrapper.subcategory-page.product-item-page,
body.page-subcategory.page-item #page-content-wrapper.product-item-page {
width: 100% !important;
max-width: 1040px !important;
margin: 0 auto !important;
padding: 42px 24px 96px 24px !important;
box-sizing: border-box !important;
transform: none !important;
}
body.page-item .product-page-inner {
width: 100% !important;
max-width: 1040px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Sidebar default geschlossen, offen nur bei wrapper.toggled */
@media (min-width: 1024px) {
body.page-item #sidebar-wrapper,
body.page-item #wrapper:not(.toggled) #sidebar-wrapper,
body.page-subcategory.page-item #sidebar-wrapper,
body.page-subcategory.page-item #wrapper:not(.toggled) #sidebar-wrapper {
position: fixed !important;
top: var(--topbar-height, 60px) !important;
left: calc(50% - (var(--desktop-header-max-width, 1120px) / 2)) !important;
right: auto !important;
width: var(--sidebar-width, 260px) !important;
max-width: var(--sidebar-width, 260px) !important;
height: calc(100vh - var(--topbar-height, 60px)) !important;
margin-left: 0 !important;
transform: translate3d(calc(-1 * var(--sidebar-width, 260px) - 12px), 0, 0) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 2147482500 !important;
overflow-y: auto !important;
background: #fff !important;
box-shadow: 0 8px 28px rgba(0,0,0,0.24) !important;
transition: transform 0.26s ease, opacity 0.18s ease, visibility 0.18s ease !important;
}
body.page-item #wrapper.toggled #sidebar-wrapper,
body.page-subcategory.page-item #wrapper.toggled #sidebar-wrapper {
left: calc(50% - (var(--desktop-header-max-width, 1120px) / 2)) !important;
transform: translate3d(0, 0, 0) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
body.page-item #wrapper.toggled #page-content-wrapper,
body.page-subcategory.page-item #wrapper.toggled #page-content-wrapper {
margin-left: auto !important;
transform: none !important;
}
}
@media (min-width: 1024px) and (max-width: 1360px) {
body.page-item #sidebar-wrapper,
body.page-item #wrapper:not(.toggled) #sidebar-wrapper,
body.page-subcategory.page-item #sidebar-wrapper,
body.page-subcategory.page-item #wrapper:not(.toggled) #sidebar-wrapper {
left: 16px !important;
transform: translate3d(calc(-1 * var(--sidebar-width, 260px) - 12px), 0, 0) !important;
}
body.page-item #wrapper.toggled #sidebar-wrapper,
body.page-subcategory.page-item #wrapper.toggled #sidebar-wrapper {
left: 16px !important;
transform: translate3d(0, 0, 0) !important;
}
}
@media (max-width: 1023px) {
body.page-item #sidebar-wrapper,
body.page-item #wrapper:not(.toggled) #sidebar-wrapper {
position: fixed !important;
top: var(--topbar-height, 58px) !important;
left: 0 !important;
width: min(280px, 86vw) !important;
max-width: 86vw !important;
height: calc(100vh - var(--topbar-height, 58px)) !important;
transform: translate3d(-105%, 0, 0) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 2147482500 !important;
overflow-y: auto !important;
background: #fff !important;
box-shadow: 0 8px 28px rgba(0,0,0,0.24) !important;
}
body.page-item #wrapper.toggled #sidebar-wrapper {
transform: translate3d(0, 0, 0) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V6
Fix:
- Menübutton im Header wieder sichtbar
- Produktformular/Grid nutzt volle Contentbreite
- keine linkslastige Schrumpfbreite durch alte mobile Form-Regeln
========================================= */
/* responsive_global_patch blendet auf body:not(.page-home) den Menübutton aus.
Auf der neuen Produktseite brauchen wir ihn wieder für die Overlay-Sidebar. */
/* Layoutbreite: alte mobile Basis-CSS darf das Formular nicht auf ca. 390px schrumpfen */
body.page-item .product-page,
body.page-item .product-page > form,
body.page-item form[name="form1"],
body.page-item .product-layout {
width: 100% !important;
max-width: 1040px !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* Produktgrid sauber über die ganze Breite */
body.page-item .product-layout {
display: grid !important;
grid-template-columns: minmax(430px, 1.08fr) minmax(360px, 0.92fr) !important;
gap: 36px !important;
align-items: start !important;
}
/* Rechte Spalte nicht mehr durch mobile 390px-Regeln begrenzen */
body.page-item .product-buy-card {
width: 100% !important;
max-width: 430px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
/* Linke Spalte: Bildfläche stabil */
body.page-item .product-gallery-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
float: none !important;
}
body.page-item .product-gallery-main {
width: 100% !important;
min-height: 382px !important;
aspect-ratio: 4 / 3 !important;
}
/* Alte form select-Regeln aus mobil_styles_v5 neutralisieren */
body.page-item .product-buy-card select,
body.page-item .product-buy-card input[type="text"],
body.page-item .product-buy-card input[type="number"],
body.page-item .product-buy-card textarea {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 12px 0 !important;
box-sizing: border-box !important;
}
/* Menge + Preis sauber nebeneinander halten */
body.page-item .product-buy-card .qty-price-row,
body.page-item .product-buy-card .quantity-price-row {
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
}
/* Bei kleinen Desktops nicht brechen */
@media (max-width: 1180px) and (min-width: 1024px) {
body.page-item .product-layout {
grid-template-columns: minmax(380px, 1fr) minmax(340px, 0.9fr) !important;
gap: 30px !important;
}
body.page-item .product-buy-card {
max-width: 410px !important;
}
}
@media (max-width: 1023px) {
body.page-item .product-layout {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
body.page-item .product-buy-card {
max-width: 100% !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V7
Debug/Layout:
- Produktbereich mittiger
- Abstand Header -> Content reduziert
- temporäre Rahmen um Produktboxen
========================================= */
/* Weißraum unter Header reduzieren */
body.page-item .header {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
max-width: 1040px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 34px !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
/* Produktinhalt nicht links kleben lassen */
body.page-item .product-page-inner,
body.page-item .product-page,
body.page-item .product-page > form,
body.page-item form[name="form1"] {
width: 100% !important;
max-width: 1040px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* Produktkopf und Grid auf gleiche linke Kante */
body.page-item .product-head {
width: 100% !important;
max-width: 1040px !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 26px !important;
}
/* Produktboxen: Debug-Rahmen temporär */
body.page-item .product-page-inner {
outline: 1px dashed rgba(227, 6, 19, 0.45) !important;
outline-offset: 10px !important;
}
body.page-item .product-head {
outline: 1px dashed rgba(0, 0, 0, 0.22) !important;
outline-offset: 6px !important;
}
body.page-item .product-layout {
outline: 2px solid rgba(227, 6, 19, 0.22) !important;
outline-offset: 8px !important;
}
body.page-item .product-gallery-card {
outline: 1px solid rgba(0, 120, 255, 0.45) !important;
outline-offset: 6px !important;
}
body.page-item .product-buy-card {
outline: 1px solid rgba(255, 140, 0, 0.55) !important;
outline-offset: 6px !important;
}
/* Layout etwas weiter in die Mitte ziehen und beide Spalten sauber führen */
body.page-item .product-layout {
width: 100% !important;
max-width: 1040px !important;
margin-left: auto !important;
margin-right: auto !important;
display: grid !important;
grid-template-columns: minmax(440px, 1.08fr) minmax(360px, 0.92fr) !important;
gap: 40px !important;
align-items: start !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-main {
width: 100% !important;
min-height: 392px !important;
}
body.page-item .product-buy-card {
width: 100% !important;
max-width: 430px !important;
justify-self: start !important;
}
/* Meta unter Bild nicht nach rechts wegdrücken */
body.page-item .product-gallery-card .product-meta,
body.page-item .product-gallery-card .product-detail-meta {
width: 100% !important;
text-align: left !important;
}
/* Falls alte Floats aktiv sind */
body.page-item .product-gallery-card,
body.page-item .product-buy-card,
body.page-item .product-layout,
body.page-item .product-page form {
float: none !important;
}
/* Mobile/Tablet ohne Debug-Versatz */
@media (max-width: 1023px) {
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
padding-top: 28px !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
body.page-item .product-layout {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
body.page-item .product-buy-card {
max-width: 100% !important;
justify-self: stretch !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V10
Reine Rollback-/Cache-Busting-Version auf Basis V7 Debug.
Keine neuen Layoutänderungen.
Debug-Rahmen bleiben aktiv.
========================================= */
/* =========================================
SHOW ITEM RESPONSIVE PATCH V11
Schritt 1: H1-Sektion richtig entkoppeln
Grundlage: Desktop-Struktur hatte H1/Breadcrumb vor der Produkt-Row.
Hier wird die H1 auf feste Desktop-Contentbreite gezogen,
damit sie nicht vom schmalen Parent/alten Mobile-Regeln begrenzt wird.
Debug-Rahmen bleiben aktiv.
========================================= */
:root {
--rs-item-content-width: 1040px;
}
/* Hauptachse Produktseite */
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
width: min(var(--rs-item-content-width), calc(100vw - 48px)) !important;
max-width: var(--rs-item-content-width) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* Innere Wrapper dürfen nicht text-/inline-breit werden */
body.page-item .product-page-inner,
body.page-item .product-page,
body.page-item .product-page > form,
body.page-item form[name="form1"] {
display: block !important;
width: min(var(--rs-item-content-width), calc(100vw - 48px)) !important;
max-width: var(--rs-item-content-width) !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* H1-Sektion: feste Contentbreite statt width:100% im schmalen Parent */
body.page-item .row-h1.product-head,
body.page-item .product-head {
display: block !important;
float: none !important;
clear: both !important;
width: min(var(--rs-item-content-width), calc(100vw - 48px)) !important;
max-width: var(--rs-item-content-width) !important;
min-width: 0 !important;
margin: 0 auto 26px auto !important;
padding: 0 !important;
box-sizing: border-box !important;
text-align: left !important;
}
/* H1 Debug-Rahmen sichtbar und eindeutig */
body.page-item .row-h1.product-head {
outline: 1px dashed rgba(227, 6, 19, 0.70) !important;
outline-offset: 6px !important;
}
/* Der rote große Wrapper-Rahmen aus V7 hat verwirrt:
dünner machen, damit wir die H1 korrekt beurteilen können. */
body.page-item .product-page-inner {
outline: 1px dashed rgba(227, 6, 19, 0.20) !important;
outline-offset: 10px !important;
}
/* H1-Text */
body.page-item .row-h1.product-head h1,
body.page-item .row-h1.product-head h2,
body.page-item .product-head h1,
body.page-item .product-head h2 {
display: block !important;
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
color: #111 !important;
font-size: 29px !important;
line-height: 1.16 !important;
font-weight: 900 !important;
letter-spacing: -0.025em !important;
text-align: left !important;
}
body.page-item .row-h1.product-head h2 a,
body.page-item .product-head h2 a {
color: #111 !important;
text-decoration: none !important;
}
body.page-item .row-h1.product-head h2 a:hover,
body.page-item .product-head h2 a:hover {
color: #e30613 !important;
}
/* Breadcrumb-Unterzeile */
body.page-item .row-h1.product-head .subtitle,
body.page-item .product-head .subtitle {
display: block !important;
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
color: #111 !important;
font-size: 14px !important;
line-height: 1.45 !important;
font-weight: 800 !important;
text-align: left !important;
}
body.page-item .row-h1.product-head .subtitle a,
body.page-item .product-head .subtitle a {
color: #111 !important;
text-decoration: none !important;
font-weight: 800 !important;
}
body.page-item .row-h1.product-head .subtitle a:hover,
body.page-item .product-head .subtitle a:hover {
color: #e30613 !important;
}
body.page-item .row-h1.product-head .sep,
body.page-item .product-head .sep {
display: inline-block !important;
margin: 0 8px !important;
color: #999 !important;
}
/* Produktlayout auf derselben Achse wie H1 halten */
body.page-item .product-layout {
width: min(var(--rs-item-content-width), calc(100vw - 48px)) !important;
max-width: var(--rs-item-content-width) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Mobile: wieder normale Prozentbreite */
@media (max-width: 1023px) {
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page,
body.page-item .product-page-inner,
body.page-item .product-page,
body.page-item .product-page > form,
body.page-item form[name="form1"],
body.page-item .row-h1.product-head,
body.page-item .product-head,
body.page-item .product-layout {
width: 100% !important;
max-width: 100% !important;
}
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
padding-left: 18px !important;
padding-right: 18px !important;
}
body.page-item .row-h1.product-head h1,
body.page-item .row-h1.product-head h2,
body.page-item .product-head h1,
body.page-item .product-head h2 {
font-size: 26px !important;
line-height: 1.18 !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V12
Schritt 1b: H1-Typografie wie show_subcategory
Nur Schriftbild Produktkopf.
Debug-Rahmen bleiben aktiv.
========================================= */
body.page-item .row-h1.product-head h1,
body.page-item .row-h1.product-head h2,
body.page-item .product-head h1,
body.page-item .product-head h2 {
font-family: inherit !important;
font-size: 31px !important;
line-height: 1.18 !important;
font-weight: 850 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
}
body.page-item .row-h1.product-head h2 a,
body.page-item .product-head h2 a {
font-family: inherit !important;
font-weight: 850 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
}
body.page-item .row-h1.product-head .subtitle,
body.page-item .product-head .subtitle {
font-family: inherit !important;
font-size: 16px !important;
line-height: 1.45 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
color: #555 !important;
}
body.page-item .row-h1.product-head .subtitle a,
body.page-item .product-head .subtitle a {
font-weight: 800 !important;
color: #111 !important;
}
@media (max-width: 1023px) {
body.page-item .row-h1.product-head h1,
body.page-item .row-h1.product-head h2,
body.page-item .product-head h1,
body.page-item .product-head h2 {
font-size: 26px !important;
line-height: 1.18 !important;
font-weight: 850 !important;
}
body.page-item .row-h1.product-head .subtitle,
body.page-item .product-head .subtitle {
font-size: 14px !important;
}
}
@media (max-width: 420px) {
body.page-item .row-h1.product-head h1,
body.page-item .row-h1.product-head h2,
body.page-item .product-head h1,
body.page-item .product-head h2 {
font-size: 24px !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V13
Abgleich mit show_subcategory_responsive_patch_v28:
- äußere Content-Achse 1120px
- innere Content-Achse 980px + 50px links
- H1-Typografie exakt wie Subcategory
- Produktlayout 10px höher und auf dieselbe innere Achse
Debug-Rahmen bleiben aktiv.
========================================= */
:root {
--rs-sub-page-width: 1120px;
--rs-sub-inner-width: 980px;
--rs-sub-inner-left: 50px;
}
/* Exakt wie show_subcategory: äußerer Seitencontainer */
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
width: min(var(--rs-sub-page-width), calc(100vw - 40px)) !important;
max-width: var(--rs-sub-page-width) !important;
margin: 0 auto !important;
padding: 42px 0 90px 0 !important;
box-sizing: border-box !important;
transform: none !important;
float: none !important;
clear: both !important;
}
/* Exakt wie show_subcategory: innerer Content linkslastig */
body.page-item .subcategory-page-inner.product-page-inner,
body.page-item .product-page-inner {
width: 100% !important;
max-width: var(--rs-sub-inner-width) !important;
margin-left: var(--rs-sub-inner-left) !important;
margin-right: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Form/Product-Wrapper muss derselben inneren Breite folgen */
body.page-item .product-page,
body.page-item .product-page > form,
body.page-item form[name="form1"] {
display: block !important;
width: 100% !important;
max-width: var(--rs-sub-inner-width) !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* H1-Sektion exakt auf innerer Subcategory-Achse */
body.page-item .row-h1.product-head,
body.page-item .product-head {
display: block !important;
float: none !important;
clear: both !important;
width: 100% !important;
max-width: var(--rs-sub-inner-width) !important;
min-width: 0 !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
text-align: left !important;
}
/* Debug: H1-Box sichtbar */
body.page-item .row-h1.product-head {
outline: 1px dashed rgba(227, 6, 19, 0.70) !important;
outline-offset: 6px !important;
}
/* H1 exakt wie show_subcategory .row-h1 h2 / .breadcrumb */
body.page-item .row-h1.product-head h1,
body.page-item .row-h1.product-head h2,
body.page-item .product-head h1,
body.page-item .product-head h2,
body.page-item .row-h1.product-head h2 a,
body.page-item .product-head h2 a {
margin: 0 0 10px 0 !important;
padding: 0 !important;
color: #111 !important;
font-size: 31px !important;
line-height: 1.18 !important;
font-weight: 850 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
text-decoration: none !important;
text-align: left !important;
font-family: inherit !important;
}
/* Hidden H1 darf keinen Abstand erzeugen */
body.page-item .row-h1.product-head h1.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
border: 0 !important;
}
/* Produkt-Breadcrumb/Subline kompakter als Kategorie-Subtitle, aber mit gleicher Schriftbasis */
body.page-item .row-h1.product-head .subtitle,
body.page-item .product-head .subtitle {
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: #111 !important;
font-size: 14px !important;
line-height: 1.45 !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
text-align: left !important;
font-family: inherit !important;
}
body.page-item .row-h1.product-head .subtitle a,
body.page-item .product-head .subtitle a {
color: #111 !important;
text-decoration: none !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
}
body.page-item .row-h1.product-head .subtitle a:hover,
body.page-item .product-head .subtitle a:hover {
color: #e30613 !important;
}
body.page-item .row-h1.product-head .sep,
body.page-item .product-head .sep {
display: inline-block !important;
margin: 0 8px !important;
color: #999 !important;
}
/* Produktlayout: auf innerer Achse, etwas nach rechts durch 50px-Inner-Container,
und ca. 10px höher durch reduzierten Abstand nach der H1 */
body.page-item .product-layout {
width: 100% !important;
max-width: var(--rs-sub-inner-width) !important;
margin: 0 !important;
transform: translateY(-10px) !important;
display: grid !important;
grid-template-columns: minmax(440px, 1.08fr) minmax(360px, 0.92fr) !important;
gap: 40px !important;
align-items: start !important;
box-sizing: border-box !important;
}
/* Debug-Rahmen an neue Achse anpassen */
body.page-item .product-page-inner {
outline: 1px dashed rgba(227, 6, 19, 0.28) !important;
outline-offset: 10px !important;
}
body.page-item .product-layout {
outline: 2px solid rgba(227, 6, 19, 0.22) !important;
outline-offset: 8px !important;
}
/* Responsive analog show_subcategory */
@media (max-width: 980px) {
body.page-item .subcategory-page-inner.product-page-inner,
body.page-item .product-page-inner {
margin-left: 0 !important;
max-width: 100% !important;
}
body.page-item .product-layout {
transform: none !important;
grid-template-columns: 1fr !important;
gap: 28px !important;
}
}
@media (max-width: 760px) {
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
width: calc(100vw - 28px) !important;
padding-top: 28px !important;
}
body.page-item .row-h1.product-head h1,
body.page-item .row-h1.product-head h2,
body.page-item .product-head h1,
body.page-item .product-head h2,
body.page-item .row-h1.product-head h2 a,
body.page-item .product-head h2 a {
font-size: 24px !important;
line-height: 1.18 !important;
letter-spacing: -0.3px !important;
}
body.page-item .row-h1.product-head .subtitle,
body.page-item .product-head .subtitle {
font-size: 13px !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V15
Korrektur zu V14:
- NICHT nach rechts verschieben
- links bleibt Subcategory-Achse: 50px
- nach rechts stretchen: 1120px Außenbreite - 50px = 1070px
- Höhe aus Subcategory ableiten: padding-top 42px
- Produktgrid bleibt ca. 10px höher
Debug-Rahmen bleiben aktiv.
========================================= */
:root {
--rs-sub-page-width: 1120px;
--rs-sub-inner-left: 50px;
--rs-item-detail-width: calc(var(--rs-sub-page-width) - var(--rs-sub-inner-left)); /* 1070px */
}
/* exakt von show_subcategory abgeleitet */
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
width: min(var(--rs-sub-page-width), calc(100vw - 40px)) !important;
max-width: var(--rs-sub-page-width) !important;
margin: 0 auto !important;
padding: 42px 0 90px 0 !important;
box-sizing: border-box !important;
transform: none !important;
float: none !important;
clear: both !important;
}
/* links bleibt bei 50px, nur die Breite wächst nach rechts */
body.page-item .subcategory-page-inner.product-page-inner,
body.page-item .product-page-inner {
width: 100% !important;
max-width: var(--rs-item-detail-width) !important;
margin-left: var(--rs-sub-inner-left) !important;
margin-right: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* alle Produkt-Wrapper dürfen die neue Breite nutzen */
body.page-item .product-page,
body.page-item .product-page > form,
body.page-item form[name="form1"],
body.page-item .row-h1.product-head,
body.page-item .product-head,
body.page-item .product-layout {
width: 100% !important;
max-width: var(--rs-item-detail-width) !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* H1 bleibt auf der linken Subcategory-Kante, wird aber nach rechts breiter */
body.page-item .row-h1.product-head,
body.page-item .product-head {
margin-top: 0 !important;
margin-bottom: 20px !important;
padding: 0 !important;
}
/* H1-Typo weiterhin exakt wie Subcategory */
body.page-item .row-h1.product-head h1,
body.page-item .row-h1.product-head h2,
body.page-item .product-head h1,
body.page-item .product-head h2,
body.page-item .row-h1.product-head h2 a,
body.page-item .product-head h2 a {
margin: 0 0 10px 0 !important;
color: #111 !important;
font-size: 31px !important;
line-height: 1.18 !important;
font-weight: 850 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
text-decoration: none !important;
font-family: inherit !important;
}
body.page-item .row-h1.product-head .subtitle,
body.page-item .product-head .subtitle {
margin: 0 !important;
color: #111 !important;
font-size: 14px !important;
line-height: 1.45 !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
}
/* Produktlayout: gleiche linke Kante, nach rechts breiter */
body.page-item .product-layout {
transform: translateY(-10px) !important;
display: grid !important;
grid-template-columns: minmax(500px, 1.08fr) minmax(420px, 0.92fr) !important;
gap: 40px !important;
align-items: start !important;
}
/* rechte Kaufbox darf die gestretchte Spalte wirklich nutzen */
body.page-item .product-buy-card {
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
}
/* linke Bildbox darf ebenfalls die neue Spalte nutzen */
body.page-item .product-gallery-card {
width: 100% !important;
max-width: none !important;
}
/* Debug-Rahmen auf die neue echte Breite */
body.page-item .row-h1.product-head {
outline: 1px dashed rgba(227, 6, 19, 0.80) !important;
outline-offset: 6px !important;
}
body.page-item .product-page-inner {
outline: 1px dashed rgba(227, 6, 19, 0.28) !important;
outline-offset: 10px !important;
}
body.page-item .product-layout {
outline: 2px solid rgba(227, 6, 19, 0.30) !important;
outline-offset: 8px !important;
}
/* Responsive wieder neutralisieren */
@media (max-width: 980px) {
body.page-item .subcategory-page-inner.product-page-inner,
body.page-item .product-page-inner {
margin-left: 0 !important;
max-width: 100% !important;
}
body.page-item .product-page,
body.page-item .product-page > form,
body.page-item form[name="form1"],
body.page-item .row-h1.product-head,
body.page-item .product-head,
body.page-item .product-layout {
max-width: 100% !important;
}
body.page-item .product-layout {
transform: none !important;
grid-template-columns: 1fr !important;
gap: 28px !important;
}
}
@media (max-width: 760px) {
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
width: calc(100vw - 28px) !important;
padding-top: 28px !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V16
Start-Höhe:
- ausgehend von V15
- links/rechts/Breite bleiben unverändert
- Produkt-H1 startet optisch 10px höher
Debug-Rahmen bleiben aktiv.
========================================= */
/* Subcategory nutzt 42px Padding.
Produktseite wirkt durch die Detailstruktur ca. 10px tiefer,
daher nur hier auf 32px korrigieren. */
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
padding-top: 32px !important;
}
/* Produktlayout bleibt weiterhin ca. 10px näher an der H1 */
body.page-item .product-layout {
transform: translateY(-10px) !important;
}
/* Mobile unverändert wie vorher */
@media (max-width: 760px) {
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
padding-top: 28px !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V17
H1 strukturell wie show_subcategory:
- Produkt-H1 aus .product-head / Form-DNA gelöst
- neuer Header: .subcategory-page-header + .subcategory-breadcrumb
- identische Achse zu show_subcategory
- Produktlayout bleibt darunter
Debug-Rahmen bleiben aktiv.
========================================= */
/* Alte Produktkopf-Klasse komplett neutralisieren, falls Browser/Cache noch Rest sieht */
body.page-item .row-h1.product-head,
body.page-item .product-head {
display: none !important;
}
/* Außencontainer exakt wie show_subcategory */
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
width: min(1120px, calc(100vw - 40px)) !important;
max-width: 1120px !important;
margin: 0 auto !important;
padding: 42px 0 90px 0 !important;
transform: none !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
}
/* Innerer Container exakt wie show_subcategory */
body.page-item .subcategory-page-inner.product-page-inner,
body.page-item .product-page-inner {
width: 100% !important;
max-width: 980px !important;
margin-left: 50px !important;
margin-right: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Neuer Produkt-Header identisch zur Subcategory-H1-Sektion */
body.page-item .product-page-header,
body.page-item .subcategory-page-header.product-page-header,
body.page-item .service-page-header.product-page-header {
display: block !important;
width: 100% !important;
max-width: 980px !important;
margin: 0 0 22px 0 !important;
padding: 0 !important;
border: 0 !important;
box-sizing: border-box !important;
}
/* Debug-Rahmen nur auf der echten neuen H1-Sektion */
body.page-item .product-page-header {
outline: 1px dashed rgba(227, 6, 19, 0.80) !important;
outline-offset: 6px !important;
}
/* H1-Optik 1:1 aus show_subcategory .subcategory-breadcrumb */
body.page-item .product-breadcrumb,
body.page-item .subcategory-breadcrumb.product-breadcrumb {
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
color: #111 !important;
font-size: 31px !important;
line-height: 1.18 !important;
font-weight: 850 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
font-family: inherit !important;
}
body.page-item .product-breadcrumb a,
body.page-item .subcategory-breadcrumb.product-breadcrumb a {
color: #111 !important;
text-decoration: none !important;
font-size: inherit !important;
line-height: inherit !important;
font-weight: 850 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
font-family: inherit !important;
}
body.page-item .product-breadcrumb a:hover,
body.page-item .subcategory-breadcrumb.product-breadcrumb a:hover {
color: #e30613 !important;
}
/* Zusatztext analog show_subcategory subtitle */
body.page-item .product-page-subtitle,
body.page-item .subcategory-page-subtitle.product-page-subtitle {
display: block !important;
margin: 7px 0 0 0 !important;
padding: 0 !important;
color: #555 !important;
font-size: 16px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
font-family: inherit !important;
}
body.page-item .product-page-subtitle a,
body.page-item .subcategory-page-subtitle.product-page-subtitle a {
color: #111 !important;
text-decoration: none !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
}
body.page-item .product-page-subtitle a:hover,
body.page-item .subcategory-page-subtitle.product-page-subtitle a:hover {
color: #e30613 !important;
}
body.page-item .product-page-subtitle .sep {
display: inline-block !important;
margin: 0 8px !important;
color: #999 !important;
}
/* Produktseite nach rechts stretchen, aber Header bleibt exakt Subcategory-Breite */
body.page-item .product-page,
body.page-item .product-page > form,
body.page-item form[name="form1"] {
display: block !important;
width: 100% !important;
max-width: 1070px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Produktlayout beginnt unter der echten H1-Sektion, 10px näher dran */
body.page-item .product-layout {
width: 100% !important;
max-width: 1070px !important;
margin: 0 !important;
transform: translateY(-10px) !important;
display: grid !important;
grid-template-columns: minmax(500px, 1.08fr) minmax(420px, 0.92fr) !important;
gap: 40px !important;
align-items: start !important;
box-sizing: border-box !important;
}
/* Debug-Rahmen für Strukturkontrolle */
body.page-item .product-page-inner {
outline: 1px dashed rgba(227, 6, 19, 0.28) !important;
outline-offset: 10px !important;
}
body.page-item .product-layout {
outline: 2px solid rgba(227, 6, 19, 0.30) !important;
outline-offset: 8px !important;
}
/* Responsive wie show_subcategory */
@media (max-width: 980px) {
body.page-item .subcategory-page-inner.product-page-inner,
body.page-item .product-page-inner {
margin-left: 0 !important;
max-width: 100% !important;
}
body.page-item .product-page-header,
body.page-item .product-page,
body.page-item .product-page > form,
body.page-item form[name="form1"],
body.page-item .product-layout {
max-width: 100% !important;
}
body.page-item .product-layout {
transform: none !important;
grid-template-columns: 1fr !important;
gap: 28px !important;
}
}
@media (max-width: 760px) {
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
width: calc(100vw - 28px) !important;
padding-top: 28px !important;
}
body.page-item .product-breadcrumb,
body.page-item .subcategory-breadcrumb.product-breadcrumb,
body.page-item .product-breadcrumb a,
body.page-item .subcategory-breadcrumb.product-breadcrumb a {
font-size: 24px !important;
line-height: 1.18 !important;
}
body.page-item .product-page-subtitle,
body.page-item .subcategory-page-subtitle.product-page-subtitle {
font-size: 14px !important;
line-height: 1.5 !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V18
Nur H1-Feinschliff:
- Produkt-H1 startet ca. 20px höher
- keine Änderung an Produktbox/Grid/Preis/Button
Debug-Rahmen bleiben aktiv.
========================================= */
/* Nur den neuen H1-Headerblock hochziehen.
Produktlayout bleibt unberührt. */
body.page-item .product-page-header,
body.page-item .subcategory-page-header.product-page-header,
body.page-item .service-page-header.product-page-header {
margin-top: -20px !important;
margin-bottom: 42px !important;
}
/* H1-Schrift bleibt exakt Subcategory-nah */
body.page-item .product-breadcrumb,
body.page-item .subcategory-breadcrumb.product-breadcrumb,
body.page-item .product-breadcrumb a,
body.page-item .subcategory-breadcrumb.product-breadcrumb a {
font-size: 31px !important;
line-height: 1.18 !important;
font-weight: 850 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
}
/* Zusatzzeile unverändert ruhig */
body.page-item .product-page-subtitle,
body.page-item .subcategory-page-subtitle.product-page-subtitle {
margin-top: 7px !important;
font-size: 16px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
color: #555 !important;
}
/* Mobile nicht negativ verschieben */
@media (max-width: 760px) {
body.page-item .product-page-header,
body.page-item .subcategory-page-header.product-page-header,
body.page-item .service-page-header.product-page-header {
margin-top: 0 !important;
margin-bottom: 24px !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V19
Nur H1-Inhaltskante:
- Buchstaben-/Textkante der Produkt-H1 an Subcategory ausrichten
- Produktbox/Grid bleibt an derselben Stelle
- zusätzlicher blauer Textrahmen wie bei Subcategory
Debug-Rahmen bleiben aktiv.
========================================= */
/* V18: -20 / 42.
Jetzt H1-Inhalt ca. 14px höher, aber Gesamtabstand bleibt gleich:
-34 + 56 = 22, also wandert das Produktgrid nicht mit. */
body.page-item .product-page-header,
body.page-item .subcategory-page-header.product-page-header,
body.page-item .service-page-header.product-page-header {
margin-top: -34px !important;
margin-bottom: 56px !important;
}
/* Blauer Messrahmen auf die echte H1-/Textzeile, analog Subcategory */
body.page-item .product-breadcrumb,
body.page-item .subcategory-breadcrumb.product-breadcrumb {
outline: 1px solid rgba(0, 120, 255, 0.75) !important;
outline-offset: 2px !important;
}
/* Orange Messrahmen auf die Zusatzzeile, analog Subcategory */
body.page-item .product-page-subtitle,
body.page-item .subcategory-page-subtitle.product-page-subtitle {
outline: 1px solid rgba(255, 140, 0, 0.75) !important;
outline-offset: 2px !important;
}
/* Schriftwerte bleiben Subcategory-nah */
body.page-item .product-breadcrumb,
body.page-item .subcategory-breadcrumb.product-breadcrumb,
body.page-item .product-breadcrumb a,
body.page-item .subcategory-breadcrumb.product-breadcrumb a {
font-size: 31px !important;
line-height: 1.18 !important;
font-weight: 850 !important;
letter-spacing: -0.3px !important;
text-transform: none !important;
}
/* Mobile nicht negativ verschieben */
@media (max-width: 760px) {
body.page-item .product-page-header,
body.page-item .subcategory-page-header.product-page-header,
body.page-item .service-page-header.product-page-header {
margin-top: 0 !important;
margin-bottom: 24px !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V20
Schritt 2: Produktbox/Grid
- H1 bleibt unverändert
- Produktlayout ca. 20px nach rechts
- Breite um 20px reduziert, damit rechts nichts übersteht
- keine Änderung an Preis/Button/Field-Design
Debug-Rahmen bleiben aktiv.
========================================= */
:root {
--rs-item-productbox-shift-x: 20px;
}
/* Nur das Produktlayout verschieben, nicht die H1 */
body.page-item .product-layout {
margin-left: var(--rs-item-productbox-shift-x) !important;
margin-right: 0 !important;
width: calc(100% - var(--rs-item-productbox-shift-x)) !important;
max-width: calc(1070px - var(--rs-item-productbox-shift-x)) !important;
transform: translateY(-10px) !important;
box-sizing: border-box !important;
}
/* Spalten nach der reduzierten Gesamtbreite etwas harmonischer verteilen */
body.page-item .product-layout {
grid-template-columns: minmax(500px, 1.08fr) minmax(400px, 0.92fr) !important;
gap: 38px !important;
}
/* linke und rechte Produktbox wirklich innerhalb des verschobenen Grids halten */
body.page-item .product-gallery-card,
body.page-item .product-buy-card {
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box !important;
}
/* Debug-Rahmen sichtbar lassen */
body.page-item .product-layout {
outline: 2px solid rgba(227, 6, 19, 0.34) !important;
outline-offset: 8px !important;
}
/* Responsive: Verschiebung entfernen */
@media (max-width: 980px) {
body.page-item .product-layout {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
grid-template-columns: 1fr !important;
gap: 28px !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V21
Schritt 2b: Produktbox/Grid kräftiger
- H1 bleibt unverändert
- Produktlayout 30px weiter nach rechts als V20
- Produktlayout mindestens 100px breiter
- keine Änderung an Preis/Button/Feld-Design
Debug-Rahmen bleiben aktiv.
========================================= */
:root {
--rs-item-productbox-shift-x: 50px; /* V20 war 20px */
--rs-item-productbox-extra-width: 100px;
}
/* Nur Produktlayout: nach rechts UND breiter.
H1/product-page-header wird nicht angefasst. */
body.page-item .product-layout {
margin-left: var(--rs-item-productbox-shift-x) !important;
margin-right: 0 !important;
width: calc(100% + var(--rs-item-productbox-extra-width)) !important;
max-width: calc(1070px + var(--rs-item-productbox-extra-width)) !important;
transform: translateY(-10px) !important;
box-sizing: border-box !important;
}
/* Mehr Breite real in beide Spalten geben */
body.page-item .product-layout {
grid-template-columns: minmax(560px, 1.08fr) minmax(460px, 0.92fr) !important;
gap: 42px !important;
}
/* Boxen dürfen die neue Grid-Breite wirklich nutzen */
body.page-item .product-gallery-card,
body.page-item .product-buy-card {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box !important;
justify-self: stretch !important;
}
/* Bildrahmen darf mitwachsen */
body.page-item .product-gallery-main {
width: 100% !important;
max-width: none !important;
}
/* Kaufspalte darf ebenfalls breiter werden, aber ohne neues Design */
body.page-item .product-buy-card select,
body.page-item .product-buy-card input[type="text"],
body.page-item .product-buy-card input[type="number"],
body.page-item .product-buy-card textarea {
max-width: 100% !important;
}
/* Debug-Rahmen stärker sichtbar */
body.page-item .product-layout {
outline: 2px solid rgba(227, 6, 19, 0.42) !important;
outline-offset: 8px !important;
}
/* Responsive: Verschiebung/Breite entfernen */
@media (max-width: 980px) {
body.page-item .product-layout {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
grid-template-columns: 1fr !important;
gap: 28px !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V22
Produktbox/Grid Feinkorrektur:
- ausgehend von V21
- Position rechts bleibt: 50px
- Gesamtbreite 40px kleiner
- H1 bleibt unverändert
Debug-Rahmen bleiben aktiv.
========================================= */
:root {
--rs-item-productbox-shift-x: 50px;
--rs-item-productbox-extra-width: 60px; /* V21 war 100px */
}
/* Breite 40px kleiner als V21, Verschiebung bleibt */
body.page-item .product-layout {
margin-left: var(--rs-item-productbox-shift-x) !important;
margin-right: 0 !important;
width: calc(100% + var(--rs-item-productbox-extra-width)) !important;
max-width: calc(1070px + var(--rs-item-productbox-extra-width)) !important;
transform: translateY(-10px) !important;
box-sizing: border-box !important;
}
/* Spalten passend zur 40px kleineren Gesamtbreite */
body.page-item .product-layout {
grid-template-columns: minmax(540px, 1.08fr) minmax(440px, 0.92fr) !important;
gap: 40px !important;
}
/* Debug-Rahmen weiter sichtbar */
body.page-item .product-layout {
outline: 2px solid rgba(227, 6, 19, 0.42) !important;
outline-offset: 8px !important;
}
@media (max-width: 980px) {
body.page-item .product-layout {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
grid-template-columns: 1fr !important;
gap: 28px !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V23
Debug raus + Mengenfeld zentrieren
- Produktposition/Breite aus V22 bleibt
- Debug-Rahmen aus
- Mengenfeld sauber zentriert
========================================= */
/* Debug-Rahmen komplett deaktivieren */
body.page-item .product-page-header,
body.page-item .product-breadcrumb,
body.page-item .subcategory-breadcrumb.product-breadcrumb,
body.page-item .product-page-subtitle,
body.page-item .subcategory-page-subtitle.product-page-subtitle,
body.page-item .product-page-inner,
body.page-item .product-layout,
body.page-item .product-gallery-card,
body.page-item .product-buy-card,
body.page-item .product-head,
body.page-item .row-h1.product-head {
outline: none !important;
outline-offset: 0 !important;
}
/* Mengenfeld: saubere 3-Spalten-Aufteilung */
body.page-item .qty-selector,
body.page-item .quantity-selector,
body.page-item .product-qty,
body.page-item .qty-box {
display: inline-grid !important;
grid-template-columns: 32px 48px 32px !important;
align-items: center !important;
justify-items: center !important;
width: 112px !important;
height: 42px !important;
min-height: 42px !important;
margin: 0 12px 0 0 !important;
padding: 0 !important;
border: 1px solid #bfbfbf !important;
background: #fff !important;
box-sizing: border-box !important;
vertical-align: top !important;
overflow: hidden !important;
}
/* Plus/Minus */
body.page-item .qty-selector button,
body.page-item .quantity-selector button,
body.page-item .product-qty button,
body.page-item .qty-box button,
body.page-item .qty-selector a,
body.page-item .quantity-selector a,
body.page-item .product-qty a,
body.page-item .qty-box a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: #fff !important;
color: #999 !important;
font-size: 18px !important;
line-height: 1 !important;
font-weight: 400 !important;
text-align: center !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
/* Zahl exakt mittig */
body.page-item .qty-input,
body.page-item input.qty-input,
body.page-item .qty-selector input,
body.page-item .quantity-selector input,
body.page-item .product-qty input,
body.page-item .qty-box input {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-left: 1px solid #e1e1e1 !important;
border-right: 1px solid #e1e1e1 !important;
background: #fff !important;
color: #111 !important;
font-size: 17px !important;
line-height: 40px !important;
font-weight: 900 !important;
text-align: center !important;
text-indent: 0 !important;
box-sizing: border-box !important;
appearance: textfield !important;
-moz-appearance: textfield !important;
}
/* Spinner entfernen, damit die Mitte nicht optisch verrutscht */
body.page-item .qty-input::-webkit-outer-spin-button,
body.page-item .qty-input::-webkit-inner-spin-button,
body.page-item .qty-selector input::-webkit-outer-spin-button,
body.page-item .qty-selector input::-webkit-inner-spin-button,
body.page-item .quantity-selector input::-webkit-outer-spin-button,
body.page-item .quantity-selector input::-webkit-inner-spin-button,
body.page-item .product-qty input::-webkit-outer-spin-button,
body.page-item .product-qty input::-webkit-inner-spin-button,
body.page-item .qty-box input::-webkit-outer-spin-button,
body.page-item .qty-box input::-webkit-inner-spin-button {
margin: 0 !important;
-webkit-appearance: none !important;
}
/* Hover dezent */
body.page-item .qty-selector button:hover,
body.page-item .quantity-selector button:hover,
body.page-item .product-qty button:hover,
body.page-item .qty-box button:hover,
body.page-item .qty-selector a:hover,
body.page-item .quantity-selector a:hover,
body.page-item .product-qty a:hover,
body.page-item .qty-box a:hover {
color: #e30613 !important;
}
/* Falls die Mengensteuerung nicht in einer Wrapperklasse steckt:
direkte Buttons/Inputs im Mengenbereich optisch stabil halten. */
body.page-item .product-buy-card [class*="menge"],
body.page-item .product-buy-card [class*="quantity"],
body.page-item .product-buy-card [class*="qty"] {
box-sizing: border-box !important;
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V24
Detailkorrekturen:
- rechte Spalte/Folientyp höher
- Mengen-Label wie andere Labels
- Mengenfeld-Zahl exakt mittig
- Iconblock nach links, ohne Rahmen
========================================= */
/* Rechte Formularspalte etwas höher starten */
body.page-item .product-buy-card {
transform: translateY(-14px) !important;
}
/* Label "Menge" exakt wie Folientyp/Modell */
body.page-item .product-buy-card label,
body.page-item .product-buy-card .form-label,
body.page-item .product-buy-card .label,
body.page-item .product-buy-card .qty-label,
body.page-item .product-buy-card [class*="menge"] > label,
body.page-item .product-buy-card [class*="quantity"] > label,
body.page-item .product-buy-card [class*="qty"] > label {
color: #111 !important;
font-size: 14px !important;
line-height: 1.28 !important;
font-weight: 850 !important;
letter-spacing: 0 !important;
}
/* Mengenfeld: final zentrieren */
body.page-item .qty-selector,
body.page-item .quantity-selector,
body.page-item .product-qty,
body.page-item .qty-box {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 112px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
margin: 0 12px 0 0 !important;
border: 1px solid #bfbfbf !important;
background: #fff !important;
box-sizing: border-box !important;
vertical-align: top !important;
overflow: hidden !important;
}
body.page-item .qty-selector button,
body.page-item .quantity-selector button,
body.page-item .product-qty button,
body.page-item .qty-box button,
body.page-item .qty-selector a,
body.page-item .quantity-selector a,
body.page-item .product-qty a,
body.page-item .qty-box a {
flex: 0 0 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: #fff !important;
color: #999 !important;
font-size: 18px !important;
line-height: 40px !important;
font-weight: 400 !important;
text-align: center !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
body.page-item .qty-input,
body.page-item input.qty-input,
body.page-item .qty-selector input,
body.page-item .quantity-selector input,
body.page-item .product-qty input,
body.page-item .qty-box input {
flex: 0 0 48px !important;
display: block !important;
width: 48px !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-left: 1px solid #e1e1e1 !important;
border-right: 1px solid #e1e1e1 !important;
background: #fff !important;
color: #111 !important;
font-size: 17px !important;
line-height: 40px !important;
font-weight: 900 !important;
text-align: center !important;
text-indent: 0 !important;
box-sizing: border-box !important;
appearance: textfield !important;
-moz-appearance: textfield !important;
}
/* Häufiger Fall: Input ist nicht direkt sichtbar, sondern Wert steht in Span/strong */
body.page-item .qty-selector span,
body.page-item .quantity-selector span,
body.page-item .product-qty span,
body.page-item .qty-box span,
body.page-item .qty-selector strong,
body.page-item .quantity-selector strong,
body.page-item .product-qty strong,
body.page-item .qty-box strong {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 48px !important;
width: 48px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
color: #111 !important;
font-size: 17px !important;
line-height: 40px !important;
font-weight: 900 !important;
text-align: center !important;
box-sizing: border-box !important;
}
/* Galerie-/Iconblock: mehr nach links und ohne Rahmen */
body.page-item .product-gallery-actions {
margin-left: 0 !important;
padding-left: 0 !important;
transform: translateX(-18px) !important;
gap: 8px !important;
}
body.page-item .product-gallery-actions a,
body.page-item .product-gallery-actions a:hover {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}
body.page-item .product-gallery-actions img {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}
/* Falls alter Rahmen auf einzelnen YouTube-/Material-Klassen sitzt */
body.page-item .product-gallery-actions [class*="youtube"],
body.page-item .product-gallery-actions [class*="video"],
body.page-item .product-gallery-actions [class*="material"] {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V25
Fix:
- Mengen-Input war im PHP nicht geschlossen -> jetzt repariert
- Menge-Label wie Folientyp
- Qty-Feld exakt zentriert über .qty-field
- nur YouTube ohne Rahmen, andere Pictos behalten Rahmen
- Picto-/Info-/Beschreibung-Block unter Hauptbild ausrichten
========================================= */
/* Menge-Label ist ein h3, nicht label */
body.page-item .product-buy-card .product-qty-group h3 {
margin: 0 0 7px 0 !important;
padding: 0 !important;
color: #111 !important;
font-size: 14px !important;
line-height: 1.28 !important;
font-weight: 850 !important;
letter-spacing: 0 !important;
font-family: inherit !important;
}
/* Tatsächlicher Mengen-Wrapper */
body.page-item .product-buy-card .qty-field {
display: inline-grid !important;
grid-template-columns: 32px 48px 32px !important;
align-items: center !important;
justify-items: center !important;
width: 112px !important;
height: 42px !important;
min-height: 42px !important;
margin: 0 12px 0 0 !important;
padding: 0 !important;
border: 1px solid #bfbfbf !important;
background: #fff !important;
box-sizing: border-box !important;
vertical-align: top !important;
overflow: hidden !important;
}
/* Minus/Plus direkt im echten Wrapper */
body.page-item .product-buy-card .qty-field .qty-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: #fff !important;
color: #999 !important;
font-size: 18px !important;
line-height: 40px !important;
font-weight: 400 !important;
text-align: center !important;
box-sizing: border-box !important;
cursor: pointer !important;
}
/* Die Zahl exakt mittig */
body.page-item .product-buy-card .qty-field .qty-input {
display: block !important;
width: 48px !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-left: 1px solid #e1e1e1 !important;
border-right: 1px solid #e1e1e1 !important;
background: #fff !important;
color: #111 !important;
font-size: 17px !important;
line-height: 40px !important;
font-weight: 900 !important;
text-align: center !important;
text-indent: 0 !important;
box-sizing: border-box !important;
appearance: textfield !important;
-moz-appearance: textfield !important;
}
body.page-item .product-buy-card .qty-field .qty-input::-webkit-outer-spin-button,
body.page-item .product-buy-card .qty-field .qty-input::-webkit-inner-spin-button {
margin: 0 !important;
-webkit-appearance: none !important;
}
body.page-item .product-buy-card .qty-field .qty-btn:hover {
color: #e30613 !important;
}
/* Picto-/Meta-Block direkt unter dem Hauptbild und bündig zur Bildbox */
body.page-item .product-gallery-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
width: 100% !important;
margin: 12px 0 0 0 !important;
padding: 0 !important;
transform: none !important;
gap: 8px !important;
box-sizing: border-box !important;
}
/* Standard-Pictos behalten Rahmen */
body.page-item .product-gallery-actions a.pswp-item {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 60px !important;
height: 45px !important;
border: 1px solid #dedede !important;
background: #fff !important;
box-shadow: none !important;
outline: none !important;
box-sizing: border-box !important;
}
/* Nur YouTube ohne Rahmen */
body.page-item .product-gallery-actions a.product-video-link,
body.page-item .product-gallery-actions a.product-video-link:hover {
width: 45px !important;
height: 45px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}
/* Material/Extra-Bild bleiben gerahmt */
body.page-item .product-gallery-actions a.product-extra-image-link,
body.page-item .product-gallery-actions a.product-material-link {
border: 1px solid #dedede !important;
background: #fff !important;
}
/* Info rechts neben Pictos, aber innerhalb des Blocks */
body.page-item .product-gallery-info {
display: inline-flex !important;
align-items: center !important;
margin-left: 12px !important;
min-width: 0 !important;
}
body.page-item .product-gallery-info p {
margin: 0 !important;
white-space: nowrap !important;
}
/* Beschreibung ebenfalls unter dem Hauptbildblock, nicht seitlich versetzt */
body.page-item .product-description-under-gallery,
body.page-item .product-description-card {
width: 100% !important;
max-width: 100% !important;
margin: 14px 0 0 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-item .product-description-under-gallery .description-text,
body.page-item .product-description-card .description-text {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V26
Final: Menge + Preis
- Menge-Schriftgröße wie die oberen Labels
- Mengenfeld ruhig und exakt mittig
- Preiszeile sauber neben Menge ausgerichtet
========================================= */
/* Mengenbereich als klare Einheit */
body.page-item .product-buy-card .product-qty-group {
margin-top: 2px !important;
}
/* "Menge" optisch wie Folientyp/Modell */
body.page-item .product-buy-card .product-qty-group h3 {
margin: 0 0 8px 0 !important;
padding: 0 !important;
color: #111 !important;
font-family: inherit !important;
font-size: 15px !important;
line-height: 1.25 !important;
font-weight: 850 !important;
letter-spacing: 0 !important;
}
/* Menge + Preis in einer sauberen Linie */
body.page-item .product-buy-card .product-qty-row {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 18px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Mengenfeld final */
body.page-item .product-buy-card .qty-field {
flex: 0 0 118px !important;
display: grid !important;
grid-template-columns: 34px 50px 34px !important;
align-items: center !important;
justify-items: center !important;
width: 118px !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #cfcfcf !important;
background: #fff !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Minus / Plus */
body.page-item .product-buy-card .qty-field .qty-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 42px !important;
min-height: 42px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: #fff !important;
color: #999 !important;
font-size: 17px !important;
line-height: 42px !important;
font-weight: 400 !important;
text-align: center !important;
box-sizing: border-box !important;
}
/* Zahl wirklich mittig */
body.page-item .product-buy-card .qty-field .qty-input {
display: block !important;
width: 50px !important;
height: 42px !important;
min-height: 42px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-left: 1px solid #e3e3e3 !important;
border-right: 1px solid #e3e3e3 !important;
background: #fff !important;
color: #111 !important;
font-family: inherit !important;
font-size: 18px !important;
line-height: 42px !important;
font-weight: 900 !important;
text-align: center !important;
text-indent: 0 !important;
vertical-align: middle !important;
box-sizing: border-box !important;
appearance: textfield !important;
-moz-appearance: textfield !important;
}
body.page-item .product-buy-card .qty-field .qty-input::-webkit-outer-spin-button,
body.page-item .product-buy-card .qty-field .qty-input::-webkit-inner-spin-button {
margin: 0 !important;
-webkit-appearance: none !important;
}
/* Preisblock neben Menge sauber vertikal mittig */
body.page-item .product-buy-card .product-price-block {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 7px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.1 !important;
}
/* Alter Preis / Sale / aktueller Preis auf einer Achse */
body.page-item .product-buy-card .product-price-block .old-price,
body.page-item .product-buy-card .product-price-block strike,
body.page-item .product-buy-card .prodbox_preis strike {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
color: #777 !important;
font-size: 24px !important;
line-height: 1 !important;
font-weight: 400 !important;
}
body.page-item .product-buy-card .product-price-block .sale-badge,
body.page-item .product-buy-card .product-price-block img,
body.page-item .product-buy-card .prodbox_preis img {
display: inline-block !important;
width: 42px !important;
height: 24px !important;
margin: 0 4px 0 0 !important;
object-fit: fill !important;
vertical-align: middle !important;
}
body.page-item .product-buy-card .product-price-block .current-price,
body.page-item .product-buy-card .product-price-block .js-total-price,
body.page-item .product-buy-card .prodbox_preis span,
body.page-item .product-buy-card .js-total-price {
display: inline-flex !important;
align-items: center !important;
color: #e30613 !important;
font-size: 25px !important;
line-height: 1 !important;
font-weight: 900 !important;
margin: 0 !important;
}
/* MwSt/Versand klein unter Preis, nicht in die Menge rutschen lassen */
body.page-item .product-buy-card .product-price-block small,
body.page-item .product-buy-card .product-price-block .tax-note,
body.page-item .product-buy-card .product-price-block .price-note,
body.page-item .product-buy-card .prodbox_mwst {
flex-basis: 100% !important;
display: block !important;
margin: 3px 0 0 0 !important;
color: #777 !important;
font-size: 11px !important;
line-height: 1.25 !important;
font-weight: 400 !important;
}
/* Hover */
body.page-item .product-buy-card .qty-field .qty-btn:hover {
color: #e30613 !important;
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V27
Fix nach V26:
- Mengenfeld bleibt wie V26, weil es jetzt passt
- Menge-Label größer/kräftiger wie V1/Startnummer/Folientyp
- Preis-Fehler aus V26 zurücknehmen:
keine breite .js-total-price/.prodbox_preis span-Regel mehr
========================================= */
/* Menge-Label: gezielt h3 wie die übrigen Produktlabels */
body.page-item .product-buy-card .product-qty-group h3,
body.page-item .product-buy-card h3.qty-title,
body.page-item .product-buy-card h3 {
margin: 0 0 8px 0 !important;
padding: 0 !important;
color: #111 !important;
font-family: inherit !important;
font-size: 16px !important;
line-height: 1.28 !important;
font-weight: 850 !important;
letter-spacing: 0 !important;
}
/* Mengenfeld aus V26 beibehalten */
body.page-item .product-buy-card .qty-field {
flex: 0 0 118px !important;
display: grid !important;
grid-template-columns: 34px 50px 34px !important;
align-items: center !important;
justify-items: center !important;
width: 118px !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #cfcfcf !important;
background: #fff !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.page-item .product-buy-card .qty-field .qty-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 42px !important;
min-height: 42px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: #fff !important;
color: #999 !important;
font-size: 17px !important;
line-height: 42px !important;
font-weight: 400 !important;
text-align: center !important;
box-sizing: border-box !important;
}
body.page-item .product-buy-card .qty-field .qty-input {
display: block !important;
width: 50px !important;
height: 42px !important;
min-height: 42px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-left: 1px solid #e3e3e3 !important;
border-right: 1px solid #e3e3e3 !important;
background: #fff !important;
color: #111 !important;
font-family: inherit !important;
font-size: 18px !important;
line-height: 42px !important;
font-weight: 900 !important;
text-align: center !important;
text-indent: 0 !important;
vertical-align: middle !important;
box-sizing: border-box !important;
appearance: textfield !important;
-moz-appearance: textfield !important;
}
body.page-item .product-buy-card .qty-field .qty-input::-webkit-outer-spin-button,
body.page-item .product-buy-card .qty-field .qty-input::-webkit-inner-spin-button {
margin: 0 !important;
-webkit-appearance: none !important;
}
/* Preisbereich: V26-Fehler neutralisieren.
Der Gesamtpreis/js-total-price darf nicht als zweite große rote Zeile erscheinen. */
body.page-item .product-buy-card .js-total-price {
display: none !important;
}
/* Keine aggressive Span-Regel mehr auf prodbox_preis: Preis soll wieder wie vorher laufen */
body.page-item .product-buy-card .prodbox_preis span,
body.page-item .product-buy-card .product-price-block .current-price {
display: inline !important;
margin: 0 !important;
}
/* Preiszeile normal ausrichten, aber nicht berechnen/duplizieren */
body.page-item .product-buy-card .product-price-block,
body.page-item .product-buy-card .prodbox_preis {
align-items: baseline !important;
line-height: 1.15 !important;
}
/* Sale-Badge nicht verrutschen lassen */
body.page-item .product-buy-card .product-price-block img,
body.page-item .product-buy-card .prodbox_preis img {
vertical-align: middle !important;
}
/* Kleingedrucktes unter Preis normal */
body.page-item .product-buy-card .prodbox_mwst,
body.page-item .product-buy-card .tax-note,
body.page-item .product-buy-card .price-note {
display: block !important;
margin-top: 3px !important;
font-size: 11px !important;
line-height: 1.25 !important;
color: #777 !important;
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V28
Desktop: Pictos + Artikelnummer + Lieferzeit
- mehr Platz auf Desktop nutzen
- Icons links sauber gruppieren
- Artikelnummer/Lieferzeit als ruhige Meta-Zeile
- Ampel größer
========================================= */
@media (min-width: 981px) {
/* gesamter Block unter dem Hauptbild */
body.page-item .product-gallery-actions {
display: grid !important;
grid-template-columns: auto 1fr !important;
column-gap: 26px !important;
align-items: center !important;
width: 100% !important;
margin: 14px 0 0 0 !important;
padding: 0 0 0 0 !important;
transform: none !important;
box-sizing: border-box !important;
}
/* Bild-/Material-Picto mit Rahmen behalten */
body.page-item .product-gallery-actions a.product-extra-image-link,
body.page-item .product-gallery-actions a.product-material-link,
body.page-item .product-gallery-actions a.pswp-item:not(.product-video-link) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 68px !important;
height: 52px !important;
border: 1px solid #d8d8d8 !important;
background: #fff !important;
box-shadow: none !important;
outline: none !important;
box-sizing: border-box !important;
vertical-align: middle !important;
}
body.page-item .product-gallery-actions a.product-extra-image-link img,
body.page-item .product-gallery-actions a.product-material-link img,
body.page-item .product-gallery-actions a.pswp-item:not(.product-video-link) img {
max-width: 58px !important;
max-height: 44px !important;
object-fit: contain !important;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
}
/* YouTube ohne Rahmen, aber auf gleicher optischer Höhe */
body.page-item .product-gallery-actions a.product-video-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 58px !important;
height: 52px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
box-sizing: border-box !important;
vertical-align: middle !important;
}
body.page-item .product-gallery-actions a.product-video-link img {
max-width: 54px !important;
max-height: 44px !important;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
object-fit: contain !important;
}
/* Der Info-Block rechts neben den Pictos */
body.page-item .product-gallery-info {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: #666 !important;
font-size: 17px !important;
line-height: 1.35 !important;
font-weight: 400 !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-info p {
display: flex !important;
align-items: center !important;
gap: 9px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
color: #666 !important;
font-size: 17px !important;
line-height: 1.35 !important;
font-weight: 400 !important;
}
/* Artikelnummer / Lieferzeit optisch stärker und geordneter */
body.page-item .product-gallery-info strong,
body.page-item .product-gallery-info b {
color: #555 !important;
font-weight: 500 !important;
}
body.page-item .product-gallery-info .sep,
body.page-item .product-gallery-info .separator {
color: #aaa !important;
margin: 0 2px !important;
}
/* Lieferzeit-Ampel größer.
Deckt img, span-Balken und generische Ampel-Klassen ab. */
body.page-item .product-gallery-info img,
body.page-item .product-gallery-info .trafficlight,
body.page-item .product-gallery-info .traffic-light,
body.page-item .product-gallery-info .lieferzeit-ampel,
body.page-item .product-gallery-info .delivery-light {
display: inline-block !important;
width: auto !important;
min-width: 34px !important;
height: 18px !important;
max-height: 18px !important;
margin: 0 3px !important;
vertical-align: -3px !important;
object-fit: contain !important;
}
/* Falls die Ampel aus einzelnen Balken besteht */
body.page-item .product-gallery-info span[style*="background"],
body.page-item .product-gallery-info i {
display: inline-block !important;
transform: scale(1.22) !important;
transform-origin: center center !important;
margin-left: 3px !important;
margin-right: 3px !important;
}
}
/* Kleine Screens behalten kompakte Anordnung */
@media (max-width: 980px) {
body.page-item .product-gallery-actions {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
body.page-item .product-gallery-info {
margin-left: 0 !important;
width: 100% !important;
font-size: 13px !important;
white-space: normal !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V29
Desktop Premium: Pictos + Artikel/Lieferzeit
- V28 Grid zurücknehmen
- Pictos kompakt nebeneinander
- Meta-Zeile hochwertiger und ruhiger
- Ampel 1px tiefer
========================================= */
@media (min-width: 981px) {
/* Block unter dem Hauptbild als hochwertige Meta-Leiste */
body.page-item .product-gallery-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
width: 100% !important;
margin: 14px 0 0 0 !important;
padding: 0 !important;
transform: none !important;
gap: 10px !important;
box-sizing: border-box !important;
}
/* gerahmte Pictos: Material/Zusatzbild */
body.page-item .product-gallery-actions a.product-extra-image-link,
body.page-item .product-gallery-actions a.product-material-link,
body.page-item .product-gallery-actions a.pswp-item:not(.product-video-link) {
flex: 0 0 72px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 72px !important;
height: 54px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #d9d9d9 !important;
background: #fff !important;
box-shadow: none !important;
outline: none !important;
box-sizing: border-box !important;
transition: border-color .16s ease, transform .16s ease !important;
}
body.page-item .product-gallery-actions a.product-extra-image-link:hover,
body.page-item .product-gallery-actions a.product-material-link:hover,
body.page-item .product-gallery-actions a.pswp-item:not(.product-video-link):hover {
border-color: #e30613 !important;
transform: translateY(-1px) !important;
}
body.page-item .product-gallery-actions a.product-extra-image-link img,
body.page-item .product-gallery-actions a.product-material-link img,
body.page-item .product-gallery-actions a.pswp-item:not(.product-video-link) img {
display: block !important;
max-width: 62px !important;
max-height: 46px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
}
/* YouTube: ohne Rahmen, aber sauber in gleicher Zeile */
body.page-item .product-gallery-actions a.product-video-link,
body.page-item .product-gallery-actions a.product-video-link:hover {
flex: 0 0 58px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 58px !important;
height: 54px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
box-sizing: border-box !important;
transition: transform .16s ease !important;
}
body.page-item .product-gallery-actions a.product-video-link:hover {
transform: translateY(-1px) !important;
}
body.page-item .product-gallery-actions a.product-video-link img {
display: block !important;
max-width: 54px !important;
max-height: 44px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
}
/* Meta-Zeile: Shopify-würdiger, ruhiger Desktop-Look */
body.page-item .product-gallery-info {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-width: 0 !important;
height: 54px !important;
margin: 0 0 0 22px !important;
padding: 0 0 0 22px !important;
border-left: 1px solid #e7e7e7 !important;
color: #4f5b66 !important;
font-size: 17px !important;
line-height: 1.25 !important;
font-weight: 400 !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-info p {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
color: #4f5b66 !important;
font-size: 17px !important;
line-height: 1.25 !important;
font-weight: 400 !important;
letter-spacing: -0.1px !important;
}
/* Artikelnummer und Lieferzeit klarer */
body.page-item .product-gallery-info strong,
body.page-item .product-gallery-info b {
color: #111 !important;
font-weight: 500 !important;
}
body.page-item .product-gallery-info a {
color: #4f5b66 !important;
text-decoration: none !important;
}
body.page-item .product-gallery-info a:hover {
color: #e30613 !important;
}
/* Trenner zwischen Artikelnummer und Lieferzeit */
body.page-item .product-gallery-info .sep,
body.page-item .product-gallery-info .separator {
color: #c3c3c3 !important;
margin: 0 2px !important;
}
/* Ampel größer und exakt 1px tiefer */
body.page-item .product-gallery-info img,
body.page-item .product-gallery-info .trafficlight,
body.page-item .product-gallery-info .traffic-light,
body.page-item .product-gallery-info .lieferzeit-ampel,
body.page-item .product-gallery-info .delivery-light {
display: inline-block !important;
width: auto !important;
min-width: 36px !important;
height: 18px !important;
max-height: 18px !important;
margin: 0 4px !important;
vertical-align: -4px !important;
object-fit: contain !important;
transform: translateY(1px) !important;
}
/* Ampel aus einzelnen Balken */
body.page-item .product-gallery-info span[style*="background"],
body.page-item .product-gallery-info i {
display: inline-block !important;
transform: translateY(1px) scale(1.18) !important;
transform-origin: center center !important;
margin-left: 3px !important;
margin-right: 3px !important;
}
/* kleine graue Lieferzeit-Zahl sauber auf Linie */
body.page-item .product-gallery-info small,
body.page-item .product-gallery-info .delivery-days,
body.page-item .product-gallery-info .shipping-days {
display: inline-block !important;
color: #b5b5b5 !important;
font-size: 15px !important;
line-height: 1 !important;
font-weight: 700 !important;
transform: translateY(1px) !important;
}
/* Beschreibung mit sauberem Abstand unter dieser Meta-Leiste */
body.page-item .product-description-under-gallery,
body.page-item .product-description-card {
margin-top: 20px !important;
}
}
/* Mobile bleibt kompakt und ohne Desktop-Leiste */
@media (max-width: 980px) {
body.page-item .product-gallery-actions {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
body.page-item .product-gallery-info {
width: 100% !important;
height: auto !important;
margin: 6px 0 0 0 !important;
padding: 0 !important;
border-left: 0 !important;
font-size: 13px !important;
white-space: normal !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V30
Desktop Meta-Leiste:
- Pictos links
- rechter Meta-Block inkl. Strich rechtsbündig
- keine Änderung an Bild, Beschreibung, Preis
========================================= */
@media (min-width: 981px) {
/* Hauptzeile: links Pictos, rechts Meta-Block */
body.page-item .product-gallery-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
width: 100% !important;
margin: 14px 0 0 0 !important;
padding: 0 !important;
gap: 10px !important;
box-sizing: border-box !important;
}
/* Meta-Block ganz nach rechts drücken */
body.page-item .product-gallery-info {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
height: 54px !important;
margin: 0 0 0 auto !important;
padding: 0 0 0 24px !important;
border-left: 1px solid #e7e7e7 !important;
color: #4f5b66 !important;
font-size: 17px !important;
line-height: 1.25 !important;
font-weight: 400 !important;
white-space: nowrap !important;
box-sizing: border-box !important;
text-align: right !important;
}
body.page-item .product-gallery-info p {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
color: #4f5b66 !important;
font-size: 17px !important;
line-height: 1.25 !important;
font-weight: 400 !important;
letter-spacing: -0.1px !important;
text-align: right !important;
}
/* Ampel bleibt leicht tiefer */
body.page-item .product-gallery-info img,
body.page-item .product-gallery-info .trafficlight,
body.page-item .product-gallery-info .traffic-light,
body.page-item .product-gallery-info .lieferzeit-ampel,
body.page-item .product-gallery-info .delivery-light {
transform: translateY(1px) !important;
vertical-align: -4px !important;
}
body.page-item .product-gallery-info span[style*="background"],
body.page-item .product-gallery-info i {
transform: translateY(1px) scale(1.18) !important;
transform-origin: center center !important;
}
}
@media (max-width: 980px) {
body.page-item .product-gallery-info {
margin-left: 0 !important;
padding-left: 0 !important;
border-left: 0 !important;
text-align: left !important;
}
body.page-item .product-gallery-info p {
justify-content: flex-start !important;
text-align: left !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V31
Meta-Trenner modernisieren
- ersetzt optisch das alte "|"
- Rest der Meta-Leiste bleibt unverändert
========================================= */
@media (min-width: 981px) {
body.page-item .product-gallery-info .meta-divider {
display: inline-block !important;
width: 5px !important;
height: 5px !important;
margin: 0 4px !important;
border-radius: 50% !important;
background: #d0d0d0 !important;
vertical-align: middle !important;
transform: translateY(-1px) !important;
flex: 0 0 5px !important;
}
}
@media (max-width: 980px) {
body.page-item .product-gallery-info .meta-divider {
display: inline-block !important;
width: 4px !important;
height: 4px !important;
margin: 0 4px !important;
border-radius: 50% !important;
background: #d0d0d0 !important;
vertical-align: middle !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V32
Meta-Zeile Abstandsharmonie
- Artikelnummer / Punkt / Lieferzeit / Ampel / Tage ruhiger gruppiert
- Rest unverändert
========================================= */
@media (min-width: 981px) {
body.page-item .product-gallery-info p {
gap: 6px !important;
letter-spacing: -0.08px !important;
}
body.page-item .product-gallery-info .meta-divider {
width: 4px !important;
height: 4px !important;
margin: 0 6px !important;
background: #cfcfcf !important;
transform: translateY(-1px) !important;
flex: 0 0 4px !important;
}
/* Lieferzeit-Icon/Ampel näher an "Lieferzeit" */
body.page-item .product-gallery-info img,
body.page-item .product-gallery-info .trafficlight,
body.page-item .product-gallery-info .traffic-light,
body.page-item .product-gallery-info .lieferzeit-ampel,
body.page-item .product-gallery-info .delivery-light {
margin-left: 5px !important;
margin-right: 4px !important;
transform: translateY(1px) !important;
vertical-align: -4px !important;
}
body.page-item .product-gallery-info span[style*="background"],
body.page-item .product-gallery-info i {
margin-left: 2px !important;
margin-right: 2px !important;
transform: translateY(1px) scale(1.18) !important;
}
/* 4-6 etwas näher an die Ampel, aber nicht klebend */
body.page-item .product-gallery-info small,
body.page-item .product-gallery-info .delivery-days,
body.page-item .product-gallery-info .shipping-days {
margin-left: 3px !important;
color: #b7b7b7 !important;
font-size: 15px !important;
font-weight: 700 !important;
transform: translateY(1px) !important;
}
}
@media (max-width: 980px) {
body.page-item .product-gallery-info .meta-divider {
width: 4px !important;
height: 4px !important;
margin: 0 5px !important;
}
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V33
Final SEO/Host-Redirect-Check:
Keine Designänderung gegenüber V32.
========================================= */
/* =========================================
SHOW ITEM RESPONSIVE PATCH V34
Finaler Preis-Feinschliff:
- Preisblock 3px tiefer
- Abstand alter Preis / neuer Preis / Sale-Badge luftiger
- keine Änderung an H1, Produktbox, Meta-Leiste
========================================= */
/* Preisblock neben Menge minimal tiefer */
body.page-item .product-buy-card .product-price-block,
body.page-item .product-buy-card .prodbox_preis {
transform: translateY(9px) !important;
}
/* Alter Preis -> aktueller Preis etwas mehr Luft */
body.page-item .product-buy-card .product-price-block .old-price,
body.page-item .product-buy-card .product-price-block strike,
body.page-item .product-buy-card .prodbox_preis strike {
margin-right: 8px !important;
}
/* Aktueller Preis -> Sale-Badge etwas mehr Luft */
body.page-item .product-buy-card .product-price-block .current-price,
body.page-item .product-buy-card .product-price-block .js-total-price,
body.page-item .product-buy-card .prodbox_preis span:not(.meta-divider) {
margin-right: 8px !important;
}
/* Sale-Badge optisch auf Preislinie halten */
body.page-item .product-buy-card .product-price-block .sale-badge,
body.page-item .product-buy-card .product-price-block img,
body.page-item .product-buy-card .prodbox_preis img {
margin-left: 2px !important;
vertical-align: middle !important;
transform: translateY(-1px) !important;
}
/* Kleingedrucktes bleibt darunter ruhig */
body.page-item .product-buy-card .prodbox_mwst,
body.page-item .product-buy-card .tax-note,
body.page-item .product-buy-card .price-note {
transform: translateY(0) !important;
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V35
Preis-Feinschliff Korrektur:
- Preisblock insgesamt 6px tiefer
- mehr Abstand nur zwischen Streichpreis und aktuellem Preis
- kein Abstand zwischen aktuellem Preis und Währung
========================================= */
/* V34 war 3px, jetzt nochmal 3px tiefer */
body.page-item .product-buy-card .product-price-block,
body.page-item .product-buy-card .prodbox_preis {
transform: translateY(6px) !important;
}
/* Abstand NUR nach dem Streichpreis erhöhen */
body.page-item .product-buy-card .product-price-block .old-price,
body.page-item .product-buy-card .product-price-block strike,
body.page-item .product-buy-card .prodbox_preis strike {
margin-right: 14px !important;
}
/* Aktueller Preis selbst darf KEINEN Abstand zur Währung bekommen */
body.page-item .product-buy-card .product-price-block .current-price,
body.page-item .product-buy-card .product-price-block .js-total-price,
body.page-item .product-buy-card .prodbox_preis span:not(.meta-divider) {
margin-right: 0 !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
/* Sale-Badge bekommt den Abstand, nicht die Währung */
body.page-item .product-buy-card .product-price-block .sale-badge,
body.page-item .product-buy-card .product-price-block img,
body.page-item .product-buy-card .prodbox_preis img {
margin-left: 12px !important;
margin-right: 0 !important;
vertical-align: middle !important;
transform: translateY(-1px) !important;
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V36
Preisabstand wirklich erzwingen:
- Preisblock 6px tiefer bleibt
- Abstand zwischen Streichpreis und aktuellem Preis über Flex/GAP
- kein Abstand zwischen aktuellem Preis und €
========================================= */
/* kompletter Preisblock tiefer */
body.page-item .product-buy-card .product-price-block {
transform: translateY(6px) !important;
}
/* echte Preiszeile als Flex mit Gap statt Margin */
body.page-item .product-buy-card .product-price-line {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
column-gap: 13px !important;
row-gap: 0 !important;
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
/* Streichpreis */
body.page-item .product-buy-card .product-price-line .old-price {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
color: #777 !important;
font-size: 24px !important;
line-height: 1 !important;
font-weight: 400 !important;
white-space: nowrap !important;
}
/* aktueller Preis: Betrag und € bleiben zusammen, kein Letter-/Wordspacing */
body.page-item .product-buy-card .product-price-line .current-price {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
color: #e30613 !important;
font-size: 25px !important;
line-height: 1 !important;
font-weight: 900 !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
white-space: nowrap !important;
}
/* Sale-Badge bekommt eigene Luft über flex-gap */
body.page-item .product-buy-card .product-price-line .sale-badge {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
transform: translateY(-1px) !important;
}
/* Falls img statt Klasse greift */
body.page-item .product-buy-card .product-price-line img {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
transform: translateY(-1px) !important;
}
/* Alte breitgreifende Preisregeln neutralisieren */
body.page-item .product-buy-card .prodbox_preis,
body.page-item .product-buy-card .prodbox_preis strike,
body.page-item .product-buy-card .prodbox_preis span,
body.page-item .product-buy-card .prodbox_preis img {
margin-left: 0 !important;
margin-right: 0 !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
/* Kleingedrucktes bleibt unter der Zeile */
body.page-item .product-buy-card .product-price-block small,
body.page-item .product-buy-card .tax-note,
body.page-item .product-buy-card .price-note {
display: block !important;
margin-top: 3px !important;
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V37
Preisabstand final über echte PHP-Struktur:
- nutzt vorhandenes
- Abstand nur zwischen Streichpreis und aktuellem Preis
- kein Abstand zwischen Betrag und Währung
========================================= */
/* Preisblock bleibt minimal tiefer */
body.page-item .product-buy-card .product-price-block,
body.page-item .product-buy-card .prodbox_preis {
transform: translateY(6px) !important;
}
/* Echte Preisstruktur: old price | gap | current price | sale */
body.page-item .product-buy-card .prodbox_preis .price-wrapper {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
line-height: 1 !important;
gap: 0 !important;
}
/* Streichpreis-Container ohne eigene Außenabstände */
body.page-item .product-buy-card .prodbox_preis #price_orig_container {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
/* Der echte Abstand zwischen Streichpreis und aktuellem Preis */
body.page-item .product-buy-card .prodbox_preis .price-gap {
display: inline-block !important;
flex: 0 0 14px !important;
width: 14px !important;
min-width: 14px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Aktueller Preis bleibt zusammen mit Währung */
body.page-item .product-buy-card .prodbox_preis .price-current {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
color: #e30613 !important;
font-size: 25px !important;
line-height: 1 !important;
font-weight: 900 !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
/* Betrag selbst ohne Extra-Abstand zur Währung */
body.page-item .product-buy-card .prodbox_preis .price-current #price {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
/* Sale-Badge nur rechts vom aktuellen Preis mit sauberer Luft */
body.page-item .product-buy-card .prodbox_preis .price-badge {
display: inline-block !important;
margin: 0 0 0 12px !important;
padding: 0 !important;
vertical-align: middle !important;
transform: translateY(-1px) !important;
}
/* alte / falsche Totalpreis-Ausgabe weiterhin aus */
body.page-item .product-buy-card .prodbox_preis .js-total-price,
body.page-item .product-buy-card .js-total-price {
display: none !important;
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V38
Preiszeile final:
- kompletter Preisblock weitere 2px tiefer
- Versandkosten/MwSt.-Zeile mit mehr Abstand zum Preis
- Preisabstand aus V37 bleibt unverändert
========================================= */
/* V37 war 6px, jetzt 8px */
body.page-item .product-buy-card .product-price-block,
body.page-item .product-buy-card .prodbox_preis {
transform: translateY(8px) !important;
}
/* Kleingedrucktes/Versandkosten weiter vom Preis lösen */
body.page-item .product-buy-card .product-price-note,
body.page-item .product-buy-card .prodbox_mwst,
body.page-item .product-buy-card .tax-note,
body.page-item .product-buy-card .price-note {
display: block !important;
margin-top: 7px !important;
line-height: 1.35 !important;
transform: none !important;
}
/* Falls die Versandkosten-Zeile direkt im Preisblock steckt */
body.page-item .product-buy-card .product-price-block small,
body.page-item .product-buy-card .product-price-block .tax-note,
body.page-item .product-buy-card .product-price-block .price-note {
display: block !important;
margin-top: 7px !important;
line-height: 1.35 !important;
}
/* Versandkosten-Link nicht an den Preis kleben lassen */
body.page-item .product-buy-card .product-price-note .open-shipping-modal,
body.page-item .product-buy-card .prodbox_mwst .open-shipping-modal {
display: inline-block !important;
margin-left: 2px !important;
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V39
MwSt./Versandkosten-Zeile:
- nur diese Zeile weitere 2px tiefer
- Preiszeile bleibt wie V38
========================================= */
body.page-item .product-buy-card .product-price-note,
body.page-item .product-buy-card .prodbox_mwst,
body.page-item .product-buy-card .tax-note,
body.page-item .product-buy-card .price-note {
margin-top: 9px !important; /* V38 war 7px */
}
body.page-item .product-buy-card .product-price-block small,
body.page-item .product-buy-card .product-price-block .tax-note,
body.page-item .product-buy-card .product-price-block .price-note {
margin-top: 9px !important; /* V38 war 7px */
}
/* =========================================
SHOW ITEM RESPONSIVE PATCH V40
Header-Cleanup / Modultrennung
=========================================
Entfernt alte Produktseiten-Header-Eingriffe aus V39:
- alte page-item Top-Actions-Regel
- alte page-item Menu-Toggle-Regel
- alte page-item Menu-Icon-Regel
Header/Banner gehört ausschließlich ins Header-Modul:
header_banner_module_v4_hotline_oem.css
Keine Layout-, Preis-, Sidebar- oder Galerieänderung.
========================================= */
/* =========================================
SHOW ITEM STEP 1 MOBILE H1 + THUMBS
- H1-Sektion mobil näher an den Header
- Galerie-Thumbs/Icons unter Hauptbild sichtbar halten
- Meta-Zeile rechts wie Vorlage
========================================= */
@media (max-width: 760px) {
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
width: 100% !important;
max-width: 100% !important;
padding: 12px 22px 54px 22px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
body.page-item .subcategory-page-inner.product-page-inner,
body.page-item .product-page-inner {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-item .product-page-header,
body.page-item .subcategory-page-header.product-page-header,
body.page-item .service-page-header.product-page-header {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 26px 0 !important;
padding: 0 !important;
border: 0 !important;
box-sizing: border-box !important;
}
body.page-item .product-breadcrumb,
body.page-item .subcategory-breadcrumb.product-breadcrumb,
body.page-item .product-breadcrumb a,
body.page-item .subcategory-breadcrumb.product-breadcrumb a {
display: block !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
color: #111 !important;
font-size: 31px !important;
line-height: 1.18 !important;
font-weight: 300 !important;
letter-spacing: -0.035em !important;
text-decoration: none !important;
text-transform: none !important;
font-family: inherit !important;
}
body.page-item .product-page-subtitle,
body.page-item .subcategory-page-subtitle.product-page-subtitle {
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: #555 !important;
font-size: 19px !important;
line-height: 1.45 !important;
font-weight: 300 !important;
letter-spacing: -0.02em !important;
font-family: inherit !important;
}
body.page-item .product-page-subtitle a,
body.page-item .subcategory-page-subtitle.product-page-subtitle a {
color: #555 !important;
text-decoration: none !important;
font-weight: 300 !important;
}
body.page-item .product-page-subtitle .sep {
display: inline-block !important;
margin: 0 11px !important;
color: #aaa !important;
}
body.page-item .product-layout {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
width: 100% !important;
margin: 12px 0 20px 0 !important;
padding: 0 !important;
gap: 10px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
body.page-item .product-gallery-actions > a,
body.page-item .product-gallery-actions a.product-extra-image-link,
body.page-item .product-gallery-actions a.product-material-link,
body.page-item .product-gallery-actions a.product-video-link {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
body.page-item .product-gallery-actions a.product-extra-image-link,
body.page-item .product-gallery-actions a.product-material-link {
width: 66px !important;
height: 52px !important;
border: 1px solid #ddd !important;
background: #fff !important;
}
body.page-item .product-gallery-actions a.product-video-link {
width: 52px !important;
height: 52px !important;
border: 0 !important;
background: transparent !important;
}
body.page-item .product-gallery-actions > a img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
object-fit: contain !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-gallery-info {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
border: 0 !important;
text-align: right !important;
white-space: nowrap !important;
color: #777 !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-info p {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 7px !important;
margin: 0 !important;
padding: 0 !important;
color: #777 !important;
font-size: 17px !important;
line-height: 1.25 !important;
font-weight: 300 !important;
letter-spacing: -0.02em !important;
white-space: nowrap !important;
text-align: right !important;
}
body.page-item .product-gallery-info .meta-divider {
display: inline-block !important;
width: 4px !important;
height: 4px !important;
margin: 0 4px !important;
border-radius: 50% !important;
background: #d0d0d0 !important;
flex: 0 0 4px !important;
}
body.page-item .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-info .product-status-light {
display: inline-block !important;
width: 43px !important;
height: 10px !important;
min-width: 43px !important;
margin: 0 3px !important;
border: 0 !important;
vertical-align: middle !important;
object-fit: fill !important;
transform: translateY(1px) !important;
}
}
/* =========================================
SHOW ITEM STEP 2 MOBILE TYPO + NO IMAGE HOVER
- H1 und Breadcrumb kleiner
- ArtikelNr/Lieferzeit-Zeile kleiner
- roter Bildrahmen auf Mobile komplett deaktiviert
========================================= */
@media (max-width: 760px) {
body.page-item .product-breadcrumb,
body.page-item .subcategory-breadcrumb.product-breadcrumb,
body.page-item .product-breadcrumb a,
body.page-item .subcategory-breadcrumb.product-breadcrumb a {
font-size: 27px !important;
line-height: 1.18 !important;
font-weight: 300 !important;
letter-spacing: -0.035em !important;
}
body.page-item .product-page-subtitle,
body.page-item .subcategory-page-subtitle.product-page-subtitle,
body.page-item .product-page-subtitle a,
body.page-item .subcategory-page-subtitle.product-page-subtitle a {
font-size: 17px !important;
line-height: 1.42 !important;
font-weight: 300 !important;
letter-spacing: -0.02em !important;
color: #555 !important;
}
body.page-item .product-page-subtitle .sep {
margin: 0 9px !important;
color: #aaa !important;
}
body.page-item .product-gallery-info p,
body.page-item .product-gallery-info,
body.page-item .product-gallery-info a,
body.page-item .product-gallery-info span {
font-size: 15px !important;
line-height: 1.25 !important;
font-weight: 300 !important;
letter-spacing: -0.015em !important;
color: #777 !important;
}
body.page-item .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-info .product-status-light {
width: 36px !important;
min-width: 36px !important;
height: 9px !important;
margin: 0 3px !important;
border: 0 !important;
object-fit: fill !important;
}
/* iOS/Safari merkt sich :hover nach Tap.
Auf Mobil darf das Hauptbild nie rot umranden. */
body.page-item .product-gallery-main,
body.page-item .product-gallery-main:hover,
body.page-item .product-gallery-main:focus,
body.page-item .product-gallery-main:active,
body.page-item .product-gallery-main:focus-visible {
border-color: #d8d8d8 !important;
outline: none !important;
box-shadow: none !important;
}
body.page-item .product-gallery-main img,
body.page-item .product-gallery-main:hover img,
body.page-item .product-gallery-main:focus img,
body.page-item .product-gallery-main:active img {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
}
body.page-item .product-gallery-actions a:hover,
body.page-item .product-gallery-actions a:focus,
body.page-item .product-gallery-actions a:active {
border-color: #ddd !important;
outline: none !important;
box-shadow: none !important;
}
}
/* =========================================
SHOW ITEM STEP 3 MOBILE REALIGN
- H1/Subtitle näher an Vorlage
- Bild nicht mehr hochkant/square, sondern altes Querformat
- Artikelnummer/Lieferzeit direkt unter Bild
- mobile Hover-/Tap-Rotrahmen endgültig aus
========================================= */
@media (max-width: 760px) {
body.page-item #page-content-wrapper.product-item-page,
body.page-item #page-content-wrapper.subcategory-page.product-item-page {
padding-left: 22px !important;
padding-right: 22px !important;
padding-top: 13px !important;
}
body.page-item .product-page-header,
body.page-item .subcategory-page-header.product-page-header,
body.page-item .service-page-header.product-page-header {
margin: 0 0 24px 0 !important;
padding: 0 !important;
}
body.page-item .product-breadcrumb,
body.page-item .subcategory-breadcrumb.product-breadcrumb,
body.page-item .product-breadcrumb a,
body.page-item .subcategory-breadcrumb.product-breadcrumb a {
font-size: 25px !important;
line-height: 1.18 !important;
font-weight: 300 !important;
letter-spacing: -0.035em !important;
margin-bottom: 8px !important;
}
body.page-item .product-page-subtitle,
body.page-item .subcategory-page-subtitle.product-page-subtitle,
body.page-item .product-page-subtitle a,
body.page-item .subcategory-page-subtitle.product-page-subtitle a {
font-size: 15px !important;
line-height: 1.42 !important;
font-weight: 300 !important;
letter-spacing: -0.02em !important;
color: #555 !important;
}
body.page-item .product-page-subtitle .sep {
margin: 0 8px !important;
color: #aaa !important;
}
body.page-item .product-gallery-main,
body.page-item .product-gallery-main:hover,
body.page-item .product-gallery-main:focus,
body.page-item .product-gallery-main:active,
body.page-item .product-gallery-main:focus-visible {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 68vw !important;
max-height: 270px !important;
min-height: 0 !important;
aspect-ratio: auto !important;
padding: 0 !important;
border: 1px solid #cfcfcf !important;
border-color: #cfcfcf !important;
outline: none !important;
box-shadow: none !important;
background: #fff !important;
overflow: hidden !important;
box-sizing: border-box !important;
-webkit-tap-highlight-color: transparent !important;
}
body.page-item .product-gallery-main img,
body.page-item .product-gallery-main:hover img,
body.page-item .product-gallery-main:focus img,
body.page-item .product-gallery-main:active img {
display: block !important;
width: 94% !important;
height: 94% !important;
max-width: 94% !important;
max-height: 94% !important;
object-fit: contain !important;
object-position: center center !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: auto !important;
background: transparent !important;
}
body.page-item .product-gallery-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
width: 100% !important;
margin: 8px 0 24px 0 !important;
padding: 0 !important;
gap: 10px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Wenn keine Dekor-Piktogramme ausgegeben werden, sitzt die Meta-Zeile alleine direkt unter dem Bild. */
body.page-item .product-gallery-info {
flex: 1 1 auto !important;
min-width: 0 !important;
margin-left: auto !important;
text-align: right !important;
white-space: nowrap !important;
}
body.page-item .product-gallery-info p,
body.page-item .product-gallery-info,
body.page-item .product-gallery-info a,
body.page-item .product-gallery-info span {
font-size: 14px !important;
line-height: 1.25 !important;
font-weight: 300 !important;
letter-spacing: -0.015em !important;
color: #777 !important;
}
body.page-item .product-gallery-info p {
justify-content: flex-end !important;
gap: 6px !important;
}
body.page-item .product-gallery-info .meta-divider {
width: 4px !important;
height: 4px !important;
margin: 0 4px !important;
border-radius: 50% !important;
background: #d0d0d0 !important;
flex: 0 0 4px !important;
}
body.page-item .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-info .product-status-light {
width: 34px !important;
min-width: 34px !important;
height: 8px !important;
margin: 0 3px !important;
border: 0 !important;
object-fit: fill !important;
transform: translateY(0) !important;
}
body.page-item .product-gallery-actions a:hover,
body.page-item .product-gallery-actions a:focus,
body.page-item .product-gallery-actions a:active {
border-color: #ddd !important;
outline: none !important;
box-shadow: none !important;
}
}
/* =========================================
SHOW ITEM STEP 4 H1 FINAL TUNE
Nur Produkt-H1-Sektion:
- Schrift kleiner
- gesamte Sektion 5px tiefer
- Bild/Meta/Piktogramme bleiben unverändert
========================================= */
@media (max-width: 760px) {
body.page-item .product-page-header,
body.page-item .subcategory-page-header.product-page-header,
body.page-item .service-page-header.product-page-header {
position: relative !important;
top: 5px !important;
margin-bottom: 29px !important;
}
body.page-item .product-breadcrumb,
body.page-item .subcategory-breadcrumb.product-breadcrumb,
body.page-item .product-breadcrumb a,
body.page-item .subcategory-breadcrumb.product-breadcrumb a {
font-size: 23px !important;
line-height: 1.18 !important;
font-weight: 300 !important;
letter-spacing: -0.035em !important;
margin-bottom: 7px !important;
}
body.page-item .product-page-subtitle,
body.page-item .subcategory-page-subtitle.product-page-subtitle,
body.page-item .product-page-subtitle a,
body.page-item .subcategory-page-subtitle.product-page-subtitle a {
font-size: 14px !important;
line-height: 1.42 !important;
font-weight: 300 !important;
letter-spacing: -0.02em !important;
color: #555 !important;
}
body.page-item .product-page-subtitle .sep {
margin: 0 7px !important;
color: #aaa !important;
}
}
/* =========================================
SHOW ITEM STEP 5 H1 2PX DOWN 10PX LEFT
Nur Produkt-H1-Sektion:
- 2px tiefer als Step 4
- 10px weiter nach links
========================================= */
@media (max-width: 760px) {
body.page-item .product-page-header,
body.page-item .subcategory-page-header.product-page-header,
body.page-item .service-page-header.product-page-header {
top: 7px !important;
transform: translateX(-10px) !important;
}
}
/* =========================================
SHOW ITEM STEP 6 PHOTOSWIPE OVER HEADER
Bugfix:
Großbild/PhotoSwipe muss über Topbar/Header liegen,
sonst ist die obere Schließen-Leiste verdeckt.
========================================= */
body.page-item .pswp,
body.page-item .pswp__bg,
body.page-item .pswp__scroll-wrap {
z-index: 2147483000 !important;
}
body.page-item .pswp__top-bar,
body.page-item .pswp__button,
body.page-item .pswp__ui {
z-index: 2147483001 !important;
}
@media (max-width: 760px) {
body.page-item .pswp,
body.page-item .pswp__bg,
body.page-item .pswp__scroll-wrap {
z-index: 2147483000 !important;
}
body.page-item .pswp__top-bar,
body.page-item .pswp__button,
body.page-item .pswp__ui {
z-index: 2147483001 !important;
}
}
/* =========================================
SHOW ITEM STEP 7 META RIGHT WITHOUT THUMBS
Unter dem Bild:
Wenn keine Dekor-Piktogramme/Zusatzbilder vorhanden sind,
bleibt ArtikelNr./Lieferzeit trotzdem rechts.
========================================= */
@media (max-width: 760px) {
body.page-item .product-gallery-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
width: 100% !important;
}
body.page-item .product-gallery-info {
display: block !important;
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: 0 !important;
padding-left: 8px !important;
text-align: right !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
/* Falls .product-gallery-info das einzige sichtbare Element in der Zeile ist:
volle Zeilenbreite, aber weiterhin rechtsbündig. */
body.page-item .product-gallery-actions > .product-gallery-info:first-child:last-child {
flex: 0 0 100% !important;
width: 100% !important;
padding-left: 0 !important;
margin-left: 0 !important;
text-align: right !important;
}
body.page-item .product-gallery-info p {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
white-space: nowrap !important;
}
}
/* =========================================
SHOW ITEM STEP 8 AMPEL BIG + PRICE GUARD NOTE
Nur Ampel unter dem Bild:
wieder doppelt größer.
========================================= */
@media (max-width: 760px) {
body.page-item .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-info .product-status-light {
width: 68px !important;
min-width: 68px !important;
height: 16px !important;
margin: 0 4px !important;
border: 0 !important;
object-fit: fill !important;
transform: translateY(1px) !important;
}
}
/* =========================================
SHOW ITEM STEP 9 NORMAL PRICE BRANCH FIX
Normaler Preisfall ohne Streichpreis:
keine versteckten Preis-Spans, echter sichtbarer Preis mit €.
========================================= */
body.page-item .product-buy-card .prodbox_preis .price-current-normal {
display: inline-flex !important;
align-items: baseline !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
color: #e30613 !important;
font-size: 25px !important;
line-height: 1 !important;
font-weight: 900 !important;
white-space: nowrap !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
body.page-item .product-buy-card .prodbox_preis .price-current-normal #price {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
font: inherit !important;
line-height: inherit !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
@media (max-width: 760px) {
body.page-item .product-buy-card .prodbox_preis .price-current-normal {
font-size: 25px !important;
}
}
/* =========================================
SHOW ITEM STEP 10 PRICE CURRENCY SPACE
Stabiler Abstand zwischen Preis und Währung.
========================================= */
body.page-item .product-buy-card .prodbox_preis .price-current-normal .price-currency {
display: inline !important;
margin-left: 6px !important;
padding: 0 !important;
color: inherit !important;
font: inherit !important;
line-height: inherit !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
@media (max-width: 760px) {
body.page-item .product-buy-card .prodbox_preis .price-current-normal .price-currency {
margin-left: 6px !important;
}
}
/* =========================================
SHOW ITEM STEP 11 DESCRIPTION NO EXTRA + LABEL SIZE
- Beschreibung nur ohne Zusatzbild/Dekor-Piktogramme 20px nach oben
- Variantenlabels v1 bis v7 optisch wie "Beschreibung"
========================================= */
@media (max-width: 760px) {
body.page-item .product-layout.product-layout-no-extra-media .product-description-title {
margin-top: -20px !important;
}
body.page-item .product-layout.product-layout-no-extra-media .product-tags-section,
body.page-item .product-layout.product-layout-no-extra-media .product-description-section {
margin-top: -20px !important;
}
body.page-item .product-buy-card .form-group > h3,
body.page-item .product-buy-card .product-qty-group > h3,
body.page-item .product-buy-card h3.qty-title {
font-size: 18px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
}
}
/* =========================================
SHOW ITEM STEP 12 PHOTOSWIPE MOBILE CLOSE NO FADE
Mobile: PhotoSwipe-Rückzoom/Fade beim Schließen deaktivieren,
weil die Zielposition durch das mobile Bildlayout nicht sauber passt.
Desktop bleibt unberührt.
========================================= */
@media (max-width: 760px) {
body.page-item .pswp.pswp--closing,
body.page-item .pswp.pswp--closing .pswp__bg,
body.page-item .pswp.pswp--closing .pswp__scroll-wrap,
body.page-item .pswp.pswp--closing .pswp__container,
body.page-item .pswp.pswp--closing .pswp__item,
body.page-item .pswp.pswp--closing .pswp__zoom-wrap,
body.page-item .pswp.pswp--closing .pswp__img,
body.page-item .pswp.pswp--closing img {
transition: none !important;
animation: none !important;
transform-origin: center center !important;
}
body.page-item .pswp.pswp--closing {
opacity: 0 !important;
}
}
/* =========================================
SHOW ITEM STEP 13 PHOTOSWIPE JS MOBILE NO ZOOM SUPPORT
Ergänzung zur JS-Konfiguration:
Mobile PhotoSwipe soll beim Schließen nicht zum Thumb zurückzoomen.
========================================= */
@media (max-width: 760px) {
body.page-item .pswp,
body.page-item .pswp *,
body.page-item .pswp__bg,
body.page-item .pswp__container,
body.page-item .pswp__item,
body.page-item .pswp__zoom-wrap,
body.page-item .pswp__img {
transition-duration: 0ms !important;
animation-duration: 0ms !important;
}
body.page-item .pswp--closing .pswp__zoom-wrap,
body.page-item .pswp--closing .pswp__img,
body.page-item .pswp--closing .pswp__bg {
transition: none !important;
animation: none !important;
}
}
/* =========================================
SHOW ITEM STEP 14 PHOTOSWIPE MOBILE NO THUMB RETURN
Mobile: letzten Rücksprung zum Thumbnail komplett ausblenden.
Das verhindert den 1-Frame-Sprung zum ca. 10px falschen Thumb-Ziel.
========================================= */
@media (max-width: 760px) {
body.page-item .pswp.rs-mobile-pswp-closing-now,
body.page-item .pswp.pswp--closing {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: none !important;
animation: none !important;
}
body.page-item .pswp.rs-mobile-pswp-no-return *,
body.page-item .pswp.pswp--closing *,
body.page-item .pswp.pswp--closing .pswp__zoom-wrap,
body.page-item .pswp.pswp--closing .pswp__img,
body.page-item .pswp.pswp--closing .pswp__bg {
transition: none !important;
animation: none !important;
transform-origin: center center !important;
}
}
/* =========================================
SHOW ITEM STEP 15 STRIKE PRICE QTY MOBILE TUNE
- Abstand vor € auch bei Strike/Sale
- Strike + aktueller Preis sauberer nebeneinander
- Max-Mengen-Hinweis näher an Menge/Preis
========================================= */
body.page-item .product-buy-card .prodbox_preis .price-currency {
display: inline !important;
margin-left: 6px !important;
padding: 0 !important;
color: inherit !important;
font: inherit !important;
line-height: inherit !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
body.page-item .product-buy-card #price_orig_container .price-currency {
margin-left: 5px !important;
}
@media (max-width: 760px) {
body.page-item .product-buy-card .product-price-box {
align-self: flex-start !important;
margin-top: 0 !important;
}
body.page-item .product-buy-card .prodbox_preis .price-wrapper {
display: inline-flex !important;
align-items: baseline !important;
justify-content: flex-end !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
width: 100% !important;
max-width: 100% !important;
gap: 12px !important;
}
body.page-item .product-buy-card #price_orig_container {
display: inline-flex !important;
align-items: baseline !important;
margin: 0 !important;
padding: 0 !important;
font-size: 24px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .price-current,
body.page-item .product-buy-card .price-current-normal {
display: inline-flex !important;
align-items: baseline !important;
margin: 0 !important;
padding: 0 !important;
font-size: 30px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .price-gap {
display: none !important;
}
body.page-item .product-buy-card .price-badge {
margin-left: 2px !important;
}
body.page-item .product-buy-card .product-price-note {
margin-top: 4px !important;
line-height: 1.25 !important;
}
body.page-item .product-buy-card .product-qty-note {
margin-top: -14px !important;
margin-bottom: 18px !important;
padding-top: 0 !important;
font-size: 20px !important;
line-height: 1.25 !important;
}
}
/* =========================================
SHOW ITEM FINAL PRICE STATES
DOM-Zustände: .normal-price und .strike-price
Keine weitere Unterscheidung über verschachtelte Zufallselemente.
========================================= */
body.page-item .product-buy-card .product-buy-row {
display: grid !important;
grid-template-columns: 112px minmax(0, 1fr) !important;
column-gap: clamp(72px, 14vw, 150px) !important;
row-gap: 0 !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.page-item .product-buy-card .product-qty-group {
grid-column: 1 !important;
grid-row: 1 !important;
width: 112px !important;
min-width: 112px !important;
max-width: 112px !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-qty-group .product-qty-note {
display: block !important;
width: max-content !important;
max-width: 300px !important;
margin: 9px 0 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 300 !important;
color: #777 !important;
text-align: left !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .product-price-box {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: end !important;
align-self: center !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
overflow: visible !important;
}
body.page-item .product-buy-card .product-qty-note {
grid-column: 1 !important;
grid-row: 2 !important;
justify-self: start !important;
width: max-content !important;
max-width: 260px !important;
margin: 6px 0 18px 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.35 !important;
color: #777 !important;
text-align: left !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .product-price-box .prodbox_preis {
display: block !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
line-height: 1 !important;
transform: none !important;
}
body.page-item .product-buy-card .prodbox_preis .price-wrapper {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .prodbox_preis.normal-price .price-wrapper {
display: inline-flex !important;
align-items: baseline !important;
justify-content: flex-end !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-wrapper {
display: inline-flex !important;
align-items: baseline !important;
justify-content: flex-end !important;
gap: 16px !important;
}
body.page-item .product-buy-card .prodbox_preis .price-current,
body.page-item .product-buy-card .prodbox_preis .price-old {
display: inline-flex !important;
align-items: baseline !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .prodbox_preis .price-old,
body.page-item .product-buy-card .prodbox_preis #price_orig_container {
color: #777 !important;
font-size: 26px !important;
line-height: 1 !important;
font-weight: 300 !important;
text-decoration: line-through !important;
text-decoration-thickness: 1px !important;
}
body.page-item .product-buy-card .prodbox_preis .price-current {
color: #e30613 !important;
font-size: 30px !important;
line-height: 1 !important;
font-weight: 300 !important;
}
body.page-item .product-buy-card .prodbox_preis.normal-price .price-current {
color: #111 !important;
}
body.page-item .product-buy-card .prodbox_preis #price,
body.page-item .product-buy-card .prodbox_preis #price_orig,
body.page-item .product-buy-card .prodbox_preis .price-currency {
color: inherit !important;
font: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
}
body.page-item .product-buy-card .prodbox_preis .price-currency {
display: inline !important;
margin-left: 6px !important;
}
body.page-item .product-buy-card .prodbox_preis .price-badge {
display: inline-block !important;
flex: 0 0 auto !important;
width: 49px !important;
height: auto !important;
margin: 0 0 0 0 !important;
padding: 0 !important;
border: 0 !important;
vertical-align: baseline !important;
transform: translateY(2px) !important;
}
body.page-item .product-buy-card .prodbox_preis .js-total-price,
body.page-item .product-buy-card .js-total-price {
display: none !important;
}
body.page-item .product-buy-card .product-price-note {
display: block !important;
margin: 4px 0 0 0 !important;
padding: 0 !important;
text-align: right !important;
white-space: nowrap !important;
font-size: 13px !important;
line-height: 1.25 !important;
}
@media (max-width: 760px) {
body.page-item .product-buy-card .product-buy-row {
grid-template-columns: 112px minmax(0, 1fr) !important;
column-gap: clamp(20px, 5vw, 36px) !important;
row-gap: 18px !important;
}
body.page-item .product-buy-card .product-price-box {
width: 100% !important;
justify-self: stretch !important;
text-align: right !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-wrapper {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-rows: auto auto !important;
grid-template-areas:
"old badge"
"current badge" !important;
column-gap: 8px !important;
row-gap: 2px !important;
align-items: center !important;
justify-items: end !important;
width: 100% !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-old,
body.page-item .product-buy-card .prodbox_preis.strike-price #price_orig_container {
grid-area: old !important;
justify-self: end !important;
align-self: end !important;
font-size: 24px !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-current {
grid-area: current !important;
justify-self: end !important;
align-self: start !important;
font-size: 30px !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-badge {
grid-area: badge !important;
justify-self: end !important;
align-self: center !important;
width: 45px !important;
transform: none !important;
}
body.page-item .product-buy-card .prodbox_preis.normal-price .price-current {
font-size: 30px !important;
}
body.page-item .product-buy-card .product-price-note {
white-space: normal !important;
font-size: 13px !important;
line-height: 1.18 !important;
margin-top: 3px !important;
}
body.page-item .product-buy-card .product-qty-group .product-qty-note {
width: max-content !important;
max-width: calc(100vw - 28px) !important;
margin: 8px 0 0 0 !important;
font-size: 14px !important;
line-height: 1.35 !important;
white-space: nowrap !important;
}
}
@media (max-width: 390px) {
body.page-item .product-buy-card .product-buy-row {
column-gap: 18px !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-old,
body.page-item .product-buy-card .prodbox_preis.strike-price #price_orig_container {
font-size: 22px !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-current,
body.page-item .product-buy-card .prodbox_preis.normal-price .price-current {
font-size: 28px !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-badge {
width: 42px !important;
}
}
/* =========================================
SHOW ITEM DESKTOP PRICE ALIGNMENT FIX
Desktop zuerst: Strike-Strich dünn, Preisblock an Mengenbox ausrichten,
Mengenhinweis auf Beschreibungstext-Größe.
========================================= */
@media (min-width: 761px) {
body.page-item .product-buy-card .product-price-box {
align-self: start !important;
padding-top: 28px !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-wrapper {
align-items: center !important;
gap: 14px !important;
}
body.page-item .product-buy-card .prodbox_preis .price-old,
body.page-item .product-buy-card .prodbox_preis #price_orig_container {
position: relative !important;
text-decoration: none !important;
font-size: 24px !important;
line-height: 1 !important;
}
body.page-item .product-buy-card .prodbox_preis .price-old::after,
body.page-item .product-buy-card .prodbox_preis #price_orig_container::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 50% !important;
height: 1px !important;
background: currentColor !important;
transform: translateY(-50%) !important;
pointer-events: none !important;
}
body.page-item .product-buy-card .prodbox_preis .price-current {
font-size: 30px !important;
line-height: 1 !important;
}
body.page-item .product-buy-card .prodbox_preis .price-badge {
width: 43px !important;
transform: none !important;
align-self: center !important;
}
body.page-item .product-buy-card .product-price-note {
margin-top: 3px !important;
font-size: 12px !important;
line-height: 1.2 !important;
}
body.page-item .product-buy-card .product-qty-group .product-qty-note {
margin: 9px 0 0 0 !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 300 !important;
color: #777 !important;
}
}
/* =========================================
SHOW ITEM DESKTOP QTY NOTE SHARPENING
Ziel:
- Mengenhinweis direkt unter der Mengenbox
- kein großer Leerraum zwischen Menge und Hinweis
- Preis bleibt rechts zur Mengenzeile ausgerichtet
========================================= */
@media (min-width: 761px) {
body.page-item .product-buy-card .product-buy-row {
display: grid !important;
grid-template-columns: 118px minmax(0, 1fr) !important;
column-gap: clamp(56px, 12vw, 130px) !important;
row-gap: 0 !important;
align-items: start !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-qty-group {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
grid-column: 1 !important;
grid-row: 1 !important;
width: 118px !important;
min-width: 118px !important;
max-width: 118px !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-qty-group > h3 {
margin: 0 0 8px 0 !important;
}
body.page-item .product-buy-card .product-qty-group .qty-field {
flex: 0 0 auto !important;
margin: 0 !important;
}
body.page-item .product-buy-card .product-qty-group > .product-qty-note,
body.page-item .product-buy-card .product-qty-note {
position: static !important;
display: block !important;
grid-column: auto !important;
grid-row: auto !important;
align-self: flex-start !important;
justify-self: start !important;
width: max-content !important;
max-width: 280px !important;
height: auto !important;
min-height: 0 !important;
margin: 7px 0 0 0 !important;
padding: 0 !important;
transform: none !important;
float: none !important;
clear: none !important;
color: #777 !important;
font-family: inherit !important;
font-size: 13px !important;
line-height: 1.25 !important;
font-weight: 300 !important;
text-align: left !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .product-price-box {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: start !important;
justify-self: end !important;
padding-top: 28px !important;
margin: 0 !important;
}
}
/* =========================================
SHOW ITEM DESKTOP BUY ROW FINAL GRID
Grundlage: gerenderter DOM-Block vom 17.06.
- links: Menge + Hinweis direkt darunter
- rechts: Preisblock auf Hoehe der Mengenbox
- kein Spacer-Loch vor Warenkorb
========================================= */
@media (min-width: 761px) {
body.page-item .product-buy-card .product-buy-row {
display: grid !important;
grid-template-columns: 132px minmax(0, 1fr) !important;
column-gap: 56px !important;
row-gap: 0 !important;
align-items: start !important;
width: 100% !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-qty-group {
grid-column: 1 !important;
grid-row: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
width: 132px !important;
min-width: 132px !important;
max-width: 132px !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-qty-group > h3 {
margin: 0 0 8px 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-qty-group .qty-field {
display: flex !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-qty-group > .product-qty-note {
position: static !important;
display: block !important;
order: 3 !important;
width: max-content !important;
max-width: 230px !important;
margin: 8px 0 0 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
transform: none !important;
color: #777 !important;
font-family: inherit !important;
font-size: 12px !important;
line-height: 1.25 !important;
font-weight: 300 !important;
text-align: left !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .product-qty-group > .product-qty-note br {
display: none !important;
}
body.page-item .product-buy-card .product-price-box {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: start !important;
justify-self: start !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 28px 0 0 0 !important;
text-align: left !important;
}
body.page-item .product-buy-card .product-price-box .prodbox_preis {
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
line-height: 1 !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-wrapper {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 13px !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .prodbox_preis .price-old,
body.page-item .product-buy-card .prodbox_preis #price_orig_container {
position: relative !important;
text-decoration: none !important;
}
body.page-item .product-buy-card .prodbox_preis .price-old::after,
body.page-item .product-buy-card .prodbox_preis #price_orig_container::after {
height: 1px !important;
}
body.page-item .product-buy-card .product-price-note {
margin: 3px 0 0 0 !important;
padding: 0 !important;
text-align: left !important;
font-size: 11px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .spacer-20 {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .addtocart {
margin-top: 14px !important;
}
}
/* =========================================
SHOW ITEM DESKTOP PRICE POLISH FINAL
17.06: Feinschliff fuer Strike- und Normalpreis
- Preisblock minimal tiefer und mittig zur Mengenbox
- SALE-Badge kompakter / weniger flach
- Normalpreis bekommt dieselbe stabile Desktop-Ausrichtung
========================================= */
@media (min-width: 761px) {
body.page-item .product-buy-card .product-buy-row.normal-price,
body.page-item .product-buy-card .product-buy-row.strike-price,
body.page-item .product-buy-card .product-buy-row {
display: grid !important;
grid-template-columns: 132px minmax(0, 1fr) !important;
column-gap: 56px !important;
align-items: start !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-price-box {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: start !important;
justify-self: start !important;
padding-top: 34px !important;
margin: 0 !important;
text-align: left !important;
}
body.page-item .product-buy-card .prodbox_preis.normal-price .price-wrapper,
body.page-item .product-buy-card .prodbox_preis.strike-price .price-wrapper {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .prodbox_preis.normal-price .price-wrapper {
gap: 0 !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-wrapper {
gap: 11px !important;
}
body.page-item .product-buy-card .prodbox_preis.normal-price .price-current,
body.page-item .product-buy-card .prodbox_preis.strike-price .price-current {
display: inline-flex !important;
align-items: center !important;
line-height: 1 !important;
}
body.page-item .product-buy-card .prodbox_preis.normal-price .price-current {
color: #111 !important;
font-size: 30px !important;
font-weight: 300 !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-current {
color: #e30613 !important;
font-size: 30px !important;
font-weight: 300 !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-old,
body.page-item .product-buy-card .prodbox_preis.strike-price #price_orig_container {
font-size: 25px !important;
line-height: 1 !important;
font-weight: 300 !important;
color: #777 !important;
text-decoration: none !important;
position: relative !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-old::after,
body.page-item .product-buy-card .prodbox_preis.strike-price #price_orig_container::after {
content: "" !important;
position: absolute !important;
left: -1px !important;
right: -1px !important;
top: 52% !important;
height: 1px !important;
background: currentColor !important;
transform: translateY(-50%) !important;
pointer-events: none !important;
}
body.page-item .product-buy-card .prodbox_preis.strike-price .price-badge,
body.page-item .product-buy-card .price-badge {
display: inline-block !important;
width: 43px !important;
height: 25px !important;
object-fit: fill !important;
margin: 0 0 0 1px !important;
padding: 0 !important;
vertical-align: middle !important;
transform: none !important;
}
body.page-item .product-buy-card .product-price-note {
margin: 4px 0 0 0 !important;
padding: 0 !important;
text-align: left !important;
font-size: 11px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .product-qty-group > .product-qty-note {
margin-top: 7px !important;
font-size: 11px !important;
line-height: 1.25 !important;
color: #777 !important;
}
body.page-item .product-buy-card .addtocart {
margin-top: 12px !important;
}
}
/* =========================================
SHOW ITEM NORMAL PRICE DESKTOP FINAL
17.06: eigener Zustand fuer Produkte ohne Angebot
- Normalpreis nicht im alten Strike-Slot stehen lassen
- aktueller Preis bekommt eine eigene ruhige Desktop-Position
========================================= */
@media (min-width: 761px) {
body.page-item .product-buy-card .product-buy-row.normal-price {
grid-template-columns: 132px minmax(0, 1fr) !important;
column-gap: 56px !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .product-price-box {
padding-top: 33px !important;
padding-left: 88px !important;
box-sizing: border-box !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .prodbox_preis,
body.page-item .product-buy-card .product-buy-row.normal-price .price-wrapper {
text-align: left !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .product-price-note {
margin-top: 4px !important;
max-width: 170px !important;
white-space: nowrap !important;
}
}
/* =========================================
SHOW ITEM NORMAL PRICE DESKTOP CORRECTION
17.06: Normalpreis separat und ohne Strike-Versatz
========================================= */
@media (min-width: 761px) {
body.page-item .product-buy-card .product-buy-row.normal-price {
display: grid !important;
grid-template-columns: 132px minmax(0, 1fr) !important;
column-gap: 42px !important;
align-items: start !important;
margin: 0 0 12px 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .product-qty-group {
grid-column: 1 !important;
grid-row: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .product-price-box {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: start !important;
justify-self: start !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 25px 0 0 0 !important;
transform: none !important;
text-align: left !important;
box-sizing: border-box !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .prodbox_preis {
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
text-align: left !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .price-wrapper {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
white-space: nowrap !important;
text-align: left !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .price-current {
display: inline-flex !important;
align-items: center !important;
color: #111 !important;
font-size: 30px !important;
line-height: 1 !important;
font-weight: 300 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .product-price-note {
display: block !important;
margin: 4px 0 0 0 !important;
padding: 0 !important;
max-width: none !important;
font-size: 11px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
text-align: left !important;
}
}
/* =========================================
SHOW ITEM NORMAL PRICE DESKTOP TUNING
17.06: Normalpreis weiter nach links + mehr Luft vor Warenkorb
========================================= */
@media (min-width: 761px) {
body.page-item .product-buy-card .product-buy-row.normal-price {
grid-template-columns: 132px minmax(0, 1fr) !important;
column-gap: 24px !important;
margin-bottom: 22px !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .product-price-box {
padding-top: 25px !important;
margin-left: 0 !important;
transform: none !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .product-price-note {
margin-top: 6px !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price + script + .spacer-20,
body.page-item .product-buy-card .product-buy-row.normal-price ~ .spacer-20 {
display: block !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price ~ .addtocart {
margin-top: 20px !important;
}
}
/* =========================================
SHOW ITEM STRIKE PRICE DESKTOP TUNING
17.06: Strike-Preis an Normalpreis-Feinschliff angleichen
- Preisblock leicht hoeher, damit er nicht unter der Mengenbox haengt
- mehr Luft vor Warenkorb wie beim Normalpreis
- SALE-Badge kompakter und naeher am Preis
========================================= */
@media (min-width: 761px) {
body.page-item .product-buy-card .product-buy-row.strike-price {
margin-bottom: 22px !important;
}
body.page-item .product-buy-card .product-buy-row.strike-price .product-price-box {
padding-top: 28px !important;
margin-left: 0 !important;
transform: none !important;
}
body.page-item .product-buy-card .product-buy-row.strike-price .prodbox_preis.strike-price .price-wrapper {
gap: 9px !important;
}
body.page-item .product-buy-card .product-buy-row.strike-price .prodbox_preis.strike-price .price-badge,
body.page-item .product-buy-card .product-buy-row.strike-price .price-badge {
width: 38px !important;
height: 24px !important;
margin-left: 0 !important;
object-fit: fill !important;
}
body.page-item .product-buy-card .product-buy-row.strike-price .product-price-note {
margin-top: 5px !important;
}
body.page-item .product-buy-card .product-buy-row.strike-price ~ .addtocart {
margin-top: 20px !important;
}
}
/* =========================================
SHOW ITEM STRIKE PRICE CLOSER TO QTY
17.06: Strike-Preis im Desktop naeher an die Menge ziehen
========================================= */
@media (min-width: 761px) {
body.page-item .product-buy-card .product-buy-row.strike-price {
grid-template-columns: 132px minmax(0, 1fr) !important;
column-gap: 24px !important;
margin-bottom: 22px !important;
}
body.page-item .product-buy-card .product-buy-row.strike-price .product-price-box {
justify-self: start !important;
padding-top: 26px !important;
margin-left: 0 !important;
transform: none !important;
text-align: left !important;
}
body.page-item .product-buy-card .product-buy-row.strike-price .prodbox_preis.strike-price .price-wrapper {
justify-content: flex-start !important;
gap: 8px !important;
}
body.page-item .product-buy-card .product-buy-row.strike-price .product-price-note {
text-align: left !important;
margin-top: 5px !important;
}
}
/* =========================================
SHOW ITEM GALLERY META NO THUMB DIVIDER
17.06: Desktop-Trenner ausblenden, wenn keine Zusatzbilder/Actions vorhanden sind
========================================= */
@media (min-width: 981px) {
/* Wenn die Meta-Zeile das einzige sichtbare Element in der Action-Zeile ist,
braucht sie keinen linken Trenner. */
body.page-item .product-gallery-actions > .product-gallery-info:only-child,
body.page-item .product-gallery-actions > .product-detail-meta:only-child,
body.page-item .product-gallery-actions:not(:has(> a.product-extra-image-link, > a.product-material-link, > a.product-video-link, > a.pswp-item)) > .product-gallery-info,
body.page-item .product-gallery-actions:not(:has(> a.product-extra-image-link, > a.product-material-link, > a.product-video-link, > a.pswp-item)) > .product-detail-meta {
border-left: 0 !important;
padding-left: 0 !important;
margin-left: auto !important;
}
}
/* =========================================
SHOW ITEM DESKTOP NO EXTRA MEDIA DESCRIPTION UP
17.06: Wenn keine Zusatzbilder/Actions vorhanden sind, Beschreibung naeher an die Meta-Zeile ziehen
========================================= */
@media (min-width: 981px) {
body.page-item .product-layout.product-layout-no-extra-media .product-description-under-gallery,
body.page-item .product-layout.product-layout-no-extra-media .product-description-card,
body.page-item .product-layout.product-layout-no-extra-media .product-description-section {
margin-top: 10px !important;
}
body.page-item .product-layout.product-layout-no-extra-media .product-description-title {
margin-top: 0 !important;
}
}
/* =========================================
SHOW ITEM BUYBOX OPTION STATES FINAL
17.06: PHP liefert jetzt stabile Klassen:
.has-options / .no-options plus .normal-price / .strike-price
Damit keine Ableitung mehr ueber zufaellige DOM-Abstaende.
========================================= */
@media (min-width: 761px) {
body.page-item .product-buy-card.has-options,
body.page-item .product-buy-card.no-options {
--rs-qty-col: 132px;
--rs-price-gap: 24px;
--rs-price-top-normal: 25px;
--rs-price-top-strike: 24px;
--rs-row-bottom: 22px;
}
body.page-item .product-buy-card.no-options {
/* Ohne Auswahlfelder startet die Kaufzeile direkt oben.
Etwas Luft gibt dem rechten Block dieselbe Ruhe wie bei Varianten-Artikeln. */
padding-top: 3px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row,
body.page-item .product-buy-card.no-options .product-buy-row,
body.page-item .product-buy-card .product-buy-row.has-options,
body.page-item .product-buy-card .product-buy-row.no-options {
display: grid !important;
grid-template-columns: var(--rs-qty-col) minmax(0, 1fr) !important;
column-gap: var(--rs-price-gap) !important;
row-gap: 0 !important;
align-items: start !important;
width: 100% !important;
margin: 0 0 var(--rs-row-bottom) 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-item .product-buy-card.has-options .product-qty-group,
body.page-item .product-buy-card.no-options .product-qty-group {
grid-column: 1 !important;
grid-row: 1 !important;
width: var(--rs-qty-col) !important;
min-width: var(--rs-qty-col) !important;
max-width: var(--rs-qty-col) !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card.has-options .product-price-box,
body.page-item .product-buy-card.no-options .product-price-box {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: start !important;
justify-self: start !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding-left: 0 !important;
text-align: left !important;
transform: none !important;
box-sizing: border-box !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-box,
body.page-item .product-buy-card.no-options .product-buy-row.normal-price .product-price-box {
padding-top: var(--rs-price-top-normal) !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-price-box,
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .product-price-box {
padding-top: var(--rs-price-top-strike) !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price,
body.page-item .product-buy-card.no-options .product-buy-row.normal-price {
--rs-price-gap: 24px;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price,
body.page-item .product-buy-card.no-options .product-buy-row.strike-price {
--rs-price-gap: 24px;
}
body.page-item .product-buy-card.no-options .product-buy-row.normal-price {
--rs-price-top-normal: 24px;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price {
--rs-price-top-strike: 23px;
}
body.page-item .product-buy-card .product-qty-group > .product-qty-note {
display: block !important;
width: max-content !important;
max-width: 280px !important;
margin: 6px 0 0 0 !important;
padding: 0 !important;
font-size: 11px !important;
line-height: 1.25 !important;
font-weight: 300 !important;
color: #777 !important;
text-align: left !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .product-qty-group > .product-qty-note br {
display: none !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .price-current,
body.page-item .product-buy-card .product-buy-row.strike-price .price-current {
font-size: 30px !important;
line-height: 1 !important;
font-weight: 300 !important;
}
body.page-item .product-buy-card .product-buy-row.strike-price .price-current {
color: #e30613 !important;
}
body.page-item .product-buy-card .product-buy-row.normal-price .price-current {
color: #111 !important;
}
body.page-item .product-buy-card .product-buy-row.strike-price .price-wrapper {
gap: 8px !important;
}
body.page-item .product-buy-card .product-buy-row.strike-price .price-badge {
width: 38px !important;
height: 24px !important;
margin-left: 0 !important;
object-fit: fill !important;
}
body.page-item .product-buy-card .product-price-note {
margin: 5px 0 0 0 !important;
padding: 0 !important;
font-size: 11px !important;
line-height: 1.2 !important;
text-align: left !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card .product-buy-row ~ .spacer-20 {
display: block !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card .product-buy-row ~ .addtocart {
margin-top: 20px !important;
}
}
/* =========================================
SHOW ITEM DESKTOP BUYBOX NO OPTIONS ALIGNMENT
17.06: Produkte ohne Auswahlfelder duerfen rechts nicht oben an der Bildkante starten.
PHP liefert jetzt option-count-0, damit der fehlende Variantenblock sauber ausgeglichen wird.
========================================= */
@media (min-width: 1024px) {
body.page-item .product-buy-card.no-options.option-count-0 {
/* Feinabgleich: Menge nicht über die Bildkante ziehen.
Kein Varianten-Platzhalter, nur optische Bildkanten-Buendigkeit. */
padding-top: 15px !important;
}
body.page-item .product-buy-card.no-options.option-count-0 .product-buy-row {
margin-bottom: 24px !important;
}
}
/* =========================================
SHOW ITEM PRODUCT SUBTITLE DOWN V44
Nur:
- p.subcategory-page-subtitle.product-page-subtitle 9px tiefer
========================================= */
@media (min-width: 1024px) {
body.page-item .subcategory-page-header .subcategory-page-subtitle.product-page-subtitle,
body.page-item .subcategory-page-header > p.subcategory-page-subtitle.product-page-subtitle,
body.page-item p.subcategory-page-subtitle.product-page-subtitle {
transform: translateY(9px) !important;
position: relative !important;
}
}
/* =========================================
SHOW ITEM FITMENT SOFT BREAK CSS V50
Macht vorhandene als echten Umbruch sichtbar.
Fix für: "... 2024KTM Enduro ..."
========================================= */
body.page-item .product-tags-section .description-text .soft-tag-break {
display: block !important;
width: 100% !important;
height: 15px !important;
line-height: 15px !important;
clear: both !important;
}
/* =========================================
SHOW ITEM DESKTOP ALERT CONTACT STYLE V51
Vorsichtige Übernahme des eingefrorenen Alert-Designs:
normale Produktseiten-Alerts mit rechter Kante 29px nach links.
Buybox/Galerie/Produktlayout bleiben unberührt.
========================================= */
@media (min-width: 1024px) {
body.page-item main#page-content-wrapper.product-item-page .alert.alert-danger,
body.page-item main#page-content-wrapper.product-item-page .alert.alert-success {
width: calc(100% - 29px) !important;
max-width: calc(100% - 29px) !important;
margin: 34px 29px 52px 0 !important;
padding: 20px 22px 20px 22px !important;
border: 1px solid #dcdcdc !important;
border-left: 4px solid #e30613 !important;
background: #fff !important;
box-sizing: border-box !important;
color: #111 !important;
min-height: 0 !important;
}
body.page-item main#page-content-wrapper.product-item-page .alert.alert-danger p,
body.page-item main#page-content-wrapper.product-item-page .alert.alert-success p {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
color: #e30613 !important;
font-size: 14px !important;
line-height: 1.45 !important;
}
body.page-item main#page-content-wrapper.product-item-page .alert.alert-danger > div,
body.page-item main#page-content-wrapper.product-item-page .alert.alert-success > div {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
color: #e30613 !important;
font-size: 14px !important;
line-height: 1.45 !important;
}
}
/* =========================================
SHOW ITEM MOBILE PRICE STATES V1
18.06: Fall 1 Mobil – has-options + strike-price
Ziel:
- Preisblock nicht ueber volle rechte Spalte ziehen
- Alter Preis / aktueller Preis / SALE als kompakte Einheit
- Mengenhinweis bleibt direkt unter der Menge
- Desktop bleibt unberuehrt
========================================= */
@media (max-width: 760px) {
body.page-item .product-buy-card.has-options .product-buy-row.strike-price {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
column-gap: clamp(16px, 6vw, 30px) !important;
row-gap: 0 !important;
align-items: start !important;
width: 100% !important;
margin: 0 0 28px 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-qty-group {
grid-column: 1 !important;
grid-row: 1 !important;
width: 116px !important;
min-width: 116px !important;
max-width: 116px !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-qty-group > h3 {
margin: 0 0 8px 0 !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-price-box {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: start !important;
justify-self: end !important;
width: max-content !important;
min-width: 0 !important;
max-width: calc(100vw - 188px) !important;
margin: 0 !important;
padding: 42px 0 0 0 !important;
text-align: right !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .prodbox_preis.strike-price {
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
line-height: 1 !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .prodbox_preis.strike-price .price-wrapper {
display: grid !important;
grid-template-columns: auto auto !important;
grid-template-rows: auto auto !important;
grid-template-areas:
"old badge"
"current badge" !important;
column-gap: 8px !important;
row-gap: 1px !important;
align-items: center !important;
justify-content: end !important;
justify-items: end !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .price-old,
body.page-item .product-buy-card.has-options .product-buy-row.strike-price #price_orig_container {
grid-area: old !important;
justify-self: end !important;
align-self: end !important;
font-size: 24px !important;
line-height: 1 !important;
font-weight: 300 !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .price-current {
grid-area: current !important;
justify-self: end !important;
align-self: start !important;
font-size: 31px !important;
line-height: 1 !important;
font-weight: 300 !important;
color: #e30613 !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .price-badge {
grid-area: badge !important;
justify-self: end !important;
align-self: center !important;
width: 44px !important;
height: 26px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: fill !important;
transform: none !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-price-note {
display: block !important;
width: max-content !important;
max-width: 100% !important;
margin: 6px 0 0 auto !important;
padding: 0 !important;
font-size: 12px !important;
line-height: 1.2 !important;
text-align: right !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-qty-note {
display: block !important;
width: max-content !important;
max-width: calc(100vw - 28px) !important;
margin: 9px 0 0 0 !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 1.3 !important;
font-weight: 300 !important;
color: #777 !important;
text-align: left !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-qty-note br {
display: none !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price ~ .addtocart {
margin-top: 22px !important;
}
}
@media (max-width: 390px) {
body.page-item .product-buy-card.has-options .product-buy-row.strike-price {
grid-template-columns: 108px minmax(0, 1fr) !important;
column-gap: 14px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-qty-group {
width: 108px !important;
min-width: 108px !important;
max-width: 108px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-price-box {
max-width: calc(100vw - 164px) !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .price-old,
body.page-item .product-buy-card.has-options .product-buy-row.strike-price #price_orig_container {
font-size: 22px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .price-current {
font-size: 29px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .price-badge {
width: 40px !important;
height: 24px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-price-note {
font-size: 11px !important;
}
}
/* =========================================
18.06 MOBILE NORMAL-PRICE FINAL
Fall: has-options + normal-price
- Variantenstart nur bei Normalpreis-Produkten höher
- Preis bleibt neben Menge, aber nicht rechts gestreckt
- Preisbox bekommt nur Content-Breite und startet näher an der Menge
Strike-Mobile-Zustand bleibt unberührt.
========================================= */
@media (max-width: 760px) {
@supports selector(:has(*)) {
body.page-item .product-buy-card.has-options:has(.product-buy-row.normal-price) > .form-group:first-of-type {
margin-top: -10px !important;
}
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price {
display: grid !important;
grid-template-columns: 232px auto !important;
column-gap: 16px !important;
row-gap: 0 !important;
align-items: start !important;
overflow: visible !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-qty-group {
grid-column: 1 !important;
width: 232px !important;
min-width: 232px !important;
max-width: 232px !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-box {
grid-column: 2 !important;
width: max-content !important;
max-width: calc(100vw - 306px) !important;
min-width: 0 !important;
margin: 39px 0 0 0 !important;
padding: 0 !important;
justify-self: start !important;
align-self: start !important;
text-align: left !important;
transform: none !important;
overflow: visible !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .prodbox_preis.normal-price,
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .price-wrapper {
display: inline-flex !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
justify-content: flex-start !important;
align-items: baseline !important;
text-align: left !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .price-current {
display: inline-flex !important;
color: #111 !important;
font-size: 30px !important;
line-height: 1 !important;
font-weight: 300 !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-note {
display: block !important;
width: max-content !important;
max-width: calc(100vw - 306px) !important;
margin: 8px 0 0 0 !important;
padding: 0 !important;
text-align: left !important;
font-size: 13px !important;
line-height: 1.25 !important;
white-space: nowrap !important;
overflow: visible !important;
}
}
@media (max-width: 390px) {
body.page-item .product-buy-card.has-options .product-buy-row.normal-price {
grid-template-columns: 232px auto !important;
column-gap: 10px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-box,
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-note {
max-width: calc(100vw - 288px) !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .price-current {
font-size: 28px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-note {
font-size: 12px !important;
}
}
/* =========================================
18.06 MOBILE NORMAL PRICE FEINABGLEICH
- Preis ca. 200px weiter links
- Preis ca. 5px höher
- nur has-options + normal-price
========================================= */
@media (max-width: 760px) {
body.page-item .product-buy-card.has-options .product-buy-row.normal-price {
grid-template-columns: 232px auto !important;
column-gap: 24px !important;
justify-content: start !important;
align-items: start !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-box {
grid-column: 2 !important;
justify-self: start !important;
align-self: start !important;
width: max-content !important;
max-width: calc(100vw - 320px) !important;
margin-top: 38px !important;
margin-left: 0 !important;
padding-left: 0 !important;
text-align: left !important;
transform: none !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .prodbox_preis.normal-price,
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .price-wrapper,
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .price-current {
justify-content: flex-start !important;
justify-items: start !important;
text-align: left !important;
width: max-content !important;
max-width: 100% !important;
}
}
@media (max-width: 390px) {
body.page-item .product-buy-card.has-options .product-buy-row.normal-price {
column-gap: 16px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-box {
margin-top: 38px !important;
max-width: calc(100vw - 300px) !important;
}
}
/* =========================================
18.06 MOBILE NORMAL PRICE FINAL-STABIL
has-options + normal-price:
Side-by-side wird verworfen, weil Preis/Steuerzeile auf Mobile
gegen die feste Mengenbreite läuft. Preis steht stabil unter Menge.
========================================= */
@media (max-width: 760px) {
body.page-item .product-buy-card.has-options .product-buy-row.normal-price {
display: block !important;
grid-template-columns: none !important;
column-gap: 0 !important;
row-gap: 0 !important;
align-items: initial !important;
justify-content: initial !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-qty-group {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
grid-column: auto !important;
float: none !important;
clear: both !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-box {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 18px 0 0 0 !important;
padding: 0 !important;
grid-column: auto !important;
justify-self: auto !important;
align-self: auto !important;
float: none !important;
clear: both !important;
text-align: left !important;
transform: none !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .prodbox_preis.normal-price,
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .price-wrapper,
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .price-current {
display: inline-flex !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
justify-content: flex-start !important;
justify-items: start !important;
text-align: left !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .price-current {
font-size: 30px !important;
line-height: 1 !important;
color: #111 !important;
font-weight: 300 !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-note {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 7px 0 0 0 !important;
padding: 0 !important;
text-align: left !important;
font-size: 13px !important;
line-height: 1.25 !important;
white-space: nowrap !important;
overflow: visible !important;
}
}
@media (max-width: 390px) {
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .price-current {
font-size: 28px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-note {
font-size: 12px !important;
}
}
/* =========================================
18.06 MOBILE NORMAL PRICE SPACING
Mehr Abstand zwischen Menge und Preis
========================================= */
@media (max-width: 760px) {
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-box {
margin-top: 18px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-note {
margin-top: 8px !important;
}
}
/* =========================================
18.06 MOBILE NORMAL PRICE SPACING +5PX
Preis weitere 5px tiefer
========================================= */
@media (max-width: 760px) {
body.page-item .product-buy-card.has-options .product-buy-row.normal-price .product-price-box {
margin-top: 23px !important;
}
}
/* =========================================
18.06 MOBILE STRIKE RESTORE
has-options + strike-price bleibt unter der Menge.
Normal-price bleibt unberührt.
========================================= */
@media (max-width: 760px) {
body.page-item .product-buy-card.has-options .product-buy-row.strike-price {
display: block !important;
grid-template-columns: none !important;
column-gap: 0 !important;
row-gap: 0 !important;
align-items: stretch !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-qty-group {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: both !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-price-box {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 20px 0 0 0 !important;
padding: 0 !important;
float: none !important;
clear: both !important;
text-align: left !important;
justify-self: auto !important;
align-self: auto !important;
transform: none !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .prodbox_preis.strike-price {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .prodbox_preis.strike-price .price-wrapper {
display: inline-flex !important;
flex-direction: row !important;
align-items: baseline !important;
justify-content: flex-start !important;
justify-items: start !important;
gap: 10px !important;
width: auto !important;
max-width: 100% !important;
white-space: nowrap !important;
text-align: left !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .price-old,
body.page-item .product-buy-card.has-options .product-buy-row.strike-price #price_orig_container {
display: inline-flex !important;
align-items: baseline !important;
color: #777 !important;
font-size: 25px !important;
line-height: 1 !important;
font-weight: 300 !important;
white-space: nowrap !important;
text-decoration: line-through !important;
text-decoration-thickness: 1px !important;
text-decoration-color: #777 !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .price-current {
display: inline-flex !important;
align-items: baseline !important;
color: #e30613 !important;
font-size: 32px !important;
line-height: 1 !important;
font-weight: 300 !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .price-badge {
display: inline-block !important;
width: 39px !important;
height: 23px !important;
object-fit: fill !important;
margin: 0 0 0 2px !important;
padding: 0 !important;
transform: translateY(2px) !important;
flex: 0 0 auto !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .product-price-note {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 7px 0 0 0 !important;
padding: 0 !important;
text-align: left !important;
font-size: 13px !important;
line-height: 1.25 !important;
white-space: nowrap !important;
}
}
@media (max-width: 390px) {
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .prodbox_preis.strike-price .price-wrapper {
gap: 8px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .price-old,
body.page-item .product-buy-card.has-options .product-buy-row.strike-price #price_orig_container {
font-size: 23px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .price-current {
font-size: 30px !important;
}
body.page-item .product-buy-card.has-options .product-buy-row.strike-price .price-badge {
width: 37px !important;
height: 22px !important;
}
}
/* =========================================
18.06 MOBILE GALLERY TARGET FIX
Nur Dekor + Zusatzbild: Meta-Zeile unter Pictos.
Normale Produkte bleiben in der kompakten Zeile.
========================================= */
@media (max-width: 760px) {
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 100% !important;
gap: 8px !important;
margin: 12px 0 20px 0 !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
transform: none !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra a.product-extra-image-link,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra a.product-material-link,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra a.pswp-item:not(.product-video-link) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 98px !important;
width: 98px !important;
height: 76px !important;
margin: 0 !important;
padding: 4px !important;
border: 1px solid #dedede !important;
background: #fff !important;
box-shadow: none !important;
outline: none !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra a.product-extra-image-link img,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra a.product-material-link img,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra a.pswp-item:not(.product-video-link) img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 88px !important;
max-height: 66px !important;
object-fit: contain !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra a.product-video-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 74px !important;
width: 74px !important;
height: 76px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
box-sizing: border-box !important;
overflow: visible !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra a.product-video-link img {
display: block !important;
width: 58px !important;
height: 58px !important;
max-width: 58px !important;
max-height: 58px !important;
object-fit: contain !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info {
flex: 0 0 100% !important;
order: 99 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 8px 0 0 0 !important;
padding: 0 !important;
border-left: 0 !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info p {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 7px !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
font-size: 17px !important;
line-height: 1.25 !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .meta-divider {
flex: 0 0 4px !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .ampel-link {
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .product-status-light {
display: inline-block !important;
width: 58px !important;
min-width: 58px !important;
height: 14px !important;
max-height: 14px !important;
margin: 0 4px !important;
border: 0 !important;
object-fit: fill !important;
transform: translateY(1px) !important;
vertical-align: -3px !important;
}
}
/* =========================================
18.06 MOBILE GALLERY META FINETUNING
Dekor + Zusatzbild:
- Meta-Zeile näher an die Zusatzbilder
- Start links bündig mit Zusatzbild-Zeile
- Ampel näher an "Lieferzeit" und wieder groß
========================================= */
@media (max-width: 760px) {
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra {
align-items: flex-start !important;
gap: 8px !important;
margin-top: 10px !important;
margin-bottom: 14px !important;
padding-left: 0 !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info {
flex-basis: 100% !important;
width: 100% !important;
margin-top: 2px !important;
padding-left: 0 !important;
transform: translateY(-3px) !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info p {
gap: 5px !important;
align-items: center !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .ampel-link {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
white-space: nowrap !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .product-status-light {
width: 62px !important;
min-width: 62px !important;
height: 15px !important;
max-height: 15px !important;
margin: 0 1px 0 2px !important;
transform: translateY(1px) !important;
}
}
/* =========================================
PRODUCT TAGS SECTION: harte
aus DB beruhigen
Greift mobil und Desktop, ohne HTML zu ändern.
========================================= */
body.page-item .product-tags-section {
line-height: 1.45 !important;
}
body.page-item .product-tags-section br {
display: block !important;
content: "" !important;
margin: 0 !important;
line-height: 0 !important;
}
body.page-item .product-tags-section br + br {
margin-top: 0.45em !important;
}
@media (max-width: 760px) {
body.page-item .product-tags-section {
line-height: 1.42 !important;
}
body.page-item .product-tags-section br + br {
margin-top: 0.32em !important;
}
}
/* =========================================
18.06 PRODUCT TAGS FONT SIZE ALIGNMENT
product-tags-section exakt an product-security-section angleichen
========================================= */
body.page-item .product-tags-section,
body.page-item .product-tags-section p,
body.page-item .product-tags-section li,
body.page-item .product-tags-section span {
font-size: inherit !important;
line-height: inherit !important;
}
body.page-item .product-tags-section {
font-size: var(--product-security-font-size, 16px) !important;
line-height: var(--product-security-line-height, 1.45) !important;
}
body.page-item .product-security-section,
body.page-item .product-tags-section {
font-size: 16px !important;
line-height: 1.45 !important;
}
@media (max-width: 760px) {
body.page-item .product-security-section,
body.page-item .product-tags-section {
font-size: 16px !important;
line-height: 1.42 !important;
}
}
/* =========================================
19.06 MOBILE GALLERY META + TAGS FINETUNE
- Galerie-Meta nicht zentrieren
- Lieferzeit/Ampel enger
- Dekor-Extra-Meta etwas höher
- product-tags-section kleiner +
ruhiger
========================================= */
@media (max-width: 760px) {
/* Standardfall: 1 Zusatzbild + Meta bleibt eine Zeile, aber links statt mittig */
body.page-item .product-gallery-actions:not(.product-gallery-actions-dekor-extra) {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
margin: 12px 0 20px 0 !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-dekor-extra) .product-gallery-info {
flex: 0 1 auto !important;
width: auto !important;
max-width: calc(100% - 112px) !important;
min-width: 0 !important;
margin: 0 0 0 10px !important;
padding: 0 !important;
border-left: 0 !important;
align-self: center !important;
text-align: left !important;
overflow: visible !important;
transform: none !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-dekor-extra) .product-gallery-info p {
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 5px !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
white-space: nowrap !important;
font-size: 15px !important;
line-height: 1.25 !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-dekor-extra) .product-gallery-info .ampel-link {
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
white-space: nowrap !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-dekor-extra) .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions:not(.product-gallery-actions-dekor-extra) .product-gallery-info .product-status-light {
width: 56px !important;
min-width: 56px !important;
height: 13px !important;
max-height: 13px !important;
margin: 0 1px 0 2px !important;
object-fit: fill !important;
transform: translateY(1px) !important;
}
/* Dekor + Zusatzbild: Meta-Zeile unter den Pictos bleibt, aber enger und höher */
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info {
margin-top: -4px !important;
padding-left: 0 !important;
transform: none !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info p {
gap: 4px !important;
justify-content: flex-start !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .ampel-link {
gap: 2px !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .product-status-light {
width: 60px !important;
min-width: 60px !important;
height: 14px !important;
max-height: 14px !important;
margin: 0 1px 0 2px !important;
}
}
/* product-tags-section auf Security-Textgroesse beruhigen */
body.page-item .product-tags-section .description-text,
body.page-item .product-tags-section .description-text p,
body.page-item .product-tags-section .description-text span,
body.page-item .product-tags-section .description-text li {
font-size: 14px !important;
line-height: 1.42 !important;
font-weight: 300 !important;
}
body.page-item .product-tags-section .description-text br {
display: block !important;
content: "" !important;
line-height: 0 !important;
margin: 0 !important;
}
body.page-item .product-tags-section .description-text br + br {
margin-top: 0.16em !important;
}
@media (max-width: 760px) {
body.page-item .product-tags-section .description-text,
body.page-item .product-tags-section .description-text p,
body.page-item .product-tags-section .description-text span,
body.page-item .product-tags-section .description-text li {
font-size: 16px !important;
line-height: 1.38 !important;
}
body.page-item .product-tags-section .description-text br + br {
margin-top: 0.10em !important;
}
}
/* =========================================
19.06 FINAL: Gallery-Meta + Tags wirklich greifen
Grund: alte Mobile-Regeln setzten .product-gallery-info per margin-left:auto
und product-tags wurde tiefer ueber .description-text gross gehalten.
========================================= */
@media (max-width: 760px) {
/* Standard: ein Zusatzbild + Meta nicht mehr mittig/rechts, sondern direkt nach dem Thumbnail */
body.page-item .product-gallery-actions:has(.product-gallery-info):not(:has(.product-material-link)) {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
margin: 10px 0 18px 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-actions:has(.product-gallery-info):not(:has(.product-material-link)) .product-gallery-info {
display: block !important;
flex: 0 1 auto !important;
width: auto !important;
max-width: calc(100% - 74px) !important;
min-width: 0 !important;
margin: 0 0 0 6px !important;
padding: 0 !important;
border-left: 0 !important;
align-self: center !important;
text-align: left !important;
white-space: nowrap !important;
overflow: visible !important;
transform: none !important;
}
body.page-item .product-gallery-actions:has(.product-gallery-info):not(:has(.product-material-link)) .product-gallery-info p {
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 4px !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
white-space: nowrap !important;
font-size: 15px !important;
line-height: 1.25 !important;
}
/* Dekor mit Zusatz-/Material-/Video-Pictos: Meta bleibt unter den Pictos, aber enger und hoeher */
body.page-item .product-gallery-actions:has(.product-extra-image-link):has(.product-material-link) {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 8px !important;
margin: 10px 0 16px 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-actions:has(.product-extra-image-link):has(.product-material-link) .product-gallery-info {
order: 99 !important;
display: block !important;
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border-left: 0 !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
transform: translateY(-2px) !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-actions:has(.product-extra-image-link):has(.product-material-link) .product-gallery-info p {
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 4px !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
white-space: nowrap !important;
font-size: 16px !important;
line-height: 1.25 !important;
}
body.page-item .product-gallery-info .ampel-link {
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;
margin-left: -2px !important;
white-space: nowrap !important;
}
body.page-item .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-info .product-status-light {
width: 58px !important;
min-width: 58px !important;
height: 14px !important;
max-height: 14px !important;
margin: 0 0 0 0 !important;
object-fit: fill !important;
transform: translateY(1px) !important;
}
}
/* Tags: exakt kleiner ziehen; PHP normalisiert doppelte BR bereits auf einfaches BR */
body.page-item .product-tags-section .description-text,
body.page-item .product-tags-section .description-text * {
font-size: 14px !important;
line-height: 1.34 !important;
font-weight: 300 !important;
}
body.page-item .product-tags-section .description-text br {
display: block !important;
content: "" !important;
line-height: 0 !important;
margin: 0 !important;
}
@media (max-width: 760px) {
body.page-item .product-tags-section .description-text,
body.page-item .product-tags-section .description-text * {
font-size: 14px !important;
line-height: 1.32 !important;
font-weight: 300 !important;
}
}
/* =========================================
18.06 MOBILE GALLERY META + TAGS SOFT SPACE FINAL
- Artikelnummer/Lieferzeit-Zeile höher ziehen
- Tags: weicher Abstand statt hartem DB-
========================================= */
/* Galerie: Meta-Zeile wirklich dichter an die Thumbnail-Reihe */
@media (max-width: 760px) {
body.page-item .product-gallery-actions .product-gallery-info,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info {
margin-top: -7px !important;
transform: translateY(-7px) !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra {
margin-bottom: 6px !important;
}
body.page-item .product-gallery-actions .product-gallery-info p,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info p {
align-items: center !important;
}
body.page-item .product-gallery-actions .product-gallery-info .ampel-link,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .ampel-link {
gap: 1px !important;
}
body.page-item .product-gallery-actions .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions .product-gallery-info .product-status-light,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .product-status-light {
margin-left: 0 !important;
margin-right: 2px !important;
}
}
/* Tags: Schrift wie Security, aber mit weichem Absatzabstand */
body.page-item .product-tags-section,
body.page-item .product-tags-section .description-text,
body.page-item .product-tags-section .description-text p,
body.page-item .product-tags-section .description-text span,
body.page-item .product-tags-section .description-text li {
font-size: 13px !important;
line-height: 1.42 !important;
}
/* Ein einzelnes
bleibt fast neutral, zwei direkt hintereinander ergeben nur weichen Abstand */
body.page-item .product-tags-section .description-text br {
display: block !important;
content: "" !important;
margin: 0 !important;
line-height: 0.15 !important;
}
body.page-item .product-tags-section .description-text br + br {
margin-top: 0.28em !important;
}
@media (max-width: 760px) {
body.page-item .product-tags-section,
body.page-item .product-tags-section .description-text,
body.page-item .product-tags-section .description-text p,
body.page-item .product-tags-section .description-text span,
body.page-item .product-tags-section .description-text li {
font-size: 13px !important;
line-height: 1.38 !important;
}
body.page-item .product-tags-section .description-text br {
line-height: 0.12 !important;
}
body.page-item .product-tags-section .description-text br + br {
margin-top: 0.24em !important;
}
}
/* =========================================
19.06 REAL FIX: Galerie-Meta + Tags-Abstand
- Meta nicht per Transform-Hack, sondern Mobile-Grid
- Tags bekommen echtes soft-tag-break aus PHP
========================================= */
@media (max-width: 760px) {
body.page-item .product-gallery-actions {
display: grid !important;
grid-template-columns: repeat(3, 58px) minmax(0, 1fr) !important;
grid-auto-flow: column !important;
grid-auto-columns: 58px !important;
align-items: start !important;
justify-content: start !important;
column-gap: 10px !important;
row-gap: 4px !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 10px !important;
margin-bottom: 14px !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-actions > a {
grid-row: 1 !important;
align-self: start !important;
justify-self: start !important;
margin: 0 !important;
}
body.page-item .product-gallery-actions .product-gallery-info {
grid-row: 1 !important;
grid-column: auto / -1 !important;
align-self: start !important;
justify-self: start !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 2px 0 0 2px !important;
border-left: 0 !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
transform: none !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
body.page-item .product-gallery-actions .product-gallery-info p {
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
max-width: 100% !important;
text-align: left !important;
white-space: nowrap !important;
overflow: visible !important;
font-size: 15px !important;
line-height: 1.2 !important;
}
body.page-item .product-gallery-actions .product-gallery-info .meta-divider {
flex: 0 0 4px !important;
width: 4px !important;
margin: 0 2px !important;
}
body.page-item .product-gallery-actions .product-gallery-info .ampel-link {
display: inline-flex !important;
align-items: center !important;
gap: 1px !important;
margin-left: -1px !important;
white-space: nowrap !important;
}
body.page-item .product-gallery-actions .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions .product-gallery-info .product-status-light {
display: inline-block !important;
width: 58px !important;
min-width: 58px !important;
height: 14px !important;
max-height: 14px !important;
margin: 0 2px 0 0 !important;
border: 0 !important;
object-fit: fill !important;
transform: translateY(1px) !important;
vertical-align: -2px !important;
}
}
/* product-tags-section: gleiche Textgroesse wie Security, aber kontrollierter Absatz */
body.page-item .product-tags-section .description-text,
body.page-item .product-tags-section .description-text * {
font-size: 13px !important;
line-height: 1.38 !important;
font-weight: 300 !important;
}
body.page-item .product-tags-section .description-text .soft-tag-break {
display: block !important;
height: 7px !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-tags-section .description-text br {
display: block !important;
line-height: 0.2 !important;
margin: 0 !important;
}
@media (max-width: 760px) {
body.page-item .product-tags-section .description-text,
body.page-item .product-tags-section .description-text * {
font-size: 13px !important;
line-height: 1.34 !important;
}
body.page-item .product-tags-section .description-text .soft-tag-break {
height: 6px !important;
}
body.page-item .product-tags-section .description-text br {
line-height: 0.12 !important;
}
}
/* =========================================
19.06 MOBILE GALLERY META ABSOLUTE FIX
Echte Ursache:
Gerendertes HTML hat oft nur .product-gallery-actions-dekor,
NICHT .product-gallery-actions-dekor-extra.
Deshalb greifen die extra-Regeln nicht.
Meta-Zeile wird mobil absolut rechts an die Galeriekante gesetzt.
========================================= */
@media (max-width: 760px) {
body.page-item .product-gallery-actions.product-gallery-actions-dekor {
position: relative !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
min-height: 52px !important;
margin: 10px 0 14px 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor > a {
flex: 0 0 auto !important;
margin: 0 !important;
align-self: flex-start !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor > .product-gallery-info {
position: absolute !important;
top: 2px !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
width: auto !important;
max-width: calc(100% - 132px) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border-left: 0 !important;
text-align: right !important;
transform: none !important;
z-index: 2 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor > .product-gallery-info > p,
body.page-item .product-gallery-actions.product-gallery-actions-dekor > .product-gallery-info p.xr_s7 {
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 4px !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
white-space: nowrap !important;
overflow: visible !important;
font-size: 15px !important;
line-height: 1 !important;
position: static !important;
top: auto !important;
transform: none !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor .product-gallery-info .meta-divider {
display: inline-block !important;
flex: 0 0 auto !important;
width: 4px !important;
height: 4px !important;
margin: 0 4px !important;
align-self: center !important;
vertical-align: middle !important;
transform: none !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor .product-gallery-info .ampel-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
align-self: center !important;
gap: 0 !important;
margin-left: 0 !important;
line-height: 1 !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions.product-gallery-actions-dekor .product-gallery-info .product-status-light {
display: inline-block !important;
width: 58px !important;
min-width: 58px !important;
height: 14px !important;
max-height: 14px !important;
margin: 0 2px 0 0 !important;
object-fit: fill !important;
transform: none !important;
vertical-align: middle !important;
align-self: center !important;
}
}
@media (max-width: 390px) {
body.page-item .product-gallery-actions.product-gallery-actions-dekor > .product-gallery-info {
max-width: calc(100% - 126px) !important;
top: 3px !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor > .product-gallery-info > p,
body.page-item .product-gallery-actions.product-gallery-actions-dekor > .product-gallery-info p.xr_s7 {
font-size: 14px !important;
gap: 3px !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions.product-gallery-actions-dekor .product-gallery-info .product-status-light {
width: 52px !important;
min-width: 52px !important;
height: 13px !important;
max-height: 13px !important;
}
}
/* =========================================
19.06 MOBILE GALLERY META FINAL +8 / AMPEL +2
- Meta-Zeile 8px weiter nach rechts
- Ampel 2px tiefer
========================================= */
@media (max-width: 760px) {
body.page-item .product-gallery-actions.product-gallery-actions-dekor > .product-gallery-info {
right: -8px !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-dekor .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions.product-gallery-actions-dekor .product-gallery-info .product-status-light {
transform: translateY(2px) !important;
}
}
@media (max-width: 390px) {
body.page-item .product-gallery-actions.product-gallery-actions-dekor > .product-gallery-info {
right: -8px !important;
}
}
/* =========================================
19.06 DESKTOP TAGS SOFT BREAK FIX
product-tags-section: soft-tag-break auch Desktop sichtbar,
aber ohne harten DB-
-Sprung.
========================================= */
body.page-item .product-tags-section .description-text .soft-tag-break {
display: block !important;
height: 8px !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-item .product-tags-section .description-text br {
display: block !important;
line-height: 0.2 !important;
margin: 0 !important;
}
/* =========================================
19.06 MOBILE: Gallery Meta no-extra + no-options Strike
1) Ohne Zusatzbild: Artikelnummer/Lieferzeit rechtsbündig zur Hauptbildkante
2) Ohne Auswahlen + Strike-Preis: Preiszeile ohne Umbruch
========================================= */
@media (max-width: 760px) {
/* Kein Zusatzbild / keine Picto-Zeile: Meta rechtsbündig unter Hauptbild */
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) {
display: block !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
margin: 10px 0 16px 0 !important;
padding: 0 !important;
text-align: right !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) > .product-gallery-info {
display: block !important;
position: static !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border-left: 0 !important;
text-align: right !important;
transform: none !important;
box-sizing: border-box !important;
overflow: visible !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) > .product-gallery-info > p,
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) > .product-gallery-info p.xr_s7 {
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 4px !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
white-space: nowrap !important;
overflow: visible !important;
font-size: 15px !important;
line-height: 1 !important;
position: static !important;
top: auto !important;
transform: none !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) .product-gallery-info .meta-divider {
display: inline-block !important;
width: 4px !important;
height: 4px !important;
margin: 0 4px !important;
align-self: center !important;
vertical-align: middle !important;
transform: none !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) .product-gallery-info .ampel-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
margin-left: 0 !important;
line-height: 1 !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) .product-gallery-info .product-status-light {
display: inline-block !important;
width: 58px !important;
min-width: 58px !important;
height: 14px !important;
max-height: 14px !important;
margin: 0 2px 0 0 !important;
object-fit: fill !important;
transform: translateY(2px) !important;
vertical-align: middle !important;
}
/* Ohne Auswahlen + Strike: nicht mehr alter Preis / neuer Preis umbrechen */
body.page-item .product-buy-card.no-options .product-buy-row.strike-price,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options {
display: block !important;
grid-template-columns: none !important;
column-gap: 0 !important;
row-gap: 0 !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .product-qty-group,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options .product-qty-group {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: both !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .product-price-box,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options .product-price-box {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 18px 0 0 0 !important;
padding: 0 !important;
float: none !important;
clear: both !important;
text-align: left !important;
transform: none !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .prodbox_preis.strike-price .price-wrapper,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options .prodbox_preis.strike-price .price-wrapper {
display: inline-flex !important;
flex-direction: row !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 9px !important;
width: auto !important;
max-width: 100% !important;
white-space: nowrap !important;
text-align: left !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .price-old,
body.page-item .product-buy-card.no-options .product-buy-row.strike-price #price_orig_container,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options .price-old,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options #price_orig_container {
display: inline-flex !important;
align-items: baseline !important;
font-size: 24px !important;
line-height: 1 !important;
white-space: nowrap !important;
text-decoration-thickness: 1px !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .price-current,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options .price-current {
display: inline-flex !important;
align-items: baseline !important;
font-size: 31px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .price-badge,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options .price-badge {
display: inline-block !important;
width: 38px !important;
height: 22px !important;
object-fit: fill !important;
margin: 0 0 0 1px !important;
transform: translateY(2px) !important;
flex: 0 0 auto !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .product-price-note,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options .product-price-note {
display: block !important;
margin: 7px 0 0 0 !important;
padding: 0 !important;
text-align: left !important;
font-size: 13px !important;
line-height: 1.25 !important;
white-space: nowrap !important;
}
}
@media (max-width: 390px) {
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .prodbox_preis.strike-price .price-wrapper,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options .prodbox_preis.strike-price .price-wrapper {
gap: 7px !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .price-old,
body.page-item .product-buy-card.no-options .product-buy-row.strike-price #price_orig_container,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options .price-old,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options #price_orig_container {
font-size: 22px !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .price-current,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options .price-current {
font-size: 29px !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .price-badge,
body.page-item .product-buy-card .product-buy-row.strike-price.no-options .price-badge {
width: 36px !important;
height: 21px !important;
}
}
/* =========================================
19.06 MOBILE FINAL: no-extra Meta + no-options Strike
- ohne Zusatzbild: Artikelnummer wirklich rechtsbündig
- ohne Auswahlen + Strike: Preis unter Menge linksbündig
========================================= */
@media (max-width: 760px) {
/*
Ohne Zusatzbild:
Es gibt kein .product-gallery-actions-has-extra.
Die Meta-Zeile wird deshalb aus dem alten Inline/Flex-Fluss gelöst
und als kompletter Block rechts ausgerichtet.
*/
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 16px 0 !important;
padding: 0 !important;
text-align: right !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) > a {
display: none !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) > .product-gallery-info {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
border-left: 0 !important;
position: static !important;
transform: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) > .product-gallery-info > p,
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) > .product-gallery-info p.xr_s7 {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
white-space: nowrap !important;
font-size: 15px !important;
line-height: 1 !important;
gap: 4px !important;
position: static !important;
transform: none !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) .product-gallery-info .meta-divider {
flex: 0 0 auto !important;
width: 4px !important;
height: 4px !important;
margin: 0 4px !important;
align-self: center !important;
transform: none !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) .product-gallery-info .ampel-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
margin: 0 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions:not(.product-gallery-actions-has-extra) .product-gallery-info .product-status-light {
display: inline-block !important;
width: 58px !important;
min-width: 58px !important;
height: 14px !important;
max-height: 14px !important;
margin: 0 2px 0 0 !important;
object-fit: fill !important;
transform: translateY(2px) !important;
vertical-align: middle !important;
}
/*
Ohne Auswahlen + Strike:
Preis bewusst NICHT rechts neben Menge.
Menge oben, Preis darunter linksbuendig.
*/
body.page-item .product-buy-card.no-options .product-buy-row.strike-price,
body.page-item .product-buy-card .product-buy-row.no-options.strike-price {
display: block !important;
width: 100% !important;
max-width: 100% !important;
grid-template-columns: none !important;
column-gap: 0 !important;
row-gap: 0 !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .product-qty-group,
body.page-item .product-buy-card .product-buy-row.no-options.strike-price .product-qty-group {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: both !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .product-price-box,
body.page-item .product-buy-card .product-buy-row.no-options.strike-price .product-price-box {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 18px 0 0 0 !important;
padding: 0 !important;
float: none !important;
clear: both !important;
text-align: left !important;
justify-self: start !important;
align-self: start !important;
transform: none !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .prodbox_preis.strike-price,
body.page-item .product-buy-card .product-buy-row.no-options.strike-price .prodbox_preis.strike-price {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .prodbox_preis.strike-price .price-wrapper,
body.page-item .product-buy-card .product-buy-row.no-options.strike-price .prodbox_preis.strike-price .price-wrapper {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 9px !important;
width: auto !important;
max-width: 100% !important;
white-space: nowrap !important;
text-align: left !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .price-old,
body.page-item .product-buy-card.no-options .product-buy-row.strike-price #price_orig_container,
body.page-item .product-buy-card .product-buy-row.no-options.strike-price .price-old,
body.page-item .product-buy-card .product-buy-row.no-options.strike-price #price_orig_container {
display: inline-flex !important;
align-items: baseline !important;
font-size: 24px !important;
line-height: 1 !important;
white-space: nowrap !important;
text-decoration-thickness: 1px !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .price-current,
body.page-item .product-buy-card .product-buy-row.no-options.strike-price .price-current {
display: inline-flex !important;
align-items: baseline !important;
font-size: 31px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .price-badge,
body.page-item .product-buy-card .product-buy-row.no-options.strike-price .price-badge {
display: inline-block !important;
width: 38px !important;
height: 22px !important;
object-fit: fill !important;
margin: 0 0 0 1px !important;
transform: translateY(2px) !important;
flex: 0 0 auto !important;
}
body.page-item .product-buy-card.no-options .product-buy-row.strike-price .product-price-note,
body.page-item .product-buy-card .product-buy-row.no-options.strike-price .product-price-note {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 7px 0 0 0 !important;
padding: 0 !important;
text-align: left !important;
font-size: 13px !important;
line-height: 1.25 !important;
white-space: nowrap !important;
}
}
/* =========================================
19.06 MOBILE HARD FINAL: no-action meta + no-options strike
Grund: show_item_responsive_patch_v40.css wird vor mobile_shop_patch_v2.css geladen.
Deshalb hier extrem spezifisch, damit spaetere globale Mobile-Regeln nicht gewinnen.
========================================= */
@media (max-width: 760px) {
/*
Galerie ohne Zusatzbild:
Gerendertes HTML ist nur:
Deshalb auf "keine direkten Links" zielen und den kompletten Block nach rechts setzen.
*/
html body.page-category.page-subcategory.page-item #wrapper .product-gallery-actions:not(:has(> a)),
html body.page-category.page-subcategory.page-item #wrapper section .product-gallery-actions:not(:has(> a)) {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 10px 0 16px 0 !important;
padding: 0 !important;
text-align: right !important;
box-sizing: border-box !important;
overflow: visible !important;
transform: none !important;
}
html body.page-category.page-subcategory.page-item #wrapper .product-gallery-actions:not(:has(> a)) > .product-gallery-info,
html body.page-category.page-subcategory.page-item #wrapper section .product-gallery-actions:not(:has(> a)) > .product-gallery-info {
display: flex !important;
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-left: 0 !important;
align-items: center !important;
justify-content: flex-end !important;
text-align: right !important;
box-sizing: border-box !important;
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
transform: none !important;
overflow: visible !important;
}
html body.page-category.page-subcategory.page-item #wrapper .product-gallery-actions:not(:has(> a)) > .product-gallery-info > p,
html body.page-category.page-subcategory.page-item #wrapper .product-gallery-actions:not(:has(> a)) > .product-gallery-info p.xr_s7,
html body.page-category.page-subcategory.page-item #wrapper section .product-gallery-actions:not(:has(> a)) > .product-gallery-info > p,
html body.page-category.page-subcategory.page-item #wrapper section .product-gallery-actions:not(:has(> a)) > .product-gallery-info p.xr_s7 {
display: flex !important;
flex: 0 1 auto !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
white-space: nowrap !important;
font-size: 15px !important;
line-height: 1 !important;
gap: 4px !important;
position: static !important;
transform: none !important;
}
html body.page-category.page-subcategory.page-item #wrapper .product-gallery-actions:not(:has(> a)) .product-gallery-info .meta-divider {
flex: 0 0 auto !important;
width: 4px !important;
height: 4px !important;
margin: 0 4px !important;
align-self: center !important;
transform: none !important;
}
html body.page-category.page-subcategory.page-item #wrapper .product-gallery-actions:not(:has(> a)) .product-gallery-info .ampel-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
margin: 0 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
html body.page-category.page-subcategory.page-item #wrapper .product-gallery-actions:not(:has(> a)) .product-gallery-info .prodbox_liefer,
html body.page-category.page-subcategory.page-item #wrapper .product-gallery-actions:not(:has(> a)) .product-gallery-info .product-status-light {
display: inline-block !important;
width: 58px !important;
min-width: 58px !important;
height: 14px !important;
max-height: 14px !important;
margin: 0 2px 0 0 !important;
object-fit: fill !important;
transform: translateY(2px) !important;
vertical-align: middle !important;
}
/*
Keine Auswahlen + Strike:
1-Spalten-Grid erzwingen, damit spaetere "Preis in Spalte 2"-Regeln nicht greifen.
*/
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.no-options,
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.option-count-0 {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
column-gap: 0 !important;
row-gap: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 22px 0 !important;
padding: 0 !important;
align-items: start !important;
justify-items: start !important;
box-sizing: border-box !important;
}
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.no-options > .product-qty-group,
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.option-count-0 > .product-qty-group {
grid-column: 1 !important;
grid-row: 1 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
justify-self: start !important;
text-align: left !important;
float: none !important;
clear: both !important;
}
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.no-options > .product-price-box,
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.option-count-0 > .product-price-box {
grid-column: 1 !important;
grid-row: 2 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 18px 0 0 0 !important;
padding: 0 !important;
padding-top: 0 !important;
padding-left: 0 !important;
justify-self: start !important;
align-self: start !important;
text-align: left !important;
float: none !important;
clear: both !important;
transform: none !important;
box-sizing: border-box !important;
}
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.no-options > .product-price-box .prodbox_preis.strike-price,
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.option-count-0 > .product-price-box .prodbox_preis.strike-price {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
transform: none !important;
}
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.no-options > .product-price-box .price-wrapper,
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.option-count-0 > .product-price-box .price-wrapper {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 9px !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
text-align: left !important;
transform: none !important;
}
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.no-options .price-old,
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.no-options #price_orig_container,
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.option-count-0 .price-old,
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.option-count-0 #price_orig_container {
display: inline-flex !important;
align-items: baseline !important;
font-size: 24px !important;
line-height: 1 !important;
white-space: nowrap !important;
margin: 0 !important;
text-decoration-thickness: 1px !important;
transform: none !important;
}
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.no-options .price-current,
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.option-count-0 .price-current {
display: inline-flex !important;
align-items: baseline !important;
font-size: 31px !important;
line-height: 1 !important;
white-space: nowrap !important;
margin: 0 !important;
transform: none !important;
}
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.no-options .price-badge,
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.option-count-0 .price-badge {
display: inline-block !important;
width: 38px !important;
height: 22px !important;
object-fit: fill !important;
margin: 0 0 0 1px !important;
padding: 0 !important;
transform: translateY(2px) !important;
flex: 0 0 auto !important;
}
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.no-options .product-price-note,
html body.page-category.page-subcategory.page-item #wrapper aside.product-buy-card.no-options div.product-buy-row.strike-price.option-count-0 .product-price-note {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 7px 0 0 0 !important;
padding: 0 !important;
text-align: left !important;
font-size: 13px !important;
line-height: 1.25 !important;
white-space: nowrap !important;
transform: none !important;
}
}
/* =========================================
19.06 MOBILE FINAL: 1 Zusatzbild + Option-Count-0 Strike
- 1 Zusatzbild: Meta rechts oben neben Thumbnail, rechtsbuendig zur Hauptbildkante
- no-options / option-count-0 + Strike: Preis unter Menge linksbuendig
========================================= */
@media (max-width: 760px) {
/* Zustand aus HTML: product-gallery-actions product-gallery-actions-has-extra */
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor),
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor-extra) {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-height: 54px !important;
margin: 10px 0 16px 0 !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
text-align: left !important;
transform: none !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor) > a,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor-extra) > a {
display: inline-flex !important;
position: relative !important;
z-index: 1 !important;
margin: 0 !important;
vertical-align: top !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor) > .product-gallery-info,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor-extra) > .product-gallery-info {
position: absolute !important;
top: 3px !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
display: block !important;
width: auto !important;
max-width: calc(100% - 88px) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border-left: 0 !important;
text-align: right !important;
white-space: nowrap !important;
transform: none !important;
z-index: 2 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor) > .product-gallery-info > p,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor) > .product-gallery-info p.xr_s7,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor-extra) > .product-gallery-info > p,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor-extra) > .product-gallery-info p.xr_s7 {
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 4px !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
white-space: nowrap !important;
overflow: visible !important;
font-size: 15px !important;
line-height: 1 !important;
position: static !important;
top: auto !important;
transform: none !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor) .product-gallery-info .meta-divider,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor-extra) .product-gallery-info .meta-divider {
display: inline-block !important;
flex: 0 0 auto !important;
width: 4px !important;
height: 4px !important;
margin: 0 4px !important;
align-self: center !important;
vertical-align: middle !important;
transform: none !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor) .product-gallery-info .ampel-link,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor-extra) .product-gallery-info .ampel-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
margin: 0 !important;
line-height: 1 !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor) .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor) .product-gallery-info .product-status-light,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor-extra) .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra:not(.product-gallery-actions-dekor-extra) .product-gallery-info .product-status-light {
display: inline-block !important;
width: 58px !important;
min-width: 58px !important;
height: 14px !important;
max-height: 14px !important;
margin: 0 2px 0 0 !important;
object-fit: fill !important;
transform: translateY(2px) !important;
vertical-align: middle !important;
align-self: center !important;
}
/* Sauberer Endstand fuer Produkte ohne Auswahlfelder mit Strikepreis */
body.page-item aside.product-buy-card.no-options .product-buy-row.strike-price,
body.page-item aside.product-buy-card.option-count-0 .product-buy-row.strike-price,
body.page-item .product-buy-row.strike-price.no-options,
body.page-item .product-buy-row.strike-price.option-count-0 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
grid-template-columns: none !important;
column-gap: 0 !important;
row-gap: 0 !important;
}
body.page-item aside.product-buy-card.no-options .product-buy-row.strike-price .product-price-box,
body.page-item aside.product-buy-card.option-count-0 .product-buy-row.strike-price .product-price-box,
body.page-item .product-buy-row.strike-price.no-options .product-price-box,
body.page-item .product-buy-row.strike-price.option-count-0 .product-price-box {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 18px 0 0 0 !important;
padding: 0 !important;
clear: both !important;
float: none !important;
text-align: left !important;
transform: none !important;
justify-self: start !important;
align-self: start !important;
}
body.page-item aside.product-buy-card.no-options .product-buy-row.strike-price .prodbox_preis.strike-price,
body.page-item aside.product-buy-card.option-count-0 .product-buy-row.strike-price .prodbox_preis.strike-price,
body.page-item .product-buy-row.strike-price.no-options .prodbox_preis.strike-price,
body.page-item .product-buy-row.strike-price.option-count-0 .prodbox_preis.strike-price {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
body.page-item aside.product-buy-card.no-options .product-buy-row.strike-price .price-wrapper,
body.page-item aside.product-buy-card.option-count-0 .product-buy-row.strike-price .price-wrapper,
body.page-item .product-buy-row.strike-price.no-options .price-wrapper,
body.page-item .product-buy-row.strike-price.option-count-0 .price-wrapper {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 9px !important;
width: auto !important;
max-width: 100% !important;
white-space: nowrap !important;
text-align: left !important;
}
body.page-item aside.product-buy-card.no-options .product-buy-row.strike-price .product-price-note,
body.page-item aside.product-buy-card.option-count-0 .product-buy-row.strike-price .product-price-note,
body.page-item .product-buy-row.strike-price.no-options .product-price-note,
body.page-item .product-buy-row.strike-price.option-count-0 .product-price-note {
display: block !important;
margin: 7px 0 0 0 !important;
padding: 0 !important;
text-align: left !important;
font-size: 13px !important;
line-height: 1.25 !important;
white-space: nowrap !important;
}
}
/* =========================================
19.06 MOBILE HAS-OPTIONS TOP GAP FIX
Ursache:
Vor der Kaufbox steht nach product-security-section noch spacer-20,
danach kommt die erste Varianten-form-group zusätzlich inline mit margin-top:15px.
Mobil addiert sich das sichtbar vor "Ausführung".
========================================= */
@media (max-width: 760px) {
body.page-item .product-buy-card.has-options {
margin-top: -12px !important;
padding-top: 0 !important;
}
body.page-item .product-buy-card.has-options > .form-group:first-of-type {
margin-top: 0 !important;
}
}
/* =========================================
SHOW_ITEM MOBILE SIDEBAR FULL OPEN V57
Nur Produktdetailseite mobil.
Grund:
mobile_shop_patch_v2 begrenzt page-item Sidebar auf min(280px, 86vw).
Dieser Block ist bewusst spezifischer, damit die Sidebar mobil wieder komplett oeffnet.
Desktop, Produktlayout, Preis/Menge bleiben unberuehrt.
========================================= */
@media (max-width: 760px) {
body.page-category.page-subcategory.page-item #wrapper > #sidebar-wrapper,
body.page-category.page-subcategory.page-item #wrapper:not(.toggled) > #sidebar-wrapper,
body.page-category.page-subcategory.page-item #wrapper.toggled > #sidebar-wrapper {
position: fixed !important;
top: var(--topbar-height, 58px) !important;
left: 0 !important;
right: auto !important;
width: 100vw !important;
min-width: 100vw !important;
max-width: 100vw !important;
width: 100dvw !important;
min-width: 100dvw !important;
max-width: 100dvw !important;
height: calc(100vh - var(--topbar-height, 58px)) !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
body.page-category.page-subcategory.page-item #wrapper:not(.toggled) > #sidebar-wrapper {
transform: translate3d(-105%, 0, 0) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.page-category.page-subcategory.page-item #wrapper.toggled > #sidebar-wrapper {
transform: translate3d(0, 0, 0) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
body.page-category.page-subcategory.page-item #wrapper.toggled > #page-content-wrapper {
margin-left: 0 !important;
transform: none !important;
}
}
/* =========================================
SHOW_ITEM MOBILE GALLERY META WRAP AFTER EXTRA MEDIA V62
Problem:
Bei Zusatzbild/Material/Video bleibt ArtikelNr./Lieferzeit mobil in derselben Zeile
und laeuft in die Pictos hinein.
Zustand wiederhergestellt:
- ohne Zusatzbild bleibt Meta rechts/kompakt wie vorher
- mit Zusatzbild/Pictos rutscht Meta auf die naechste Zeile
- betrifft nur den Galerie-Meta-Bereich mobil
- keine Preis-, Mengen-, Sidebar-, Desktop- oder Produktlayout-Aenderung
========================================= */
@media (max-width: 760px) {
body.page-item .product-gallery-actions.product-gallery-actions-has-extra,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 100% !important;
gap: 8px !important;
margin: 10px 0 14px 0 !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
text-align: left !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-has-extra > a.product-extra-image-link,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra > a.product-material-link,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra > a.product-video-link,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra > a.pswp-item,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra > a.product-extra-image-link,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra > a.product-material-link,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra > a.product-video-link,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra > a.pswp-item {
flex: 0 0 auto !important;
margin: 0 !important;
float: none !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-has-extra > .product-gallery-info,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra > .product-gallery-info {
display: block !important;
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: -2px 0 0 0 !important;
padding: 0 !important;
border-left: 0 !important;
clear: both !important;
float: none !important;
position: static !important;
transform: none !important;
text-align: left !important;
white-space: nowrap !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-has-extra > .product-gallery-info > p,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra > .product-gallery-info p.xr_s7,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra > .product-gallery-info > p,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra > .product-gallery-info p.xr_s7 {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
white-space: nowrap !important;
font-size: 15px !important;
line-height: 1.15 !important;
gap: 4px !important;
position: static !important;
transform: none !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-has-extra .product-gallery-info .meta-divider,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .meta-divider {
flex: 0 0 auto !important;
width: 4px !important;
height: 4px !important;
margin: 0 4px !important;
align-self: center !important;
transform: none !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-has-extra .product-gallery-info .ampel-link,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .ampel-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
margin: 0 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.page-item .product-gallery-actions.product-gallery-actions-has-extra .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions.product-gallery-actions-has-extra .product-gallery-info .product-status-light,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .prodbox_liefer,
body.page-item .product-gallery-actions.product-gallery-actions-dekor-extra .product-gallery-info .product-status-light {
display: inline-block !important;
width: 58px !important;
min-width: 58px !important;
height: 14px !important;
max-height: 14px !important;
margin: 0 2px 0 0 !important;
border: 0 !important;
object-fit: fill !important;
transform: translateY(1px) !important;
vertical-align: middle !important;
}
}