/* intern.html */ body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-block-image-text-gallery .col-md-4:nth-child(-n+3) .cms-image-container{ height: 120px !important; display:flex; align-items:center; justify-content:center; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-block-image-text-gallery .col-md-4:nth-child(-n+3) img.cms-image{ max-height:100%; width:auto; object-fit:contain; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-block-image-text-gallery .col-md-4:nth-child(-n+3) a.btn.btn-primary{ border-radius:999px; font-weight:700; padding:8px 12px; line-height:1.1; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-block-image-text-gallery .col-md-4:nth-child(-n+3) .cms-element-text h2 + h2{ margin-top:8px; } @media (max-width:991.98px){ body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-block-image-text-gallery .col-md-4:nth-child(-n+3) .cms-image-container{ height:100px !important; } } @media (max-width:575.98px){ body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-block-image-text-gallery .col-md-4:nth-child(-n+3) .cms-image-container{ height:85px !important; } } /* intern.html */ /* body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery{ --card-radius: 16px; --card-pad: 14px; --img-height-desktop: 200px; --img-height-tablet: 190px; --img-height-mobile: 170px; --img-pad: 6px; --text-gap: 8px; --btn-gap: 8px; --card-border: rgba(0,0,0,.10); --card-shadow: 0 10px 24px rgba(0,0,0,.08); --card-shadow-hover: 0 16px 34px rgba(0,0,0,.12); } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .cms-block-container-row{ row-gap: 16px; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card{ background: transparent; border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: var(--card-pad); height: 100%; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card:hover{ transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: rgba(0,0,0,.16); } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card .cms-element-image{ margin: 0; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card .cms-element-image .cms-image-container{ height: var(--img-height-desktop) !important; padding: var(--img-pad) !important; display: flex; align-items: center; justify-content: center; border-radius: calc(var(--card-radius) - 4px); overflow: hidden; border: 0 !important; box-shadow: none !important; background: transparent !important; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card img.cms-image{ width: 100%; height: 100%; object-fit: contain; object-position: center; max-width: 96%; max-height: 96%; border: 0 !important; outline: 0 !important; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card .cms-element-text{ margin-top: 10px; text-align: center; display: flex; flex-direction: column; gap: var(--text-gap); flex: 1 1 auto; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card .cms-element-text p{ margin: 0; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card .cms-element-text h2{ margin: 0; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card .cms-element-text h2 + h2{ margin-top: var(--btn-gap); } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card a.btn.btn-primary{ border-radius: 999px; font-weight: 700; padding: 8px 12px; line-height: 1.1; } @media (max-width: 991.98px){ body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card .cms-element-image .cms-image-container{ height: var(--img-height-tablet) !important; } } @media (max-width: 575.98px){ body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card .cms-element-image .cms-image-container{ height: var(--img-height-mobile) !important; } } */ /* intern.html */ /* body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery { --glis-text: #0f172a; --glis-muted: #475569; --glis-surface: #ffffff; --glis-border: rgba(15, 23, 42, 0.10); --glis-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08); --glis-shadow-md: 0 12px 28px rgba(15, 23, 42, 0.12); --glis-radius: 14px; --glis-radius-sm: 10px; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .cms-block-container-row { row-gap: 18px; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card{ background: var(--glis-surface); border: 1px solid var(--glis-border); border-radius: var(--glis-radius); box-shadow: var(--glis-shadow-sm); padding: 16px; height: 100%; transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card:hover{ transform: translateY(-4px); box-shadow: var(--glis-shadow-md); border-color: rgba(11, 94, 215, 0.22); } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card .cms-element-image .cms-image-container{ height: 140px; display: flex; align-items: center; justify-content: center; border-radius: var(--glis-radius-sm); overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%); border: 1px solid rgba(15, 23, 42, 0.06); padding: 14px; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card img.cms-image{ width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; transition: transform .20s ease; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card:hover img.cms-image{ transform: scale(1.02); } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card .cms-element-text{ margin-top: 10px; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card .cms-element-text p{ margin: 6px 0 0 0; color: var(--glis-muted); font-size: 0.95rem; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card a.btn.btn-primary{ border-radius: 999px; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 10px 18px rgba(11, 94, 215, 0.14); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card a.btn.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 24px rgba(11, 94, 215, 0.18); filter: saturate(1.05); } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card a:focus-visible{ outline: 3px solid rgba(11, 94, 215, 0.35); outline-offset: 2px; border-radius: 10px; } @media (max-width: 991.98px){ body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card{ padding: 14px; } body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery .image-text-gallery-card .cms-element-image .cms-image-container{ height: 130px; padding: 12px; } } @media (prefers-reduced-motion: reduce){ body.is-ctl-landingpage.is-act-index.is-active-route-frontend-landing-page .cms-page .cms-block-image-text-gallery *{ transition: none !important; } } */ /* HORIZEN HERE */ .cms-element-product-slider .product--on-request .product-price--on-request::before, .cms-element-product-slider .product--on-request .product-price--on-request::after { content: none !important; } .cms-element-product-slider .product--on-request .product-price--on-request, .cms-element-product-slider .product--on-request .product-price--on-request * { color: #7bae1f !important; font-weight: 700 !important; font-family: "Lato", sans-serif !important; vertical-align: middle !important; display: inline-block !important; font-size: 1.1rem !important; fill: #7bae1f !important; } /* Menu Drop Down Above the items */ .header-main, .nav-main, .main-navigation, .main-navigation-menu, .main-navigation .dropdown-menu { position: relative; z-index: 9999 !important; } .main-navigation .dropdown-menu { z-index: 99999 !important; } /* Optimal */ .cms-section, .cms-block, .tourism-slider-slider, .product-slider, .tns-outer, .tns-inner { z-index: 1 !important; } /* Make the "Empfehlung" badge text white */ .product-badges .badge-topseller { color: #ffffff !important; } /* Force ALL Zen sliders to center on the page */ .cms-element-zen-image-slider { display: block !important; width: 100% !important; } .cms-element-zen-image-slider .base-slider { max-width: 1400px !important; /* adjust as needed */ margin-left: auto !important; margin-right: auto !important; display: block !important; } .cms-element-zen-image-slider .tns-outer, .cms-element-zen-image-slider .tns-inner, .cms-element-zen-image-slider .image-slider-container { margin-left: auto !important; margin-right: auto !important; display: block !important; width: fit-content !important; } #cms-element-zen-image-slider-0194fa7357977a849f65e34de657a488 .cms-block-container-row { display: flex !important; justify-content: center !important; } #cms-element-zen-image-slider-0194fa7357977a849f65e34de657a488 .col-12 { flex: 0 0 auto !important; width: auto !important; } /* Smaller font size for products */ legend.product-detail-configurator-group-title, .product-detail-configurator-group-title.fs-5, fieldset .product-detail-configurator-group-title { font-size: 1.3rem !important; font-weight: 600 !important; } /* versandkosten */ .footer-vat { display: none !important; } /* the manufacturer logo container */ .product-heading-manufacturer-logo-container .cms-element-manufacturer-logo { font-size: 1.4rem; color: #7BAE1F; font-weight: 700; } /* ===== Product page layout: put Cross-Selling (Zusatzlizenzen) at the very bottom ===== */ main#content-main .cms-page .cms-sections { /* display: flex !important; */ /* shortly stop cause of conflicts with other ticket */ flex-direction: column !important; } main#content-main .cms-page .cms-section.pos-3.has-el-cross-selling { order: 99 !important; } main#content-main .cms-page .cms-section.pos-2.has-el-product-description { order: 3 !important; } main#content-main .cms-page .cms-section.pos-3.has-el-cross-selling .cms-block-container { padding-top: 10px !important; padding-bottom: 0 !important; } main#content-main .product-detail-cross-selling .product-description, main#content-main .product-detail-cross-selling .product-detail-tab-preview { display: none !important; } main#content-main .product-detail-cross-selling .product-info { display: flex !important; flex-direction: column !important; gap: 0.08rem !important; } main#content-main .product-detail-cross-selling .product-name { margin: 0 0 0.08rem 0 !important; display: block !important; line-height: 1.2 !important; } main#content-main .product-detail-cross-selling .product-price-info { margin-top: 0.08rem !important; } main#content-main .product-detail-cross-selling .product-action-container { margin-top: 0.12rem !important; } main#content-main .product-detail-cross-selling .product-action, main#content-main .product-detail-cross-selling .product-action .d-grid { margin: 0 !important; padding: 0 !important; } main#content-main .product-detail-cross-selling .btn.btn-detail { display: inline-block !important; width: auto !important; font-size: 0.85rem !important; /* padding: 0.3rem 0.6rem !important; */ /* line-height: 1.2 !important; */ } /* 2. Add spacing between image and text */ .product-slider-item .product-image-wrapper { margin-bottom: 10px; } .product-slider-item .product-info { margin-top: 10px; } /* shop blog home page */ .product-slider-item { height: 100% !important; } .shop-studio-blog-blog-post-box.card { display: flex; flex-direction: column; height: 100%; } /* Newsletter Honeypot + Icons */ /* input[name^="hp_"] { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 0 !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; } .sw-captcha-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; z-index: 10000; } .sw-captcha-widget { background: #fff; padding: 1rem; border-radius: 8px; text-align: center; max-width: 280px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .sw-captcha-title { margin-bottom: 0.5rem; font-size: 1rem; color: #333; } .sw-captcha-grid { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: .5rem; } .sw-captcha-icon { font-size: 2rem; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; margin: 4px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; transition: border-color .2s, opacity .2s; user-select: none; } .sw-captcha-icon.selected { border-color: #007bff; } .sw-captcha-icon.disabled { opacity: .4; pointer-events: none; } */ /* Newsletter Honypot Style */ /* input[name^="hp_"] { position: absolute !important; left: -9999px !important; top: -9999px !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; } #sw-human-slider-track { width: 100%; max-width: 400px; height: 40px; background: #e0e0e0; border-radius: 20px; position: relative; margin: 1rem 0; user-select: none; } #sw-human-slider-handle { width: 40px; height: 40px; background: #757575; border-radius: 50%; position: absolute; top: 0; left: 0; cursor: grab; transition: background 0.3s; } #sw-human-slider-track.verified { background: #c8e6c9; } #sw-human-slider-track.verified #sw-human-slider-handle { background: #388e3c; cursor: default; } */ /* hide the “freie Plätze” stock info */ .product-detail-container.product-detail-stock-container { display: none !important; } /* ========================== 1) Override the outer wrapper: make the .footer-newsletter-column-input-email a normal block-level col-12 again ========================== */ /* .footer-newsletter-column-input-email.input-group { display: block !important; width: 100% !important; max-width: 100% !important; } .footer-newsletter-column-input-email.input-group > .input-group { display: flex !important; } */ /* ========================== 3) Newsletter + Math-Captcha ========================== */ /* #zen-footer-form-newsletter { display: none !important; } .js-enabled #zen-footer-form-newsletter { display: block !important; opacity: 0; animation: fade-in 0.3s forwards 0.1s; } @keyframes fade-in { to { opacity: 1; } } .hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } .math-recaptcha { display: none; width: 100%; box-sizing: border-box; flex-wrap: wrap; align-items: center; background: #f8f9fa; border: 1px solid #dee2e6; box-shadow: 0 2px 6px rgba(0,0,0,0.1); padding: 1rem; font-family: 'Lato', sans-serif; color: #343a40; --spacing-sm: 0.5rem; } .math-recaptcha__question { flex: 1 1 100%; font-weight: 600; margin-bottom: 0.75rem; font-size: 0.95rem; } .math-recaptcha__options { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .math-recaptcha__option { flex: 1 1 auto; padding: 0.5rem 1rem; background: #fff; border: 1px solid #ced4da; border-radius: 0.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer; user-select: none; transition: transform 0.1s, border-color 0.15s; text-align: center; font-size: 0.9rem; } .math-recaptcha__option:hover { transform: translateY(-2px); border-color: #80bdff; } .math-recaptcha__option--correct { background: #7BAE1F !important; border-color: #689e1a !important; color: #fff; } .math-recaptcha__option--incorrect { background: #dc3545 !important; border-color: #c82333 !important; color: #fff; } .math-recaptcha--blocked .math-recaptcha__option { pointer-events: none; opacity: 0.6; } .math-recaptcha__blocked-msg { flex: 1 1 100%; margin-top: 0.75rem; color: #dc3545; font-size: 0.85rem; font-style: italic; } #zen-footer-form-newsletter button[type="submit"] { opacity: 0.5; cursor: not-allowed; transition: opacity 0.2s; } #zen-footer-form-newsletter button[type="submit"].enabled { opacity: 1; cursor: pointer; } +/ /* recapcha newsletter */ /* .math-recaptcha { display: none; flex-wrap: wrap; align-items: center; background: #f8f9fa; border: 1px solid #dee2e6; box-shadow: 0 2px 6px rgba(0,0,0,0.1); padding: 1rem; font-family: 'Lato', sans-serif; color: #343a40; box-sizing: border-box; --spacing-sm: 0.5rem; } .math-recaptcha__question { flex: 1 1 100%; font-weight: 600; margin-bottom: 0.75rem; font-size: 0.95rem; } .math-recaptcha__options { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .math-recaptcha__option { flex: 1 1 auto; padding: 0.5rem 1rem; background: #fff; border: 1px solid #ced4da; border-radius: 0.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer; user-select: none; transition: transform 0.1s, border-color 0.15s; text-align: center; font-size: 0.9rem; } .math-recaptcha__option:hover { transform: translateY(-2px); border-color: #80bdff; } .math-recaptcha__option--correct { background: #7BAE1F !important; border-color: #689e1a !important; color: #fff; } .math-recaptcha__option--incorrect { background: #dc3545 !important; border-color: #c82333 !important; color: #fff; } .math-recaptcha--blocked .math-recaptcha__option { pointer-events: none; opacity: 0.6; } .math-recaptcha__blocked-msg { flex: 1 1 100%; margin-top: 0.75rem; color: #dc3545; font-size: 0.85rem; font-style: italic; } #zen-footer-form-newsletter button[type="submit"] { opacity: 0.5; cursor: not-allowed; transition: opacity 0.2s; } #zen-footer-form-newsletter button[type="submit"].enabled { opacity: 1; cursor: pointer; } .hp-field { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } .footer-newsletter-column-input-email { position: relative; } .footer-newsletter-column-input-email .input-group { width: 100%; } .footer-newsletter-column-input-email .math-recaptcha { width: 100%; margin-top: var(--spacing-sm); box-sizing: border-box; } */ /* recapcha newsletter */ /* .math-recaptcha { --bg-card: #f8f9fa; --border: #dee2e6; --text: #343a40; --btn-bg: #fff; --btn-border: #ced4da; --btn-shadow: rgba(0, 0, 0, 0.05); --btn-hover-border: #80bdff; --correct-bg: #7BAE1F; --correct-border: #689e1a; --incorrect-bg: #dc3545; --incorrect-border: #c82333; --font-base: 'Lato', sans-serif; --font-size-base: 1rem; --font-size-small: 0.9rem; --font-size-xs: 0.85rem; --font-weight-semibold: 600; --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --shadow-sm: 0 1px 2px var(--btn-shadow); --shadow-md: 0 2px 6px rgba(0,0,0,0.1); display: none; flex-wrap: wrap; align-items: center; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-md); padding: var(--spacing-md); margin-top: var(--spacing-md); font-family: var(--font-base); color: var(--text); width: auto; box-sizing: border-box; } .math-recaptcha__question { flex: 1 1 100%; font-weight: var(--font-weight-semibold); margin-bottom: 0.75rem; font-size: 0.95rem; } .math-recaptcha__options { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); } .math-recaptcha__option { flex: 1 1 auto; padding: var(--spacing-sm) var(--spacing-md); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); cursor: pointer; user-select: none; transition: transform 0.1s, border-color 0.15s, background 0.15s; font-size: var(--font-size-small); text-align: center; } .math-recaptcha__option:hover { transform: translateY(-2px); border-color: var(--btn-hover-border); } .math-recaptcha__option:active { transform: translateY(1px); } .math-recaptcha__option--correct { background: var(--correct-bg) !important; border-color: var(--correct-border) !important; color: #fff; } .math-recaptcha__option--incorrect { background: var(--incorrect-bg) !important; border-color: var(--incorrect-border) !important; color: #fff; } .math-recaptcha--blocked .math-recaptcha__option { pointer-events: none; opacity: 0.6; } .math-recaptcha__blocked-msg { flex: 1 1 100%; margin-top: 0.75rem; color: var(--incorrect-bg); font-size: var(--font-size-xs); font-style: italic; } #zen-footer-form-newsletter button[type="submit"] { opacity: 0.5; cursor: not-allowed; transition: opacity 0.2s; } #zen-footer-form-newsletter button[type="submit"].enabled { opacity: 1; cursor: pointer; } #zen-footer-form-newsletter .hp-field { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } */ /* captcha contact form */ .captcha-group { margin-top: 1.5rem; } .captcha-group .invalid-feedback { display: none; color: #dc3545; margin-top: .25rem; } .captcha-group.has-error .invalid-feedback { display: block; } .captcha-group.has-error input { border-color: #dc3545; } .honeypot { position: absolute; left: -9999px; visibility: hidden; } .error-msg { color: #dc3545; margin-top: .5rem; font-size: .9rem; } /* badge img fix */ .card.product-box .card-body { position: relative; } .card.product-box .product-badges { position: absolute; top: 0.8rem; right: 0.5rem; margin: 0; z-index: 10; } .card.product-box .product-image-wrapper { width: 100% !important; overflow: hidden; } .card.product-box .product-image { display: block; width: 100% !important; height: auto !important; } /* Dropdown .license-dropdown */ @keyframes icon-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.2); } } @keyframes arrow-bounce { 0%, 100% { transform: rotate(0deg) translateY(0) scale(1); } 50% { transform: rotate(180deg) translateY(-4px) scale(1.1); } } .license-dropdown summary { display: flex; align-items: center; padding: 0.5rem 0; border-bottom: 2px solid #7bae1f; background: transparent; cursor: pointer; transition: border-bottom-width 0.25s ease-out, border-bottom-color 0.25s ease-out; } .license-dropdown summary::-webkit-details-marker { display: none; } .license-dropdown summary h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: inherit; transition: color 0.25s ease-out; } .license-dropdown summary h2 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: inherit; transition: color 0.25s ease-out; } .license-dropdown summary::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; align-self: center; background-position: center center; background-repeat: no-repeat; background-size: contain; margin-right: 0.5rem; background-image: url("data:image/svg+xml;charset=UTF-8,\ \ \ "); background-repeat: no-repeat; background-size: contain; transition: transform 0.4s ease-out; } .license-dropdown summary::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: auto; background-image: url("data:image/svg+xml;charset=UTF-8,\ \ "); background-repeat: no-repeat; background-size: contain; transition: transform 0.4s ease-out; } .license-dropdown[open] summary::after { transform: rotate(180deg); } .license-dropdown .mla-content { transform: scaleY(0); transform-origin: top; opacity: 0; padding: 0 1.25rem; transition: transform 0.2s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out; } .license-dropdown[open] .mla-content { transform: scaleY(1); opacity: 1; padding: 1rem 1.25rem; } .license-dropdown summary:hover { border-bottom-width: 6px; border-bottom-color: #5fa913; animation: pulse-border 1s infinite alternate; } @keyframes pulse-border { to { border-bottom-color: #9ccc3f; } } .license-dropdown summary:hover h3 { color: #7bae1f; } .license-dropdown summary:hover::before { animation: icon-bounce 0.6s both; } .license-dropdown summary:hover::after { animation: arrow-bounce 0.6s both; } /* Dropdown */ @keyframes icon-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.2); } } @keyframes arrow-bounce { 0%, 100% { transform: rotate(0deg) translateY(0) scale(1); } 50% { transform: rotate(180deg) translateY(-4px) scale(1.1); } } .modern-dropdown-alt summary { display: flex; align-items: center; padding: 0.5rem 0; border-bottom: 4px solid #7bae1f; background: transparent; cursor: pointer; transition: border-bottom-width 0.25s ease-out, border-bottom-color 0.25s ease-out; } .modern-dropdown-alt summary::-webkit-details-marker { display: none; } .modern-dropdown-alt summary h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: inherit; transition: color 0.25s ease-out; } .modern-dropdown-alt summary::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.5rem; background-image: url("data:image/svg+xml;charset=UTF-8,\ \ \ "); background-repeat: no-repeat; background-size: contain; transition: transform 0.4s ease-out; } .modern-dropdown-alt summary::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: auto; background-image: url("data:image/svg+xml;charset=UTF-8,\ \ "); background-repeat: no-repeat; background-size: contain; transition: transform 0.4s ease-out; } .modern-dropdown-alt[open] summary::after { transform: rotate(180deg); } .modern-dropdown-alt .mla-content { transform: scaleY(0); transform-origin: top; opacity: 0; padding: 0 1.25rem; transition: transform 0.2s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out; } .modern-dropdown-alt[open] .mla-content { transform: scaleY(1); opacity: 1; padding: 1rem 1.25rem; } .modern-dropdown-alt summary:hover { border-bottom-width: 6px; border-bottom-color: #5fa913; animation: pulse-border 1s infinite alternate; } @keyframes pulse-border { to { border-bottom-color: #9ccc3f; } } .modern-dropdown-alt summary:hover h3 { color: #7bae1f; } .modern-dropdown-alt summary:hover::before { animation: icon-bounce 0.6s both; } .modern-dropdown-alt summary:hover::after { animation: arrow-bounce 0.6s both; } /* No Gray for Alle Produkte */ [data-listing], [data-listing-options] { } [data-listing] .product-box .product-image, [data-listing-options] .product-box .product-image { filter: none !important; transition: none !important; } /* no gray Produkte page */ /* [data-listing-options*="018ee625e468769fae9ca637163bc7a0"] .product-box .product-image { filter: none !important; transition: none !important; } */ /* Dropdown */ /* .modern-dropdown-alt { margin: 2em 0; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; } .modern-dropdown-alt:hover, .modern-dropdown-alt[open] { border-color: #7bae1f; box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 0 0 2px rgba(123,174,31,0.7); } .modern-dropdown-alt summary { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; background: #fff; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.05); transition: background .2s ease; } .modern-dropdown-alt summary:hover { background: #f9f9f9; } .modern-dropdown-alt summary * { } .modern-dropdown-alt summary::after { content: '▼'; font-size: 1rem; color: #7bae1f; transition: transform .3s ease; } .modern-dropdown-alt[open] summary::after { transform: rotate(180deg); } .modern-dropdown-alt .mla-content { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-8px); transition: max-height .5s cubic-bezier(0.4,0,0.2,1), opacity .3s ease .1s, transform .3s ease .1s, padding .2s ease; padding: 0 1.5rem; background: #fdfdfd; } .modern-dropdown-alt[open] .mla-content { max-height: 2000px; opacity: 1; transform: translateY(0); padding: 1rem 1.5rem; } @keyframes slideFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .modern-dropdown-alt[open] .mla-content > * { opacity: 0; animation: slideFade .4s ease forwards; } .modern-dropdown-alt[open] .mla-content > *:nth-child(1) { animation-delay: 0.05s; } .modern-dropdown-alt[open] .mla-content > *:nth-child(2) { animation-delay: 0.10s; } .modern-dropdown-alt[open] .mla-content > *:nth-child(3) { animation-delay: 0.15s; } .modern-dropdown-alt[open] .mla-content > *:nth-child(4) { animation-delay: 0.20s; } .modern-dropdown-alt[open] .mla-content > *:nth-child(5) { animation-delay: 0.25s; } .modern-dropdown-alt .mla-content > * + * { margin-top: 1em; } */ /* Dropdown -1 */ /* .modern-dropdown-alt { border-left: 4px solid #7bae1f; border-radius: 0 8px 8px 0; background: #fff; overflow: hidden; margin: 1.5em 0; transition: box-shadow .3s ease; } .modern-dropdown-alt[open] { animation: accentPulse .4s ease forwards; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } @keyframes accentPulse { 0% { border-left-width: 4px; } 50% { border-left-width:12px; } 100% { border-left-width: 8px; } } .modern-dropdown-alt summary { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; cursor: pointer; background: #fafafa; transition: background .3s ease, box-shadow .3s ease; } .modern-dropdown-alt summary:hover { background: rgba(123,174,31,0.1); box-shadow: inset 0 -2px 0 rgba(123,174,31,0.3); } .modern-dropdown-alt summary * { } .modern-dropdown-alt summary::after { content: '⌄'; font-size: 1em; line-height: 1; color: #7bae1f; transition: transform .3s ease; } .modern-dropdown-alt[open] summary::after { transform: rotate(180deg); animation: arrowBounce .4s ease; } @keyframes arrowBounce { 0% { transform: translateY(0) rotate(180deg); } 30% { transform: translateY(-4px) rotate(180deg); } 60% { transform: translateY(0) rotate(180deg); } 100% { transform: translateY(0) rotate(180deg); } } .modern-dropdown-alt .mla-content { transform: scaleY(0); transform-origin: top; opacity: 0; transition: padding .3s ease; padding: 0 1.25rem; } .modern-dropdown-alt[open] .mla-content { transform: scaleY(1); opacity: 1; padding: 1rem 1.25rem; } @keyframes slideFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .modern-dropdown-alt[open] .mla-content > * { opacity: 0; animation: slideFade .4s ease forwards; } .modern-dropdown-alt[open] .mla-content > *:nth-child(1) { animation-delay: 0.05s; } .modern-dropdown-alt[open] .mla-content > *:nth-child(2) { animation-delay: 0.10s; } .modern-dropdown-alt[open] .mla-content > *:nth-child(3) { animation-delay: 0.15s; } .modern-dropdown-alt[open] .mla-content > *:nth-child(4) { animation-delay: 0.20s; } .modern-dropdown-alt[open] .mla-content > *:nth-child(5) { animation-delay: 0.25s; } .modern-dropdown-alt .mla-content > * + * { margin-top: 1em; } */ /* .modern-dropdown-alt summary { display: flex; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #eee; background: transparent; cursor: pointer; } .modern-dropdown-alt summary::-webkit-details-marker { display: none; } .modern-dropdown-alt summary h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.2; } .modern-dropdown-alt summary::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.5rem; background-image: url("data:image/svg+xml;charset=UTF-8,\ \ \ "); background-repeat: no-repeat; background-size: contain; } .modern-dropdown-alt summary::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: auto; background-image: url("data:image/svg+xml;charset=UTF-8,\ \ "); background-repeat: no-repeat; background-size: contain; transition: transform .3s ease; } .modern-dropdown-alt[open] summary::after { transform: rotate(180deg); } .modern-dropdown-alt .mla-content { transform: scaleY(0); transform-origin: top; opacity: 0; padding: 0 1.25rem; transition: transform .3s ease, opacity .3s ease, padding .3s ease; } .modern-dropdown-alt[open] .mla-content { transform: scaleY(1); opacity: 1; padding: 1rem 1.25rem; } */ /* maybe wrong, Scrolling anamations */ .product-box, .cms-block { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; visibility: visible; } .in-view { opacity: 1; transform: translateY(0); visibility: visible !important; } /* .product-box, .cms-block { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .in-view { opacity: 1; transform: translateY(0); } */ /* Live iframe */ .tablet-mockup { width: 920px; height: 600px; margin: 40px auto; perspective: 1000px; position: relative; user-select: none; } .tablet { position: relative; width: 100%; height: 100%; border: 16px solid #333; border-radius: 30px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); background: #fff; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .tablet:hover { transform: scale(1.02); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3); } .tablet iframe { display: block; width: 100%; height: 100%; border: none; } .preview-label { position: absolute; top: 15px; left: 15px; background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 6px 12px; font-size: 14px; border-radius: 20px; z-index: 10; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .tablet-stand { width: 60%; height: 20px; background: #333; margin: 20px auto 0; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .resizer { width: 30px; height: 30px; background: #7BAE1F; position: absolute; right: 0; bottom: 0; cursor: se-resize; z-index: 100; border-top-left-radius: 5px; display: flex; align-items: center; justify-content: center; } .resizer::after { content: "↘"; font-size: 18px; color: #fff; } .iframe-btn-container { text-align: center; margin-top: 40px; } .external-link-btn { background: linear-gradient(45deg, #7BAE1F, #4A8D15); border: none; color: #fff; padding: 10px 20px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background 0.3s; border-radius: 0 10px; margin-top: 40px; } .external-link-btn:hover { background: linear-gradient(45deg, #4A8D15, #7BAE1F); } @media (max-width: 950px) { .tablet-mockup { width: 90%; height: calc(90% * (600 / 920)); margin: 20px auto; } .tablet { border-width: 12px; border-radius: 20px; } .tablet-stand { width: 70%; height: 15px; } .preview-label { font-size: 12px; padding: 4px 10px; } } @media (max-width: 600px) { .tablet-mockup { width: 360px; height: calc(360px * (600 / 920)); margin: 15px auto; } .tablet { border-width: 8px; border-radius: 15px; } .tablet-stand { width: 80%; height: 10px; margin-top: 10px; } .preview-label { font-size: 10px; padding: 3px 6px; top: 10px; left: 10px; } .resizer { width: 25px; height: 25px; } .resizer::after { font-size: 14px; } .external-link-btn { font-size: 14px; padding: 8px 16px; } } /* .tablet-mockup { width: 920px; height: 600px; margin: 40px auto; perspective: 1000px; position: relative; user-select: none; } .tablet { position: relative; width: 100%; height: 100%; border: 16px solid #333; border-radius: 30px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); background: #fff; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .tablet:hover { transform: scale(1.02); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3); } .tablet iframe { display: block; width: 100%; height: 100%; border: none; } .preview-label { position: absolute; top: 15px; left: 15px; background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 6px 12px; font-size: 14px; border-radius: 20px; z-index: 10; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .tablet-stand { width: 60%; height: 20px; background: #333; margin: 20px auto 0; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .resizer { width: 30px; height: 30px; background: #7BAE1F; position: absolute; right: 0; bottom: 0; cursor: se-resize; z-index: 100; border-top-left-radius: 5px; display: flex; align-items: center; justify-content: center; } .resizer::after { content: "↘"; font-size: 18px; color: #fff; } @media (max-width: 950px) { .tablet-mockup { width: 90%; height: auto; margin: 20px auto; } .tablet { border-width: 12px; border-radius: 20px; } .tablet-stand { width: 70%; height: 15px; } .preview-label { font-size: 12px; padding: 4px 10px; } } */ /* .tablet-mockup { width: 920px; margin: 40px auto; perspective: 1000px; } .tablet { position: relative; width: 100%; height: 600px; border: 16px solid #333; border-radius: 30px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); background: #fff; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .tablet:hover { transform: scale(1.02); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3); } .tablet iframe { display: block; width: 100%; height: 100%; border: none; } .preview-label { position: absolute; top: 15px; left: 15px; background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 6px 12px; font-size: 14px; border-radius: 20px; z-index: 10; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .tablet-stand { width: 60%; height: 20px; background: #333; margin: 20px auto 0; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } @media (max-width: 950px) { .tablet-mockup { width: 90%; margin: 20px auto; } .tablet { height: 500px; border-width: 12px; border-radius: 20px; } .tablet-stand { width: 70%; height: 15px; } .preview-label { font-size: 12px; padding: 4px 10px; } } */ /*
Live Preview
.website-preview { position: relative; margin: 20px auto; max-width: 1200px; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #ddd; } .website-preview:hover { transform: scale(1.02); box-shadow: 0 12px 24px rgba(0,0,0,0.4); } .website-preview iframe { display: block; width: 100%; height: 600px; border: none; } .preview-label { position: absolute; top: 15px; left: 15px; background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 6px 12px; font-size: 14px; border-radius: 20px; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } */ /* Cross Selling smaller text */ .cms-block-cross-selling { font-size: 0.85rem; } .cms-block-cross-selling .product-box .product-name, .cms-block-cross-selling .product-box .product-description, .cms-block-cross-selling .product-box .product-price { font-size: 0.85rem; } .cms-block-cross-selling .product-box .card-body { padding: 0.5rem; } .cms-block-cross-selling .product-box .product-info > * { margin-bottom: 10px; /*0.25rem; */ } .cms-block-cross-selling .product-box .product-name { margin-bottom: 10px !important; height: auto !important; } .cms-block-cross-selling .product-box .product-description { margin-top: 0 !important; } /* https://shop.onmaps.de/account/payment Button resize */ .account-payment-card button.btn.btn-primary { padding: 0.375rem 0.75rem !important; font-size: 0.875rem !important; line-height: 1.5; } /* https://shop.onmaps.de/account/address Buttons fix */ .address-action-create a.btn.btn-primary { padding: 0.375rem 0.75rem !important; font-size: 0.875rem !important; } .address-action-create a.btn.btn-primary .icon-plus svg path { fill: #fff !important; } .card-actions.row.g-0.pt-2 a.btn.btn-sm.btn-light { margin-top: 20px !important; } .card-actions.row.g-0.pt-2 a.btn.btn-sm.btn-light:hover { color: #fff !important; } /* https://shop.onmaps.de/account/profile Its s stupid or smart way, donno yet but it works */ #profilePersonalForm .profile-form-submit { background-color: #7BAE1F !important; border-color: #7BAE1F !important; color: #fff !important; --bs-btn-bg: #7BAE1F !important; --bs-btn-border-color: #7BAE1F !important; --bs-btn-hover-bg: #61881A !important; --bs-btn-hover-border-color: #61881A !important; } #profilePersonalForm .profile-form-submit:hover, #profilePersonalForm .profile-form-submit:focus { background-color: #61881A !important; border-color: #61881A !important; color: #fff !important; } /* Bigger imgs */ .cms-block-image-text .cms-element-image, .cms-block-image-text .cms-element-alignment, .cms-block-image-text .cms-image-container, .cms-block-zen-grid-6-6 .cms-element-image, .cms-block-zen-grid-6-6 .cms-element-alignment, .cms-block-zen-grid-6-6 .cms-image-container { width: 100% !important; flex: 1 1 100% !important; } .cms-block-image-text .cms-element-image img, .cms-block-zen-grid-6-6 .cms-element-image img { display: block; width: 100% !important; height: auto !important; max-width: none !important; object-fit: contain !important; } /* TODO TODO */ /* Newletter Abo */ .form-group.flex-fill .input-group { position: relative; } .form-group.flex-fill .input-group > button.btn.btn-primary { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: none; box-shadow: none; padding: 0; width: auto; flex: none; } .form-group.flex-fill .input-group > button.btn.btn-primary .icon-arrow-head-right svg { display: none; } /* https://symbl.cc/de/collections/arrow-symbols/ */ .form-group.flex-fill .input-group > button.btn.btn-primary .icon-arrow-head-right::after { content: " ➜ "; font-size: 16px; color: #F49E4C; display: inline-block; line-height: 1; } /* .form-group.flex-fill .input-group > button.btn.btn-primary .icon-arrow-head-right svg use { fill: #F49E4C !important; } */ /* Cart Button, Angebot */ /* Angebot anfordern button */ .prems-individual-offer__offer-request-btn, .prems-individual-offer__offer-request-btn:link, .prems-individual-offer__offer-request-btn:visited { display: inline-block; color: #fff !important; font-family: var(--font-family); font-size: 1rem; font-weight: 700; text-align: center; vertical-align: middle; background-color: #F49E4C !important; border: 1px solid #F49E4C !important; padding: 0.75rem 1.5rem; line-height: 1.5; border-radius: 0.3rem; text-decoration: none; cursor: pointer; margin-top: 10px; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .prems-individual-offer__offer-request-btn:hover { background-color: #DC8E44 !important; border-color: #DC8E44 !important; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); transform: translateY(-2px); color: #fff !important; } .prems-individual-offer__offer-request-btn:active { background-color: #CF8641 !important; border-color: #CF8641 !important; color: #fff !important; transform: translateY(0); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3); } .prems-individual-offer__offer-request-btn:focus { outline: none; box-shadow: 0 0 0 0.25rem rgba(244, 158, 76, 0.5); } /* .prems-individual-offer__offer-request-btn { display: inline-block; color: #fff; font-family: var(--font-family); font-size: 1rem; font-weight: 700; text-align: center; vertical-align: middle; background-color: #F49E4C; border: 1px solid #F49E4C; padding: 0.75rem 1.5rem; line-height: 1.5; border-radius: 0.3rem; text-decoration: none; cursor: pointer; margin-top: 10px; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .prems-individual-offer__offer-request-btn:hover { background-color: #e48d3d; border-color: #e48d3d; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); transform: translateY(-2px); color: #fff; } .prems-individual-offer__offer-request-btn:focus { outline: none; box-shadow: 0 0 0 0.25rem rgba(244, 158, 76, 0.5); } .prems-individual-offer__offer-request-btn:active { background-color: #d67c2e; border-color: #d67c2e; color: #fff; transform: translateY(0); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3); } */ /* Table Design Prudocts Page */ /* .product-detail-properties .product-detail-properties-container > .col-md-10, .product-detail-properties .product-detail-properties-container > .col-lg-6 { flex: 0 0 100%; max-width: auto; padding-right: 15px; } .product-detail-properties { max-width: 3200px; padding: 0 15px; } .product-detail-properties-table { width: 100%; margin: 0; } */ /*Here Here */ /* Header with Icons and link- md one */ #customHeaderOverlay { background: #7BAE1F; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 1001; padding: 0 20px; position: relative; } #customHeaderOverlay, #customHeaderOverlay * { box-sizing: border-box; } #customHeaderOverlay .header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 47px; gap: 10px; } #customHeaderOverlay .header-left, #customHeaderOverlay .header-right { min-width: 0; } #customHeaderOverlay .header-left { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; } #customHeaderOverlay .header-left-desktop { display: flex; align-items: center; min-width: 0; overflow: hidden; } #customHeaderOverlay .header-left-desktop a { text-decoration: none; color: #fff; font-family: "Lato", sans-serif; font-size: 16px; font-weight: normal; padding: 0 15px; transition: all 0.3s; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } #customHeaderOverlay .header-left-desktop a:hover { border-bottom: 2px solid #fff; } #customHeaderOverlay .header-separator { color: #ffffff; margin: 0 10px; opacity: 0.8; white-space: nowrap; } #customHeaderOverlay .header-right { display: flex; gap: 15px; flex: 0 0 auto; white-space: nowrap; } #customHeaderOverlay .header-right a { text-decoration: none; color: #fff; transition: all 0.3s; padding: 0 5px; display: inline-flex; align-items: center; cursor: pointer; } #customHeaderOverlay .header-right a:hover { border-bottom: 2px solid #fff; } #customHeaderOverlay .header-right i { font-size: 18px; } #customHeaderOverlay .header-menu-toggle { display: none; border: 0; background: transparent; color: #fff; padding: 0 8px; height: 36px; cursor: pointer; align-items: center; gap: 8px; white-space: nowrap; } #customHeaderOverlay .header-menu-toggle i { font-size: 18px; } #customHeaderOverlay .header-menu-toggle-text { font-family: "Lato", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; } #customHeaderOverlay .header-mobile-menu { display: none; position: absolute; left: 0; right: 0; top: 47px; background: #7BAE1F; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); padding: 10px 12px; z-index: 1002; } #customHeaderOverlay .header-mobile-menu a { display: block; text-decoration: none; color: #fff; font-family: "Lato", sans-serif; font-size: 15px; font-weight: normal; padding: 10px 8px; white-space: nowrap; } #customHeaderOverlay .header-mobile-menu a:hover { background: rgba(255, 255, 255, 0.12); } #customHeaderOverlay .header-mobile-menu.is-open { display: block; } @media (max-width: 846px) { #customHeaderOverlay { padding: 0 10px; } #customHeaderOverlay .header-container { max-width: 100%; padding: 0 10px; } #customHeaderOverlay .header-left-desktop a { font-size: 14px; padding: 0 10px; } #customHeaderOverlay .header-separator { margin: 0 6px; opacity: 0.7; } #customHeaderOverlay .header-right { gap: 10px; } } @media (max-width: 650px) { #customHeaderOverlay .header-left-desktop { display: none; } #customHeaderOverlay .header-menu-toggle { display: inline-flex; margin-left: 34px; } } @media (max-width: 576px) { #customHeaderOverlay .header-container { padding: 0 10px; } } #customHeaderOverlay .header-right .top-bar-logout svg { fill: #ffffff !important; } .top-bar-logout-item { font-size: 0; line-height: 0; } .top-bar-logout-item .icon { font-size: 16px; line-height: normal; color: #fff !important; } .top-bar-logout-item .icon svg { fill: #fff !important; } /*Here Here */ /* #customHeaderOverlay .header-right .top-bar-logout svg { fill: #ffffff !important; } .top-bar-logout-item { font-size: 0; line-height: 0; } .top-bar-logout-item .icon { font-size: 16px; line-height: normal; color: #fff !important; } .top-bar-logout-item .icon svg { fill: #fff !important; } */ /*Remove unneeded Icons */ .nav-header .header-actions-col .account-menu, .nav-header .header-actions-col .header-cart { display: none !important; } /* Center Logo for Mobile View 1152 */ @media (max-width: 1160px) { .nav-header .header-row { display: flex; align-items: center; justify-content: space-between; } .nav-header .header-logo-col { order: 2; flex: 1; text-align: center; margin: 0; } .nav-header .header-menu-button { order: 1; margin: 0; } .nav-header .header-actions-col { order: 3; margin: 0; } } /* Newsletter section */ /* .newsletter-inner-text { position: relative; min-height: 70px; color: transparent; /* display: none !important; / } .newsletter-inner-text::before { content: "Immer auf dem laufenden bleiben"; /* position: absolute; / left: 13.02%; top: 0; font-family: 'Lato'; font-style: normal; font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: 0.02em; text-transform: uppercase; color: #FFFFFF; } .newsletter-inner-text::after { content: "Newsletter-Anmeldung"; position: absolute; left:3.5%; top: 30px; font-family: 'Lato'; font-style: normal; font-weight: 700; font-size: 30px; line-height: 36px; color: #FFFFFF; } @media (max-width: 950px) { .newsletter-inner-text { min-height: 85px; } .newsletter-inner-text::before { left: 5%; top: 0; font-size: 14px; line-height: 22px; } .newsletter-inner-text::after { left: 6%; top: 32px; font-size: 24px; line-height: 30px; } } */ /* Newsletter section .newsletter-inner-text { position: relative; min-height: 70px; color: transparent; } .newsletter-inner-text::before { content: "Immer auf dem laufenden bleiben"; position: absolute; left: 13.02%; top: 0; font-family: 'Lato'; font-style: normal; font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: 0.02em; text-transform: uppercase; color: #FFFFFF; } .newsletter-inner-text::after { content: "Newsletter-Anmeldung"; position: absolute; left: 13.02%; top: 30px; font-family: 'Lato'; font-style: normal; font-weight: 700; font-size: 30px; line-height: 36px; color: #FFFFFF; } @media (max-width: 950px) { .newsletter-inner-text { min-height: 85px; } .newsletter-inner-text::before { left: 5%; top: 0; font-size: 14px; line-height: 22px; } .newsletter-inner-text::after { left: 5%; top: 32px; font-size: 24px; line-height: 30px; } } */ /* BLOG POST PAGE */ .shop-studio-blog-blog-post-detail, .shop-studio-blog-blog-post-detail-layout, .shop-studio-blog-blog-post-detail-layout--default, .shop-studio-blog-blog-post-detail-layout__content { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; } .shop-studio-blog-blog-post-detail-layout__content .container, .shop-studio-blog-blog-post-detail-layout__content .row { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; } .shop-studio-blog-blog-post-detail-layout__content { padding-left: 20px !important; padding-right: 20px !important; } .shop-studio-blog-blog-post-detail-main-image { text-align: center; } .shop-studio-blog-blog-post-detail-main-image img { display: block; margin: 0 auto; max-width: 100%; } /* Header with Icons- md one */ /* #customHeaderOverlay { display: block; width: 100%; height: 47px; background: #7BAE1F; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 1001; } #customHeaderOverlay .header-container { display: flex; justify-content: space-between; align-items: center; padding: 0 15px; height: 100%; } #customHeaderOverlay .header-left a { text-decoration: none; color: #fff; font-family: "Lato", sans-serif; font-size: 16px; font-weight: 700; padding: 0 5px; transition: all 0.3s; cursor: pointer; } #customHeaderOverlay .header-left a:hover { border-bottom: 2px solid #fff; } #customHeaderOverlay .header-right { display: flex; gap: 15px; } #customHeaderOverlay .header-right a { text-decoration: none; color: #fff; transition: all 0.3s; padding: 0 5px; display: inline-flex; align-items: center; cursor: pointer; } #customHeaderOverlay .header-right a:hover { border-bottom: 2px solid #fff; } #customHeaderOverlay .header-right i { font-size: 18px; } @media (max-width: 600px) { #customHeaderOverlay { height: 45px; } #customHeaderOverlay .header-container { padding: 0 10px; gap: 10px; } #customHeaderOverlay .header-left a { font-size: 15px; padding: 0 3px; } #customHeaderOverlay .header-right a { padding: 0 3px; } #customHeaderOverlay .header-right i { font-size: 16px; } } @media (max-width: 500px) { #customHeaderOverlay { height: 40px; } #customHeaderOverlay .header-container { flex-wrap: wrap; justify-content: center; padding: 0 5px; } #customHeaderOverlay .header-left, #customHeaderOverlay .header-right { width: 100%; display: flex; justify-content: center; margin: 2px 0; } #customHeaderOverlay .header-left a { font-size: 14px; padding: 0 2px; } #customHeaderOverlay .header-right a { padding: 0 2px; } #customHeaderOverlay .header-right i { font-size: 14px; } } */ /* Header with no Icons- md one */ /* #customHeaderOverlay { display: block; width: 100%; height: 47px; background: #7BAE1F; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 1001; } #customHeaderOverlay .header-container { display: flex; justify-content: center; align-items: center; gap: 15px; height: 100%; margin: 0; padding: 0; } #customHeaderOverlay a { text-decoration: none; color: #fff; font-family: "Lato", sans-serif; font-size: 16px; font-weight: 700; padding: 0 5px; transition: all 0.3s; position: relative; cursor: pointer; } #customHeaderOverlay a:hover { border-bottom: 2px solid #fff; } .nav-header.bg-opacity-100 { margin-top: 0; } @media (max-width: 400px) { #customHeaderOverlay { height: 40px; } #customHeaderOverlay .header-container { gap: 5px; padding: 0 5px; } #customHeaderOverlay a { font-size: 14px; padding: 0 3px; } } */ /* Preis auf anfrage */ /* div[itemprop="offers"] { position: relative; padding-top: 2rem; } div[itemprop="offers"]::before { content: "Preis"; position: absolute; top: 0; left: 0; font-size: 1rem; font-family: Lato; color: #495057; font-weight: 700; } .product-cheapest-price { font-family: Lato; font-weight: 500; display: inline-block; margin: 0; padding: 0.375rem 0.75rem; border: 1px solid #3B8EA5; /* border-radius: 0.25rem; / background-color: #7bae1f; color: #fff;/* 495057/ font-size: 1rem; line-height: 1.5; text-align: center; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .product-cheapest-price:hover { color: #495057; /*fff / background-color:#fff; /* #7bae1f; / border-color: #adb5bd; } */ .product-cheapest-price { color: #7bae1f; /* font-size: calc(1.35rem + 1.2vw); */ font-weight: 700; font-family: "Lato", sans-serif; vertical-align: middle; display: inline-block; margin: 0; padding: 1rem 0rem; /* 0.375rem 0.75rem; */ font-size: 36px; /* 2.5rem; /*36px*/ } .cms-listing-col .product-cheapest-price { color: #7bae1f; /* font-size: calc(1.35rem + 1.2vw); */ font-weight: 700; font-family: "Lato", sans-serif; vertical-align: middle; display: inline-block; margin: 0; padding: 1rem 0rem; /* 0.375rem 0.75rem; */ font-size: 1.3rem; /*36px*/ } /* .cms-element-buy-box [itemprop="offers"] { display: flex; flex-direction: column; } .product-cheapest-price { order: 9999; } .product-detail-form-container { order: 10000; } .cms-element-buy-box [itemprop="offers"] > hr { order: 10001; } */ /* Change the Price Style and etc.. */ .product-price { color: #6E6E6E !important; font-weight: bold !important; } .product-price::before { content: "ab "; } .product-price::after { content: " exkl. MwSt."; } /* NO NEED FOR THIS ONE FOR NOW BUT GONNA KEEP IT FOR LATER /* Ignore the css for the header ICONS top right / /* Remove any borders for header action buttons / .header-actions-col .header-actions-btn { border: none !important; } /* Ensure no border appears on hover / .header-actions-col .header-actions-btn:hover { border: none !important; background-color: transparent !important; color: inherit !important; transform: none !important; box-shadow: none !important; transition: none !important; } */ /* --- Custom Classes file --- */ .one-size { display: block; width: var(--one-size-width, 100px); height: var(--one-size-height, 100px); object-fit: contain; } .rounded-img .cms-image { border-radius: 8px !important; overflow: hidden; } /* --- Mobile Fix: Ensure product buttons and slider controls are visible --- */ @media (max-width: 991px) { /* Ensure the container for the product-action area has enough space and a high z-index */ .product-action { display: block !important; position: relative; z-index: 10; min-height: 40px; /* must be tested */ } /* Override grid layout that might be collapsing the button container */ .product-action .d-grid { display: block !important; } /* Force the product buttons to display as inline-block and be visible */ .product-action a.btn { display: inline-block !important; width: auto !important; opacity: 1 !important; visibility: visible !important; } /* Also ensure that the slider navigation buttons are not hidden */ .shop-studio-blog-blog-post-slider__controls-container button { display: block !important; opacity: 1 !important; visibility: visible !important; } } /* --- login and registration forms --- */ /* Style the form fields (inputs, selects, textareas) */ .login-form .form-control, .login-form .form-select, .register-form .form-control, .register-form .form-select { background-color: #F0F0F0; border-color: #7BAE1F; color: #6E6E6E; } /* styling on focus */ .login-form .form-control:focus, .login-form .form-select:focus, .register-form .form-control:focus, .register-form .form-select:focus { background-color: #F0F0F0; color: #6E6E6E; border-color: #7BAE1F; box-shadow: 0 0 0 0.2rem rgba(123, 174, 31, 0.25); } /* --- Reposition and style the submit buttons --- */ .login-form button[type="submit"], .register-form button[type="submit"] { float: left; background-color: #F49E4C; color: white !important; border: none; transition: filter 0.3s ease; margin-top: 20px; } /* --- Button hover background and shadow --- */ .login-form button[type="submit"]:hover, .register-form button[type="submit"]:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); border-color: transparent; transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; transform: scale(1.05); } /* --- Custom styles for contact form ( #cms-form-contact) --- */ /* Style the form fields (inputs, selects, textareas) */ #cms-form-contact .form-control, #cms-form-contact .form-select { background-color: #F0F0F0; /* Field background color */ border-color: #7BAE1F; /* Border (line) color */ color: #6E6E6E; /* User input text color */ } /* Maintain same styling on focus */ #cms-form-contact .form-control:focus, #cms-form-contact .form-select:focus { background-color: #F0F0F0; color: #6E6E6E; border-color: #7BAE1F; box-shadow: 0 0 0 0.2rem rgba(123, 174, 31, 0.25); } /* --- Reposition and style the submit button --- */ #cms-form-contact button[type="submit"] { float: left; /* Move button to the left */ background-color: #F49E4C; /* Button background color */ color: white !important; /* Button text color white */ border: none; /* Remove any default border */ transition: filter 0.3s ease; /* Added transition for filter effects */ margin-top:20px; } /* Append an arrow (➔) to the button text */ #cms-form-contact button[type="submit"]::after { content: " ➔"; /* Adds arrow after button text */ color: white; /* Arrow color white */ } /* --- Button hover state: maintain background and add shadow --- */ #cms-form-contact button[type="submit"]:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add shadow on hover */ border-color: transparent; /* Removes the border color */ /* transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition */ transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; transform: scale(1.05); } /* Apply grayscale to product images initially in Anwendungen/Queries/ */ /* Apply grayscale to product images inside product-box */ .product-box .product-image { filter: grayscale(100%); transition: filter 0.3s ease; } /* Remove grayscale on hover */ .product-box .product-image:hover { filter: grayscale(0%); } /* Apply grayscale to News List in The Home Page */ .cms-block-product-slider #tns2 img { filter: grayscale(100%); transition: filter 0.3s ease; } .cms-block-product-slider #tns2 img:hover { filter: grayscale(0%); } /* Apply grayscale to News List in News Page */ .cms-listing-row img { filter: grayscale(100%); transition: filter 0.3s ease; } .cms-listing-row img:hover { filter: grayscale(0%); } /* Apply grayscale to product images initially */ .cms-element-product-box .product-image { filter: grayscale(100%); transition: filter 0.3s ease; } /* Remove grayscale on hover */ .cms-element-product-box .product-image:hover { filter: grayscale(0%); } /* I THINK ITS EFFECTING EVERYTHING NOW */ /* Transition for btn-detail elements */ a.btn-detail { transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } /* Custom hover for btn-detail with gradient, scale, and box-shadow */ a.btn-detail:hover { background: linear-gradient(45deg, #4CAF50, #466BB6A); transform: scale(1.05); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); color: #fff; } /* This must be changed, it fucked up everything, so i gonna blind it for now */ /* --- Generic button hover for all .btn elements except btn-detail --- */ /* Using :not(.btn-detail) to avoid conflicts with the custom btn-detail hover */ /******************** .btn:hover:not(.btn-detail) { color: #fff; /* Ensures text remains white on hover / background-color: #7BAE1F; /* Green background / border-color: transparent; /* Removes the border color / transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition / } */ /* --- Combined .btn-primary rules --- */ .btn-primary { font-size: 18px; color: white; --bs-btn-hover-bg: #61881A; --bs-btn-hover-border-color: #61881A; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); border-color: transparent; } .btn-primary:hover, .btn-primary:focus { color: white; } /* --- Product badges styling --- */ .product-badges .badge { margin-left: -14px; margin-top: -14px; font-size: 16px; padding: 3px 8px; background-color: #7BAE1F; user-select:none; } /* --- Product badges styling EXTRTA --- */ .product-badges { position: relative; } .product-badges.has-bundle::after { content: "Bundle"; position: absolute; top: -14px; right: 36px; /* font-size: 16px; */ padding: 3px 8px; background-color: #7BAE1F; color: #fff; text-transform: uppercase; font-family: Lato; font-weight: 700; /* user-select: text; Allows text selection */ } /* --- Discount (VIEWER) badge styling --- */ .product-badges.has-view::before { content: "Inkl. viewer"; position: absolute; top: -14px; right: 54px; /* font-size: 16px; */ padding: 3px 8px; background-color: #7BAE1F; color: #fff; text-transform: uppercase; font-family: Lato; font-weight: bold; /* user-select: text; user-select: text; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; */ } .line-item-delivery-date, .shipping-cost { display: none; } /* --- Heading line heights --- */ /* h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { line-height: 1.2; } */ /********************START SECOUND ******/ /* Base Variables for Consistency / :root { --font-family: 'Lato', sans-serif; --primary-color: #7BAE1F; --primary-hover: #689e1a; --text-color: #4D4D4D; --border-color: #dee2e6; --bg-light: #f8f8f8; --transition-speed: 0.3s; --max-width: 800px; } /* Global Reset / *, *::before, *::after { box-sizing: border-box; } /* Base Styles / body { font-family: var(--font-family); color: var(--text-color); margin: 0; padding: 0; background-color: #fff; line-height: 1.6; } /* Container / /* .container { max-width: var(--max-width); margin: 0 auto; padding: 20px; background-color: #fff; } /* Headings / h1, h2, h3, h4, h5, h6 { font-family: var(--font-family); color: var(--text-color); margin: 1.2rem 0 0.8rem; line-height: 1.2; } h1 { font-size: 2.5rem; font-weight: 500; border-bottom: 2px solid var(--primary-color); padding-bottom: 0.3rem; } h2 { font-size: 1.75rem; font-weight: 700; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 0.2rem; margin-top: 2rem; } /* Paragraphs and Lists / p { font-size: 1rem; margin: 1rem 0; } ul, ol { margin: 1rem 0 1rem 1.5rem; padding: 0; } li { font-family: var(--font-family); font-weight: 500; color: black; font-size: 18px; line-height: 1.6; margin-bottom: 0.5rem; } /* Links / a { color: var(--primary-color); text-decoration: none; transition: color var(--transition-speed); } a:hover { color: var(--primary-hover); text-decoration: underline; } */ /* Utility Classes for Margins / .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 1rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 1rem; } /* Responsive Adjustments / @media (max-width: 600px) { body { padding: 10px; } .container { padding: 15px; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } p, li { font-size: 0.95rem; } } /************************END SECOUND **********/ /* TEXT STYLE */ /* Base Variables for Consistency */ :root { --font-family: 'Lato', sans-serif; --primary-color: #7BAE1F; --primary-hover: #689e1a; --text-color: #4D4D4D; --subtext-color: #7BAE1F; --border-color: #dee2e6; --bg-light: #f8f8f8; --offcanvas-bg: #ffffff; --transition-speed: 0.3s; } /* Base Styles */ body { font-family: var(--font-family); color: var(--text-color); margin: 0; padding: 0; background: #fff; line-height: 1.6; } /* Headings */ h1, h2, h3, h4, h5, h6 { /* www margin: 1.2rem 0 0.8rem; */ /* www margin : auto; */ font-family: var(--font-family); color: var(--text-color); } h1 { font-weight: 500; font-size: 48px; line-height: 72px; } h2 { font-weight: 700; font-size: 26px; line-height: 31px; letter-spacing: 0.02em; } h3 { font-weight: 700; font-size: 32px; line-height: 55px; color: var(--primary-color); } h4, .caption-h4 { font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: 0.02em; } h5, .caption-h5 { font-weight: 700; font-size: 30px; line-height: 36px; color: var(--primary-color); } h6 { font-weight: 700; font-size: 16px; line-height: 19px; color: #3B8EA5; } /* Paragraphs and Lead Text */ p, .lead { font-family: var(--font-family); font-weight: 500; font-size: 18px; line-height: 1.6; /*www margin: 0 0 1.5rem; */ } /* Lists */ ul, ol { font-family: var(--font-family); font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--text-color); opacity: 0.8; margin: 0 0 1.5rem 1.5rem; padding: 0; } /* Testo */ li { font-family: var(--font-family); font-weight: 500; color: black; font-size: 18px; line-height: 1.6; } /************************END***************/ /* Offcanvas Styling */ /* .offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } */ .offcanvas-close { background: none; border: none; color: var(--text-color); font-size: 1.5rem; cursor: pointer; transition: color var(--transition-speed); } .offcanvas-close:hover { color: var(--primary-color); } .offcanvas-title { font-size: 1.25rem; font-weight: 700; } /* Offcanvas Body */ .offcanvas-body { padding: 1.5rem; background-color: var(--offcanvas-bg); } /* Product Detail Description */ .product-detail-description { margin-bottom: 2rem; } /* Table Styling */ .product-detail-properties-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 1.5rem; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; } .product-detail-properties-table th, .product-detail-properties-table td { padding: 0.75rem; vertical-align: top; border-bottom: 1px solid var(--border-color); } .product-detail-properties-table th { background-color: var(--bg-light); font-weight: 700; text-align: left; } .product-detail-properties-table tr:last-child td { border-bottom: 0; } /* Table Design Prudocts Page */ .product-detail-properties .product-detail-properties-container > .col-md-10, .product-detail-properties .product-detail-properties-container > .col-lg-6 { flex: 0 0 100%; max-width: auto; padding-right: 15px; } .product-detail-properties { max-width: 3200px; padding: 0 15px; } .product-detail-properties-table { width: 100%; margin: 0; } .product-detail-properties-table tbody tr:last-child th.properties-label, .product-detail-properties-table tbody tr:last-child td.properties-value { border-bottom: 0px solid #ddd; } /* Button Styling a.btn { display: inline-block; padding: 0.75rem 1.5rem; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: 4px; transition: background-color var(--transition-speed), color var(--transition-speed); } a.btn.btn-primary { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); } a.btn.btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); color: #fff; } */ /* Utility Spacing Classes */ .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 1rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 1rem; } /***************ABG and etc... CUSTOM ***********/ /* Define custom properties within the class scope */ .custom-content { --font-family: 'Lato', sans-serif; --primary-color: #7BAE1F; --primary-hover: #689e1a; --text-color: #4D4D4D; --border-color: #dee2e6; --bg-light: #f8f8f8; --transition-speed: 0.3s; --max-width: 800px; } /* Reset for elements inside .custom-content */ .custom-content *, .custom-content *::before, .custom-content *::after { box-sizing: border-box; } /* Base styles for content inside .custom-content */ .custom-content { font-family: var(--font-family); color: var(--text-color); margin: 0; padding: 0; background-color: #fff; line-height: 1.6; } /* Optional inner wrapper to control width */ .custom-content-wrapper { max-width: var(--max-width); margin: 0 auto; padding: 20px; background-color: #fff; } /* Headings inside .custom-content */ .custom-content h1, .custom-content h2, .custom-content h3, .custom-content h4, .custom-content h5, .custom-content h6 { font-family: var(--font-family); color: var(--text-color); margin: 1.2rem 0 0.8rem; line-height: 1.2; } .custom-content h1 { font-size: 2.5rem; font-weight: 500; border-bottom: 2px solid var(--primary-color); padding-bottom: 0.3rem; } .custom-content h2 { font-size: 1.75rem; font-weight: 700; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 0.2rem; margin-top: 2rem; } /* Paragraphs and lists inside .custom-content */ .custom-content p { font-size: 1rem; margin: 1rem 0; } .custom-content ul, .custom-content ol { margin: 1rem 0 1rem 1.5rem; padding: 0; } .custom-content li { font-family: var(--font-family); font-weight: 500; color: black; font-size: 18px; line-height: 1.6; margin-bottom: 0.5rem; } /* Utility classes (if used within your content) */ .custom-content .mt-1 { margin-top: 0.25rem; } .custom-content .mt-2 { margin-top: 0.5rem; } .custom-content .mt-3 { margin-top: 1rem; } .custom-content .mb-1 { margin-bottom: 0.25rem; } .custom-content .mb-2 { margin-bottom: 0.5rem; } .custom-content .mb-3 { margin-bottom: 1rem; } /* Responsive Adjustments */ @media (max-width: 600px) { .custom-content { padding: 10px; } .custom-content-wrapper { padding: 15px; } .custom-content h1 { font-size: 2rem; } .custom-content h2 { font-size: 1.5rem; } .custom-content p, .custom-content li { font-size: 0.95rem; } } /* --- Fixed selector for offcanvas shipping info --- */ /* dots to correctly target elements with all three classes */ .row.offcanvas.shipping-info { display: none; } .service-navigation { display: none; } .product-detail-stock { font-size: 24px; font-weight: 700; } .product-detail-stock-label { font-size: 24px; } .pt-2 { margin-top: -0.8em; } .cms-element-zen-search-banner .cms-search-form .form-control-lg { font-size: 20px; } .cart-add-product-container, .line-item-product-number { display: none; } .pagination { margin-bottom: 40px; } .cms-block-product-listing { margin-top: 60px; } .modal-lg { --bs-modal-width: 1000px; } .filter-panel-active-container { padding-top: 35px; border-top: 1px solid black; } .product-gallery-slider .base-slider-dots { display: none; } .header-main .header-cart:not(:hover) .header-cart-badge { font-size: 1rem; } /* Why I added this ? .profile-form-submit.btn.btn-light.btn-sm { color: white !important; background-color: #103150 !important; } */ /* --- Fixed option selectors --- */ /* Added quotes and combined [selected] attribute to correctly target options */ option[value="private"] { display: none; } option[value="private"][selected] { display: none; } /* --- Top bar login and register hidden --- */ .top-bar-login, .top-bar-register { display: none; } /* --- Button border radius styling --- */ .btn { border-top-right-radius: 10px; border-bottom-left-radius: 10px; } /* --- Flex-fill border radius styling --- */ .flex-fill { border-top-right-radius: 10%; border-bottom-left-radius: 10%; } /* Remove order as guest */ .form-check.register-guest-control { display: none !important; } .register-card .card-body { margin-top: 0; }