/** Shopify CDN: Minification failed Line 2123:2 Unexpected "not(" Line 4043:2 Unexpected "}" Line 5450:2 All "@import" rules must come first **/ cart-drawer.is-empty .cart__empty-content a.button, cart-drawer.is-empty .cart-drawer__empty-content a.button, cart-drawer.is-empty .cart__empty-content button.button, cart-drawer.is-empty .cart-drawer__empty-content button.button { background-color: #02A691 !important; color: #FFFFFF !important; } cart-drawer.is-empty .cart__empty-content a.button:hover, cart-drawer.is-empty .cart-drawer__empty-content a.button:hover, cart-drawer.is-empty .cart__empty-content button.button:hover, cart-drawer.is-empty .cart-drawer__empty-content button.button:hover { background-color: #018B7B !important; color: #FFFFFF !important; } #shopify-buyer-consent { margin-top: 1em; display: inline-block; width: 100%; } #shopify-buyer-consent.hidden { display: none; } #shopify-subscription-policy-button { background: none; border: none; padding: 0; text-decoration: underline; font-size: inherit; cursor: pointer; } #shopify-subscription-policy-button::before { box-shadow: none; } :root { /* Global Color Variables */ --global-section-background-color: #ffffff; --global-section-text-color: #000000; --global-section-heading-color: ; --global-section-accent-1-color: #02a691; --global-section-use-gradient-background: 1; --color-background: 255,255,255; --gradient-background: linear-gradient(329deg, rgba(56, 15, 15, 1), rgba(159, 47, 48, 1) 100%); --color-foreground: #000000; --color-background-contrast: 191,191,191; --color-shadow: 18,18,18; --color-button: 2,166,145; --color-button-text: 0,0,0; --color-secondary-button: 255,255,255; --color-secondary-button-text: 0,0,0; --color-link: 255,255,255; --color-badge-foreground: 0,0,0; --color-header: 255,255,255; --color-header-border: 228 228 228; --color-footer: 255,255,255; --color-drawer: 255,255,255; --color-drawer-text: 12,12,13; --color-dropdown: 255,255,255; --color-badge-background: 255,255,255; --color-badge-border: 2,166,145; --payment-terms-background-color: rgb(255 255 255); /* Container Styling Variables */ --container-border-width: px; --container-border-radius: 2px; --container-border-style: ; --container-border-opacity: 0.0; --container-shadow: none; } :root { /* Typography Variables */ --font-body-family: Helvetica, Arial, sans-serif; --font-body-style: normal; --font-body-weight: 400; --font-heading-family: Helvetica, Arial, sans-serif; --font-heading-style: normal; --font-heading-weight: 400; --font-accent-family: Helvetica, Arial, sans-serif; --font-accent-style: normal; --font-accent-weight: 400; --font-accent-scale: 1.25; --font-accent-letter-spacing: -0.9px; --font-accent-text-transform: none; --global-accent-font: var(--font-accent-family); --font-weight-regular: 500 !important; --font-weight-bold: 400 !important; --font-weight-semibold: 500 !important; --font-body-scale: 1.0; --font-heading-scale: 1.0; /* Media Variables */ --media-padding: px; --media-border-opacity: 0.05; --media-border-width: 1px; --media-radius: 0px; --media-shadow-opacity: 0.0; --media-shadow-horizontal-offset: 0px; --media-shadow-vertical-offset: 4px; --media-shadow-blur-radius: 5px; --media-shadow-visible: 0; --page-width: 1200px; --page-width-margin: 0rem; --animate-spin: spin 1s linear infinite; /* Product Card Variables */ --product-card-image-padding: 0.0rem; --product-card-corner-radius: 0.0rem; --product-card-text-alignment: left; --product-card-border-width: 0.0rem; --product-card-border-opacity: 0.1; --product-card-shadow-opacity: 0.0; --product-card-shadow-visible: 0; --product-card-shadow-horizontal-offset: 0.0rem; --product-card-shadow-vertical-offset: 0.4rem; --product-card-shadow-blur-radius: 0.5rem; /* Collection Card Variables */ --collection-card-image-padding: 0.0rem; --collection-card-corner-radius: 0.0rem; --collection-card-text-alignment: left; --collection-card-border-width: 0.0rem; --collection-card-border-opacity: 0.1; --collection-card-shadow-opacity: 0.0; --collection-card-shadow-visible: 0; --collection-card-shadow-horizontal-offset: 0.0rem; --collection-card-shadow-vertical-offset: 0.4rem; --collection-card-shadow-blur-radius: 0.5rem; /* Blog Card Variables */ --blog-card-image-padding: 0.0rem; --blog-card-corner-radius: 0.0rem; --blog-card-text-alignment: left; --blog-card-border-width: 0.0rem; --blog-card-border-opacity: 0.1; --blog-card-shadow-opacity: 0.0; --blog-card-shadow-visible: 0; --blog-card-shadow-horizontal-offset: 0.0rem; --blog-card-shadow-vertical-offset: 0.4rem; --blog-card-shadow-blur-radius: 0.5rem; --badge-corner-radius: 4.0rem; /* Popup Variables */ --popup-border-width: 1px; --popup-border-opacity: 0.1; --popup-corner-radius: 0px; --popup-shadow-opacity: 0.05; --popup-shadow-horizontal-offset: 0px; --popup-shadow-vertical-offset: 4px; --popup-shadow-blur-radius: 5px; /* Drawer Variables */ --drawer-border-width: 1px; --drawer-border-opacity: 0.1; --drawer-shadow-opacity: 0.0; --drawer-shadow-horizontal-offset: 0px; --drawer-shadow-vertical-offset: 4px; --drawer-shadow-blur-radius: 5px; /* Spacing Variables */ --spacing-sections-desktop: 0px; --spacing-sections-mobile: 0px; --grid-desktop-vertical-spacing: 8px; --grid-desktop-horizontal-spacing: 8px; --page-desktop-horizontal-padding: 0px; --sections-desktop-horizontal-padding: 0px; --grid-mobile-vertical-spacing: 4px; --grid-mobile-horizontal-spacing: 4px; --page-desktop-horizontal-padding: 0px; --sections-desktop-horizontal-padding: 0px; --sections-desktop-vertical-padding: 0px; --sections-mobile-horizontal-padding: 0px; --sections-mobile-vertical-padding: 0px; /* Text Box Variables */ --text-boxes-border-opacity: 0.1; --text-boxes-border-width: 0px; --text-boxes-radius: 0px; --text-boxes-shadow-opacity: 0.0; --text-boxes-shadow-visible: 0; --text-boxes-shadow-horizontal-offset: 0px; --text-boxes-shadow-vertical-offset: 4px; --text-boxes-shadow-blur-radius: 5px; /* Button Variables */ --buttons-radius: 0px; --buttons-radius-outset: 0px; --buttons-border-width: 1px; --buttons-border-opacity: 1.0; --buttons-shadow-opacity: 0.0; --buttons-shadow-visible: 0; --buttons-shadow-horizontal-offset: 0px; --buttons-shadow-vertical-offset: 4px; --buttons-shadow-blur-radius: 5px; --buttons-border-offset: 0px; /* Input Variables */ --inputs-radius: 0px; --inputs-border-width: 1px; --inputs-border-opacity: 0.55; --inputs-shadow-opacity: 0.0; --inputs-shadow-horizontal-offset: 0px; --inputs-margin-offset: 0px; --inputs-shadow-vertical-offset: 4px; --inputs-shadow-blur-radius: 5px; --inputs-radius-outset: 0px; /* Variant Pills Variables */ --variant-pills-radius: 40px; --variant-pills-border-width: 1px; --variant-pills-border-opacity: 0.55; --variant-pills-shadow-opacity: 0.0; --variant-pills-shadow-horizontal-offset: 0px; --variant-pills-shadow-vertical-offset: 4px; --variant-pills-shadow-blur-radius: 5px; /* Global Button Variables */ --global-button-padding-y: 13px; --global-button-font-size: 16px; --global-button-font-weight: 700; --conditional-button-font-weight: var(--global-button-font-weight, 700); --global-button-letter-spacing: -0.5px; --global-button-text-transform: uppercase; --global-button-radius: 12px; /* Enhanced Global Button Colors */ --global-button-bg-color: #ff5801; --global-button-text-color: #ffffff; --global-button-border-color: #333030; --global-button-border-width: 0px; --global-button-bottom-border-width: 0px; --global-button-bottom-border-color: #333030; /* Hover & Focus Colors */ --global-button-hover-bg-color: #5f6264; --global-button-hover-text-color: #333030; /* Button Box Shadow Variables */ --button-box-shadow-enabled: true; --button-shadow-intensity: 1; /* Gradient Effect Variables */ --button-gradient-enabled: false; --button-gradient-start: #0954bc; --button-gradient-end: #2072e1; --button-gradient-direction: to bottom; --button-gradient-hover-start: #333337; --button-gradient-hover-end: #333337; --button-gradient-shine-enabled: true; --global-button-hover-brightness: 90%; /* Global Border System Disabled */ --enable-global-border-styling: 0; /* Letter spacing for body text and apps */ --letter-spacing-body: 0.5px; --app-letter-spacing: -1px; --global-section-bg-color: #ffffff; --global-section-text-color: #000000; --global-section-accent-1-color: #02a691; --global-section-accent-2-color: #ffffff; --global-section-accent-gradient-color: var(--gradient-background); /* RTL Support Variables */ --direction: ltr; --text-align-start: left; --text-align-end: right; --margin-start: margin-left; --margin-end: margin-right; --padding-start: padding-left; --padding-end: padding-right; --border-start: border-left; --border-end: border-right; --float-start: left; --float-end: right; /* Contained Sections System Disabled */ --enable-contained-sections: 0; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; font-size: calc(var(--font-body-scale) * 62.5%); height: 100%; } body { display: flex; flex-direction: column; min-height: 100%; margin: 0; font-size: 1.5rem; letter-spacing: var(--letter-spacing-body); line-height: calc(1 + 0.8 / var(--font-body-scale)); font-family: var(--font-body-family); font-style: var(--font-body-style); font-weight: var(--font-body-weight); color: rgba(var(--color-foreground), 0.75); background-color: rgb(var(--color-background)); } section { color: rgba(var(--color-foreground), 0.75); background-color: rgb(var(--color-background)); } #MainContent { flex-grow: 1; } @media screen and (min-width: 750px) { body { font-size: 1.6rem; } } :root { /* Theme default colors only */ --global-section-text-color: ; --global-section-background-color: ; --global-section-accent-1-color: ; } /* CSS variable overrides from theme settings */ :root { /* Font families from theme settings */ --font-heading-family: Helvetica, Arial, sans-serif; --font-body-family: Helvetica, Arial, sans-serif; /* Font weights from theme settings */ --font-heading-weight: 400; --font-body-weight: 400; /* Apply text transform for buttons based on settings */ --button-text-transform: ; /* Set these for our override variables too so they cascade down */ --font-body-family-override: Helvetica, Arial, sans-serif; --font-heading-family-override: Helvetica, Arial, sans-serif; --font-body-weight-override: 400; --font-heading-weight-override: 400; /* Button styling variables */ --global-button-radius: 12px; /* Custom font sizes from theme settings */ --h1-font-size: 48px; --h2-font-size: 36px; --h3-font-size: 28px; --body-font-size: 16px; --subtitle-font-size: 18px; } /* Apply button text transform */ .button, .button-text, button[type="submit"], input[type="submit"] { text-transform: var(--button-text-transform); font-family: var(--font-body-family-override); } /* Global Typography Overrides */ /* This ensures that all text elements inherit the correct font family from theme settings */ /* Basic text elements */ p, span, div, a, button, input, select, textarea, label, li { font-family: var(--font-body-family-override, Helvetica, Arial, sans-serif); } /* Heading elements */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, [class*="title"], [class*="heading"], .title, .heading { font-family: var(--font-heading-family-override, Helvetica, Arial, sans-serif); } /* Special elements */ .product-title, .product__title, .product-form__label, .collection-hero__title, .page-title, .section-header__title, .main-collection-title, .main-title, .subtitle { font-family: var(--font-heading-family-override, Helvetica, Arial, sans-serif); } /* Rating components, reviews, benefits, and other common elements */ .rating-component, .review-name, .review-text, .benefit-text, .counter-text, .feature-name, .check-yes, .check-no, .text-value { font-family: var(--font-body-family-override, Helvetica, Arial, sans-serif); } :root { --app-letter-spacing: -1px; } /* Apply letter-spacing to common app elements */ .shopify-app-block, .shopify-buy-frame, div[data-shopify-app], div[data-app-id], div[class*="app-"], div[class*="App"], #bundle-container, #bundle-app, [data-bundle-app], .bundle-builder, #ReCharge, [data-rebuy-id], [data-rebuy-container], [data-bold-bundle], [data-loyalty-container] { letter-spacing: var(--app-letter-spacing) !important; } /* Exclude shop-product-details blocks from app letter-spacing rules */ .shop-product-section, .shop-product-info, .shop-product-info *:not(.shop-product-title):not([class*="product-title"]), .shop-product-section *:not(.shop-product-title):not([class*="product-title"]), .blocks-section:not(.shopify-app-block):not([data-shopify-app]):not([data-app-id]):not([class*="app-"]):not([class*="App"]), .limited-inventory-alert, .limited-inventory-alert *, .product-description-block, .product-description-block * { letter-spacing: var(--letter-spacing-body) !important; } /* Product title should use heading letter-spacing */ .shop-product-title, .shop-product-section .shop-product-title, [class*="product-title-title"] { letter-spacing: var(--letter-spacing-heading) !important; } /* Global Button Styling Overrides */ /* Define CSS variables for global button colors */ /* CSS variables are now defined in layout/theme.liquid */ /* Primary buttons - apply global styling */ .button, .btn, button[type="submit"], input[type="submit"], .shopify-payment-button__button, .product-form__submit, .shop-add-to-cart-button, .claim-button, .cart__checkout-button, .contact-button, .button--primary, .rich-text-button, .theme-button, .sticky-add-to-cart__button { border-radius: var(--global-button-radius) !important; font-family: var(--font-body-family-override) !important; transition: all 0.3s ease; background-color: var(--global-button-bg-color) !important; color: var(--global-button-text-color) !important; border-left: var(--global-button-border-width) solid var(--global-button-border-color) !important; border-right: var(--global-button-border-width) solid var(--global-button-border-color) !important; border-top: var(--global-button-border-width) solid var(--global-button-border-color) !important; border-bottom: var(--global-button-bottom-border-width) solid var(--global-button-bottom-border-color) !important; border-bottom-style: solid !important; box-shadow: none !important; padding-left: 20px !important; padding-right: 20px !important; text-transform: uppercase !important; text-align: center !important; font-weight: bold !important; } /* Hover, focus, and active states for buttons */ .button:hover, .btn:hover, button[type="submit"]:hover, input[type="submit"]:hover, .shopify-payment-button__button:hover, .product-form__submit:hover, .shop-add-to-cart-button:hover, .claim-button:hover, button[class*="add-to-cart"]:hover, button[class*="add_to_cart"]:hover, a[class*="add-to-cart"]:hover, a[class*="add_to_cart"]:hover, input[class*="add-to-cart"]:hover, input[class*="add_to_cart"]:hover, .cart__checkout-button:hover, .contact-button:hover, .button--primary:hover, .rich-text-button:hover, .theme-button:hover, .sticky-add-to-cart__button:hover, .button:focus, .button:focus-visible, .btn:focus, .btn:focus-visible, button[type="submit"]:focus, button[type="submit"]:focus-visible, input[type="submit"]:focus, input[type="submit"]:focus-visible, .shopify-payment-button__button:focus, .shopify-payment-button__button:focus-visible, .product-form__submit:focus, .product-form__submit:focus-visible, .shop-add-to-cart-button:focus, .shop-add-to-cart-button:focus-visible, .claim-button:focus, .claim-button:focus-visible, button[class*="add-to-cart"]:focus, button[class*="add_to_cart"]:focus, a[class*="add-to-cart"]:focus, a[class*="add_to_cart"]:focus, input[class*="add-to-cart"]:focus, input[class*="add_to_cart"]:focus, .cart__checkout-button:focus, .cart__checkout-button:focus-visible, .contact-button:focus, .contact-button:focus-visible, .button--primary:focus, .button--primary:focus-visible, .theme-button:focus, .theme-button:focus-visible, .sticky-add-to-cart__button:focus, .sticky-add-to-cart__button:focus-visible, .shopify-payment-button [role='button']:focus, .shopify-payment-button [role='button']:focus-visible { background-color: var(--global-button-hover-bg-color) !important; border-left: var(--global-button-border-width) solid var(--global-button-border-color) !important; border-right: var(--global-button-border-width) solid var(--global-button-border-color) !important; border-top: var(--global-button-border-width) solid var(--global-button-border-color) !important; border-bottom: var(--global-button-bottom-border-width) solid var(--global-button-bottom-border-color) !important; border-bottom-style: solid !important; box-shadow: none !important; outline: none !important; } /* Exclude non-button elements from hover effects */ div[class*="add-to-cart"]:hover, div[class*="add_to_cart"]:hover, span[class*="add-to-cart"]:hover, span[class*="add_to_cart"]:hover, p[class*="add-to-cart"]:hover, p[class*="add_to_cart"]:hover, section[class*="add-to-cart"]:hover, section[class*="add_to_cart"]:hover, article[class*="add-to-cart"]:hover, article[class*="add_to_cart"]:hover, div[class*="add-to-cart"]:focus, div[class*="add_to_cart"]:focus, span[class*="add-to-cart"]:focus, span[class*="add_to_cart"]:focus, p[class*="add-to-cart"]:focus, p[class*="add_to_cart"]:focus, section[class*="add-to-cart"]:focus, section[class*="add_to_cart"]:focus, article[class*="add-to-cart"]:focus, article[class*="add_to_cart"]:focus { background-color: inherit !important; box-shadow: none !important; outline: none !important; } /* Sticky add to cart elements - prevent hover styling for non-button elements */ .sticky-add-to-cart:hover, .sticky-add-to-cart:focus, .sticky-add-to-cart *:not(button):not(input[type="submit"]):not(.button):not(.btn):hover, .sticky-add-to-cart *:not(button):not(input[type="submit"]):not(.button):not(.btn):focus, [class*="sticky-add-to-cart"]:not(button):not(input[type="submit"]):not(.button):not(.btn):hover, [class*="sticky-add-to-cart"]:not(button):not(input[type="submit"]):not(.button):not(.btn):focus { background-color: inherit !important; box-shadow: inherit !important; } /* Remove any box shadows from pseudo-elements */ .button:before, .button:after, .btn:before, .btn:after, button[type="submit"]:before, button[type="submit"]:after, input[type="submit"]:before, input[type="submit"]:after, .shopify-payment-button__button:before, .shopify-payment-button__button:after, .product-form__submit:before, .product-form__submit:after, .shop-add-to-cart-button:before, .shop-add-to-cart-button:after, .claim-button:before, .claim-button:after, [class*="add-to-cart"]:before, [class*="add-to-cart"]:after, [class*="add_to_cart"]:before, [class*="add_to_cart"]:after, .cart__checkout-button:before, .cart__checkout-button:after, .contact-button:before, .contact-button:after, .button--primary:before, .button--primary:after, .theme-button:before, .theme-button:after, .sticky-add-to-cart__button:before, .sticky-add-to-cart__button:after { box-shadow: none !important; } /* Shopify accelerated checkout buttons */ .shopify-payment-button .shopify-payment-button__button, .shopify-payment-button .shopify-payment-button__button--unbranded, .shopify-payment-button .shopify-payment-button__more-options, .shopify-payment-button__button--branded, .shopify-payment-button__button--unbranded, .shopify-payment-button .shopify-payment-button__button:hover, .shopify-payment-button .shopify-payment-button__button--unbranded:hover, .shopify-payment-button .shopify-payment-button__more-options:hover, .shopify-payment-button__button--branded:hover, .shopify-payment-button__button--unbranded:hover { box-shadow: none !important; } /* Apply button radius to other elements */ button:not([class^="shopify"]), .secondary-button, .link-styled-button, [class*="button"], [class*="btn-"], .card__badge, .badge, .tag, .spr-button, .pagination__item, input[type="button"], select, .select__select, .disclosure__button, .filter-group, .facet-checkbox, .variant-input, .color-swatch, .swatch { border-radius: var(--global-button-radius); } /* Special elements with different radius */ .pagination__item, .card__badge { border-radius: calc(var(--global-button-radius) * 0.75) !important; } /* Pill-shaped elements */ .pill:not(.pill-item), .tag-label, [class*="pill"]:not(.pill-item), [class*="tag-"] { border-radius: 50px !important; } /* SPECIFIC BUTTON AND ELEMENT EXCEPTIONS */ /* Cart drawer elements - ensure proper colors */.cart-drawer td.cart-item__details dl, .cart-drawer .discounts__discount, .totals.gb-discounts-cart-values, .totals.gb-discounts-cart-values h2, .totals.gb-discounts-cart-values .totals__total-value, .gb-shipping-protection-icontext p { color: #000000 !important; } /* Cart drawer product price */ .cart-drawer .cart-item__final-price.product-option { color: #02a691 !important; } /* Remove background from cart remove buttons */ cart-remove-button .button, .cart-remove-button, [id^="CartDrawer-Remove"] { background-color: transparent !important; border: none !important; } /* Shipping protection toggle */ .gb-shipping-protection-button input:checked + .slider { background-color: #02a691 !important; } /* Cart total item - inverted colors */ span.gb-cart-total-item { background-color: #000000 !important; color: #ffffff !important; } /* Social proof bar - accent background with inverted text */ .social-proof-bar { background-color: #02a691 !important; } .social-proof-bar .social-proof-content, .social-proof-bar .social-proof-content *, .social-proof-bar svg, .social-proof-bar i, .social-proof-bar img, .social-proof-bar__text { color: #ffffff !important; fill: #ffffff !important; } /* Accent colored text elements */ .accent-title, [class*="accent-title"], .accent-heading, [class*="accent-heading"] { color: #02a691 !important; } /* Enhanced button effect styling variables */ :root { --enhanced-3d-enabled: false; --enhanced-gradient-enabled: false; } /* Critical box shadow effect overrides - must override global button styles */ /* Force box-shadow to override global button box-shadow: none */ .button-box-shadow, .button.button-box-shadow, .btn.button-box-shadow, button[type="submit"].button-box-shadow, input[type="submit"].button-box-shadow, .product-form__submit.button-box-shadow, .shop-add-to-cart-button.button-box-shadow, .cart__checkout-button.button-box-shadow, .contact-button.button-box-shadow:not(.disable-global-button-styling), .contact__button.button-box-shadow:not(.disable-global-button-styling), .button--primary.button-box-shadow, .claim-button.button-box-shadow, .newsletter-form__button.button-box-shadow:not(.disable-global-button-styling), .field__button.button-box-shadow:not(.disable-global-button-styling), .theme-button.button-box-shadow, .guarantee-section__cta.button-box-shadow, .custom-hero__button.button-box-shadow, .rich-text-button.button-box-shadow { transition: all 0.3s ease !important; position: relative; z-index: 1; } /* Apply the correct shadow based on intensity */ .button-box-shadow.intensity-1, .button.button-box-shadow.intensity-1, .btn.button-box-shadow.intensity-1, button[type="submit"].button-box-shadow.intensity-1, input[type="submit"].button-box-shadow.intensity-1, .product-form__submit.button-box-shadow.intensity-1, .shop-add-to-cart-button.button-box-shadow.intensity-1, .cart__checkout-button.button-box-shadow.intensity-1, .contact-button.button-box-shadow.intensity-1:not(.disable-global-button-styling), .contact__button.button-box-shadow.intensity-1:not(.disable-global-button-styling), .button--primary.button-box-shadow.intensity-1, .claim-button.button-box-shadow.intensity-1, .newsletter-form__button.button-box-shadow.intensity-1:not(.disable-global-button-styling), .field__button.button-box-shadow.intensity-1:not(.disable-global-button-styling), .theme-button.button-box-shadow.intensity-1, .guarantee-section__cta.button-box-shadow.intensity-1, .custom-hero__button.button-box-shadow.intensity-1, .rich-text-button.button-box-shadow.intensity-1 { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; } .button-box-shadow.intensity-1:hover, .button.button-box-shadow.intensity-1:hover, .btn.button-box-shadow.intensity-1:hover, button[type="submit"].button-box-shadow.intensity-1:hover, input[type="submit"].button-box-shadow.intensity-1:hover, .product-form__submit.button-box-shadow.intensity-1:hover, .shop-add-to-cart-button.button-box-shadow.intensity-1:hover, .cart__checkout-button.button-box-shadow.intensity-1:hover, .contact-button.button-box-shadow.intensity-1:hover:not(.disable-global-button-styling), .contact__button.button-box-shadow.intensity-1:hover:not(.disable-global-button-styling), .button--primary.button-box-shadow.intensity-1:hover, .claim-button.button-box-shadow.intensity-1:hover, .newsletter-form__button.button-box-shadow.intensity-1:not(.disable-global-button-styling):hover, .field__button.button-box-shadow.intensity-1:not(.disable-global-button-styling):hover, .theme-button.button-box-shadow.intensity-1:hover, .guarantee-section__cta.button-box-shadow.intensity-1:hover, .custom-hero__button.button-box-shadow.intensity-1:hover, .rich-text-button.button-box-shadow.intensity-1:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; } .button-box-shadow.intensity-2, .button.button-box-shadow.intensity-2, .btn.button-box-shadow.intensity-2, button[type="submit"].button-box-shadow.intensity-2, input[type="submit"].button-box-shadow.intensity-2, .product-form__submit.button-box-shadow.intensity-2, .shop-add-to-cart-button.button-box-shadow.intensity-2, .cart__checkout-button.button-box-shadow.intensity-2, .contact-button.button-box-shadow.intensity-2:not(.disable-global-button-styling), .contact__button.button-box-shadow.intensity-2:not(.disable-global-button-styling), .button--primary.button-box-shadow.intensity-2, .claim-button.button-box-shadow.intensity-2, .newsletter-form__button.button-box-shadow.intensity-2:not(.disable-global-button-styling), .field__button.button-box-shadow.intensity-2:not(.disable-global-button-styling), .theme-button.button-box-shadow.intensity-2, .guarantee-section__cta.button-box-shadow.intensity-2, .custom-hero__button.button-box-shadow.intensity-2, .rich-text-button.button-box-shadow.intensity-2 { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; } .button-box-shadow.intensity-2:hover, .button.button-box-shadow.intensity-2:hover, .btn.button-box-shadow.intensity-2:hover, button[type="submit"].button-box-shadow.intensity-2:hover, input[type="submit"].button-box-shadow.intensity-2:hover, .product-form__submit.button-box-shadow.intensity-2:hover, .shop-add-to-cart-button.button-box-shadow.intensity-2:hover, .cart__checkout-button.button-box-shadow.intensity-2:hover, .contact-button.button-box-shadow.intensity-2:hover:not(.disable-global-button-styling), .contact__button.button-box-shadow.intensity-2:hover:not(.disable-global-button-styling), .button--primary.button-box-shadow.intensity-2:hover, .claim-button.button-box-shadow.intensity-2:hover, .newsletter-form__button.button-box-shadow.intensity-2:not(.disable-global-button-styling):hover, .field__button.button-box-shadow.intensity-2:not(.disable-global-button-styling):hover, .theme-button.button-box-shadow.intensity-2:hover, .guarantee-section__cta.button-box-shadow.intensity-2:hover, .custom-hero__button.button-box-shadow.intensity-2:hover, .rich-text-button.button-box-shadow.intensity-2:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important; } .button-box-shadow.intensity-3, .button.button-box-shadow.intensity-3, .btn.button-box-shadow.intensity-3, button[type="submit"].button-box-shadow.intensity-3, input[type="submit"].button-box-shadow.intensity-3, .product-form__submit.button-box-shadow.intensity-3, .shop-add-to-cart-button.button-box-shadow.intensity-3, .cart__checkout-button.button-box-shadow.intensity-3, .contact-button.button-box-shadow.intensity-3:not(.disable-global-button-styling), .contact__button.button-box-shadow.intensity-3:not(.disable-global-button-styling), .button--primary.button-box-shadow.intensity-3, .claim-button.button-box-shadow.intensity-3, .newsletter-form__button.button-box-shadow.intensity-3:not(.disable-global-button-styling), .field__button.button-box-shadow.intensity-3:not(.disable-global-button-styling), .theme-button.button-box-shadow.intensity-3, .guarantee-section__cta.button-box-shadow.intensity-3, .custom-hero__button.button-box-shadow.intensity-3, .rich-text-button.button-box-shadow.intensity-3 { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important; } .button-box-shadow.intensity-3:hover, .button.button-box-shadow.intensity-3:hover, .btn.button-box-shadow.intensity-3:hover, button[type="submit"].button-box-shadow.intensity-3:hover, input[type="submit"].button-box-shadow.intensity-3:hover, .product-form__submit.button-box-shadow.intensity-3:hover, .shop-add-to-cart-button.button-box-shadow.intensity-3:hover, .cart__checkout-button.button-box-shadow.intensity-3:hover, .contact-button.button-box-shadow.intensity-3:hover:not(.disable-global-button-styling), .contact__button.button-box-shadow.intensity-3:hover:not(.disable-global-button-styling), .button--primary.button-box-shadow.intensity-3:hover, .claim-button.button-box-shadow.intensity-3:hover, .newsletter-form__button.button-box-shadow.intensity-3:not(.disable-global-button-styling):hover, .field__button.button-box-shadow.intensity-3:not(.disable-global-button-styling):hover, .theme-button.button-box-shadow.intensity-3:hover, .guarantee-section__cta.button-box-shadow.intensity-3:hover, .custom-hero__button.button-box-shadow.intensity-3:hover, .rich-text-button.button-box-shadow.intensity-3:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25) !important; } .button-box-shadow.intensity-4, .button.button-box-shadow.intensity-4, .btn.button-box-shadow.intensity-4, button[type="submit"].button-box-shadow.intensity-4, input[type="submit"].button-box-shadow.intensity-4, .product-form__submit.button-box-shadow.intensity-4, .shop-add-to-cart-button.button-box-shadow.intensity-4, .cart__checkout-button.button-box-shadow.intensity-4, .contact-button.button-box-shadow.intensity-4:not(.disable-global-button-styling), .contact__button.button-box-shadow.intensity-4:not(.disable-global-button-styling), .button--primary.button-box-shadow.intensity-4, .claim-button.button-box-shadow.intensity-4, .newsletter-form__button.button-box-shadow.intensity-4:not(.disable-global-button-styling), .field__button.button-box-shadow.intensity-4:not(.disable-global-button-styling), .theme-button.button-box-shadow.intensity-4, .guarantee-section__cta.button-box-shadow.intensity-4, .custom-hero__button.button-box-shadow.intensity-4, .rich-text-button.button-box-shadow.intensity-4 { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25) !important; } .button-box-shadow.intensity-4:hover, .button.button-box-shadow.intensity-4:hover, .btn.button-box-shadow.intensity-4:hover, button[type="submit"].button-box-shadow.intensity-4:hover, input[type="submit"].button-box-shadow.intensity-4:hover, .product-form__submit.button-box-shadow.intensity-4:hover, .shop-add-to-cart-button.button-box-shadow.intensity-4:hover, .cart__checkout-button.button-box-shadow.intensity-4:hover, .contact-button.button-box-shadow.intensity-4:hover:not(.disable-global-button-styling), .contact__button.button-box-shadow.intensity-4:hover:not(.disable-global-button-styling), .button--primary.button-box-shadow.intensity-4:hover, .claim-button.button-box-shadow.intensity-4:hover, .newsletter-form__button.button-box-shadow.intensity-4:not(.disable-global-button-styling):hover, .field__button.button-box-shadow.intensity-4:not(.disable-global-button-styling):hover, .theme-button.button-box-shadow.intensity-4:hover, .guarantee-section__cta.button-box-shadow.intensity-4:hover, .custom-hero__button.button-box-shadow.intensity-4:hover, .rich-text-button.button-box-shadow.intensity-4:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important; } .button-box-shadow.intensity-5, .button.button-box-shadow.intensity-5, .btn.button-box-shadow.intensity-5, button[type="submit"].button-box-shadow.intensity-5, input[type="submit"].button-box-shadow.intensity-5, .product-form__submit.button-box-shadow.intensity-5, .shop-add-to-cart-button.button-box-shadow.intensity-5, .cart__checkout-button.button-box-shadow.intensity-5, .contact-button.button-box-shadow.intensity-5:not(.disable-global-button-styling), .contact__button.button-box-shadow.intensity-5:not(.disable-global-button-styling), .button--primary.button-box-shadow.intensity-5, .claim-button.button-box-shadow.intensity-5, .newsletter-form__button.button-box-shadow.intensity-5:not(.disable-global-button-styling), .field__button.button-box-shadow.intensity-5:not(.disable-global-button-styling), .theme-button.button-box-shadow.intensity-5, .guarantee-section__cta.button-box-shadow.intensity-5, .custom-hero__button.button-box-shadow.intensity-5, .rich-text-button.button-box-shadow.intensity-5 { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important; } .button-box-shadow.intensity-5:hover, .button.button-box-shadow.intensity-5:hover, .btn.button-box-shadow.intensity-5:hover, button[type="submit"].button-box-shadow.intensity-5:hover, input[type="submit"].button-box-shadow.intensity-5:hover, .product-form__submit.button-box-shadow.intensity-5:hover, .shop-add-to-cart-button.button-box-shadow.intensity-5:hover, .cart__checkout-button.button-box-shadow.intensity-5:hover, .contact-button.button-box-shadow.intensity-5:hover:not(.disable-global-button-styling), .contact__button.button-box-shadow.intensity-5:hover:not(.disable-global-button-styling), .button--primary.button-box-shadow.intensity-5:hover, .claim-button.button-box-shadow.intensity-5:hover, .newsletter-form__button.button-box-shadow.intensity-5:not(.disable-global-button-styling):hover, .field__button.button-box-shadow.intensity-5:not(.disable-global-button-styling):hover, .theme-button.button-box-shadow.intensity-5:hover, .guarantee-section__cta.button-box-shadow.intensity-5:hover, .custom-hero__button.button-box-shadow.intensity-5:hover, .rich-text-button.button-box-shadow.intensity-5:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35) !important; } .button-box-shadow:active, .button.button-box-shadow:active, .btn.button-box-shadow:active, button[type="submit"].button-box-shadow:active, input[type="submit"].button-box-shadow:active, .product-form__submit.button-box-shadow:active, .shop-add-to-cart-button.button-box-shadow:active, .cart__checkout-button.button-box-shadow:active, .contact-button.button-box-shadow:active:not(.disable-global-button-styling), .contact__button.button-box-shadow:active:not(.disable-global-button-styling), .button--primary.button-box-shadow:active, .claim-button.button-box-shadow:active, .newsletter-form__button.button-box-shadow:not(.disable-global-button-styling):active, .field__button.button-box-shadow:not(.disable-global-button-styling):active, .theme-button.button-box-shadow:active, .guarantee-section__cta.button-box-shadow:active, .custom-hero__button.button-box-shadow:active, .rich-text-button.button-box-shadow:active { transform: translateY(0) !important; } /* ===================================== */ /* GRADIENT BACKGROUND EFFECTS */ /* ===================================== */ /* ===================================== */ /* CRITICAL CART REMOVE BUTTON EXCLUSIONS */ /* ===================================== */ /* * Cart remove buttons must NEVER inherit any enhanced effects * These overrides have maximum specificity to ensure they work * even if classes like button-box-shadow, button-gradient-effect are applied */ .cart-remove-button, .button--tertiary.cart-remove-button, button.cart-remove-button, .cart-remove-button.button-box-shadow, .cart-remove-button.button-gradient-effect, .cart-remove-button.intensity-1, .cart-remove-button.intensity-2, .cart-remove-button.intensity-3, .cart-remove-button.intensity-4, .cart-remove-button.intensity-5, .button--tertiary.cart-remove-button.button-box-shadow, .button--tertiary.cart-remove-button.button-gradient-effect, .button--tertiary.cart-remove-button.intensity-1, .button--tertiary.cart-remove-button.intensity-2, .button--tertiary.cart-remove-button.intensity-3, .button--tertiary.cart-remove-button.intensity-4, .button--tertiary.cart-remove-button.intensity-5, button.cart-remove-button.button-box-shadow, button.cart-remove-button.button-gradient-effect, button.cart-remove-button.intensity-1, button.cart-remove-button.intensity-2, button.cart-remove-button.intensity-3, button.cart-remove-button.intensity-4, button.cart-remove-button.intensity-5 { /* Reset ALL enhanced effects */ box-shadow: none !important; background: var(--button-tertiary-bg, transparent) !important; transform: none !important; position: static !important; transition: opacity 0.2s ease !important; z-index: auto !important; } .cart-remove-button:hover, .button--tertiary.cart-remove-button:hover, button.cart-remove-button:hover, .cart-remove-button.button-box-shadow:hover, .cart-remove-button.button-gradient-effect:hover, .cart-remove-button.intensity-1:hover, .cart-remove-button.intensity-2:hover, .cart-remove-button.intensity-3:hover, .cart-remove-button.intensity-4:hover, .cart-remove-button.intensity-5:hover, .button--tertiary.cart-remove-button.button-box-shadow:hover, .button--tertiary.cart-remove-button.button-gradient-effect:hover, .button--tertiary.cart-remove-button.intensity-1:hover, .button--tertiary.cart-remove-button.intensity-2:hover, .button--tertiary.cart-remove-button.intensity-3:hover, .button--tertiary.cart-remove-button.intensity-4:hover, .button--tertiary.cart-remove-button.intensity-5:hover, button.cart-remove-button.button-box-shadow:hover, button.cart-remove-button.button-gradient-effect:hover, button.cart-remove-button.intensity-1:hover, button.cart-remove-button.intensity-2:hover, button.cart-remove-button.intensity-3:hover, button.cart-remove-button.intensity-4:hover, button.cart-remove-button.intensity-5:hover { box-shadow: none !important; transform: none !important; opacity: 0.7 !important; } .cart-remove-button:active, .button--tertiary.cart-remove-button:active, button.cart-remove-button:active, .cart-remove-button.button-box-shadow:active, .cart-remove-button.button-gradient-effect:active, .cart-remove-button.intensity-1:active, .cart-remove-button.intensity-2:active, .cart-remove-button.intensity-3:active, .cart-remove-button.intensity-4:active, .cart-remove-button.intensity-5:active, .button--tertiary.cart-remove-button.button-box-shadow:active, .button--tertiary.cart-remove-button.button-gradient-effect:active, .button--tertiary.cart-remove-button.intensity-1:active, .button--tertiary.cart-remove-button.intensity-2:active, .button--tertiary.cart-remove-button.intensity-3:active, .button--tertiary.cart-remove-button.intensity-4:active, .button--tertiary.cart-remove-button.intensity-5:active, button.cart-remove-button.button-box-shadow:active, button.cart-remove-button.button-gradient-effect:active, button.cart-remove-button.intensity-1:active, button.cart-remove-button.intensity-2:active, button.cart-remove-button.intensity-3:active, button.cart-remove-button.intensity-4:active, button.cart-remove-button.intensity-5:active { box-shadow: none !important; transform: none !important; opacity: 0.5 !important; } /* Remove any gradient effects that might have been applied */ .cart-remove-button::before, .button--tertiary.cart-remove-button::before, button.cart-remove-button::before, .cart-remove-button.button-gradient-effect::before, .cart-remove-button.gradient-shine-enabled::before, .button--tertiary.cart-remove-button.button-gradient-effect::before, .button--tertiary.cart-remove-button.gradient-shine-enabled::before, button.cart-remove-button.button-gradient-effect::before, button.cart-remove-button.gradient-shine-enabled::before { display: none !important; content: none !important; background: none !important; } /* Additional mobile optimizations for box shadow effects */ @media screen and (max-width: 768px) { .button-box-shadow { /* Reduce transform distance on mobile for better touch experience */ transform: none !important; } .button-box-shadow:hover, .button-box-shadow:focus { transform: translateY(-1px) !important; } } /* Print media - remove box shadow effects for better printing */ @media print { .button-box-shadow { box-shadow: none !important; transform: none !important; } .button-gradient-effect::before { display: none !important; } } /* Complete override for disable-global-button-styling class */ /* These rules ensure that buttons with this class never get enhanced effects */ /* EXCEPT cart-discount-code-button which has its own color management */ .disable-global-button-styling:not(.cart-discount-code-button), .disable-global-button-styling.button-box-shadow:not(.cart-discount-code-button), .disable-global-button-styling.button-gradient-effect:not(.cart-discount-code-button), .disable-global-button-styling.intensity-1:not(.cart-discount-code-button), .disable-global-button-styling.intensity-2:not(.cart-discount-code-button), .disable-global-button-styling.intensity-3:not(.cart-discount-code-button), .disable-global-button-styling.intensity-4:not(.cart-discount-code-button), .disable-global-button-styling.intensity-5:not(.cart-discount-code-button), .button.disable-global-button-styling.button-box-shadow:not(.cart-discount-code-button), .button.disable-global-button-styling.button-gradient-effect:not(.cart-discount-code-button), .btn.disable-global-button-styling.button-box-shadow:not(.cart-discount-code-button), .btn.disable-global-button-styling.button-gradient-effect:not(.cart-discount-code-button) { /* Reset all enhanced button effects */ box-shadow: none !important; background: unset !important; background-image: none !important; background-color: unset !important; transform: none !important; transition: none !important; position: static !important; z-index: auto !important; /* Keep section-specific styles (font-size, border-radius), but reset global font overrides */ font-weight: unset !important; letter-spacing: unset !important; text-transform: unset !important; /* Note: border-radius and font-size are preserved from inline styles */ } /* Reset hover states */ /* EXCEPT cart-discount-code-button which has its own color management */ .disable-global-button-styling:hover:not(.cart-discount-code-button), .disable-global-button-styling.button-box-shadow:hover:not(.cart-discount-code-button), .disable-global-button-styling.button-gradient-effect:hover:not(.cart-discount-code-button), .disable-global-button-styling.intensity-1:hover:not(.cart-discount-code-button), .disable-global-button-styling.intensity-2:hover:not(.cart-discount-code-button), .disable-global-button-styling.intensity-3:hover:not(.cart-discount-code-button), .disable-global-button-styling.intensity-4:hover:not(.cart-discount-code-button), .disable-global-button-styling.intensity-5:hover:not(.cart-discount-code-button) { box-shadow: none !important; background: unset !important; background-image: none !important; background-color: unset !important; transform: none !important; transition: none !important; } /* Reset active states */ /* EXCEPT cart-discount-code-button which has its own color management */ .disable-global-button-styling:active:not(.cart-discount-code-button), .disable-global-button-styling.button-box-shadow:active:not(.cart-discount-code-button), .disable-global-button-styling.button-gradient-effect:active:not(.cart-discount-code-button) { box-shadow: none !important; background: unset !important; background-image: none !important; background-color: unset !important; transform: none !important; } /* Remove any pseudo-elements (like gradient shine effects) */ /* EXCEPT cart-discount-code-button which manages its own pseudo-elements */ .disable-global-button-styling:not(.cart-discount-code-button)::before, .disable-global-button-styling:not(.cart-discount-code-button)::after, .disable-global-button-styling.button-gradient-effect:not(.cart-discount-code-button)::before, .disable-global-button-styling.gradient-shine-enabled:not(.cart-discount-code-button)::before { display: none !important; content: none !important; } /* Global Title/Heading Color Overrides */ h1, h2, h3, h4, h5, h6, .title, .heading, [class*="title"], [class*="heading"], .collection-hero__title, .main-collection-title, .page-title, .section-header__title, .section-title, .product-title, .collection-title, .blog-title, .card__heading, .headline, .subtitle, .caption-with-letter-spacing, .h1, .h2, .h3, .h4, .h5, .h6, .comparison-heading, .comparison-product-title, .statistics-section-title, .statistic-title, .alt-feat-section-title, .alt-feat-title, .as-seen-in-title, .custom-hero__title, .custom-main-heading, .reviews-subtitle { color: #000000 !important; } .section[data-use-theme-colors="true"] .title, .section[data-use-theme-colors="true"] [class*="title"], .section[data-use-theme-colors="true"] h1, .section[data-use-theme-colors="true"] h2, .section[data-use-theme-colors="true"] h3, .section[data-use-theme-colors="true"] h4, .section[data-use-theme-colors="true"] h5, .section[data-use-theme-colors="true"] h6, .section[data-use-theme-colors="true"] .heading, div[class*="section"][data-use-theme-colors="true"] .title, div[class*="section"][data-use-theme-colors="true"] [class*="title"], div[class*="section"][data-use-theme-colors="true"] h1, div[class*="section"][data-use-theme-colors="true"] h2, div[class*="section"][data-use-theme-colors="true"] h3, div[class*="section"][data-use-theme-colors="true"] h4, div[class*="section"][data-use-theme-colors="true"] h5, div[class*="section"][data-use-theme-colors="true"] h6, div[class*="section"][data-use-theme-colors="true"] .heading, *[data-use-theme-colors="true"] .title, *[data-use-theme-colors="true"] [class*="title"], *[data-use-theme-colors="true"] h1, *[data-use-theme-colors="true"] h2, *[data-use-theme-colors="true"] h3, *[data-use-theme-colors="true"] h4, *[data-use-theme-colors="true"] h5, *[data-use-theme-colors="true"] h6, *[data-use-theme-colors="true"] .heading { color: #000000 !important; } .shop-product-title, .shop-product-section .title, .shop-product-section h1, .shop-product-section h2, .shop-product-section h3, .shop-product-section h4, .shop-product-section h5, .shop-product-section h6 { color: inherit !important; } .accent-title, [class*="accent-title"], .accent-heading, [class*="accent-heading"] { color: #02a691 !important; } :root { --font-body: var(--font-body-family); --font-heading: var(--font-heading-family); --letter-spacing-heading: -0.9px; --letter-spacing-body: 0.5px; --min-font-size-h1: 32px; --max-font-size-h1: 48px; --font-size-h1: calc(32px + (48 - 32) * ((100vw - 375px) / (1440 - 375))); --min-font-size-h2: 28px; --max-font-size-h2: 40px; --font-size-h2: calc(28px + (40 - 28) * ((100vw - 375px) / (1440 - 375))); --min-font-size-h3: 24px; --max-font-size-h3: 32px; --font-size-h3: calc(24px + (32 - 24) * ((100vw - 375px) / (1440 - 375))); --min-font-size-h4: 20px; --max-font-size-h4: 24px; --font-size-h4: calc(20px + (24 - 20) * ((100vw - 375px) / (1440 - 375))); --min-font-size-h5: 18px; --max-font-size-h5: 20px; --font-size-h5: calc(18px + (20 - 18) * ((100vw - 375px) / (1440 - 375))); --min-font-size-h6: 16px; --max-font-size-h6: 18px; --font-size-h6: calc(16px + (18 - 16) * ((100vw - 375px) / (1440 - 375))); --font-size-body-large: 18px; --font-size-body: 16px; --font-size-body-small: 14px; --font-size-caption: 12px; --button-text-transform: uppercase; } /* Identisch zu applyFontWeightOverrides() in typography-settings.js */ body, p, div, input, textarea, select { font-weight: var(--font-weight-regular) !important; } h3, h4, h5, h6, th, .semi-bold { font-weight: var(--font-weight-semibold) !important; } h1, h2, strong, b, .bold, .heading, .btn--primary, .btn--secondary { font-weight: var(--font-weight-bold) !important; } /* ===== 1 + 2: Menuepunkte ruhiger und cleaner ===== */ #menu-drawer .menu-drawer__navigation { padding: 2rem 2.2rem 1.6rem; } #menu-drawer .menu-drawer__menu-item { font-size: 1.6rem; font-weight: 500; letter-spacing: 0.1px; line-height: 1.35; padding: 1.3rem 0.6rem; } #menu-drawer summary.menu-drawer__menu-item { padding-right: 4.4rem; } .js #menu-drawer .menu-drawer__menu > li { margin-bottom: 0; border-bottom: 1px solid rgba(var(--color-drawer-text), 0.1); } .js #menu-drawer .menu-drawer__menu > li:last-child { border-bottom: 0; } /* ===== 3: graue Hinterlegung komplett entfernen ===== */ #menu-drawer .menu-drawer__menu-item, #menu-drawer .menu-drawer__menu-item:hover, #menu-drawer .menu-drawer__menu-item:focus, #menu-drawer .menu-drawer__menu-item:active, #menu-drawer .menu-drawer__menu-item--active, #menu-drawer .menu-drawer__menu-item--active:hover, #menu-drawer .menu-drawer__menu-item--active:focus, #menu-drawer .menu-drawer__close-button:hover, #menu-drawer .menu-drawer__close-button:focus, #menu-drawer .menu-drawer__account:hover, #menu-drawer .menu-drawer__account:focus, #menu-drawer .list-social__link:hover, #menu-drawer .list-social__link:focus { background-color: transparent; background: none; } /* ===== 4: Fussbereich kompakt ===== */ #menu-drawer .menu-drawer__utility-links { padding: 1.4rem 2.2rem 1.8rem; border-top: 1px solid rgba(var(--color-drawer-text), 0.1); display: flex; flex-direction: column; gap: 0.2rem; } #menu-drawer .menu-drawer__account { padding: 0.7rem 0.6rem; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.1px; margin: 0; } #menu-drawer .menu-drawer__account account-icon > .svg-wrapper, #menu-drawer .menu-drawer__account > .svg-wrapper { height: 1.8rem; width: 1.8rem; margin-right: 0.9rem; } #menu-drawer .menu-drawer__localization { margin: 0; padding-left: 0.1rem; } /* Social-Icons nebeneinander statt untereinander */ #menu-drawer .list-social { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.1rem; margin: 0.3rem 0 0 -1rem; padding: 0; } #menu-drawer .list-social__item { display: inline-flex; } #menu-drawer .list-social__link { padding: 0.85rem 1rem; transition: opacity 160ms ease; } #menu-drawer .list-social__link:hover { opacity: 0.55; } #menu-drawer .list-social__link .svg-wrapper { width: 1.8rem; height: 1.8rem; } /* ===== 5: Einflug-Animation beim Oeffnen ===== */ @keyframes lkDrawerItemIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } } .js details[open].menu-opening > #menu-drawer .menu-drawer__navigation > .menu-drawer__menu > li, .js details[open].menu-opening > #menu-drawer .menu-drawer__utility-links { animation: lkDrawerItemIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both; } .js details[open].menu-opening > #menu-drawer .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(1) { animation-delay: 90ms; } .js details[open].menu-opening > #menu-drawer .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(2) { animation-delay: 145ms; } .js details[open].menu-opening > #menu-drawer .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(3) { animation-delay: 200ms; } .js details[open].menu-opening > #menu-drawer .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(4) { animation-delay: 255ms; } .js details[open].menu-opening > #menu-drawer .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(5) { animation-delay: 310ms; } .js details[open].menu-opening > #menu-drawer .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(6) { animation-delay: 365ms; } .js details[open].menu-opening > #menu-drawer .menu-drawer__navigation > .menu-drawer__menu > li:nth-child(n + 7) { animation-delay: 420ms; } .js details[open].menu-opening > #menu-drawer .menu-drawer__utility-links { animation-delay: 330ms; } /* Sicherheitsnetz: Die Animation laeuft NUR, solange .menu-opening gesetzt ist. Ohne diese Klasse gilt der normale Zustand - die Punkte sind also nie dauerhaft unsichtbar, falls die Klasse einmal fehlen sollte. */ @media (prefers-reduced-motion: reduce) { .js details[open].menu-opening > #menu-drawer .menu-drawer__navigation > .menu-drawer__menu > li, .js details[open].menu-opening > #menu-drawer .menu-drawer__utility-links { animation: none; } } /* ===== 6: Cookie-Banner nur im Theme-Editor ausblenden ===== Die App setzt auf ein inline "display: block !important" - dagegen kommt kein Stylesheet an, auch nicht mit !important. Deshalb wird ueber visibility/opacity/pointer-events ausgeblendet. Das Element ist position:fixed, es entsteht also keine Luecke im Layout. Greift ausschliesslich im Theme-Editor (Klasse shopify-design-mode am ) - Kunden sehen den Banner voellig unveraendert. */ .shopify-design-mode pandectes-cmp { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Regular weight elements */ body, p, div, input, textarea, select { font-weight: var(--font-weight-regular) !important; } /* Semi-bold elements */ h3, h4, h5, h6, th, .semi-bold { font-weight: var(--font-weight-semibold) !important; } /* Bold elements */ h1, h2, strong, b, .bold, .heading, .btn--primary, .btn--secondary { font-weight: var(--font-weight-bold) !important; } .index-module_type__E-SaG::after { content: '|'; animation: index-module_cursor__PQg0P 1.1s infinite step-start; } @keyframes index-module_cursor__PQg0P { 50% { opacity: 0; } } #payment-icons-cart_payment_icon_LNm8HV.payment-icons-container { width: 100%; margin-top: 0px; margin-bottom: 0px; margin-left: 0; margin-right: 0; padding: 0; } #payment-icons-cart_payment_icon_LNm8HV .payment-icons-wrapper { margin: 0 auto; gap: 6px !important; } #payment-icons-cart_payment_icon_LNm8HV .payment-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 1 !important; visibility: visible !important; height: 16px !important; } #payment-icons-cart_payment_icon_LNm8HV .payment-icon svg { max-height: 100%; width: auto; min-width: 30px; display: block; opacity: 1 !important; visibility: visible !important; height: 16px !important; } @media screen and (max-width: 749px) { #payment-icons-cart_payment_icon_LNm8HV .payment-icons-wrapper { gap: 3px !important; } #payment-icons-cart_payment_icon_LNm8HV .payment-icon { height: 12.8px !important; } #payment-icons-cart_payment_icon_LNm8HV .payment-icon svg { height: 12.8px !important; } } #CartDrawer { --global_section_background_color: #FFFFFF; --cart-drawer-primary-background-color: #ffffff; --cart-drawer-background-gradient: linear-gradient(57deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 100%); --cart-drawer-primary-text-color: #0c0c0d; --cart-drawer-header-background: #ffffff; --cart-drawer-item-saving-color: #0c0c0d; --cart-drawer-item-saving-background: #e4e4e4; --cart-drawer-checkout-button-background: #02a691; --cart-drawer-checkout-button-text-color: #ffffff; --cart-drawer-fs-icon-default-color: #e4e4e4; --cart-drawer-fs-icon-active-color: #000000; --cart-drawer-icons-active-bg: #000000; --cart-drawer-freq-bought-background: #EDEDED; --cart-drawer-product-bg: #ffffff; --cart-drawer-footer-bg: #ffffff; --cart-drawer-secondary-text: #0c0c0d; --cart-drawer-accent-color: #444444; --cart-drawer-divider-color: #e5e5e5; --cart-drawer-active-icon-color: #EF4A65; --cart-drawer-discount-bg-color: #02a691; --cart-drawer-discount-text-color: #ffffff; --cart-drawer-discount-border-radius: 4px; --cart-drawer-discount-icon-color: #ffffff; } .free-shipping-main.first-gift { position: absolute; margin-left: unset; margin-right: unset; left: calc(15px + ((100% - 30px) * 0 / 100) - 15px); } .free-gift-main.first-gift { position: absolute; margin-left: unset; margin-right: unset; left: calc(15px + ((100% - 30px) * 0 / 100) - 15px); } /* Second gift icon: fixed at 100% (right end of progress bar) */ .free-shipping-main.second-gift { position: absolute; margin-left: unset; margin-right: unset; left: calc(100% - 38px); } .free-gift-main.second-gift { position: absolute; margin-left: unset; margin-right: unset; left: calc(100% - 38px); } .free-product-progress-bar.has-equal-goals .free-gift-main.first-gift { left: calc(100% - 84px); } .free-product-progress-bar.has-equal-goals .free-shipping-main.second-gift { left: calc(100% - 40px); } /* Free Shipping Icon Colors */ .free-shipping-main svg path, .free-shipping-main svg circle { fill: var(--cart-drawer-fs-icon-default-color); } /* Icon container sizing for both SVG and IMG */ .free-shipping-main svg, .free-shipping-main img { width: 30px !important; height: 30px !important; background: var(--cart-drawer-progress-inactive-color) !important; /* border-radius is set in cart-drawer_pgb_style.liquid based on block settings */ padding: 4px !important; margin-bottom: 4px !important; display: block !important; } .free-gift-main svg, .free-gift-main img { width: 30px !important; height: 30px !important; background: var(--cart-drawer-progress-inactive-color) !important; /* border-radius is set in cart-drawer_pgb_style.liquid based on block settings */ padding: 4px !important; margin-bottom: 4px !important; display: block !important; } /* Active state for icons */ .free-shipping-main.free-shipping-main-color svg, .free-shipping-main.free-shipping-main-color img { background: var(--cart-drawer-progress-active-color) !important; } .free-shipping-main.free-shipping-main-color svg path, .free-shipping-main.free-shipping-main-color svg circle { fill: var(--cart-drawer-progress-active-icon-fill-color) !important; } .free-gift-main.free-gift-main-color svg, .free-gift-main.free-gift-main-color img { background: var(--cart-drawer-progress-active-color) !important; } .free-gift-main.free-gift-main-color svg path, .free-gift-main.free-gift-main-color svg circle { fill: var(--cart-drawer-progress-active-icon-fill-color) !important; } .drawer { visibility: hidden; } /* Apply default color to inactive gift icon */ .free-gift-main svg path, .free-gift-main svg circle { /* Assuming gift icon also might have circles */ fill: var(--cart-drawer-fs-icon-default-color); } .discounts { font-size: 1rem; display: flex letter-spacing: var(--letter-spacing-body); text-transform: uppercase; align-items: center; } /* Override global accent color for cart buttons */ .cart-drawer .quantity__button, .cart-drawer { background-color: transparent !important; border-color: #E2E2E2 !important; color: currentColor !important; } .cart-drawer .cart-remove-button { border: none !important; padding: 0 !important; } .cart-drawer .quantity__button:focus, .cart-drawer .quantity__button:active, .cart-drawer .cart-remove-button:focus, .cart-drawer .cart-remove-button:active { outline: none !important; background-color: transparent !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; } .cart-drawer quantity-input.quantity.cart-quantity .quantity__button:active, .cart-drawer quantity-input.quantity.cart-quantity .quantity__button:focus { background-color: #f5f5f5 !important; } .cart-drawer .cart-remove-button:hover, .cart-drawer .cart-remove-button:active, .cart-drawer .cart-remove-button:focus { opacity: 0.8; background-color: transparent !important; } /* IMPORTANT: Ensure the .gb-price-drawer-saving class always uses fixed colors regardless of theme settings */ /* .gb-price-drawer-saving { background:rgb(255, 237, 237) !important; color: #FF1717 !important; } */ /* Apply custom cart drawer colors to specific elements */.cart-drawer .drawer__header { background-color: var(--cart-drawer-header-background); height: 50px !important; min-height: 50px !important; max-height: 50px !important; display: flex !important; align-items: center !important; } .cart-drawer .drawer__close { top: 8px !important; } .cart-drawer .drawer__contents { padding-top: 16px !important; padding-bottom: 16px !important; } .cart-drawer .cart-item { background-color: var(--cart-drawer-product-bg); } .cart-drawer .drawer__footer { background-color: var(--cart-drawer-footer-bg); border-top-color: var(--cart-drawer-divider-color); padding: 15px 15px 15px 15px !important; } .cart-drawer .drawer__cart-items-wrapper .cart-items { border-color: var(--cart-drawer-divider-color); } .cart-drawer .cart__checkout-button { background-color: var(--cart-drawer-checkout-button-background) !important; color: var(--cart-drawer-checkout-button-text-color) !important; border-radius: 20px !important; } /* Additional checkout button text color overrides */ .cart-drawer .cart__checkout-button, .cart-drawer .cart__checkout-button *, .cart-drawer .cart__checkout-button:hover, .cart-drawer .cart__checkout-button:focus, .cart-drawer .cart__checkout-button:active, .cart-drawer .cart__checkout-button:visited, .cart-drawer button[name="add"], .cart-drawer input[type="submit"][name="add"] { color: var(--cart-drawer-checkout-button-text-color) !important; } /* Ensure checkout button text elements don't inherit other colors */ .cart-drawer .cart__checkout-button span, .cart-drawer .cart__checkout-button .loading__spinner, .cart-drawer .cart__checkout-button .icon { color: var(--cart-drawer-checkout-button-text-color) !important; } .cart-drawer .cart-item__price-wrapper, .cart-drawer .totals__subtotal-value, .cart-drawer .price--end, .cart-drawer .product-option, .cart-drawer .product-option *, .cart-drawer .tax-note, .cart-drawer .tax-note * { color: var(--cart-drawer-secondary-text); } .cart-drawer .totals__total-value { color: var(--cart-drawer-primary-text-color); } /* Apply accent color to final price */ .cart-drawer .cart-item__final-price.product-option, .cart-drawer strong.cart-item__final-price { color: var(--cart-drawer-accent-color) !important; } /* Apply accent color to toggle switch */ .cart-drawer .gb-shipping-protection-button input:checked + .slider { background-color: var(--cart-drawer-accent-color) !important; } /* Apply accent color to toggle switch on focus */ .cart-drawer .gb-shipping-protection-button input:focus + .slider { box-shadow: 0 0 1px var(--cart-drawer-accent-color) !important; } .cart-drawer .free-product-progress-bar { border-color: var(--cart-drawer-divider-color); } /* Removed frequently bought background color per user request */ /* .cart-drawer product-info.gb-main-freq-bg-color { background-color: var(--cart-drawer-freq-bought-background); } */ /* Cart item image border radius customization */ .cart-drawer .cart-item__image, .cart-drawer .cart-item__image-container { border-radius: 8px !important; } cart-drawer.drawer, .drawer.cart-drawer, cart-drawer.drawer.active, cart-drawer .drawer { left: auto !important; right: 0 !important; justify-content: flex-end !important; padding-right: 0 !important; padding-left: 0 !important; margin-right: 0 !important; margin-left: 0 !important; } /* Mobile: Full width - Override component-cart-drawer.css */ cart-drawer .drawer__inner, cart-drawer.is-empty .drawer__inner, .cart-drawer .drawer__inner, .drawer.active .drawer__inner { max-width: 100% !important; width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; border-left: none !important; border-right: none !important; } /* Ensure mobile full width at smaller viewports */ @media screen and (max-width: 749px) { cart-drawer .drawer__inner, cart-drawer.is-empty .drawer__inner, .cart-drawer .drawer__inner, .drawer.active .drawer__inner { max-width: 100% !important; width: 100% !important; border-radius: 0 !important; } } /* Desktop: Customizable width, aligned to the right */ @media screen and (min-width: 750px) { cart-drawer .drawer__inner, cart-drawer.is-empty .drawer__inner, .cart-drawer .drawer__inner, .drawer.active .drawer__inner { max-width: 40rem !important; width: 40rem !important; margin-right: 0 !important; margin-left: auto !important; } } .cart-drawer .cart-item__discounted-prices s, .cart-drawer s.cart-item__old-price { color: var(--cart-drawer-secondary-text); } /* Cart Drawer Payment Icons */ .cart-drawer-payment-icons { margin-top: 4px; padding: 0; } /* Override desktop flex layout for cart drawer to stack payment icons below button */ .cart-drawer .cart__ctas { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 0px !important; } .cart-drawer-payment-icons .payment-icons-container { margin: 0; } .cart-drawer-payment-icons .payment-icons-wrapper { gap: 8px; justify-content: center; } .cart-drawer-payment-icons .payment-icon svg { height: 24px; width: auto; border-radius: 4px; } @media screen and (max-width: 749px) { .cart-drawer-payment-icons { margin-top: 4px; padding: 0; } .cart-drawer-payment-icons .payment-icons-wrapper { gap: 6px; } .cart-drawer-payment-icons .payment-icon svg { height: 19.2px; } } /* Fix quantity popover to use cart drawer colors instead of global theme colors */ .cart-drawer quantity-popover .quantity { background: var(--cart-drawer-product-bg) !important; color: var(--cart-drawer-primary-text-color) !important; } /* Ensure quantity popover text elements inherit the cart drawer text color */ .cart-drawer quantity-popover .quantity__button, .cart-drawer quantity-popover .quantity__input, .cart-drawer quantity-popover .quantity__rules { color: var(--cart-drawer-primary-text-color); } /* Override quantity popover button backgrounds to match cart drawer styling */ .cart-drawer quantity-popover .quantity__button { background-color: transparent; border-color: var(--cart-drawer-divider-color); } /* Ensure all text elements in cart drawer use cart drawer text color */ .cart-drawer, .cart-drawer *:not(.gb-price-drawer-saving) :not(.cart-item__final-price) :not(strong.cart-item__final-price) :not(span.gb-cart-total-item) :not(.cart__checkout-button) :not(.cart__checkout-button *) :not(.gb-shipping-protection) :not(.gb-shipping-protection *) :not(.free-shipping-main) :not(.free-shipping-main *) :not(.free-gift-main) :not(.free-gift-main *) :not(.social-proof-bar) :not(.social-proof-bar *) :not(.discount-banner) :not(.discount-banner *) :not(.upsell-button-text) :not(.upsell-price) :not(.upsell-add-button) :not(.upsell-add-button *) :not([class^="upsell-add-button-"]) :not([class^="upsell-add-button-"] *) :not(.upsell-best-seller-tag) :not(.upsell-best-seller-tag *) not(.cartitem-free-product-label) :not(.cartitem-free-product-label *) :not(.discount_discount-value) :not(.discount_discount-value *) :not(.cart-discount-code-button) :not(.cart-discount-code-button *) :not(.cart-discount-code-input) :not(.cart-discount-code-input *) { color: var(--cart-drawer-primary-text-color); } /* Specific overrides for common text elements */ .cart-drawer .cart-item__name, .cart-drawer .cart-item__details, .cart-drawer .cart-item__totals, .cart-drawer .cart-item .product-option, .cart-drawer .drawer__heading, .cart-drawer .totals, .cart-drawer .tax-note, .cart-drawer p, .cart-drawer span, .cart-drawer div { color: var(--cart-drawer-primary-text-color); } /* Additional specific override for drawer heading */ .cart-drawer .drawer__heading { color: var(--cart-drawer-primary-text-color) !important; font-size: 20px !important; } /* Drawer Heading Font Size - Mobile */ @media only screen and (max-width: 767px) { .cart-drawer .drawer__heading { font-size: 22px !important; } } /* Make sure links respect cart drawer text color */ .cart-drawer a:not(.cart__checkout-button) { color: var(--cart-drawer-primary-text-color); } /* Specific override for cart item name link */ .cart-drawer .gb-cart-drawer-lb td.cart-item__details a.cart-item__name, .cart-drawer .cart-item__details a.cart-item__name, .cart-drawer a.cart-item__name { color: var(--cart-drawer-primary-text-color) !important; } /* Secondary text elements */ .cart-drawer .cart-item__price-wrapper *, .cart-drawer .totals__subtotal-value *, .cart-drawer .price--end * { color: var(--cart-drawer-secondary-text); } /* Cart total item badge - inverted colors for contrast */ .cart-drawer span.gb-cart-total-item { background-color: var(--cart-drawer-primary-text-color) !important; color: var(--cart-drawer-primary-background-color) !important; } /* Checkout button text color override */ .cart-drawer .cart__checkout-button, .cart-drawer .cart__checkout-button * { color: var(--cart-drawer-checkout-button-text-color) !important; } /* Shipping protection text color override */ /* Free shipping icon color overrides - Default state */ .cart-drawer .free-shipping-main svg, .cart-drawer .free-shipping-main svg path, .cart-drawer .free-shipping-main svg circle, .cart-drawer .free-shipping-main svg rect, .cart-drawer .free-shipping-main svg polygon, .cart-drawer .free-shipping-main svg g, .cart-drawer .free-shipping-main i { fill: var(--cart-drawer-fs-icon-default-color) !important; color: var(--cart-drawer-fs-icon-default-color) !important; } /* Free shipping icon color overrides - Active state */ .cart-drawer .free-shipping-main.free-shipping-main-color svg path, .cart-drawer .free-shipping-main.free-shipping-main-color svg circle, .cart-drawer .free-shipping-main.free-shipping-main-color svg rect, .cart-drawer .free-shipping-main.free-shipping-main-color svg polygon, .cart-drawer .free-shipping-main.free-shipping-main-color svg g, .cart-drawer .free-shipping-main.free-shipping-main-color i { fill: var(--cart-drawer-progress-active-icon-fill-color) !important; color: var(--cart-drawer-progress-active-icon-fill-color) !important; } /* Free gift icon color override - Default state */ .cart-drawer .free-gift-main svg, .cart-drawer .free-gift-main svg path, .cart-drawer .free-gift-main svg circle, .cart-drawer .free-gift-main svg rect, .cart-drawer .free-gift-main svg polygon, .cart-drawer .free-gift-main svg g, .cart-drawer .free-gift-main i { fill: var(--cart-drawer-fs-icon-default-color) !important; color: var(--cart-drawer-fs-icon-default-color) !important; } /* Free gift icon color override - Active state */ .cart-drawer .free-gift-main.free-gift-main-color svg path, .cart-drawer .free-gift-main.free-gift-main-color svg circle, .cart-drawer .free-gift-main.free-gift-main-color svg rect, .cart-drawer .free-gift-main.free-gift-main-color svg polygon, .cart-drawer .free-gift-main.free-gift-main-color svg g, .cart-drawer .free-gift-main.free-gift-main-color i { fill: var(--cart-drawer-progress-active-icon-fill-color) !important; color: var(--cart-drawer-progress-active-icon-fill-color) !important; } /* Discount banner color overrides */ /* Item saving badge colors - customizable when theme colors are off */.gb-price-drawer-saving { background-color: var(--cart-drawer-item-saving-background) !important; color: var(--cart-drawer-item-saving-color) !important; } /* NOTE: .gb-price-drawer-saving colors are now handled conditionally near the end of the style block */ /* Apply custom cart drawer colors to specific elements */@keyframes spin { to { transform: rotate(360deg); } } .spin-animation { display: none; position: absolute; height: 15px; width: 15px; border: solid; border-radius: calc(infinity * 1px); border-width: 2px; border-color: rgba(0, 0, 0, 0.3); border-top-color: #fff; animation: var(--animate-spin); } .gb-shipping-protection-button .spin-animation { top: 6px; left: 5px; height: 15px; width: 15px; } .cart-drawer .gb-shipping-protection .complete-check { display: none; color: white !important; position: absolute; top: 4px; left: 5px; height: 15px; width: 15px; } button.quantity__button, button.cart-remove-button, .gb-shipping-protection-button { position: relative; } button.cart-remove-button { width: 50px; } .quantity__button .spin-animation { top: 7px; left: 4px; } .cart-item__quantity .spin-animation { display: none; } .cart-drawer .bestseller-icon { display: inline-block; vertical-align: middle; width: 10px; height: 10px; margin-right: 2px; fill: currentColor; } /* Style custom SVG icons to match default icon */ .cart-drawer .placeholder-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .cart-drawer .placeholder-wrapper .placeholder-svg { width: 80%; height: 80%; } @keyframes pulse-success { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes pulse-error { 0% { transform: scale(1); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-3px); } 100% { transform: scale(1); } } /* Button spinner animation */ .button-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .is-loading { opacity: 0.8 !important; } .upsell-block-description-wrapper { width: 100%; display: block; margin-bottom: 12px; padding: 0; position: relative; z-index: 10; clear: both; overflow: visible; } .upsell-block-description { font-size: 14px; font-weight: 500; color: #333 !important; text-align: center; display: block !important; width: 100%; margin: 0 auto; padding: 8px 16px; background-color: transparent; position: static; visibility: visible !important; opacity: 1 !important; } .upsell-product-container { margin-bottom: 4px; padding: 2px 13px; text-align: left; font-size: 14px; letter-spacing: var(--letter-spacing-body); font-weight: var(--font-weight-semibold) !important; } /* Upsell Header Styling */ .cart-drawer .upsell-header-wrapper { width: 100%; display: block; margin-bottom: 12px; padding: 0; position: relative; z-index: 10; clear: both; overflow: visible; } .cart-drawer .upsell-header-text { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100%; letter-spacing: var(--letter-spacing-body); /* margin and padding now controlled via inline styles in sections/cart-drawer.liquid */ /* margin: 8px 0; */ /* padding: 8px 16px; */ font-weight: 500; background-color: transparent; position: static; } @media screen and (max-width: 749px) { .upsell-block-description { padding: 8px 15px !important; } } .upsell_slider { width: 100%; overflow-x: hidden; } .upsell_slider .dots-and-arrows { width: 100%; overflow-x: hidden; text-align: center; } .upsell_slider .upsell_block_container { display: flex; text-align: center; overflow-x: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .upsell_block_container::-webkit-scrollbar { display: none; } .upsell_slider .upsell_block_container > div.upsell-product-container { scroll-snap-align: start; flex-shrink: 0; margin-top: px; margin-bottom: px; margin-right: 0; transform-origin: center center; transform: scale(1); transition: transform 0.5s; position: relative; display: flex; justify-content: center; align-items: center; font-size: 100px; } .upsell_slider .slide_item { display: inline-flex; margin-left: 4px; margin-right: 4px; width: 8px; height: 8px; background: #d7d7d7; border-radius: 50%; text-decoration: none; align-items: center; justify-content: center; position: relative; cursor: pointer; } .upsell_slider .slide_item.active { background: #333; } .dots-and-arrows { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-top: 0; } .slide-arrow { display: none; /* Hidden by default, shown on desktop */ width: 20px; height: 20px; background-color: transparent; border: none; cursor: pointer; padding: 0; margin: 0 8px; } .slide-arrow svg { width: 10px; height: 10px; fill: rgb(155, 155, 155); transition: fill 0.2s; background-color: white; border-radius: 50px; } .slide-arrow:hover svg { fill: #000; } @media (min-width: 768px) { .slide-arrow { display: inline-block; } } .cart-drawer, .cart-drawer *:not(.gb-price-drawer-saving) :not(.cart-item__final-price) :not(strong.cart-item__final-price) :not(span.gb-cart-total-item) :not(.cart__checkout-button) :not(.cart__checkout-button *) :not(.gb-shipping-protection) :not(.gb-shipping-protection *) :not(.free-shipping-main) :not(.free-shipping-main *) :not(.free-gift-main) :not(.free-gift-main *) :not(.social-proof-bar) :not(.social-proof-bar *) :not(.discount-banner) :not(.discount-banner *) :not(.upsell-button-text) :not(.upsell-price) :not(.upsell-add-button) :not(.upsell-add-button *) :not([class^="upsell-add-button-"]) :not([class^="upsell-add-button-"] *) :not(.upsell-best-seller-tag) :not(.upsell-best-seller-tag *) :not(.cartitem-free-product-label) :not(.cartitem-free-product-label *) :not(.discount_discount-value) :not(.discount_discount-value *) :not(.cart-discount-code-button) :not(.cart-discount-code-button *) :not(.cart-discount-code-input) :not(.cart-discount-code-input *) { color: var(--cart-drawer-primary-text-color); } .is-empty .upsell_block_container, .is-empty .upsell-block-description, .is-empty .upsell_slider > span.slide_item, .is-empty .dots-and-arrows { display: none !important; } .announcement-bar-section-sections--21537299038294__custom_announcement_bar_inxgM4 { background: #075431 !important; background-image: none !important; overflow: hidden; position: relative; } .announcement-bar-section-sections--21537299038294__custom_announcement_bar_inxgM4, .announcement-bar-section-sections--21537299038294__custom_announcement_bar_inxgM4 * { color: #ffffff !important; font-size: 11px; } @media screen and (min-width: 750px) { .announcement-bar-section-sections--21537299038294__custom_announcement_bar_inxgM4, .announcement-bar-section-sections--21537299038294__custom_announcement_bar_inxgM4 * { font-size: 11px; } } /* Slider Container - fixed height from settings */ .announcement-slider-sections--21537299038294__custom_announcement_bar_inxgM4 { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; height: 40px; } @media screen and (min-width: 750px) { .announcement-slider-sections--21537299038294__custom_announcement_bar_inxgM4 { height: 40px; } } /* All slides are absolute and fill full height */ .announcement-slider-sections--21537299038294__custom_announcement_bar_inxgM4 .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4 { position: absolute; height: 100%; } .announcement-slider-sections--21537299038294__custom_announcement_bar_inxgM4 .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4.active { position: absolute; height: 100%; } /* Individual Slides - active slide is relative to set container height */ .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4 { position: absolute; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; transform: translateY(100%); transition: transform 500ms ease; pointer-events: none; z-index: 1; padding: 12px 15px; box-sizing: border-box; visibility: hidden; } /* Entering slide - positioned for animation start */ .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4.entering { transform: translateY(100%); visibility: visible; } /* Active slide is position relative so it determines container height */ .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4.active { position: relative; transform: translateY(0); pointer-events: auto; z-index: 3; visibility: visible; } /* Exiting slide stays fully visible while sliding out */ .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4.exiting { transform: translateY(-100%); z-index: 2; visibility: visible; } @media screen and (max-width: 749px) { .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4 { padding: 8px 15px; } } /* Per-slide highlight text styling */ .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4[data-slide-index="0"] .announcement-highlight { color: #ffd700 !important; } .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4[data-slide-index="1"] .announcement-highlight { color: #ffd700 !important; } .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4[data-slide-index="2"] .announcement-highlight { color: #ffd700 !important; } .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4[data-slide-index="3"] .announcement-highlight { color: #ffd700 !important; } .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4[data-slide-index="4"] .announcement-highlight { color: #ffd700 !important; } /* Static mode (no slider) */ .announcement-static-sections--21537299038294__custom_announcement_bar_inxgM4 { text-align: center; padding: 12px 15px; } @media screen and (max-width: 749px) { .announcement-static-sections--21537299038294__custom_announcement_bar_inxgM4 { padding: 8px 15px; } } .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4 p, .announcement-static-sections--21537299038294__custom_announcement_bar_inxgM4 p { margin: 0; padding: 0; } /* Slide content wrapper with icon - applies to ALL slides */ .announcement-slide-content-sections--21537299038294__custom_announcement_bar_inxgM4, .announcement-slider-sections--21537299038294__custom_announcement_bar_inxgM4 .announcement-slide-content-sections--21537299038294__custom_announcement_bar_inxgM4, .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4 .announcement-slide-content-sections--21537299038294__custom_announcement_bar_inxgM4 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* Padding is now on the slide itself, not the content wrapper */ padding: 0 !important; max-width: 100%; flex-wrap: wrap; } .announcement-slide-icon-sections--21537299038294__custom_announcement_bar_inxgM4 { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; } .announcement-slide-icon-sections--21537299038294__custom_announcement_bar_inxgM4 img { width: 100%; height: 100%; object-fit: contain; } .announcement-slide-text-sections--21537299038294__custom_announcement_bar_inxgM4 { display: inline; } .announcement-slide-text-sections--21537299038294__custom_announcement_bar_inxgM4 p { display: inline; margin: 0; padding: 0; } @media screen and (max-width: 749px) { .announcement-slide-text-sections--21537299038294__custom_announcement_bar_inxgM4, .announcement-slide-text-sections--21537299038294__custom_announcement_bar_inxgM4 p { display: block; text-align: center; word-wrap: break-word; overflow-wrap: break-word; } .announcement-slide-content-sections--21537299038294__custom_announcement_bar_inxgM4 { flex-direction: row; gap: 8px; width: 100%; } } /* Button styling */ .announcement-slide-button-sections--21537299038294__custom_announcement_bar_inxgM4 { display: inline-block; background-color: #484848; color: #fffefd !important; font-size: 12px !important; padding: 6px 12px; border-radius: 4px; text-decoration: none; font-weight: 600; transition: opacity 0.2s ease, background-color 0.2s ease; white-space: nowrap; letter-spacing: var(--letter-spacing-body); } .announcement-slide-button-sections--21537299038294__custom_announcement_bar_inxgM4:hover { opacity: 0.85; } /* Per-slide background colors */ .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4[data-slide-index="0"][data-custom-bg="true"] { background-color: #000000; } .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4[data-slide-index="1"][data-custom-bg="true"] { background-color: #000000; } .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4[data-slide-index="2"][data-custom-bg="true"] { background-color: #000000; } .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4[data-slide-index="3"][data-custom-bg="true"] { background-color: #000000; } .announcement-slide-sections--21537299038294__custom_announcement_bar_inxgM4[data-slide-index="4"][data-custom-bg="true"] { background-color: #000000; } /* Navigation Arrows */ .announcement-nav-sections--21537299038294__custom_announcement_bar_inxgM4 { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: transparent; border: none; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s ease; } .announcement-nav-sections--21537299038294__custom_announcement_bar_inxgM4:hover { opacity: 1; } .announcement-nav-sections--21537299038294__custom_announcement_bar_inxgM4 svg { width: 16px; height: 16px; fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .announcement-nav-prev-sections--21537299038294__custom_announcement_bar_inxgM4 { left: 10px; } .announcement-nav-next-sections--21537299038294__custom_announcement_bar_inxgM4 { right: 10px; } @media screen and (min-width: 750px) { .announcement-nav-sections--21537299038294__custom_announcement_bar_inxgM4 { padding: 10px; } .announcement-nav-sections--21537299038294__custom_announcement_bar_inxgM4 svg { width: 18px; height: 18px; } .announcement-nav-prev-sections--21537299038294__custom_announcement_bar_inxgM4 { left: 20px; } .announcement-nav-next-sections--21537299038294__custom_announcement_bar_inxgM4 { right: 20px; } } /* Per-slide text colors - need higher specificity to override global */ header-drawer { justify-self: start; margin-left: -1.2rem; }/* Header Top Border Styling */.header-wrapper--border-top { border-top: 1px solid #afccbd; }/* Full Width Header Styling */@media screen and (min-width: 990px) { header-drawer { display: none; } } @media screen and (max-width: 989px) { .header__inline-menu { display: none; } }.menu-drawer-container { display: flex; } .list-menu { list-style: none; padding: 0; margin: 0; } .list-menu--inline { display: inline-flex; flex-wrap: wrap; } summary.list-menu__item { padding-right: 3rem; padding-right: 3rem; } .list-menu__item { display: flex; font-weight: var(--font-weight-regular); align-items: center; line-height: calc(1 + 0.3 / var(--font-body-scale)); } .list-menu__item--link { text-decoration: none; font-weight: var(--font-weight-regular); padding-bottom: 1rem; padding-top: 1rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); } /* Header menu item spacing and styling fixes */ .header__inline-menu .list-menu--inline > li { margin-right: 2rem; } .header__inline-menu .list-menu--inline > li:last-child { margin-right: 0; } .header__menu-item { text-decoration: none !important; } .header__menu-item:hover { text-decoration: none !important; } @media screen and (min-width: 990px) { .header-wrapper { --header-menu-underline-thickness: 1px; --header-menu-underline-color: #141720; } .header__inline-menu .header__menu-item > span { display: inline-block; position: relative; text-decoration: none; } .header__inline-menu .header__menu-item > span::after { content: ''; position: absolute; width: 100%; height: var(--header-menu-underline-thickness); left: 0; bottom: -0.3rem; background-color: var(--header-menu-underline-color); border-radius: calc(var(--header-menu-underline-thickness) / 2); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s ease-out; } .header__inline-menu .header__menu-item:hover > span::after, .header__inline-menu .header__menu-item:focus-visible > span::after, .header__inline-menu details[open] > .header__menu-item > span::after, span.header__active-menu-item::after { transform: scaleX(1) !important; } .header__inline-menu .header__menu-item:hover span, .header__inline-menu details[open] > .header__menu-item, .header__inline-menu .header__active-menu-item { text-decoration: none; } } /* Header menu hover functionality */ @media screen and (min-width: 990px) { header-menu:hover details[open] .header__submenu, header-menu:hover details[open] .mega-menu__content { opacity: 1; width: 150px; visibility: visible; transform: translateY(0); } .header__submenu, .mega-menu__content { transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; } details:not([open]) .header__submenu, details:not([open]) .mega-menu__content { opacity: 0; visibility: hidden; transform: translateY(-10px); } } /* Header submenu spacing and styling */ .header__submenu { padding: 1rem 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 8px; background-color: rgb(var(--color-header)); z-index: 100; width: auto; min-width: 16rem; max-width: 20rem; top: calc(80% + 5px); } .header__submenu .list-menu__item { padding: 0.8rem 1.5rem; margin: 0; border-bottom: none; } .header__submenu .header__menu-item { display: block; padding: 0.8rem 1.5rem; margin: 0; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; border-radius: 0; } .header__submenu .header__menu-item:hover { background-color: rgba(var(--color-foreground), 0.05); text-decoration: none; } .header__submenu li:first-child .header__menu-item { border-top-left-radius: 8px; border-top-right-radius: 8px; } .header__submenu li:last-child .header__menu-item { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } /* Mega menu spacing and styling */ .mega-menu__content { padding: 2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 8px; background-color: rgb(var(--color-header)); z-index: 100; top: calc(100% + 5px); } .mega-menu__list { gap: 2rem; } .mega-menu__link { padding: 0.6rem 0; display: block; text-decoration: none; transition: color 0.2s ease; } .mega-menu__link:hover { color: rgba(var(--color-foreground), 0.7); text-decoration: none; } .mega-menu__link--level-2 { font-weight: var(--font-weight-medium); margin-bottom: 0.5rem; } .mega-menu__list .list-unstyled { margin-top: 0.5rem; } .mega-menu__list .list-unstyled a { padding: 0.4rem 0; font-size: 0.9em; opacity: 0.8; } .mega-menu__list .list-unstyled a:hover { opacity: 1; } .header__menu-item.link { text-decoration: none !important; } @media screen and (min-width: 750px) { .list-menu__item--link { padding-bottom: 0.5rem; padding-top: 0.5rem; } } details[open] > .header__menu-item, details[open]:hover > .header__menu-item { color: #000000 !important; text-decoration-color: #000000 !important; } /* Header menu hover functionality */ @media screen and (min-width: 990px) { header-menu:hover details .header__submenu.list-menu--disclosure, header-menu:hover details .mega-menu__content, header-menu details[open] .header__submenu.list-menu--disclosure, header-menu details[open] .mega-menu__content { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; display: block !important; } .header__submenu, .mega-menu__content { transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-10px); } /* Ensure submenus are hidden by default */ header-menu:not(:hover) details:not([open]) .header__submenu, header-menu:not(:hover) details:not([open]) .mega-menu__content { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-10px); } /* 3rd level menu: flyout lateral (izquierda a derecha) */ .header__submenu.list-menu--disclosure > li { position: relative; } .header__submenu--flyout { position: absolute !important; left: 98% !important; top: -10px !important; margin: 0 !important; margin-left: 4px !important; min-width: 14rem; max-width: 20rem; z-index: 101; background: #fff !important; background-color: #fff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 1rem 0 !important; opacity: 0; visibility: hidden; transform: translateX(-100%); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s ease-out; animation: none !important; } .header__submenu-item--has-flyout[open] > .header__submenu--flyout { opacity: 1; visibility: visible; transform: translateX(0); } } /* Header submenu spacing and styling */ .header__submenu { padding: 1rem 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 8px; background-color: rgb(var(--color-header)); z-index: 100; width: auto; min-width: 16rem; max-width: 20rem; } /* Ensure the parent header-menu has relative positioning */ header-menu { position: relative; } /* Ensure submenus are initially hidden */ .header__submenu.list-menu--disclosure { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-10px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; } .header__submenu .list-menu__item { padding: 0.8rem 1.5rem; margin: 0; border-bottom: none; } .header__submenu .header__menu-item { display: block; padding: 0.8rem 1.5rem; margin: 0; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; border-radius: 0; } .header__submenu .header__menu-item:hover { background-color: rgba(var(--color-foreground), 0.05); text-decoration: none; } .header__submenu li:first-child .header__menu-item { border-top-left-radius: 8px; border-top-right-radius: 8px; } .header__submenu li:last-child .header__menu-item { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } /* Mega menu spacing and styling */ .mega-menu__content { padding: 2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 8px; background-color: rgb(var(--color-header)); z-index: 100; top: calc(100% + 5px); position: absolute; left: 50%; transform: translateX(-50%); } .mega-menu__list { gap: 2rem; } .mega-menu__link { padding: 0.6rem 0; display: block; text-decoration: none; transition: color 0.2s ease; } .mega-menu__link:hover { color: rgba(var(--color-foreground), 0.7); text-decoration: none; } .mega-menu__link--level-2 { font-weight: var(--font-weight-medium); margin-bottom: 0.5rem; } .mega-menu__list .list-unstyled { margin-top: 0.5rem; } .mega-menu__list .list-unstyled a { padding: 0.4rem 0; font-size: 0.9em; opacity: 0.8; } .mega-menu__list .list-unstyled a:hover { opacity: 1; } .header-wrapper { /* Targeting .header-wrapper directly */ /* Fallback or default background if nothing is set and you want one */color: #000000; /* Set CSS variable for child elements if needed */ --color-header-foreground: #000000; } /* Apply text color to links and icons within the header when use_theme_colors is true */ .header-wrapper .header__heading-link, .header-wrapper .header__icon, .header-wrapper .list-menu__item, .header-wrapper .list-menu__item--link, .header-wrapper summary.list-menu__item, .header-wrapper .header__active-menu-item { color: rgb(var(--color-drawer-text)) !important; } .header-wrapper .header__icon svg, .header-wrapper .list-menu__item svg { fill: #000000; } /* Specific styling for cart bag icon */ .cart-bag-icon { fill: none !important; height: 27px !important; width: 27px !important; stroke: rgb(var(--color-drawer-text)) !important; } .cart-bag-icon path, .cart-bag-icon line { fill: none !important; stroke: rgb(var(--color-drawer-text)) !important; } /* Override any icon classes that might interfere */ svg.cart-bag-icon.icon, svg.cart-bag-icon.icon-cart-empty, svg.cart-bag-icon.icon-cart-empty-custom { fill: none !important; height: 27px !important; width: 27px !important; stroke: rgb(var(--color-drawer-text)) !important; } svg.cart-bag-icon.icon path, svg.cart-bag-icon.icon-cart-empty path, svg.cart-bag-icon.icon-cart-empty-custom path, svg.cart-bag-icon.icon line, svg.cart-bag-icon.icon-cart-empty line, svg.cart-bag-icon.icon-cart-empty-custom line { fill: none !important; stroke: rgb(var(--color-drawer-text)) !important; } /* Account icon sizing */ .header__icon--account .svg-wrapper svg, .header__icon--account account-icon svg, .menu-drawer__account .svg-wrapper svg, .menu-drawer__account account-icon svg { width: 40px !important; height: 40px !important; fill: currentColor !important; } .header__icon--account .svg-wrapper, .header__icon--account account-icon, .menu-drawer__account .svg-wrapper, .menu-drawer__account account-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .header { padding: 0px 3rem 0px 3rem; } .section-header { position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */ margin-bottom: 0px; } @media screen and (min-width: 750px) { .section-header { margin-bottom: 0px; } } @media screen and (min-width: 990px) { .header { padding-top: 0px; padding-bottom: 0px; } } #menu-drawer.gradient, .menu-drawer__submenu.gradient, .menu-drawer__menu-item, .menu-drawer__menu-item--active, .menu-drawer__close-button, .menu-drawer__utility-links a, .menu-drawer__account, .list-social__link { color: rgb(var(--color-drawer-text)) !important; } .list-social__link:hover, .menu-drawer__menu-item:hover { color: rgb(var(--color-drawer-text)) !important; } .menu-drawer svg, .menu-drawer .svg-wrapper svg { fill: #000000; } .header__menu-item:hover, .header__active-menu-item, .list-menu__item--active, .header__menu-item:hover span { color: rgb(var(--color-drawer-text)) !important; } .shop-product-section { letter-spacing: var(--letter-spacing-body); background-color: #ffffff; color: #1a371a; --accent-color: #1a371a; --dot-size: 8px; --dot-color: #cccccc; --dot-active-color: #000000; --desktop-arrow-bg: #e7f1eb; --desktop-arrow-border: #cfe3d8; --desktop-arrow-icon: #095230; --desktop-arrow-hover-bg: #d8e9df; --desktop-arrow-hover-border: #b9d6c6; --arrow-border-radius: 50%; --arrow-opacity: 0.9; } /* Added container class to handle the margin without affecting other sections */ .shop-product-info { gap: 4px; color: #1a371a; } .shop-thumbnail { border: 1px solid #f2f2f2; } .shop-thumbnail.active { border-color: #095230; } .shop-thumbnail .thumb-square { position: relative; } .shop-thumbnail .thumbnail-video-icon { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; color: #1a1a1a; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); z-index: 3; } .shop-thumbnail .thumbnail-video-icon svg { width: 8px; height: 8px; display: block; } .shop-indicator-dot { background-color: ; } /* Flèches mobiles - version plus spécifique */ .shop-product-section .shop-mobile-arrows { display: none !important; } @media screen and (max-width: 767px) { .shop-product-section .shop-mobile-arrows { display: flex !important; align-items: center; justify-content: space-between; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 5; } .shop-product-section .shop-mobile-arrow { width: 40px !important; height: 40px !important; border-radius: var(--arrow-border-radius); background-color: var(--desktop-arrow-bg); border: 1px solid var(--desktop-arrow-border); display: flex !important; align-items: center; justify-content: center; opacity: var(--arrow-opacity); pointer-events: auto; cursor: pointer; transition: all 0.2s ease; } } /* Masquer sur desktop */ @media screen and (min-width: 768px) { .shop-product-section .shop-mobile-arrows { display: none !important; } } /* Dynamic aspect ratio based on setting */ /* Default 1:1 square aspect ratio */ .shop-image-container.shop-square-container { aspect-ratio: 1; } /* Desktop thumbnails only - not mobile */ @media screen and (min-width: 768px) { .shop-thumbnail .thumb-square { padding-bottom: 100% !important; } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnail { height: auto; aspect-ratio: 1 !important; } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnails.mobile-2x2-grid .shop-thumbnail { height: auto; } } /* Make all thumbnails height auto for natural square appearance */ .shop-thumbnail { height: auto; } /* Mobile 4-in-row layout for thumbnails using swiper-wrapper style */ @media screen and (max-width: 767px) { /* When arrows are overlaid, add padding to avoid overlap */ .shop-thumbnails.mobile-2x2-grid { box-sizing: border-box !important; display: flex !important; position: relative !important; transition-property: transform !important; width: 100% !important; z-index: 1 !important; height: auto !important; justify-content: flex-start !important; align-items: flex-start !important; padding: 0 40px !important; margin: 5px 0px 0px !important; gap: 0 !important; } /* When arrows are NOT overlaid (arrows off), remove padding */ .shop-product-section[data-show-mobile-arrows="false"] .shop-thumbnails.mobile-2x2-grid { padding: 0 !important; } /* Full width image + 4 thumbnails specific spacing */ .shop-product-section[data-full-width-image="true"] .shop-thumbnails.mobile-2x2-grid { margin: 5px 0px 0px !important; } .shop-thumbnails.mobile-2x2-grid .shop-thumbnail { flex: 0 0 calc(25% - 3px) !important; width: calc(25% - 3px) !important; max-width: calc(25% - 3px) !important; box-sizing: border-box !important; padding: 0 !important; margin: 0 !important; height: auto !important; position: relative !important; border-radius: 4px !important; overflow: hidden !important; } .shop-thumbnails.mobile-2x2-grid .shop-thumbnail:not(:last-child) { margin-right: 4px !important; } .shop-thumbnails.mobile-2x2-grid .thumb-square { width: 100%; height: 0; padding-bottom: 100%; position: relative; box-sizing: border-box; overflow: hidden; border-radius: 4px; background: #f8f8f8; z-index: 2 !important; } .shop-thumbnails.mobile-2x2-grid .thumb-square img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; } } /* Thumbnail section padding option */ .shop-thumbnails { padding: 5px 15px !important; } /* Hide thumbnails on mobile */ /* Left column thumbnails on desktop */ /* Mobile: Reset left column layout to normal behavior */ @media screen and (max-width: 767px) { .shop-main-image-wrapper.shop-image-thumbnails-row { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; } .shop-main-image-wrapper.shop-image-thumbnails-row .shop-thumbnails-outer { flex: none !important; width: 100% !important; order: 2 !important; margin-top: 0 !important; } .shop-main-image-wrapper.shop-image-thumbnails-row .shop-image-container { flex: none !important; width: 100% !important; order: 1 !important; } .shop-thumbnails-wrapper.left-column-layout { flex-direction: row !important; align-items: center !important; justify-content: center !important; } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnails { display: flex !important; flex-direction: row !important; gap: 4px !important; width: 100% !important; justify-content: center !important; } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnail { width: auto !important; max-width: none !important; aspect-ratio: 1 !important; flex: 0 0 calc(25% - 3px) !important; } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnail .thumb-square { width: 100% !important; padding-bottom: 100% !important; } /* Ensure mobile 2x2 grid works properly with left column setting */ .shop-thumbnails-wrapper.left-column-layout .shop-thumbnails.mobile-2x2-grid { display: flex !important; flex-direction: row !important; gap: 0 !important; width: 100% !important; justify-content: center !important; } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnails.mobile-2x2-grid .shop-thumbnail { flex: 0 0 calc(25% - 3px) !important; width: calc(25% - 3px) !important; max-width: calc(25% - 3px) !important; } } /* Desktop: Apply left column layout */ @media screen and (min-width: 768px) { .shop-main-image-wrapper.shop-image-thumbnails-row { display: flex !important; flex-direction: row !important; gap: 0px !important; align-items: stretch !important; min-height: 0 !important; } .shop-main-image-wrapper.shop-image-thumbnails-row .shop-thumbnails-outer { flex: 0 0 80px !important; width: 80px !important; order: -1 !important; height: 100% !important; overflow-y: auto !important; margin-right: 15px !important; margin-top: 0 !important; align-self: stretch !important; } .shop-main-image-wrapper.shop-image-thumbnails-row .shop-image-container { flex: 1 !important; margin-top: 0 !important; align-self: stretch !important; min-height: 0 !important; height: auto !important; } .shop-thumbnails-wrapper.left-column-layout { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; max-width: 80px !important; margin-top: 0 !important; height: 100% !important; max-height: 100% !important; overflow-y: auto !important; } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnails { display: flex !important; flex-direction: column !important; gap: 6px !important; width: 100% !important; flex-wrap: nowrap !important; justify-content: flex-start !important; } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnail { width: 100% !important; max-width: 100% !important; /* Height and aspect-ratio set by dynamic CSS above */ } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnail .thumb-square { width: 100% !important; height: 100% !important; padding-bottom: 0 !important; position: relative !important; } /* Constrain mobile-2x2-grid height in desktop left column to match main image (JS sets --thumb-column-height) */ .shop-thumbnails-wrapper.left-column-layout .shop-thumbnails.mobile-2x2-grid { max-height: var(--thumb-column-height, 400px) !important; overflow-y: auto !important; flex-wrap: nowrap !important; align-content: flex-start !important; flex-direction: column !important; width: 100% !important; justify-content: flex-start !important; } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnails.mobile-2x2-grid .shop-thumbnail { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; /* Height set by dynamic CSS above */ } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnails.mobile-2x2-grid .shop-thumbnail .thumb-square { width: 100% !important; height: 100% !important; padding-bottom: 0 !important; position: relative !important; } } /* Fade to white at bottom of thumbnails (desktop only) */ @media screen and (min-width: 768px) { .shop-thumbnails-wrapper { position: relative; } .shop-thumbnails-wrapper::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; pointer-events: none; background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 1) 100% ); } /* Reserve space at bottom so the fade overlays padding, not the last thumb */ .shop-thumbnails-wrapper.left-column-layout .shop-thumbnails.mobile-2x2-grid { padding-bottom: 80px !important; } } /* Portrait image adaptation */ .shop-indicator-dot.active { background-color: ; } .shop-product-title { color: ; } .shop-product-price { color: !important; } .shop-compare-price { color: !important; } .shop-save-price { background-color: !important; color: !important; } .shop-product-description { color: ; } .shop-read-more, .shop-read-less { color: #1a371a; } .shop-custom-content { color: ; } /* Style for the add to cart button */ .shop-add-to-cart-button { background-color: !important; color: !important; border: 2px solid !important; } /* Add to cart button from blocks */ .shop-product-section .shop-add-to-cart-button, .shop-add-to-cart-wrapper .shop-add-to-cart-button, form .shop-add-to-cart-button, .shop-product-details .shop-add-to-cart-button { transition: background-color 0.3s ease !important; /* Use Section/Block Custom Colors and Sizing */ padding: 17px 20px !important; font-size: 13px !important; /* Always use global letter spacing and font weight for consistency */ letter-spacing: var(--global-button-letter-spacing, 1px) !important; font-weight: var(--global-button-font-weight, 700) !important; border-color: #141720 !important;background-color: var(--button-bg-color, #02a691) !important; color: #ffffff !important; border-radius: 10px !important; } /* Handle button-text and compare-price inside add to cart button */ :is(.shop-product-section, .shop-add-to-cart-wrapper, form) .shop-add-to-cart-button :is(.button-text, .compare-price) { /* Use Custom Button Text Sizing */ font-size: 13px !important; font-weight: var(--global-button-font-weight, 700) !important; letter-spacing: var(--global-button-letter-spacing, 1px) !important; text-transform: var(--global-button-text-transform, none) ; } .shop-product-section .shop-add-to-cart-button:hover, .shop-add-to-cart-wrapper .shop-add-to-cart-button:hover, form .shop-add-to-cart-button:hover, .shop-product-details .shop-add-to-cart-button:hover { /* Custom Section Hover State - Use CSS variable already defined in inline style */ background-color: var(--button-hover-color, #D63953) !important; } /* Shopify Payment Button Styling */ .shop-product-section shopify-payment-button, .shop-product-section .shopify-payment-button { margin-top: 5px !important; } .shop-product-section .shopify-payment-button__button, .shop-product-section .shopify-payment-button__button--unbranded { padding-top: var(--global-button-padding-y, 12px) !important; padding-bottom: var(--global-button-padding-y, 12px) !important; } @media (min-width: 768px) { .shop-carousel-container { max-width: %; } } /* Tablet and mobile specific styles */ @media (max-width: 799px) { .shop-product-info { gap: 6px; } } @media (max-width: 767px) { .shop-product-info { gap: 6px; } } /* Added CSS for block-level styling */ /* Main product image border radius */ .shop-main-image, .shop-main-image img, .shop-image-zoom-wrapper, .shop-video { border-radius: 0px !important; } /* Thumbnail border radius */ .shop-thumbnail, .shop-thumbnail img, .shop-thumbnail .thumb-square { border-radius: 0px !important; } } /* Load-in Animation */ .page-fade-in { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } /* ═══ BUTTON ═══ */ .lsf-trigger-wrap { display:flex;justify-content:center;padding:12px 0; font-family:'DM Sans',-apple-system,sans-serif; width:100vw;position:relative;left:50%;transform:translateX(-50%);max-width:100vw; } .lsf-trigger-btn { display:flex;align-items:center;justify-content:center; width:calc(100% - 32px);max-width:520px; background:#fff;color:#1a1a1a; border-top:1.5px solid #1a1a1a;border-left:1.5px solid #1a1a1a; border-right:3px solid #1a1a1a;border-bottom:3.5px solid #1a1a1a; border-radius:12px;padding:17px 18px; font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:16px;font-weight:500;letter-spacing:0;cursor:pointer; transition:all .15s ease;outline:none; -webkit-tap-highlight-color:transparent;user-select:none; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } .lsf-trigger-btn:hover{background:#fff;color:#1a1a1a;} .lsf-trigger-btn:active{ border-top:3px solid #1a1a1a;border-left:3px solid #1a1a1a; border-right:1.5px solid #1a1a1a;border-bottom:1.5px solid #1a1a1a; } /* ═══ OVERLAY – transparent, damit Website klar sichtbar bleibt ═══ */ .lsf-popup-overlay { display:none;position:fixed;inset:0; background:transparent; z-index:999999;padding:60px 20px; font-family:'DM Sans',-apple-system,sans-serif; opacity:0;transition:opacity .25s ease; } .lsf-popup-overlay.active{display:flex;align-items:center;justify-content:center;opacity:1;} /* ═══ CARD – flex column, sticky header/footer ═══ */ .lsf-popup-card { background:#fff;border-radius:16px; width:100%;max-width:440px; max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px); display:flex;flex-direction:column; position:relative;overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.12); transform:translateY(20px) scale(.98); transition:transform .35s cubic-bezier(.22,1,.36,1); } .lsf-popup-overlay.active .lsf-popup-card{ transform:translateY(0) scale(1); } @media (min-width:700px){ .lsf-popup-card{ max-width:580px; } } /* ═══ STICKY HEADER ═══ */ .lsf-head { flex-shrink:0;position:relative; padding:16px 56px 14px 20px; background:#fff;border-bottom:1px solid rgba(27,67,50,.12); display:flex;align-items:center;gap:12px;z-index:3; } .lsf-head-logo{ height:26px;width:auto;display:block; } .lsf-head-title{ font-family:'Playfair Display',Georgia,serif; font-size:17px;font-weight:600;color:#1B4332; line-height:1.2;letter-spacing:.01em; } /* ═══ CLOSE ═══ */ .lsf-popup-close{ position:absolute;top:50%;right:12px;transform:translateY(-50%); cursor:pointer;background:none;border:none;padding:4px;line-height:0; border-radius:50%;transition:background .2s ease; } .lsf-popup-close:hover{ background:rgba(27,67,50,.08); } .lsf-popup-close svg{ width:30px;height:30px;display:block; } .lsf-popup-close svg path{ stroke:#1B4332 !important; } /* ═══ SCROLLBARER BODY ═══ */ .lsf-body { flex:1 1 auto;overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch;overscroll-behavior:contain; scroll-behavior:smooth; padding:14px 20px 8px; position:relative; } .lsf-body::-webkit-scrollbar{ width:6px; } .lsf-body::-webkit-scrollbar-track{ background:transparent; } .lsf-body::-webkit-scrollbar-thumb{ background:rgba(27,67,50,.18);border-radius:3px; } .lsf-body::-webkit-scrollbar-thumb:hover{ background:rgba(27,67,50,.32); } .lsf-body{ scrollbar-width:thin;scrollbar-color:rgba(27,67,50,.18) transparent; } /* Scroll-Shadow – nur unten, sehr subtil */ .lsf-body::after{ content:'';position:sticky;left:0;right:0;bottom:0; height:16px;margin-top:-16px; pointer-events:none;display:block;z-index:1; background:linear-gradient(to top,rgba(27,67,50,.06),transparent); opacity:0;transition:opacity .3s ease; } .lsf-body.scrolled-up::after{ opacity:1; } .lsf-srv{ color:rgba(27,67,50,.75);font-size:11.5px;line-height:1.6;letter-spacing:.015em;margin-bottom:4px; } .lsf-t{ width:100%;border-collapse:collapse;color:#1B4332;font-size:12.5px;line-height:1.4;margin-top:6px;letter-spacing:.015em; } .lsf-t thead th{ font-weight:700;font-size:11px;text-align:left;padding:5px 0;border-top:2px solid rgba(27,67,50,.25);border-bottom:1px solid rgba(27,67,50,.15);letter-spacing:.03em; } .lsf-t .ca{ text-align:right;width:78px; } .lsf-t .cd{ text-align:right;width:68px; } .lsf-t td{ padding:5px 0;border-bottom:1px solid rgba(27,67,50,.15);vertical-align:top; } .lsf-t .ra{ text-align:right;white-space:nowrap;font-weight:500;padding-left:14px; } .lsf-t .rd{ text-align:right;white-space:nowrap;color:rgba(27,67,50,.75);padding-left:14px; } .lsf-t .ind td:first-child{ padding-left:12px; } .lsf-vg{ display:grid;grid-template-columns:1fr 1fr;border-top:2px solid rgba(27,67,50,.25);margin-top:6px; } .lsf-vc{ font-size:12px;color:#1B4332;letter-spacing:.015em; } .lsf-vc:first-child{ border-right:1px solid rgba(27,67,50,.15);padding-right:16px; } .lsf-vc:last-child{ padding-left:16px; } .vh{ display:flex;justify-content:space-between;padding:5px 0;font-weight:700;font-size:10.5px;border-bottom:1px solid rgba(27,67,50,.15);letter-spacing:.03em;gap:14px; } .vr{ display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px solid rgba(27,67,50,.15);gap:14px; } .vr:last-child{ border-bottom:none; } .vn{ flex:1;font-size:11.5px;line-height:1.35;letter-spacing:.015em; } .vn small{ color:rgba(27,67,50,.5);font-size:9.5px; } .vv{ white-space:nowrap;font-weight:500;font-size:11.5px;text-align:right; } .vd{ white-space:nowrap;color:rgba(27,67,50,.75);font-size:11px;min-width:46px;text-align:right; } .lsf-bl{ padding:8px 0;border-top:2px solid rgba(27,67,50,.25); } .lsf-bh{ display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;gap:14px; } .lsf-bh-title{ font-size:12.5px;font-weight:700;color:#1B4332;letter-spacing:.02em; } .lsf-bh>span{ font-size:11.5px;font-weight:500;color:rgba(27,67,50,.75); } .lsf-bg{ display:grid;grid-template-columns:1fr 1fr;gap:0 20px; } .bi{ display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px solid rgba(27,67,50,.08);font-size:11.5px;color:rgba(27,67,50,.88);letter-spacing:.015em;gap:14px; } .bi-n{ flex:1;line-height:1.4; } .bi-l{ font-style:italic;color:rgba(27,67,50,.5);font-size:9.5px; } .bi-m{ white-space:nowrap;font-weight:600;color:rgba(27,67,50,.75);margin-left:16px;font-size:11px; } .lsf-hn{ display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:rgba(212,168,67,.15);border:1px solid rgba(212,168,67,.4);border-radius:8px;padding:7px 12px;color:#A37F1F;font-size:11.5px;font-weight:600;letter-spacing:.02em; } .lsf-ot{ padding:8px 0;border-top:1px solid rgba(27,67,50,.15);margin-top:10px;color:rgba(27,67,50,.75);font-size:10.5px;line-height:1.6;letter-spacing:.015em; } .lsf-ot strong{ color:rgba(27,67,50,.9); } .lsf-ot p+p{ margin-top:3px; } .lsf-ft{ color:rgba(27,67,50,.5);font-size:9.5px;line-height:1.5;padding-bottom:4px;letter-spacing:.015em; } /* ═══ STICKY FOOTER ═══ */ .lsf-bot{ flex-shrink:0; display:grid;grid-template-columns:repeat(4,1fr); padding:12px 14px;background:#F5F1EB; border-top:1px solid rgba(27,67,50,.1); border-radius:0 0 16px 16px;z-index:2; } .lsf-bt{ display:flex;flex-direction:column;align-items:center;gap:3px;color:#1B4332;font-size:9px;font-weight:600;text-align:center;padding:4px 2px;letter-spacing:.02em;white-space:nowrap; } .lsf-bt-emoji{ font-size:18px;line-height:1; } @media (max-width:700px){ .lsf-popup-overlay{ padding:40px 16px; } .lsf-popup-card{ max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px); } .lsf-body{ padding:14px 16px 8px; } .lsf-head{ padding:14px 52px 12px 18px; } .lsf-vg{ grid-template-columns:1fr; } .lsf-vc:first-child{ border-right:none;padding-right:0;border-bottom:1px solid rgba(27,67,50,.15);padding-bottom:3px; } .lsf-vc:last-child{ padding-left:0;padding-top:3px; } .lsf-bg{ grid-template-columns:1fr; } .lsf-bot{ padding:10px; } .lsf-bt{ font-size:8.5px;gap:3px; } .lsf-bt-emoji{ font-size:16px; } } @media (max-width:380px){ .lsf-trigger-btn{ font-size:15px;padding:16px; } .lsf-head-title{ font-size:15px; } .lsf-head-logo{ height:22px; } .lsf-t{ font-size:11.5px; } .lsf-t .ca{ width:70px; } .lsf-t .cd{ width:60px; } .vn,.vv{ font-size:10.5px; } .vd{ font-size:10px;min-width:42px; } .vr,.bi{ gap:10px; } .lsf-bot{ grid-template-columns:repeat(2,1fr);gap:6px; } } @media (prefers-reduced-motion:reduce){ .lsf-popup-overlay,.lsf-popup-card,.lsf-body::after{ transition:none; } } /* ═══ TRIGGER BUTTON ═══ */ .llt-wrap { display:flex;justify-content:center;padding:4px 0 12px; font-family:'DM Sans',-apple-system,sans-serif; width:100vw;position:relative;left:50%;transform:translateX(-50%);max-width:100vw; } .llt-trigger { display:flex;align-items:center;gap:14px; width:calc(100% - 32px);max-width:520px; background:#fff;border:1px solid #E5E5E5;border-radius:14px; padding:16px 18px; font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor:pointer;outline:none;text-align:left; -webkit-tap-highlight-color:transparent; transition:box-shadow .2s ease; box-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.05); } .llt-trigger:hover{ box-shadow:0 2px 4px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.07); } .llt-trigger-icon{ flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center; } .llt-trigger-icon img{ width:100%;height:100%;object-fit:contain;display:block; } .llt-trigger-divider{ flex-shrink:0;width:1px;align-self:stretch;background:#E5E5E5;margin:6px 0; } .llt-trigger-text{ flex:1;display:flex;flex-direction:column;gap:3px;min-width:0; } .llt-trigger-main{ font-size:14px;font-weight:500;color:#1a1a1a;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .llt-trigger-badge{ display:inline-block;background:#EEF0F4;color:#1a1a1a;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;vertical-align:middle;margin-left:4px; } .llt-trigger-sub{ font-size:13.5px;color:#1a1a1a;font-weight:400;line-height:1.35;display:flex;align-items:center;gap:8px; } .llt-trigger-arrow{ font-size:15px;display:inline-block;flex-shrink:0;transition:transform .2s ease; } .llt-trigger:hover .llt-trigger-arrow{ transform:translateX(3px); } /* ═══ OVERLAY – transparent ═══ */ .llt-overlay { display:none;position:fixed;inset:0; background:transparent; z-index:999999;padding:60px 20px; font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; opacity:0;transition:opacity .25s ease; } .llt-overlay.active{ display:flex;align-items:center;justify-content:center;opacity:1; } /* ═══ CARD – flex column, sticky header ═══ */ .llt-card { background:#fff;border-radius:16px; width:100%;max-width:440px; max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px); display:flex;flex-direction:column; position:relative;overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.12); transform:translateY(20px) scale(.98); transition:transform .35s cubic-bezier(.22,1,.36,1); } .llt-overlay.active .llt-card{ transform:translateY(0) scale(1); } @media (min-width:700px){ .llt-card{ max-width:560px; } } /* ═══ STICKY HEADER ═══ */ .llt-m-hdr { flex-shrink:0;position:relative; display:flex;align-items:center;justify-content:center; padding:18px 56px; background:#fff;border-bottom:1px solid #EFEFEF;z-index:3; } .llt-m-lab-logo{ display:flex;align-items:center;gap:10px; } .llt-m-lab-icon{ width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0; } .llt-m-lab-icon img{ width:100%;height:100%;object-fit:contain; } .llt-m-lab-name{ font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:15px;font-weight:600;color:#1a1a1a; letter-spacing:.14em;text-transform:uppercase;white-space:nowrap; } .llt-m-close{ position:absolute;top:50%;right:14px;transform:translateY(-50%); width:32px;height:32px;border-radius:50%; background:none;border:none;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0; transition:background .15s ease; } .llt-m-close:hover{ background:#F3F3F3; } .llt-m-close svg{ width:20px;height:20px; } /* ═══ SCROLLBARER BODY ═══ */ .llt-body { flex:1 1 auto;overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch;overscroll-behavior:contain; scroll-behavior:smooth;position:relative; } .llt-body::-webkit-scrollbar{ width:6px; } .llt-body::-webkit-scrollbar-track{ background:transparent; } .llt-body::-webkit-scrollbar-thumb{ background:rgba(26,26,26,.18);border-radius:3px; } .llt-body::-webkit-scrollbar-thumb:hover{ background:rgba(26,26,26,.32); } .llt-body{ scrollbar-width:thin;scrollbar-color:rgba(26,26,26,.18) transparent; } /* Scroll-Shadow – nur unten, subtil */ .llt-body::after{ content:'';position:sticky;left:0;right:0;bottom:0; height:16px;margin-top:-16px; pointer-events:none;display:block;z-index:1; background:linear-gradient(to top,rgba(0,0,0,.05),transparent); opacity:0;transition:opacity .3s ease; } .llt-body.scrolled-up::after{ opacity:1; } /* ═══ TITLE AREA ═══ */ .llt-m-title-area{ text-align:center;padding:18px 24px 22px; } .llt-m-title{ font-family:'Playfair Display',Georgia,serif; font-size:34px;font-weight:500;color:#1a1a1a !important; line-height:1.1;margin-bottom:16px;letter-spacing:-.005em; } .llt-m-description{ font-size:13.5px;color:#555;line-height:1.5;max-width:340px; margin:0 auto;letter-spacing:.005em;font-weight:400; } .llt-m-section{ padding:0 20px; } /* ═══ TABS ═══ */ .llt-m-tabs{ display:flex;gap:10px;justify-content:center;margin-bottom:18px;flex-wrap:wrap; } .llt-m-tab{ background:#fff;border:1px solid transparent;border-radius:999px; padding:10px 20px;font-family:inherit;font-size:14px;font-weight:500;color:#555; cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease; -webkit-tap-highlight-color:transparent;letter-spacing:.005em;outline:none; -webkit-appearance:none;appearance:none; } .llt-m-tab.active{ background:#EDEEF0;border-color:#D9D9D9;color:#1a1a1a;font-weight:600; } /* ═══ TABLE ═══ */ .llt-m-table-wrap{ border-top:1px solid #EFEFEF; } .llt-m-table-head{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px; padding:14px 4px 10px;font-size:10.5px;font-weight:600;color:#555; letter-spacing:.1em;text-transform:uppercase; border-bottom:1px solid #EFEFEF;white-space:nowrap; } .llt-m-table-head div:nth-child(2){ text-align:center; } .llt-m-table-head div:last-child{ text-align:right; } .llt-m-row{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:center; padding:18px 4px;border-bottom:1px solid #EFEFEF; } .llt-m-row:last-child{ border-bottom:none; } .llt-m-row-name{ font-size:14.5px;color:#1a1a1a;font-weight:500;line-height:1.35;letter-spacing:.005em; } .llt-m-row-name small{ display:block;font-weight:400;color:#555;font-size:13.5px;margin-top:2px;letter-spacing:.005em; } .llt-m-row-status{ justify-self:center; } .llt-m-status-pill{ display:inline-block;background:#DFF5E5;color:#2E9E5B; font-size:10px;font-weight:700;padding:6px 10px;border-radius:999px; letter-spacing:.06em;text-transform:uppercase;line-height:1;text-align:center;white-space:nowrap; } .llt-m-row-claim{ text-align:right;font-size:13.5px;color:#1a1a1a;line-height:1.35;letter-spacing:.005em; } /* ═══ PAGINATION ═══ */ .llt-m-pagination{ display:flex;align-items:center;justify-content:space-between; padding:18px 20px;border-top:1px solid #EFEFEF;border-bottom:1px solid #EFEFEF; } .llt-m-last-tested{ font-size:9.5px;font-weight:600;color:#555; letter-spacing:.08em;text-transform:uppercase;white-space:nowrap; } .llt-m-page-ctrl{ display:flex;align-items:center;gap:10px; } .llt-m-page-btn{ width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid #D9D9D9; cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0; transition:background .15s;-webkit-tap-highlight-color:transparent; } .llt-m-page-btn:hover:not(:disabled){ background:#F5F5F5; } .llt-m-page-btn:disabled{ opacity:.4;cursor:not-allowed; } .llt-m-page-btn svg{ width:11px;height:11px;fill:#1a1a1a; } .llt-m-page-info{ font-size:12.5px;color:#1a1a1a;font-weight:500;min-width:54px;text-align:center;letter-spacing:.02em; } /* ═══ APPROVAL ═══ */ .llt-m-approval-wrap{ padding:20px 20px 24px; } .llt-m-approval{ background:#F3F5F7;border-radius:14px;padding:22px 22px 24px; } .llt-m-approval-hdr{ display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px; } .llt-m-approval-title{ font-size:16px;font-weight:700;color:#1a1a1a;letter-spacing:-.005em;line-height:1.3; } .llt-m-iso{ text-align:right;flex-shrink:0; } .llt-m-iso-badge{ display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:#1a1a1a;letter-spacing:.02em; } .llt-m-iso-badge-box{ background:#1a1a1a;color:#fff;padding:2px 6px;border-radius:3px;font-size:13px;font-weight:800;letter-spacing:.04em; } .llt-m-iso-sub{ display:block;font-size:12.5px;font-weight:400;color:#1a1a1a;margin-top:4px;letter-spacing:0; } .llt-m-signature-img{ max-width:160px;width:100%;height:auto;display:block;margin:10px 0 14px;mix-blend-mode:multiply; } .llt-m-director{ font-size:13px;font-weight:700;color:#1a1a1a;letter-spacing:.08em;text-transform:uppercase;line-height:1.4; } /* ═══ MOBILE ═══ */ @media (max-width:700px){ .llt-overlay{ padding:40px 16px; } .llt-card{ max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px); } .llt-trigger{ padding:14px;gap:12px; } .llt-trigger-icon{ width:36px;height:36px; } .llt-trigger-main{ font-size:13.5px; } .llt-trigger-sub{ font-size:13px; } .llt-trigger-badge{ font-size:10px;padding:2px 6px;margin-left:4px; } .llt-m-hdr{ padding:16px 52px; } .llt-m-title{ font-size:28px; } .llt-m-description{ font-size:13.5px; } .llt-m-section{ padding:0 16px; } .llt-m-pagination{ padding:14px 16px; } .llt-m-approval-wrap{ padding:16px 16px 20px; } .llt-m-approval{ padding:20px 16px; } .llt-m-table-head{ font-size:9.5px;letter-spacing:.06em; } .llt-m-row-name{ font-size:13px; } .llt-m-row-name small{ font-size:12px; } .llt-m-status-pill{ font-size:8.5px;padding:5px 7px; } .llt-m-row-claim{ font-size:12.5px; } .llt-m-tab{ font-size:13px;padding:9px 16px; } } @media (max-width:400px){ .llt-trigger-main{ font-size:12.5px; } .llt-trigger-sub{ font-size:12px; } .llt-trigger-badge{ font-size:9.5px;padding:2px 5px; } .llt-trigger-icon{ width:32px;height:32px; } .llt-trigger{ padding:12px;gap:10px; } .llt-m-title{ font-size:24px; } .llt-m-tab{ font-size:12.5px;padding:8px 14px; } } @media (prefers-reduced-motion:reduce){ .llt-overlay,.llt-card,.llt-body::after{ transition:none; } } .tp-badge-wrap *{box-sizing:border-box;margin:0;padding:0} .tp-badge-wrap{ width:100%; display:flex; justify-content:flex-start; text-align:left; padding:0 0 12px 0; } .tp-badge{ display:inline-flex; align-items:center; gap:8px; font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; color:#000000; -webkit-font-smoothing:antialiased; line-height:1; } /* ── Sterne (natürliche Breite aus Reviews-Slider) ── */ .tp-badge-stars{ display:inline-flex; align-items:center; flex-shrink:0; } .tp-badge-stars svg{ height:12px; width:auto; display:block; } /* ── Text ── */ .tp-badge-text{ font-size:12px; color:#000; letter-spacing:0; white-space:nowrap; display:inline-flex; align-items:baseline; gap:6px; } /* ── "4.8/5 Sehr Gut" moderat fett (wie Trustpilot) ── */ .tp-badge-bold{ font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif !important; font-weight:700 !important; color:#000 !important; font-size:12px !important; letter-spacing:-.005em !important; display:inline-block !important; } .tp-badge-muted{ font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif !important; font-weight:400 !important; color:#000 !important; font-size:12px !important; display:inline-block !important; } @media (min-width:769px){ .tp-badge-wrap{padding:0 0 20px 0} .tp-badge-stars svg{height:13px} .tp-badge-text, .tp-badge-bold, .tp-badge-muted{font-size:13px !important} } .custom-text-block-container-custom_text_pdQQkk { width: 100%; display: block; } .custom-text-block-custom_text_pdQQkk { margin-top: -4px; margin-bottom: 0px; text-align: left; width: 100%; } .custom-text-block-custom_text_pdQQkk .custom-text-wrapper { width: 100%; } .custom-text-block-custom_text_pdQQkk .custom-text-with-divider { display: flex; align-items: center; width: 100%; gap: 12px; } .custom-text-block-custom_text_pdQQkk .divider-line { flex: 1; height: 1px; min-height: 1px; min-width: 20px; background-color: #e0e0e0; border: none; margin: 0; display: block; } .custom-text-block-custom_text_pdQQkk .custom-text-main { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: var(--font-weight-regular) ; width: 100%; justify-content: flex-start; flex-shrink: 0; } .custom-text-block-custom_text_pdQQkk .custom-text-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #333333; width: 20px; height: 20px; margin-left: 0px; margin-right: 8px; } .custom-text-block-custom_text_pdQQkk .custom-text-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-custom_text_pdQQkk .custom-text-after-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #333333; width: 20px; height: 20px; margin-left: 8px; margin-right: 0px; } .custom-text-block-custom_text_pdQQkk .custom-text-after-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-custom_text_pdQQkk .custom-text-content { color: #444444; margin: 0; width: 100%; } .custom-text-block-custom_text_pdQQkk .custom-text-content a, .custom-text-block-custom_text_pdQQkk .custom-text-main-text-content a { color: #0066cc; text-decoration: underline; } .custom-text-block-custom_text_pdQQkk .custom-text-content a:hover, .custom-text-block-custom_text_pdQQkk .custom-text-main-text-content a:hover { opacity: 0.8; } .custom-text-block-custom_text_pdQQkk .custom-text-content strong, .custom-text-block-custom_text_pdQQkk .custom-text-content b, .custom-text-block-custom_text_pdQQkk .custom-text-main-text-content strong, .custom-text-block-custom_text_pdQQkk .custom-text-main-text-content b { font-weight: 700 !important; } .custom-text-block-custom_text_pdQQkk .custom-text-main-text-content { text-align: left; width: auto; font-weight: var(--font-weight-regular) ; } /* Ensure paragraph tags inherit the text alignment and font weight */ .custom-text-block-custom_text_pdQQkk .custom-text-main-text-content p { text-align: inherit; font-weight: inherit; } /* Ensure strong tags within the custom text also respect the font weight setting */ .custom-text-block-custom_text_pdQQkk .custom-text-main-text-content strong, .custom-text-block-custom_text_pdQQkk .custom-text-main-text-content b { font-weight: var(--font-weight-semibold) ; } .custom-text-block-custom_text_pdQQkk .custom-text-main-text-content p { margin-top: 0; margin-bottom: px; } .custom-text-block-custom_text_pdQQkk .custom-text-main-text-content p:last-child { margin-bottom: 0; } .custom-text-block-custom_text_pdQQkk .custom-text-description { font-size: 8px; margin-top: 4px; color: #000000; opacity: 0.8; font-weight: var(--font-weight-regular) ; text-align: left; } /* Accent Text Styles */ /* Ensure strong tags within the description also work properly */ .custom-text-block-custom_text_pdQQkk .custom-text-description strong, .custom-text-block-custom_text_pdQQkk .custom-text-description b { font-weight: var(--font-weight-semibold) ; } .custom-text-block-custom_text_pdQQkk .custom-text-description p { margin-top: 0; margin-bottom: px; } .custom-text-block-custom_text_pdQQkk .custom-text-description p:last-child { margin-bottom: 0; } /* Special handling for center alignment with divider */ /* Ensure strong and bold tags always display as bold */ .custom-text-block-custom_text_pdQQkk .custom-text-main-text-content strong, .custom-text-block-custom_text_pdQQkk .custom-text-main-text-content b, .custom-text-block-custom_text_pdQQkk .custom-text-description strong, .custom-text-block-custom_text_pdQQkk .custom-text-description b { font-weight: 700 !important; } /* Override font weight inheritance for non-bold elements only */ .custom-text-block-custom_text_pdQQkk *:not(strong):not(b) { font-weight: inherit; } /* Ensure all text elements respect the custom font weight (except strong/b tags) */ .custom-text-block-custom_text_pdQQkk span:not(strong):not(b), .custom-text-block-custom_text_pdQQkk div:not(.custom-text-icon):not(strong):not(b), .custom-text-block-custom_text_pdQQkk p:not(strong):not(b), .custom-text-block-custom_text_pdQQkk h1:not(strong):not(b), .custom-text-block-custom_text_pdQQkk h2:not(strong):not(b), .custom-text-block-custom_text_pdQQkk h3:not(strong):not(b), .custom-text-block-custom_text_pdQQkk h4:not(strong):not(b), .custom-text-block-custom_text_pdQQkk h5:not(strong):not(b), .custom-text-block-custom_text_pdQQkk h6:not(strong):not(b) { font-weight: var(--font-weight-regular) ; } .custom-text-block-container-custom_text_RVyBeH { width: 100%; display: block; } .custom-text-block-custom_text_RVyBeH { margin-top: 8px; margin-bottom: 16px; text-align: left; width: 100%; } .custom-text-block-custom_text_RVyBeH .custom-text-wrapper { width: 100%; } .custom-text-block-custom_text_RVyBeH .custom-text-with-divider { display: flex; align-items: center; width: 100%; gap: 12px; } .custom-text-block-custom_text_RVyBeH .divider-line { flex: 1; height: 1px; min-height: 1px; min-width: 20px; background-color: #e0e0e0; border: none; margin: 0; display: block; } .custom-text-block-custom_text_RVyBeH .custom-text-main { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--font-weight-regular) ; width: 100%; justify-content: flex-start; flex-shrink: 0; } .custom-text-block-custom_text_RVyBeH .custom-text-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #333333; width: 18px; height: 18px; margin-left: 0px; margin-right: 8px; } .custom-text-block-custom_text_RVyBeH .custom-text-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-custom_text_RVyBeH .custom-text-after-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #333333; width: 18px; height: 18px; margin-left: 8px; margin-right: 0px; } .custom-text-block-custom_text_RVyBeH .custom-text-after-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-custom_text_RVyBeH .custom-text-content { color: #333333; margin: 0; width: 100%; } .custom-text-block-custom_text_RVyBeH .custom-text-content a, .custom-text-block-custom_text_RVyBeH .custom-text-main-text-content a { color: #0066cc; text-decoration: underline; } .custom-text-block-custom_text_RVyBeH .custom-text-content a:hover, .custom-text-block-custom_text_RVyBeH .custom-text-main-text-content a:hover { opacity: 0.8; } .custom-text-block-custom_text_RVyBeH .custom-text-content strong, .custom-text-block-custom_text_RVyBeH .custom-text-content b, .custom-text-block-custom_text_RVyBeH .custom-text-main-text-content strong, .custom-text-block-custom_text_RVyBeH .custom-text-main-text-content b { font-weight: 700 !important; } .custom-text-block-custom_text_RVyBeH .custom-text-main-text-content { text-align: left; width: auto; font-weight: var(--font-weight-regular) ; } /* Ensure paragraph tags inherit the text alignment and font weight */ .custom-text-block-custom_text_RVyBeH .custom-text-main-text-content p { text-align: inherit; font-weight: inherit; } /* Ensure strong tags within the custom text also respect the font weight setting */ .custom-text-block-custom_text_RVyBeH .custom-text-main-text-content strong, .custom-text-block-custom_text_RVyBeH .custom-text-main-text-content b { font-weight: var(--font-weight-semibold) ; } .custom-text-block-custom_text_RVyBeH .custom-text-main-text-content p { margin-top: 0; margin-bottom: px; } .custom-text-block-custom_text_RVyBeH .custom-text-main-text-content p:last-child { margin-bottom: 0; } .custom-text-block-custom_text_RVyBeH .custom-text-description { font-size: 10px; margin-top: 4px; color: #666666; opacity: 0.8; font-weight: var(--font-weight-regular) ; text-align: left; } /* Accent Text Styles */ /* Ensure strong tags within the description also work properly */ .custom-text-block-custom_text_RVyBeH .custom-text-description strong, .custom-text-block-custom_text_RVyBeH .custom-text-description b { font-weight: var(--font-weight-semibold) ; } .custom-text-block-custom_text_RVyBeH .custom-text-description p { margin-top: 0; margin-bottom: px; } .custom-text-block-custom_text_RVyBeH .custom-text-description p:last-child { margin-bottom: 0; } /* Special handling for center alignment with divider */ /* Ensure strong and bold tags always display as bold */ .custom-text-block-custom_text_RVyBeH .custom-text-main-text-content strong, .custom-text-block-custom_text_RVyBeH .custom-text-main-text-content b, .custom-text-block-custom_text_RVyBeH .custom-text-description strong, .custom-text-block-custom_text_RVyBeH .custom-text-description b { font-weight: 700 !important; } /* Override font weight inheritance for non-bold elements only */ .custom-text-block-custom_text_RVyBeH *:not(strong):not(b) { font-weight: inherit; } /* Ensure all text elements respect the custom font weight (except strong/b tags) */ .custom-text-block-custom_text_RVyBeH span:not(strong):not(b), .custom-text-block-custom_text_RVyBeH div:not(.custom-text-icon):not(strong):not(b), .custom-text-block-custom_text_RVyBeH p:not(strong):not(b), .custom-text-block-custom_text_RVyBeH h1:not(strong):not(b), .custom-text-block-custom_text_RVyBeH h2:not(strong):not(b), .custom-text-block-custom_text_RVyBeH h3:not(strong):not(b), .custom-text-block-custom_text_RVyBeH h4:not(strong):not(b), .custom-text-block-custom_text_RVyBeH h5:not(strong):not(b), .custom-text-block-custom_text_RVyBeH h6:not(strong):not(b) { font-weight: var(--font-weight-regular) ; } .bg-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px !important; max-width: 450px; margin-top: -20px; margin-bottom: 15px; padding: 0px; padding-top: 15px; padding-right: 10px; } .bg-benefit-item { display: flex; align-items: center; gap: 7px; } .bg-benefit-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .bg-benefit-icon.no-background { border-radius: 0 !important; } .bg-benefit-icon svg { width: 20px; height: 20px; } .bg-benefit-text { font-family: var(--font-body-family-override); font-weight: var(--font-weight-semibold) !important; letter-spacing: var(--letter-spacing-body); line-height: 1.3; } @media (max-width: 768px) { .bg-benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 7px !important; } } .shipping-badge-wrapper { display: flex; justify-content: center; width: 100%; padding: 4px 0; } .shipping-badge { display: inline-flex; align-items: center; gap: 8px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-weight: 600; color: #1a1a1a; text-align: center; } .shipping-badge__dot { position: relative; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .shipping-badge__dot::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(22, 163, 74, 0.15); animation: shipping-pulse 2s ease-in-out infinite; } .shipping-badge__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; position: relative; z-index: 1; } @keyframes shipping-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } } .shipping-badge__date { text-decoration: underline; text-underline-offset: 2px; } .shop-add-to-cart-button .button-text { text-transform: none !important; } /* Ensure form takes full width */ #product-form-template--21537298841686__shop_product_details_YnRKdn, .form { width: 100% !important; display: block; } .shop-add-to-cart-button .path { stroke: #ffffff; } #block-add_to_cart_hnegaC.guarantee-badges-container { display: flex; justify-content: flex-start; align-items: center; gap: 6px; margin-top: -5px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; font-size: 11px; letter-spacing: var(--letter-spacing-body); color: #000000 !important; width: 100%; flex-direction: row; flex-wrap: wrap; } #block-add_to_cart_hnegaC .guarantee-blinking-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; vertical-align: middle; position: relative; flex-shrink: 0; margin-bottom: 1px; } #block-add_to_cart_hnegaC .guarantee-blinking-dot-1 { background-color: #4CAF50; animation: guarantee-blink-1 1s infinite linear; } #block-add_to_cart_hnegaC .guarantee-blinking-dot-1::after { content: ""; width: 8px; height: 8px; background-color: #4CAF50; border-radius: 50%; position: absolute; top: 0; left: 0; z-index: -1; animation: guarantee-pulse-1 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); } #block-add_to_cart_hnegaC .guarantee-blinking-dot-2 { background-color: #4CAF50; animation: guarantee-blink-2 1s infinite linear; } #block-add_to_cart_hnegaC .guarantee-blinking-dot-2::after { content: ""; width: 8px; height: 8px; background-color: #4CAF50; border-radius: 50%; position: absolute; top: 0; left: 0; z-index: -1; animation: guarantee-pulse-2 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); } @keyframes guarantee-blink-1 { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes guarantee-pulse-1 { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.2); opacity: 0; } } @keyframes guarantee-blink-2 { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes guarantee-pulse-2 { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.2); opacity: 0; } } #block-add_to_cart_hnegaC .guarantee-item { display: flex; align-items: center; gap: 4px; flex-shrink: 0; min-width: 0; } #block-add_to_cart_hnegaC .guarantee-icon { width: 20px; height: 20px; display: block; flex-shrink: 0; stroke: #00C7FF !important; color: #00C7FF !important; margin-bottom: 1px; } #block-add_to_cart_hnegaC .guarantee-icon svg { width: 100%; height: 100%; display: block; } #block-add_to_cart_hnegaC .guarantee-custom-icon { width: 20px; height: 20px; margin-bottom: 1px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #block-add_to_cart_hnegaC .guarantee-custom-icon svg { width: 100% !important; height: 100% !important; max-width: 20px !important; max-height: 20px !important; fill: #00C7FF !important; stroke: #00C7FF !important; } #block-add_to_cart_hnegaC .guarantee-custom-icon img { width: 100% !important; height: 100% !important; max-width: 20px !important; max-height: 20px !important; object-fit: contain !important; } #block-add_to_cart_hnegaC .guarantee-text { font-weight: 500; letter-spacing: var(--letter-spacing-body); word-wrap: break-word; hyphens: auto; color: #000000 !important; } @media (max-width: 480px) { #block-add_to_cart_hnegaC.guarantee-badges-container { flex-direction: row; justify-content: flex-start; margin-top: -5px; flex-wrap: wrap; } #block-add_to_cart_hnegaC .guarantee-item { flex-wrap: wrap; justify-content: center; } } .custom-text-block-container-custom_text_gGxcfQ { width: 100%; display: block; } .custom-text-block-custom_text_gGxcfQ { margin-top: -8px; margin-bottom: 8px; text-align: center; width: 100%; } .custom-text-block-custom_text_gGxcfQ .custom-text-wrapper { width: 100%; } .custom-text-block-custom_text_gGxcfQ .custom-text-with-divider { display: flex; align-items: center; width: 100%; gap: 12px; } .custom-text-block-custom_text_gGxcfQ .divider-line { flex: 1; height: 1px; min-height: 1px; min-width: 20px; background-color: #e0e0e0; border: none; margin: 0; display: block; } .custom-text-block-custom_text_gGxcfQ .custom-text-main { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: var(--font-weight-regular) ; width: 100%; justify-content: center; flex-shrink: 0; } .custom-text-block-custom_text_gGxcfQ .custom-text-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #333333; width: 12px; height: 12px; margin-left: 0px; margin-right: 3px; } .custom-text-block-custom_text_gGxcfQ .custom-text-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-custom_text_gGxcfQ .custom-text-after-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #333333; width: 20px; height: 20px; margin-left: 8px; margin-right: 0px; } .custom-text-block-custom_text_gGxcfQ .custom-text-after-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-custom_text_gGxcfQ .custom-text-content { color: #333333; margin: 0; width: 100%; } .custom-text-block-custom_text_gGxcfQ .custom-text-content a, .custom-text-block-custom_text_gGxcfQ .custom-text-main-text-content a { color: #0066cc; text-decoration: underline; } .custom-text-block-custom_text_gGxcfQ .custom-text-content a:hover, .custom-text-block-custom_text_gGxcfQ .custom-text-main-text-content a:hover { opacity: 0.8; } .custom-text-block-custom_text_gGxcfQ .custom-text-content strong, .custom-text-block-custom_text_gGxcfQ .custom-text-content b, .custom-text-block-custom_text_gGxcfQ .custom-text-main-text-content strong, .custom-text-block-custom_text_gGxcfQ .custom-text-main-text-content b { font-weight: 700 !important; } .custom-text-block-custom_text_gGxcfQ .custom-text-main-text-content { text-align: center; font-weight: var(--font-weight-regular) ; } /* Ensure paragraph tags inherit the text alignment and font weight */ .custom-text-block-custom_text_gGxcfQ .custom-text-main-text-content p { text-align: inherit; font-weight: inherit; } /* Ensure strong tags within the custom text also respect the font weight setting */ .custom-text-block-custom_text_gGxcfQ .custom-text-main-text-content strong, .custom-text-block-custom_text_gGxcfQ .custom-text-main-text-content b { font-weight: var(--font-weight-semibold) ; } .custom-text-block-custom_text_gGxcfQ .custom-text-main-text-content p { margin-top: 0; margin-bottom: px; } .custom-text-block-custom_text_gGxcfQ .custom-text-main-text-content p:last-child { margin-bottom: 0; } .custom-text-block-custom_text_gGxcfQ .custom-text-description { font-size: 10px; margin-top: 4px; color: #666666; opacity: 0.8; font-weight: var(--font-weight-regular) ; text-align: center; } /* Accent Text Styles */ /* Ensure strong tags within the description also work properly */ .custom-text-block-custom_text_gGxcfQ .custom-text-description strong, .custom-text-block-custom_text_gGxcfQ .custom-text-description b { font-weight: var(--font-weight-semibold) ; } .custom-text-block-custom_text_gGxcfQ .custom-text-description p { margin-top: 0; margin-bottom: px; } .custom-text-block-custom_text_gGxcfQ .custom-text-description p:last-child { margin-bottom: 0; } /* Special handling for center alignment with divider */ /* Ensure strong and bold tags always display as bold */ .custom-text-block-custom_text_gGxcfQ .custom-text-main-text-content strong, .custom-text-block-custom_text_gGxcfQ .custom-text-main-text-content b, .custom-text-block-custom_text_gGxcfQ .custom-text-description strong, .custom-text-block-custom_text_gGxcfQ .custom-text-description b { font-weight: 700 !important; } /* Override font weight inheritance for non-bold elements only */ .custom-text-block-custom_text_gGxcfQ *:not(strong):not(b) { font-weight: inherit; } /* Ensure all text elements respect the custom font weight (except strong/b tags) */ .custom-text-block-custom_text_gGxcfQ span:not(strong):not(b), .custom-text-block-custom_text_gGxcfQ div:not(.custom-text-icon):not(strong):not(b), .custom-text-block-custom_text_gGxcfQ p:not(strong):not(b), .custom-text-block-custom_text_gGxcfQ h1:not(strong):not(b), .custom-text-block-custom_text_gGxcfQ h2:not(strong):not(b), .custom-text-block-custom_text_gGxcfQ h3:not(strong):not(b), .custom-text-block-custom_text_gGxcfQ h4:not(strong):not(b), .custom-text-block-custom_text_gGxcfQ h5:not(strong):not(b), .custom-text-block-custom_text_gGxcfQ h6:not(strong):not(b) { font-weight: var(--font-weight-regular) ; } @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); .lym-guarantee { font-family: 'Poppins', sans-serif; width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; } .lym-guarantee-bar { display: flex; align-items: center; justify-content: center; gap: 10px; background: #F0F0F0; border-radius: 14px; padding: 12px 0; width: 100%; box-sizing: border-box; } .lym-guarantee-item { display: flex; align-items: center; gap: 6px; } .lym-guarantee-item img { width: 18px; height: 18px; object-fit: contain; display: block; flex-shrink: 0; aspect-ratio: 1 / 1; } .lym-guarantee-item span { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; color: #1a1a1a; white-space: nowrap; } .lym-guarantee-dot { width: 4px; height: 4px; background: #1a1a1a; border-radius: 50%; flex-shrink: 0; } #payment-icons-payment_icons_ekNyqU.payment-icons-container { width: 100%; margin-top: 5px; margin-bottom: 5px; margin-left: 0; margin-right: 0; padding: 0; } #payment-icons-payment_icons_ekNyqU .payment-icons-wrapper { margin: 0 auto; gap: 6px !important; } #payment-icons-payment_icons_ekNyqU .payment-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 1 !important; visibility: visible !important; height: 18px !important; } #payment-icons-payment_icons_ekNyqU .payment-icon svg { max-height: 100%; width: auto; min-width: 30px; display: block; opacity: 1 !important; visibility: visible !important; height: 18px !important; } @media screen and (max-width: 749px) { #payment-icons-payment_icons_ekNyqU .payment-icons-wrapper { gap: 3px !important; } #payment-icons-payment_icons_ekNyqU .payment-icon { height: 14.4px !important; } #payment-icons-payment_icons_ekNyqU .payment-icon svg { height: 14.4px !important; } } .lym-acc,.lym-acc div,.lym-acc p,.lym-acc span,.lym-acc button,.lym-acc ul,.lym-acc li{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;} .lym-acc{max-width:520px;margin:0 auto;padding:4px 0;color:#1F352C;-webkit-font-smoothing:antialiased;} .lym-acc *{box-sizing:border-box;margin:0;padding:0;} .lym-item{border:1px solid rgba(31,53,44,.08);border-radius:10px;margin-bottom:6px;overflow:hidden;background:#FFF;transition:border-color .3s;} .lym-item.open{border-color:rgba(30,138,94,.12);} .lym-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;cursor:pointer;border:none;width:100%;text-align:left;background:none;-webkit-tap-highlight-color:transparent;} .lym-hdr-left{display:flex;align-items:center;gap:8px;} .lym-ico{width:15px;height:15px;flex-shrink:0;opacity:.6;} .lym-ico svg{width:15px;height:15px;display:block;} .lym-title{font-size:12.5px !important;font-weight:500 !important;color:#1F352C !important;letter-spacing:.01em !important;} .lym-arrow{width:22px;height:22px;border:1px solid rgba(31,53,44,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s;} .lym-item.open .lym-arrow{transform:rotate(180deg);border-color:rgba(30,138,94,.2);} .lym-arrow svg{width:10px;height:10px;display:block;} .lym-panel{overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s;opacity:0;} .lym-item.open .lym-panel{opacity:1;} .lym-body{padding:0 12px 12px 35px;font-size:12px !important;line-height:1.7 !important;color:#666 !important;letter-spacing:.015em !important;} .lym-body p{margin:0 0 4px !important;} .lym-body p:last-child{margin-bottom:0 !important;} .lym-body strong,.lym-body span[style*="font-weight:700"]{font-weight:600 !important;color:#1F352C !important;} .lym-body ul{list-style:none;padding:0;margin:4px 0 0;} .lym-body ul li{padding:3px 0;display:flex;flex-direction:column;} .lym-body ul li span:first-child{font-weight:600 !important;color:#1F352C !important;font-size:12px !important;} .lym-body ul li span:last-child{color:#888 !important;font-size:11.5px !important;} /* Animation */ @keyframes lymUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}} .lym-acc .la{opacity:0;transform:translateY(12px);} .lym-acc .la.v{animation:lymUp .5s cubic-bezier(.22,1,.36,1) forwards;} .lym-acc .la:nth-child(1).v{animation-delay:.03s;} .lym-acc .la:nth-child(2).v{animation-delay:.08s;} .lym-acc .la:nth-child(3).v{animation-delay:.13s;} .lym-acc .la:nth-child(4).v{animation-delay:.18s;} .lym-acc .la:nth-child(5).v{animation-delay:.23s;} .lym-acc .la:nth-child(6).v{animation-delay:.28s;} .lym-acc .la:nth-child(7).v{animation-delay:.33s;} .lym-acc .la:nth-child(8).v{animation-delay:.38s;} @media(prefers-reduced-motion:reduce){.lym-acc .la{opacity:1 !important;animation:none !important;transform:none !important;}} #shopify-section-template--21537298841686__shop_product_details_YnRKdn .custom-text-accent {font-weight: 700 !important;} #shopify-section-template--21537298841686__shop_product_details_YnRKdn .simple-variant-picker__selected-variant {opacity: 0% !important;} .section-template--21537298841686__lk_gallery_polish-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__lk_gallery_polish-padding { padding-top: 0px; padding-bottom: 0px; } } /* ═══ BÜRSTE — GALLERY POLISH (IM8-Stil, Claude) v3 ═══ */ /* Thumbnails-Leiste: erstes Bild nie abschneiden (safe-center statt center) */ html body .shop-product-section .shop-thumbnails.shop-thumbnails{ gap:10px !important; padding-top:4px !important; padding-bottom:4px !important; justify-content:flex-start !important; justify-content:safe center !important; scroll-behavior:smooth; } /* Thumbnails: runder, satte Bilder (kein Ausbleichen), Aktiv-Rand fett */ html body .shop-product-section .shop-thumbnail.shop-thumbnail{ border-radius:12px !important; overflow:hidden !important; border:1.5px solid #e8e8e8 !important; transition:opacity .25s ease, border-color .25s ease !important; } html body .shop-product-section .shop-thumbnail img{ opacity:1 !important; filter:none !important; border-radius:10px !important; } html body .shop-product-section .shop-thumbnail.shop-thumbnail.active{ border:2.5px solid #095230 !important; box-shadow:0 0 0 1px rgba(9,82,48,.15) !important; } /* Mobil: IMMER exakt 4 Thumbs pro Reihe, symmetrisch (Breite = (100% - 3 Lücken) / 4) */ @media (max-width: 768px){ html body .shop-product-section .shop-thumbnails.shop-thumbnails{ padding-left:0 !important; padding-right:0 !important; } html body .shop-product-section .shop-thumbnail.shop-thumbnail{ width:calc((100% - 30px) / 4) !important; min-width:calc((100% - 30px) / 4) !important; max-width:calc((100% - 30px) / 4) !important; flex:0 0 calc((100% - 30px) / 4) !important; height:auto !important; aspect-ratio:1 / 1 !important; } html body .shop-product-section .shop-thumbnail .thumb-square{ width:100% !important; height:100% !important; } } /* Mobile Pfeile: klein & fein wie IM8 (32px rund, 13px-Chevron) */ html body .shop-product-section .shop-mobile-arrow.shop-mobile-arrow-in-thumbnails{ width:32px !important; height:32px !important; min-width:32px !important; max-width:32px !important; min-height:32px !important; max-height:32px !important; flex:0 0 32px !important; border-radius:999px !important; background:#E7F1EB !important; border:1px solid rgba(9,82,48,.16) !important; box-shadow:0 2px 6px rgba(9,82,48,.08) !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; color:#095230 !important; transition:background .2s ease !important; } html body .shop-product-section .shop-mobile-arrow.shop-mobile-arrow-in-thumbnails:hover, html body .shop-product-section .shop-mobile-arrow.shop-mobile-arrow-in-thumbnails:active{ background:#D8E9DF !important; } html body .shop-product-section .shop-mobile-arrow.shop-mobile-arrow-in-thumbnails svg{ width:13px !important; height:13px !important; max-width:13px !important; max-height:13px !important; min-width:13px !important; min-height:13px !important; stroke:#095230 !important; } html body .shop-product-section .shop-mobile-arrow.shop-mobile-arrow-in-thumbnails svg path{ stroke:#095230 !important; } /* Smootherer Bildwechsel (Fade + sanftes Settle) */ html body .shop-product-section .shop-main-image{ transition:opacity .5s cubic-bezier(.34,1.56,.64,1), transform .55s cubic-bezier(.22,1,.36,1) !important; transform:scale(1.015); } html body .shop-product-section .shop-main-image.active{ transform:scale(1) !important; } /* Kein Ausbleichen: Fade-in-Animationen auf Thumbs deaktivieren */ html body .shop-product-section .shop-thumbnail.page-fade-in{ animation:none !important; opacity:1 !important; transform:none !important; } .section-template--21537298841686__custom_liquid_RY7bVN-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_RY7bVN-padding { padding-top: 0px; padding-bottom: 0px; } } .lkkv,.lkkv div,.lkkv span,.lkkv p,.lkkv h2{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;letter-spacing:.03em !important;} .lkkv [data-f="s"]{font-family:Georgia,'Times New Roman',serif !important;font-stretch:normal !important;} .lkkv{--g:#1F352C;--gb:#1E8A5E;--mint:#7ED9A6;--cream:#FAF6EF;background:#FFF;padding:8px 0 12px;-webkit-font-smoothing:antialiased;} .lkkv *{box-sizing:border-box;margin:0;padding:0;} /* Header */ .lkkv-head{text-align:center;margin-bottom:20px;padding:0 16px;} .lkkv-badge{display:inline-block;background:var(--g);color:var(--cream) !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.22em !important;text-transform:uppercase !important;padding:7px 18px;border-radius:100px;margin-bottom:14px;} .lkkv-title{font-size:clamp(22px,5vw,32px) !important;font-weight:700 !important;line-height:1.15 !important;color:var(--g) !important;} .lkkv-title em{font-style:italic !important;color:var(--gb) !important;} /* Pill */ .lkkv-pill{display:inline-flex;align-items:center;gap:9px;margin-top:14px;background:rgba(30,138,94,.08);border:1px solid rgba(30,138,94,.22);border-radius:100px;padding:10px 18px;} .lkkv-pill svg{flex-shrink:0;} .lkkv-pill span{font-size:13.5px !important;font-weight:600 !important;color:var(--g) !important;letter-spacing:.01em !important;} /* Video-Karte */ .lkkv-single{display:flex;justify-content:center;padding:0 16px;} .lkkv-card{width:100%;max-width:300px;border-radius:18px;overflow:hidden;background:#FFF;position:relative;box-shadow:0 12px 44px rgba(31,53,44,.16);} .lkkv-vwrap{position:relative;width:100%;aspect-ratio:9/16;background:#FFF;cursor:pointer;overflow:hidden;} .lkkv-vwrap video{width:100%;height:100%;object-fit:cover;display:block;object-position:center center;} /* Play + Puls */ .lkkv-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s;z-index:2;} .lkkv-play.is-hidden{opacity:0;pointer-events:none;} .lkkv-play-btn{position:relative;width:54px;height:54px;border-radius:50%;background:rgba(31,53,44,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s;} .lkkv-play-btn:hover{background:rgba(31,53,44,.75);transform:scale(1.06);} .lkkv-play-btn::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);animation:lkkvPulse 2.8s ease-out infinite;pointer-events:none;} /* Badge unten */ .lkkv-tag{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:10px;background:rgba(31,53,44,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(126,217,166,.25);padding:12px 16px;z-index:3;min-height:54px;} .lkkv-check{width:22px;height:22px;flex-shrink:0;background:var(--gb);border-radius:5px;display:flex;align-items:center;justify-content:center;} .lkkv-check svg{width:13px;height:13px;} .lkkv-txt{display:flex;flex-direction:column;gap:2px;flex:1;} .lkkv-label{font-size:9.5px !important;font-weight:600 !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--mint) !important;} .lkkv-name{font-size:15px !important;font-weight:700 !important;color:#FFF !important;letter-spacing:.02em !important;} .lkkv-rate{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0;} .lkkv-score{font-size:12px !important;font-weight:700 !important;color:#FFF !important;} .lkkv-stars{display:flex;gap:1.5px;} .lkkv-stars svg{width:11px;height:11px;} /* Animationen */ @keyframes lkkvUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}} @keyframes lkkvScale{from{opacity:0;transform:scale(.96) translateY(18px);}to{opacity:1;transform:scale(1) translateY(0);}} @keyframes lkkvPulse{0%{transform:scale(1);opacity:.55;}70%{opacity:0;}100%{transform:scale(1.6);opacity:0;}} .lkkv-badge,.lkkv-title,.lkkv-pill{opacity:0;} .lkkv-ready .lkkv-badge{animation:lkkvUp .6s .04s cubic-bezier(.16,1,.3,1) forwards;} .lkkv-ready .lkkv-title{animation:lkkvUp .6s .12s cubic-bezier(.16,1,.3,1) forwards;} .lkkv-ready .lkkv-pill{animation:lkkvUp .6s .2s cubic-bezier(.16,1,.3,1) forwards;} .lkkv .la{opacity:0;} .lkkv .la.v{animation:lkkvScale .85s .28s cubic-bezier(.22,1,.36,1) forwards;} @media(min-width:600px){ .lkkv-head{margin-bottom:26px;} .lkkv-card{max-width:320px;} .lkkv-play-btn{width:58px;height:58px;} } @media(max-width:599px){ .lkkv-card{max-width:280px;} .lkkv-play-btn{width:48px;height:48px;} .lkkv-tag{padding:10px 12px;min-height:48px;gap:8px;} .lkkv-check{width:20px;height:20px;border-radius:4px;} .lkkv-check svg{width:11px;height:11px;} .lkkv-name{font-size:13px !important;} .lkkv-label{font-size:8.5px !important;} .lkkv-stars svg{width:9px;height:9px;} .lkkv-score{font-size:10px !important;} .lkkv-pill{padding:9px 14px;gap:7px;} .lkkv-pill span{font-size:12.5px !important;} } @media(prefers-reduced-motion:reduce){ .lkkv-badge,.lkkv-title,.lkkv-pill,.lkkv .la{opacity:1 !important;animation:none !important;transform:none !important;} .lkkv-play-btn::before{animation:none !important;opacity:0 !important;} } .section-template--21537298841686__custom_liquid_phREaN-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_phREaN-padding { padding-top: 0px; padding-bottom: 0px; } } .lkww,.lkww div,.lkww p,.lkww span,.lkww button,.lkww a{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;} .lkww [data-f="s"]{font-family:Georgia,'Times New Roman',serif !important;font-stretch:normal !important;} .lkww{--g:#1F352C;--gb:#1E8A5E;--mint:#7ED9A6;--cream:#FAF6EF;background:#FFF;padding:32px 16px 36px;-webkit-font-smoothing:antialiased;} .lkww *{box-sizing:border-box;margin:0;padding:0;} .lkww-inner{max-width:960px;margin:0 auto;} .lkww-head{text-align:center;margin-bottom:28px;} .lkww-badge{display:inline-block;background:var(--g);color:var(--cream);font-size:9.5px !important;font-weight:700 !important;letter-spacing:.22em !important;text-transform:uppercase;padding:6px 16px;border-radius:100px;margin-bottom:12px;} .lkww-title{font-size:clamp(24px,3.5vw,38px) !important;font-weight:700 !important;line-height:1.15 !important;color:var(--g) !important;} .lkww-title em{font-style:italic !important;color:var(--gb) !important;} /* Desktop: 3 columns */ .lkww-items{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .lkww-item{background:var(--cream);border-radius:14px;overflow:hidden;border:1px solid rgba(31,53,44,.04);transition:box-shadow .4s,border-color .4s;} .lkww-item.is-open{box-shadow:0 2px 16px rgba(31,53,44,.07);border-color:rgba(30,138,94,.1);} /* Desktop: vertical card layout */ .lkww-row{display:flex;flex-direction:column;align-items:center;padding:20px 18px 16px;cursor:pointer;gap:12px;-webkit-tap-highlight-color:transparent;text-align:center;} .lkww-img{width:72px;height:72px;border-radius:12px;overflow:hidden;flex-shrink:0;} .lkww-img img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;} .lkww-info{flex:1;min-width:0;} .lkww-num{font-size:8px !important;font-weight:700 !important;letter-spacing:.2em !important;text-transform:uppercase !important;color:var(--gb) !important;margin-bottom:3px !important;line-height:1 !important;} .lkww-name{font-size:17px !important;font-weight:700 !important;color:var(--g) !important;line-height:1.2 !important;margin-bottom:3px !important;} .lkww-sub{font-size:12.5px !important;color:#999 !important;line-height:1.4 !important;letter-spacing:.015em !important;} .lkww-btn{width:30px;height:30px;border-radius:50%;background:rgba(30,138,94,.06);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;flex-shrink:0;transition:background .3s;margin-top:4px;} .lkww-btn svg{width:14px;height:14px;color:var(--gb);transition:transform .4s cubic-bezier(.22,1,.36,1);} .lkww-item.is-open .lkww-btn{background:rgba(30,138,94,.1);} .lkww-item.is-open .lkww-btn svg{transform:rotate(45deg);} .lkww-expand{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1);} .lkww-expand-inner{padding:0 18px 20px;text-align:center;} .lkww-desc{font-size:13.5px !important;color:#55554E !important;line-height:1.7 !important;letter-spacing:.015em !important;word-spacing:.02em !important;} .lkww-tag{display:inline-flex;align-items:center;gap:4px;margin-top:12px;font-size:10.5px !important;font-weight:600 !important;color:var(--gb) !important;background:rgba(30,138,94,.05);padding:5px 11px;border-radius:100px;} .lkww-tag,.lkww-tag span{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;letter-spacing:.015em !important;} .lkww-tag svg{width:10px;height:10px;} @keyframes lkwwUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}} .lkww-badge,.lkww-title{opacity:0;} .lkww-ready .lkww-badge{animation:lkwwUp .6s .05s cubic-bezier(.16,1,.3,1) forwards;} .lkww-ready .lkww-title{animation:lkwwUp .6s .12s cubic-bezier(.16,1,.3,1) forwards;} .lkww .la{opacity:0;transform:translateY(16px);} .lkww .la.v{animation:lkwwUp .55s cubic-bezier(.22,1,.36,1) forwards;} .lkww .la:nth-child(1).v{animation-delay:.04s;} .lkww .la:nth-child(2).v{animation-delay:.12s;} .lkww .la:nth-child(3).v{animation-delay:.20s;} /* Mobile: zurück zu horizontalem Layout */ @media(max-width:768px){ .lkww-inner{max-width:560px;} .lkww-items{grid-template-columns:1fr;gap:12px;} .lkww-row{flex-direction:row;padding:10px;text-align:left;align-items:center;} .lkww-img{width:56px;height:56px;border-radius:10px;} .lkww-name{font-size:16px !important;margin-bottom:1px !important;} .lkww-sub{font-size:11.5px !important;} .lkww-btn{margin-top:0;} .lkww-expand-inner{padding:6px 14px 18px 78px;text-align:left;} } @media(max-width:380px){ .lkww-img{width:48px;height:48px;} .lkww-name{font-size:15px !important;} .lkww-expand-inner{padding:4px 12px 14px 70px;} .lkww-desc{font-size:12.5px !important;} } @media(prefers-reduced-motion:reduce){.lkww-badge,.lkww-title,.lkww .la{opacity:1 !important;animation:none !important;transform:none !important;}.lkww-expand,.lkww-btn svg{transition:none !important;}} .section-template--21537298841686__custom_liquid_ENnzLP-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_ENnzLP-padding { padding-top: 0px; padding-bottom: 0px; } } .lkvw,.lkvw div,.lkvw span,.lkvw p,.lkvw h2{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;letter-spacing:.03em !important;} .lkvw [data-f="s"]{font-family:Georgia,'Times New Roman',serif !important;font-stretch:normal !important;} .lkvw{--g:#1F352C;--gb:#1E8A5E;--mint:#7ED9A6;--cream:#FAF6EF;background:#FFF;-webkit-font-smoothing:antialiased;padding:40px 0 44px;} .lkvw *{box-sizing:border-box;margin:0;padding:0;} .lkvw-head{text-align:center;margin-bottom:24px;padding:0 18px;} .lkvw-badge{display:inline-block;background:var(--g);color:var(--cream) !important;font-family:'Helvetica Neue',Arial,sans-serif !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.22em !important;text-transform:uppercase !important;padding:7px 18px;border-radius:100px;margin-bottom:14px;} .lkvw-title{font-family:Georgia,'Times New Roman',serif !important;font-size:clamp(23px,5.4vw,34px) !important;font-weight:700 !important;line-height:1.14 !important;color:var(--g) !important;} .lkvw-title em{font-style:italic !important;color:var(--gb) !important;display:block !important;margin-top:4px !important;} .lkvw-sub{font-family:'Helvetica Neue',Arial,sans-serif !important;font-size:14.5px !important;color:#5A5A52 !important;line-height:1.55 !important;margin-top:14px;max-width:440px;margin-left:auto;margin-right:auto;} .lkvw-sub strong{color:var(--g) !important;font-weight:700 !important;} .lkvw-sub span{display:block;} .lkvw-sub .lkvw-sub2{margin-top:2px;color:#7A7A72 !important;} .lkvw-scroll{overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;} .lkvw-scroll::-webkit-scrollbar{display:none;} .lkvw-track{display:flex;gap:12px;padding:6px 16px;} .lkvw-card{flex:0 0 auto;width:min(42vw,210px);scroll-snap-align:start;border-radius:16px;overflow:hidden;position:relative;box-shadow:0 10px 30px rgba(31,53,44,.15);background:#FFF;} .lkvw-vwrap{position:relative;width:100%;aspect-ratio:9/16;background:#FFF;cursor:pointer;overflow:hidden;} .lkvw-vwrap video{width:100%;height:100%;object-fit:cover;display:block;object-position:center center;} .lkvw-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s;z-index:2;} .lkvw-play.is-hidden{opacity:0;pointer-events:none;} .lkvw-play-btn{position:relative;width:44px;height:44px;border-radius:50%;background:rgba(31,53,44,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.42);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s;} .lkvw-play-btn:hover{background:rgba(31,53,44,.72);transform:scale(1.06);} .lkvw-play-btn svg{width:14px;height:16px;} .lkvw-play-btn::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);animation:lkvwPulse 2.8s var(--pd,0s) ease-out infinite;pointer-events:none;} .lkvw-tag{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:9px 11px 10px;background:rgba(31,53,44,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(126,217,166,.22);} .lkvw-name-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;} .lkvw-check{width:15px;height:15px;flex-shrink:0;background:var(--gb);border-radius:4px;display:flex;align-items:center;justify-content:center;} .lkvw-check svg{width:9px;height:9px;} .lkvw-name{font-size:13px !important;font-weight:700 !important;color:#FFF !important;letter-spacing:.02em !important;} .lkvw-rate-row{display:flex;align-items:center;gap:6px;} .lkvw-stars{display:flex;gap:1.5px;} .lkvw-stars svg{width:10px;height:10px;} .lkvw-score{font-size:11px !important;font-weight:700 !important;color:var(--mint) !important;letter-spacing:.03em !important;} @keyframes lkvwReveal{from{opacity:0;transform:translateY(28px) scale(.93);}to{opacity:1;transform:translateY(0) scale(1);}} @keyframes lkvwPulse{0%{transform:scale(1);opacity:.55;}70%{opacity:0;}100%{transform:scale(1.65);opacity:0;}} .lkvw .la{opacity:0;} .lkvw .la.v{animation:lkvwReveal .8s cubic-bezier(.16,1,.3,1) forwards;} @media(min-width:769px){ .lkvw{padding:58px 0 62px;} .lkvw-head{margin-bottom:30px;} .lkvw-track{width:max-content;margin:0 auto;gap:18px;padding:8px 24px;} .lkvw-card{width:196px;} .lkvw-play-btn{width:50px;height:50px;} } @media(prefers-reduced-motion:reduce){ .lkvw .la{opacity:1 !important;animation:none !important;transform:none !important;} .lkvw-play-btn::before{animation:none !important;opacity:0 !important;} } .section-template--21537298841686__custom_liquid_wT9Fin-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_wT9Fin-padding { padding-top: 0px; padding-bottom: 0px; } } .lkg { --lkg-green: #2D4A3E; --lkg-green-deep: #1F352C; --lkg-mint: #7ED9A6; --lkg-cream: #FAF6EF; background: #FFFFFF; padding: 44px 20px 50px; font-family: 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; } .lkg * { box-sizing: border-box; margin: 0; padding: 0; } .lkg-card { position: relative; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; border-radius: 22px; overflow: hidden; background: var(--lkg-green-deep); box-shadow: 0 16px 44px rgba(31, 53, 44, 0.20); } .lkg-media { position: relative; min-height: 360px; } .lkg-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; image-rendering: auto; } .lkg-media::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 100px; background: linear-gradient(90deg, transparent, var(--lkg-green-deep)); } .lkg-content { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 42px 44px; color: #FFFFFF; } .lkg-eyebrow { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; color: var(--lkg-mint); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 14px; } .lkg-eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; } .lkg-eyebrow::after { content: ''; width: 28px; height: 1.5px; background: var(--lkg-mint); opacity: 0.5; margin-left: 2px; } .lkg-title { font-family: Georgia, 'Times New Roman', serif !important; line-height: 1.12 !important; color: #FFFFFF !important; margin: 0 !important; padding: 0 !important; } .lkg-title-big { display: block; font-family: Georgia, 'Times New Roman', serif !important; font-size: clamp(32px, 4.2vw, 44px) !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -0.01em !important; color: #FFFFFF !important; } .lkg-title em { display: block; font-family: Georgia, 'Times New Roman', serif !important; font-style: italic !important; font-weight: 700 !important; color: #FFFFFF !important; font-size: clamp(22px, 2.8vw, 30px) !important; line-height: 1.2 !important; margin-top: 4px !important; } .lkg-text { margin-top: 14px; font-size: clamp(14.5px, 1.55vw, 16.5px); line-height: 1.62; color: rgba(255, 255, 255, 0.85); max-width: 420px; } .lkg-points { margin-top: 22px; max-width: 420px; background: rgba(126, 217, 166, 0.06); border: 1px solid rgba(126, 217, 166, 0.18); border-radius: 14px; padding: 2px 20px; } .lkg-point { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em; color: #FFFFFF; padding: 13px 0; } .lkg-point + .lkg-point { border-top: 1px solid rgba(126, 217, 166, 0.12); } .lkg-point svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--lkg-mint); } .lkg-js .lkg-anim { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--lkg-d, 0s); } .lkg-js .lkg-anim.lkg-in { opacity: 1; transform: translateY(0); } @media (max-width: 720px) { .lkg { padding: 28px 14px 36px; } .lkg-card { grid-template-columns: 1fr; border-radius: 18px; } .lkg-media { min-height: 0; aspect-ratio: 3 / 2.6; } .lkg-media img { object-position: center 50%; } .lkg-media::after { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 80px; background: linear-gradient(180deg, transparent, var(--lkg-green-deep)); } .lkg-content { padding: 24px 22px 30px; text-align: center; align-items: center; } .lkg-eyebrow { align-self: center; margin-bottom: 12px; } .lkg-title-big { font-size: 30px !important; } .lkg-title em { font-size: 21px !important; margin-top: 3px !important; } .lkg-text { max-width: none; font-size: 14.5px; margin-top: 12px; } .lkg-points { width: 100%; max-width: none; margin-top: 18px; padding: 2px 18px; text-align: left; } .lkg-point { font-size: 14px; padding: 12px 0; } } @media (prefers-reduced-motion: reduce) { .lkg-js .lkg-anim { opacity: 1; transform: none; transition: none; } } .section-template--21537298841686__custom_liquid_dDbYjE-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_dDbYjE-padding { padding-top: 0px; padding-bottom: 0px; } } .lku *{box-sizing:border-box;margin:0;padding:0} .lku{ font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; color:#1A371A; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; background:#F8F6F1; overflow:hidden; padding:44px 0 48px; } .lku img{max-width:100%;height:auto;display:block} /* ═══ SCROLL-IN ANIMATIONS ═══ */ @keyframes lkuFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} .lku-anim{opacity:0} .lku-anim.visible{animation:lkuFadeUp .8s cubic-bezier(.22,1,.36,1) forwards} .lku-anim-d1.visible{animation-delay:.1s} .lku-anim-d2.visible{animation-delay:.2s} .lku-anim-d3.visible{animation-delay:.3s} /* ═══ HEADER (identisch zur Video-Reviews-Section, Font-Lock gegen Theme) ═══ */ .lku-head{text-align:center;max-width:720px;margin:0 auto 24px;padding:0 16px} .lku-badge{ display:inline-block;background:#1F352C;color:#FAF6EF !important; font-family:'Helvetica Neue',Arial,sans-serif !important; font-size:10.5px !important;font-weight:700 !important;letter-spacing:.22em !important;text-transform:uppercase !important; padding:7px 18px;border-radius:100px;margin-bottom:14px; } .lku-h2{ font-family:Georgia,'Times New Roman',serif !important; font-size:clamp(22px,5vw,32px) !important;font-weight:700 !important;color:#1F352C !important; line-height:1.15 !important;letter-spacing:normal !important; } .lku-h2 em{font-style:italic !important;color:#1E8A5E !important} .lku-trust-line{font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;color:#4a5750;line-height:1.5;margin-top:12px} .lku-trust-line strong{color:#1F352C;font-weight:700} /* Stars (shared, via ) */ .lku-stars5{display:inline-block;width:88px;height:15px} /* ═══ MARQUEE (Kundenbilder, scrollt nach links) ═══ */ /* Außen auf Content-Breite eingerückt -> bündig mit Header/Reviews; Section-BG rahmt die Leiste links/rechts */ .lku-marquee{max-width:780px;margin:6px auto 34px;padding:0 20px} .lku-marquee-inner{overflow:hidden} /* schneidet die Bilder sauber an der eingerückten Kante ab */ .lku-track{ display:flex; width:max-content; will-change:transform; animation:lkuScroll 22s linear infinite; } .lku-marquee:hover .lku-track{animation-play-state:paused} @keyframes lkuScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .lku-tile{ flex:0 0 auto; width:80px; aspect-ratio:1/1; /* quadratisch (1:1) */ margin-right:8px; /* Abstand als margin (nicht gap) -> nahtlose Schleife */ border-radius:16px; overflow:hidden; background:#E8E4DE; position:relative; display:flex;align-items:center;justify-content:center; } .lku-tile img{width:100%;height:100%;object-fit:cover} .lku-ph{font-size:12px;color:#8c8578;font-weight:600;letter-spacing:.02em;text-align:center;padding:8px} /* ═══ REVIEWS (Slider) ═══ */ .lku-reviews{max-width:780px;margin:0 auto;padding:0 20px;position:relative} .lku-rev-wrap{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; scrollbar-width:none;-ms-overflow-style:none; } .lku-rev-wrap::-webkit-scrollbar{display:none} .lku-rev-track{display:flex} .lku-rev{flex:0 0 100%;scroll-snap-align:center;padding:2px} .lku-rev-inner{ background:#fff; border:1px solid #ECE7DF; border-radius:18px; padding:30px 26px 26px; box-shadow:0 8px 30px rgba(43,65,51,.06); max-width:760px;margin:0 auto; } .lku-rev-rate{display:flex;align-items:center;gap:9px} .lku-rev .lku-stars5{width:98px;height:17px} .lku-score{font-size:15px;font-weight:700;color:#1A371A;letter-spacing:.02em} .lku-quote{font-size:clamp(16px,2.4vw,20px);font-weight:700;color:#1A371A;line-height:1.5;margin:16px 0 20px;letter-spacing:-.003em} .lku-rev-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .lku-name{font-size:13px;color:#8c8578;font-weight:600;letter-spacing:.01em} .lku-verified{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#199B62;font-weight:600;letter-spacing:.01em} .lku-verified svg{width:15px;height:16px;flex-shrink:0} /* Nav */ .lku-nav{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:22px} .lku-arrow{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%; background:#fff;border:1.19px solid #199B62;cursor:pointer;padding:0;flex-shrink:0; transition:opacity .2s ease,transform .15s ease;-webkit-tap-highlight-color:transparent; } .lku-arrow:hover{opacity:.75} .lku-arrow:active{transform:scale(.94)} .lku-arrow svg{width:14px;height:14px;display:block} .lku-dots{display:flex;gap:8px} .lku-dot{ width:7px;height:7px;border-radius:50%;background:#CFC8BC; border:none;cursor:pointer;padding:0; transition:background .2s ease,width .25s ease;-webkit-tap-highlight-color:transparent; } .lku-dot.active{background:#199B62;width:22px;border-radius:4px} /* ═══ DESKTOP ═══ */ @media(min-width:769px){ .lku{padding:64px 0 68px} .lku-head{margin-bottom:32px} .lku-marquee{margin:10px auto 44px} .lku-tile{width:95px;margin-right:8px} .lku-rev-inner{padding:38px 42px 34px} } /* ═══ REDUCED MOTION ═══ */ @media(prefers-reduced-motion:reduce){ .lku-track{animation:none} .lku-anim{opacity:1;animation:none} } .section-template--21537298841686__custom_liquid_PLXQjB-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_PLXQjB-padding { padding-top: 0px; padding-bottom: 0px; } } .lkt,.lkt div,.lkt span,.lkt h2{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;} .lkt [data-f="s"]{font-family:Georgia,'Times New Roman',serif !important;font-stretch:normal !important;} .lkt{--mint:#7ED9A6;--g:#14241C;position:relative;background:var(--g);color:#FFF;overflow:hidden;-webkit-font-smoothing:antialiased;} .lkt *{box-sizing:border-box;margin:0;padding:0;} .lkt-bg{position:absolute;top:0;right:0;bottom:0;left:0;} .lkt-bg img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.45;image-rendering:auto;} .lkt-bg .lkt-bg-mob{display:none;} .lkt-bg::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 50%,rgba(20,36,28,.55) 0%,rgba(20,36,28,.35) 60%,rgba(20,36,28,.15) 100%);} .lkt-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:36px 20px 40px;text-align:center;} .lkt-title{font-size:clamp(22px,5vw,32px) !important;font-weight:700 !important;line-height:1.2 !important;color:#FFF !important;text-shadow:0 2px 16px rgba(0,0,0,.4);} .lkt-title em{font-style:italic !important;color:var(--mint) !important;} .lkt-div{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px auto 22px;} .lkt-div::before,.lkt-div::after{content:'';height:1px;width:44px;background:linear-gradient(90deg,transparent,rgba(126,217,166,.45));} .lkt-div::after{background:linear-gradient(90deg,rgba(126,217,166,.45),transparent);} .lkt-div svg{width:14px;height:14px;color:var(--mint);} .lkt-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:580px;margin:0 auto;} .lkt-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 6px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s;} .lkt-box:hover{transform:translateY(-2px);border-color:rgba(126,217,166,.3);} .lkt-box-ico{width:36px;height:36px;border-radius:50%;background:rgba(126,217,166,.12);display:flex;align-items:center;justify-content:center;color:var(--mint);} .lkt-box-ico svg{width:20px;height:20px;} .lkt-box span{font-size:11px !important;font-weight:600 !important;line-height:1.25 !important;color:#FFF !important;letter-spacing:.02em !important;} .lkt-checks{padding-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px 32px;max-width:420px;margin:0 auto;} .lkt-check{display:flex;align-items:center;gap:7px;font-size:13px !important;font-weight:600 !important;color:#FFF !important;letter-spacing:.03em !important;text-align:left;text-shadow:0 1px 6px rgba(0,0,0,.4);} .lkt-check svg{flex-shrink:0;width:15px;height:15px;color:var(--mint);} @keyframes lktUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}} .lkt .la{opacity:0;transform:translateY(16px);} .lkt .la.v{animation:lktUp .6s cubic-bezier(.22,1,.36,1) forwards;} @media(max-width:768px){ .lkt-bg .lkt-bg-desk{display:none;} .lkt-bg .lkt-bg-mob{display:block;} } @media(max-width:520px){ .lkt-inner{padding:28px 14px 32px;} .lkt-boxes{gap:6px;} .lkt-box{padding:12px 4px;gap:6px;border-radius:10px;} .lkt-box-ico{width:30px;height:30px;} .lkt-box-ico svg{width:17px;height:17px;} .lkt-box span{font-size:9.5px !important;} .lkt-checks{padding-top:14px;gap:7px 18px;} .lkt-check{font-size:12px !important;gap:6px;} .lkt-check svg{width:13px;height:13px;} } @media(prefers-reduced-motion:reduce){.lkt .la{opacity:1 !important;animation:none !important;transform:none !important;}} .section-template--21537298841686__custom_liquid_F6UHBh-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_F6UHBh-padding { padding-top: 0px; padding-bottom: 0px; } } .lkpb,.lkpb div,.lkpb span,.lkpb p,.lkpb h2,.lkpb em{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;letter-spacing:.03em !important;} .lkpb [data-f="s"]{font-family:Georgia,'Times New Roman',serif !important;font-stretch:normal !important;} .lkpb{background:#FAF6EF;background-image:url('https://cdn.shopify.com/s/files/1/1042/6161/5941/files/ChatGPT_Image_29._Juni_2026_21_34_36.png?v=1782761724');background-size:cover;background-position:center;background-repeat:no-repeat;} @media(min-width:600px){ .lkpb{background-image:url('https://cdn.shopify.com/s/files/1/1042/6161/5941/files/ChatGPT_Image_29._Juni_2026_21_34_29.png?v=1782761730');} } .lkpb .pb-wrap{max-width:1388px;margin:0 auto;padding:60px 20px 60px;} .lkpb .pb-wrap *{box-sizing:border-box;margin:0;padding:0;} .lkpb .pb-card{background:linear-gradient(135deg,#FFFFFF 0%,#F7FDF9 100%);border-radius:12px;border:1px solid rgba(30,138,94,.18);position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 12px rgba(30,138,94,.06);} .lkpb .pb-card-num{color:#1E8A5E;font-weight:700 !important;line-height:1;position:relative;} .lkpb .pb-card-arrow{position:absolute;object-fit:contain;} /* Leaf decoration */ .lkpb .pb-card::after{content:"";position:absolute;width:20px;height:20px;bottom:5px;right:5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E8A5E' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c1.5-3 2-6.5 2-10S13.5 5 12 2z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.12;} .lkpb .pb-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#1E8A5E,#7ED9A6);border-radius:12px 12px 0 0;} .lkpb .pb-card p{color:#1F352C !important;font-weight:300 !important;} /* Verified badge - circle */ .lkpb .pb-reviewer{font-size:13px;font-weight:500 !important;line-height:1.3;color:#1F352C !important;display:flex;align-items:center;gap:6px;} .lkpb .pb-reviewer::before{content:"";display:inline-block;width:14px;height:14px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E8A5E'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.707 9.707l-6.5 6.5a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10.5 14.086l5.793-5.793a1 1 0 1 1 1.414 1.414z'/%3E%3C/svg%3E") center/contain no-repeat;} /* Arrow SVG inline */ .lkpb .pb-arrow-svg{position:absolute;color:#1E8A5E;opacity:.7;} /* Animations */ @keyframes pbFadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}} .lkpb .pb-anim{opacity:0;will-change:transform,opacity;} .lkpb .pb-anim.pb-visible{animation:pbFadeUp .8s cubic-bezier(.22,1,.36,1) forwards;} .lkpb .pb-anim-heading.pb-visible{animation-delay:.1s;} .lkpb .pb-anim-card.pb-visible:nth-of-type(1){animation-delay:.2s;} .lkpb .pb-anim-card.pb-visible:nth-of-type(2){animation-delay:.3s;} .lkpb .pb-anim-card.pb-visible:nth-of-type(3){animation-delay:.4s;} .lkpb .pb-anim-card.pb-visible:nth-of-type(4){animation-delay:.5s;} .lkpb .pb-anim-photo.pb-visible{animation-delay:.45s;} .lkpb .pb-anim-quote.pb-visible{animation-delay:.55s;} @media(prefers-reduced-motion:reduce){.lkpb .pb-anim{opacity:1 !important;animation:none !important;transform:none !important;}} /* MOBILE */ .lkpb .pb-desktop{display:none;} .lkpb .pb-mobile{display:block;} .lkpb .pb-m-heading{font-size:24px !important;font-weight:600 !important;line-height:1.2 !important;color:#1F352C !important;margin-bottom:16px;max-width:280px;} .lkpb .pb-m-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .lkpb .pb-mobile .pb-card{padding:12px;border-width:1px !important;min-height:0;border-radius:12px;} .lkpb .pb-mobile .pb-card-num{font-size:26px !important;line-height:24px !important;padding-bottom:6px;} .lkpb .pb-mobile .pb-arrow-svg{top:10px;right:10px;width:22px;height:22px;} .lkpb .pb-mobile .pb-card::after{width:16px;height:16px;bottom:4px;right:4px;} .lkpb .pb-mobile .pb-card p{font-size:11.5px !important;line-height:1.4 !important;padding-right:14px;} .lkpb .pb-m-review{display:flex;gap:12px;margin-top:14px;align-items:stretch;} .lkpb .pb-m-photo{border-radius:12px;overflow:hidden;line-height:0;width:40%;flex-shrink:0;} .lkpb .pb-m-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top;border-radius:12px;min-height:140px;} .lkpb .pb-m-quote{display:flex;flex-direction:column;justify-content:center;gap:6px;flex:1;} .lkpb .pb-m-quote em{font-size:12px !important;font-style:italic !important;font-weight:400 !important;line-height:1.45 !important;color:#1F352C !important;display:block;} .lkpb .pb-m-quote .pb-reviewer{font-size:11px !important;} .lkpb .pb-m-quote .pb-reviewer::before{width:12px;height:12px;} /* Small mobile */ @media(max-width:380px){ .lkpb .pb-wrap{padding:40px 14px 40px;} .lkpb .pb-m-heading{font-size:22px !important;max-width:220px;} .lkpb .pb-m-cards{gap:8px;} .lkpb .pb-mobile .pb-card{padding:10px;} .lkpb .pb-mobile .pb-card-num{font-size:22px !important;line-height:20px !important;} .lkpb .pb-mobile .pb-arrow-svg{top:8px;right:8px;width:18px;height:18px;} .lkpb .pb-mobile .pb-card p{font-size:10.5px !important;padding-right:8px;} .lkpb .pb-m-quote em{font-size:11px !important;} .lkpb .pb-m-review{gap:10px;margin-top:12px;} } /* Medium mobile */ @media(min-width:381px) and (max-width:599px){ .lkpb .pb-wrap{padding:44px 16px 44px;} } /* Tablet */ @media(min-width:600px) and (max-width:914px){ .lkpb .pb-m-heading{font-size:28px !important;max-width:320px;} .lkpb .pb-m-cards{gap:14px;} .lkpb .pb-mobile .pb-card{padding:16px;} .lkpb .pb-mobile .pb-card-num{font-size:32px !important;line-height:30px !important;} .lkpb .pb-mobile .pb-card p{font-size:13px !important;} .lkpb .pb-m-quote em{font-size:14px !important;} .lkpb .pb-m-quote .pb-reviewer{font-size:13px !important;} .lkpb .pb-m-review{gap:16px;margin-top:18px;} } /* DESKTOP */ @media(min-width:915px){ .lkpb .pb-desktop{display:flex;} .lkpb .pb-mobile{display:none;} .lkpb .pb-wrap{padding:60px 50px 60px;} .lkpb .pb-desktop{align-items:flex-start;gap:40px;} .lkpb .pb-d-left{flex:1;min-width:0;} .lkpb .pb-d-heading{font-size:clamp(30px,3.2vw,40px) !important;font-weight:600 !important;line-height:1.15 !important;color:#1F352C !important;margin-bottom:28px;} .lkpb .pb-d-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .lkpb .pb-desktop .pb-card{padding:22px 20px;border-width:.5px !important;min-height:140px;} .lkpb .pb-desktop .pb-card-num{font-size:42px !important;line-height:40px !important;padding-bottom:12px;} .lkpb .pb-desktop .pb-arrow-svg{top:18px;right:18px;width:32px;height:32px;} .lkpb .pb-desktop .pb-card::after{width:22px;height:22px;bottom:8px;right:8px;} .lkpb .pb-desktop .pb-card p{font-size:14px !important;line-height:1.45 !important;padding-right:30px;} .lkpb .pb-d-right{width:320px;flex-shrink:0;display:flex;align-items:center;} .lkpb .pb-d-review{display:flex;flex-direction:column;gap:20px;} .lkpb .pb-d-review img{width:100%;height:auto;flex-shrink:0;border-radius:14px;object-fit:cover;display:block;} .lkpb .pb-d-review-texts{padding:0;} .lkpb .pb-d-review-texts em{font-size:15px !important;font-style:italic !important;font-weight:400 !important;line-height:1.55 !important;color:#1F352C !important;display:block;} .lkpb .pb-d-review .pb-reviewer{font-size:14px !important;font-weight:500 !important;margin-top:6px;} .lkpb .pb-d-review .pb-reviewer::before{width:15px;height:15px;} } @media(min-width:1200px){ .lkpb .pb-d-right{width:360px;} .lkpb .pb-desktop .pb-card{padding:26px 24px;min-height:160px;} .lkpb .pb-desktop .pb-card-num{font-size:48px !important;line-height:46px !important;} .lkpb .pb-desktop .pb-card p{font-size:15px !important;} .lkpb .pb-d-review-texts em{font-size:16px !important;} } .section-template--21537298841686__custom_liquid_UKNMUd-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_UKNMUd-padding { padding-top: 0px; padding-bottom: 0px; } } .lkfl,.lkfl div,.lkfl span,.lkfl p,.lkfl h2{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;letter-spacing:.03em !important;} .lkfl [data-f="s"]{font-family:Georgia,'Times New Roman',serif !important;font-stretch:normal !important;} .lkfl{--g:#1F352C;--gb:#1E8A5E;--mint:#7ED9A6;--cream:#FAF6EF;background:var(--cream);border-top:1px solid rgba(30,138,94,.2);-webkit-font-smoothing:antialiased;} .lkfl *{box-sizing:border-box;margin:0;padding:0;} .lkfl-inner{padding:36px 16px;max-width:1200px;margin:0 auto;} .lkfl-flex{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;} .lkfl-left{max-width:100%;width:100%;} .lkfl-heading{font-size:24px !important;font-weight:700 !important;line-height:1.2 !important;color:var(--g) !important;max-width:300px;margin-bottom:4px !important;} .lkfl-heading em{font-style:italic !important;color:var(--gb) !important;} .lkfl-text{padding:16px 0 20px;font-size:14px !important;line-height:1.55 !important;color:#55554E !important;max-width:620px;} /* Mobile image */ .lkfl-mob-img{display:block;margin-bottom:16px;border-radius:14px;overflow:hidden;line-height:0;} .lkfl-mob-img img{width:100%;height:auto;display:block;border-radius:14px;} /* Comparison rows */ .lkfl-row{padding-top:12px;} .lkfl-row-flex{display:flex;gap:8px;align-items:center;justify-content:center;} .lkfl-pill{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:40px;font-size:13px !important;font-weight:500 !important;line-height:1.2 !important;min-height:36px;flex:1;max-width:180px;} .lkfl-pill-red{border:1px solid #B91414;background:rgba(185,20,20,.04);color:#B91414 !important;} .lkfl-pill-green{border:1px solid var(--gb);background:rgba(30,138,94,.06);color:var(--g) !important;} .lkfl-pill svg{flex-shrink:0;} .lkfl-arrow{display:flex;align-items:center;flex-shrink:0;} .lkfl-arrow svg{width:28px;height:auto;color:#999;} /* Desktop */ .lkfl-right{display:none;} @media(min-width:916px){ .lkfl-inner{padding:60px 50px;} .lkfl-left{max-width:55%;width:100%;} .lkfl-right{display:flex;align-items:center;max-width:45%;width:100%;} .lkfl-right img{width:100%;height:auto;display:block;border-radius:14px;} .lkfl-mob-img{display:none;} .lkfl-heading{font-size:clamp(28px,3vw,38px) !important;max-width:500px;} .lkfl-text{font-size:16px !important;padding:20px 0 24px;} .lkfl-row{padding-top:16px;} .lkfl-row-flex{justify-content:flex-start;gap:12px;} .lkfl-pill{font-size:15px !important;padding:10px 20px;min-height:44px;max-width:220px;} .lkfl-arrow svg{width:36px;} } @media(max-width:380px){ .lkfl-inner{padding:28px 14px;} .lkfl-pill{font-size:11.5px !important;padding:6px 10px;min-height:32px;gap:4px;} .lkfl-pill svg{width:14px !important;height:14px !important;} .lkfl-arrow svg{width:22px;} .lkfl-row{padding-top:10px;} } /* Animation */ @keyframes lkflUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}} .lkfl .la{opacity:0;transform:translateY(16px);} .lkfl .la.v{animation:lkflUp .7s cubic-bezier(.22,1,.36,1) forwards;} @media(prefers-reduced-motion:reduce){.lkfl .la{opacity:1 !important;animation:none !important;transform:none !important;}} .section-template--21537298841686__custom_liquid_TPjqMw-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_TPjqMw-padding { padding-top: 0px; padding-bottom: 0px; } } .lktl,.lktl div,.lktl span,.lktl p,.lktl h2,.lktl li,.lktl strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;letter-spacing:.03em !important;} .lktl [data-f="s"]{font-family:Georgia,'Times New Roman',serif !important;font-stretch:normal !important;} .lktl{--g:#1F352C;--gb:#1E8A5E;--mint:#7ED9A6;--cream:#FAF6EF;color:#FFF;background-color:#0A3D28;background-image:url('https://cdn.shopify.com/s/files/1/1042/6161/5941/files/background2.webp?v=1782768604');background-size:cover;background-position:center;background-repeat:no-repeat;-webkit-font-smoothing:antialiased;} @media(min-width:600px){.lktl{background-image:url('https://cdn.shopify.com/s/files/1/1042/6161/5941/files/background1.webp?v=1782768604');}} .lktl *{box-sizing:border-box;margin:0;padding:0;list-style:none;} .lktl-inner{max-width:1100px;margin:0 auto;padding:48px 16px 56px;} /* Two-col flex */ .lktl-flex{display:flex;flex-wrap:wrap;gap:32px;} .lktl-left{width:100%;} .lktl-right{width:100%;} /* Image */ .lktl-img{border-radius:14px;overflow:hidden;line-height:0;margin-bottom:20px;} .lktl-img img{width:100%;height:200px;object-fit:cover;display:block;border-radius:14px;} /* Heading */ .lktl-heading{font-size:24px !important;font-weight:700 !important;line-height:1.2 !important;color:#FFF !important;margin-bottom:12px;} .lktl-heading em{font-style:italic !important;color:var(--mint) !important;} .lktl-sub{font-size:14px !important;font-weight:300 !important;line-height:1.55 !important;color:rgba(255,255,255,.75) !important;max-width:500px;} /* Timeline */ .lktl-timeline{position:relative;padding-left:32px;} /* Vertical line */ .lktl-timeline::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.12);} /* Item */ .lktl-item{position:relative;padding-bottom:32px;} .lktl-item:last-child{padding-bottom:0;} /* Dot on timeline */ .lktl-item::before{content:"";position:absolute;left:-28px;top:12px;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);z-index:2;transition:all .6s cubic-bezier(.22,1,.36,1);transform:scale(.8);} .lktl-item.is-active::before{background:var(--mint);border-color:var(--mint);box-shadow:0 0 12px rgba(126,217,166,.5),0 0 24px rgba(126,217,166,.2);transform:scale(1);} /* Active line fill */ .lktl-item::after{content:"";position:absolute;left:-21px;top:24px;width:2px;height:0;background:linear-gradient(180deg,var(--mint),rgba(126,217,166,.3));transition:height .8s cubic-bezier(.22,1,.36,1);z-index:1;} .lktl-item.is-active::after{height:calc(100% - 12px);} .lktl-item:last-child::after{display:none;} /* Month pill */ .lktl-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:15px !important;font-weight:700 !important;line-height:1.2 !important;transition:all .5s cubic-bezier(.22,1,.36,1);transform-origin:left center;} .lktl-item:not(.is-active) .lktl-pill{background:rgba(255,255,255,.03);color:rgba(255,255,255,.35);transform:scale(.97);} .lktl-item.is-active .lktl-pill{background:rgba(126,217,166,.12);color:#FFF;transform:scale(1);border:1px solid rgba(126,217,166,.15);} .lktl-pill strong{color:var(--mint) !important;font-weight:700 !important;transition:color .4s;} .lktl-item:not(.is-active) .lktl-pill strong{color:rgba(255,255,255,.3) !important;} .lktl-pill svg{width:16px;height:16px;flex-shrink:0;transition:all .4s;} .lktl-item:not(.is-active) .lktl-pill svg{opacity:.2;transform:translateY(2px);} .lktl-item.is-active .lktl-pill svg{opacity:1;transform:translateY(0);} /* Bullets */ .lktl-bullets{padding:14px 0;display:flex;flex-direction:column;gap:10px;} .lktl-bullets li{display:flex;align-items:flex-start;gap:8px;font-size:14px !important;line-height:1.45 !important;color:rgba(255,255,255,.88) !important;transition:all .5s cubic-bezier(.22,1,.36,1);transform:translateX(0);} .lktl-item:not(.is-active) .lktl-bullets li{opacity:.2;transform:translateX(-6px);} .lktl-item.is-active .lktl-bullets li{opacity:1;transform:translateX(0);} .lktl-item.is-active .lktl-bullets li:nth-child(1){transition-delay:.05s;} .lktl-item.is-active .lktl-bullets li:nth-child(2){transition-delay:.12s;} .lktl-item.is-active .lktl-bullets li:nth-child(3){transition-delay:.19s;} .lktl-bullets li svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;transition:transform .4s;} .lktl-item.is-active .lktl-bullets li svg{transform:scale(1);} .lktl-item:not(.is-active) .lktl-bullets li svg{transform:scale(.7);} /* Stats box */ .lktl-stats{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(3,71,40,.5);font-size:13px !important;line-height:1.45 !important;color:rgba(255,255,255,.8) !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .6s cubic-bezier(.22,1,.36,1);transform:translateY(0);} .lktl-item:not(.is-active) .lktl-stats{opacity:.15;transform:translateY(4px);border-color:transparent;} .lktl-item.is-active .lktl-stats{opacity:1;transform:translateY(0);border-color:rgba(126,217,166,.15);} .lktl-stats strong{color:var(--mint) !important;font-weight:700 !important;} /* Pulse on active dot */ @keyframes lktlPulse{0%,100%{box-shadow:0 0 12px rgba(126,217,166,.5),0 0 24px rgba(126,217,166,.2);}50%{box-shadow:0 0 16px rgba(126,217,166,.7),0 0 32px rgba(126,217,166,.3);}} /* Animation */ @keyframes lktlUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}} .lktl .la{opacity:0;transform:translateY(18px);} .lktl .la.v{animation:lktlUp .7s cubic-bezier(.22,1,.36,1) forwards;} /* Desktop */ @media(min-width:916px){ .lktl-inner{padding:60px 50px 68px;} .lktl-flex{flex-wrap:nowrap;gap:0;} .lktl-left{width:45%;padding-right:60px;} .lktl-left .inner{position:sticky;top:90px;} .lktl-right{width:55%;} .lktl-img img{height:280px;} .lktl-heading{font-size:clamp(28px,3vw,36px) !important;} .lktl-sub{font-size:16px !important;} .lktl-timeline{padding-left:40px;} .lktl-timeline::before{left:9px;} .lktl-item::before{left:-34px;width:14px;height:14px;} .lktl-item::after{left:-25px;} .lktl-pill{font-size:16px !important;padding:10px 18px;} .lktl-bullets li{font-size:15px !important;} .lktl-stats{font-size:14px !important;} } @media(max-width:380px){ .lktl-inner{padding:36px 14px 44px;} .lktl-heading{font-size:22px !important;} .lktl-pill{font-size:13px !important;padding:6px 12px;} .lktl-bullets li{font-size:13px !important;} .lktl-stats{font-size:12px !important;padding:10px 12px;} } @media(prefers-reduced-motion:reduce){.lktl .la{opacity:1 !important;animation:none !important;transform:none !important;}.lktl-item::before,.lktl-item::after,.lktl-pill,.lktl-bullets li,.lktl-stats{transition:none !important;}} .section-template--21537298841686__custom_liquid_CNpeTi-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_CNpeTi-padding { padding-top: 0px; padding-bottom: 0px; } } .lk5r,.lk5r div,.lk5r span,.lk5r p,.lk5r h2,.lk5r h3,.lk5r button{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;letter-spacing:.03em !important;} .lk5r [data-f="s"]{font-family:Georgia,'Times New Roman',serif !important;font-stretch:normal !important;} .lk5r{--g:#1F352C;--gb:#1E8A5E;--mint:#7ED9A6;--cream:#FAF6EF;background:var(--cream);-webkit-font-smoothing:antialiased;} .lk5r *{box-sizing:border-box;margin:0;padding:0;} .lk5r-inner{max-width:1200px;margin:0 auto;padding:48px 16px 48px;} /* Head */ .lk5r-head{text-align:center;margin-bottom:24px;} .lk5r-title{font-size:clamp(24px,4vw,38px) !important;font-weight:700 !important;line-height:1.15 !important;color:var(--g) !important;max-width:500px;margin:0 auto 10px;} .lk5r-title em{font-style:italic !important;color:var(--gb) !important;} .lk5r-sub{font-size:14px !important;font-weight:400 !important;line-height:1.5 !important;color:#55554E !important;} /* Track */ .lk5r-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;} .lk5r-track::-webkit-scrollbar{display:none;} /* Card */ .lk5r-card{flex:0 0 280px;scroll-snap-align:start;border-radius:16px;overflow:hidden;background:#FFF;border:1px solid rgba(30,138,94,.1);box-shadow:0 2px 12px rgba(31,53,44,.05);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;} .lk5r-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(31,53,44,.1);} .lk5r-card-img{width:100%;aspect-ratio:2/1;overflow:hidden;background:linear-gradient(135deg,#E8F5EE,#D4E8D9);} .lk5r-card-img img{width:100%;height:100%;object-fit:cover;display:block;content-visibility:auto;} .lk5r-card-body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column;gap:8px;} .lk5r-badge{display:inline-block;background:var(--gb);color:#FFF;font-size:10.5px !important;font-weight:600 !important;letter-spacing:.12em !important;text-transform:uppercase !important;padding:4px 12px;border-radius:100px;width:fit-content;} .lk5r-card h3{font-size:17px !important;font-weight:700 !important;line-height:1.3 !important;color:var(--g) !important;} .lk5r-card p{font-size:13px !important;font-weight:400 !important;line-height:1.55 !important;color:#55554E !important;} /* Nav */ .lk5r-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:20px;} .lk5r-arrow{background:none;border:1.5px solid rgba(30,138,94,.25);width:34px;height:34px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;} .lk5r-arrow:hover{border-color:var(--gb);background:rgba(30,138,94,.05);} .lk5r-arrow svg{width:16px;height:16px;color:var(--gb);} .lk5r-dots{display:flex;gap:6px;align-items:center;} .lk5r-dot{width:7px;height:7px;border-radius:50%;background:var(--gb);opacity:.25;border:none;padding:0;cursor:pointer;transition:all .25s;} .lk5r-dot.is-on{opacity:1;transform:scale(1.35);} /* Animation */ @keyframes lk5rUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}} .lk5r .la{opacity:0;transform:translateY(16px);} .lk5r .la.v{animation:lk5rUp .6s cubic-bezier(.22,1,.36,1) forwards;} @media(min-width:916px){ .lk5r-inner{padding:60px 50px 60px;} .lk5r-card{flex:0 0 300px;} .lk5r-card h3{font-size:18px !important;} .lk5r-card p{font-size:14px !important;} .lk5r-head{margin-bottom:32px;} .lk5r-sub{font-size:15px !important;} } @media(max-width:380px){ .lk5r-inner{padding:36px 14px 36px;} .lk5r-card{flex:0 0 260px;} .lk5r-card h3{font-size:16px !important;} .lk5r-card p{font-size:12px !important;} .lk5r-badge{font-size:9.5px !important;} } @media(prefers-reduced-motion:reduce){.lk5r .la{opacity:1 !important;animation:none !important;transform:none !important;}.lk5r-card{transition:none !important;}} .section-template--21537298841686__custom_liquid_iBA3EM-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_iBA3EM-padding { padding-top: 0px; padding-bottom: 0px; } } .lkvg,.lkvg div,.lkvg span,.lkvg p,.lkvg h2,.lkvg th,.lkvg td{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;letter-spacing:.03em !important;} .lkvg [data-f="s"]{font-family:Georgia,'Times New Roman',serif !important;font-stretch:normal !important;} .lkvg{--g:#1F352C;--gb:#1E8A5E;--mint:#7ED9A6;--cream:#FAF6EF;background:#FFF;-webkit-font-smoothing:antialiased;} .lkvg *{box-sizing:border-box;margin:0;padding:0;} .lkvg-inner{max-width:720px;margin:0 auto;padding:48px 16px 52px;} .lkvg-head{text-align:center;margin-bottom:28px;} .lkvg-title{font-size:clamp(24px,4vw,38px) !important;font-weight:700 !important;line-height:1.15 !important;color:var(--g) !important;} .lkvg-title em{font-style:italic !important;color:var(--gb) !important;} /* Table */ .lkvg-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:16px;overflow:hidden;box-shadow:0 2px 20px rgba(31,53,44,.06);} /* Header */ .lkvg-table thead th{padding:16px 12px;font-size:12px !important;font-weight:700 !important;letter-spacing:.1em !important;text-transform:uppercase !important;text-align:center;vertical-align:bottom;} .lkvg-table thead th:first-child{text-align:left;padding-left:20px;font-size:11px !important;color:#999 !important;font-weight:500 !important;letter-spacing:.06em !important;} .lkvg-table thead th.lkvg-col-lk{background:var(--g);color:#FFF !important;border-radius:14px 14px 0 0;position:relative;padding:20px 12px 14px;} .lkvg-table thead th.lkvg-col-other{color:#999 !important;background:var(--cream);} .lkvg-col-lk-name{display:flex;flex-direction:column;align-items:center;gap:4px;} .lkvg-col-lk-name span{font-size:14px !important;font-weight:700 !important;letter-spacing:.06em !important;} .lkvg-col-lk-badge{font-size:8px !important;font-weight:600 !important;letter-spacing:.12em !important;background:rgba(126,217,166,.2);color:var(--mint) !important;padding:3px 8px;border-radius:100px;text-transform:uppercase;} /* Rows */ .lkvg-table tbody td{padding:14px 12px;font-size:14px !important;line-height:1.4 !important;border-top:1px solid rgba(31,53,44,.06);} .lkvg-table tbody td:first-child{color:var(--g) !important;font-weight:500 !important;padding-left:20px;text-align:left;} .lkvg-table tbody td:nth-child(2){background:rgba(31,53,44,.03);text-align:center;} .lkvg-table tbody td:nth-child(3){text-align:center;background:var(--cream);} /* Alternating rows */ .lkvg-table tbody tr:nth-child(even) td:first-child{background:rgba(31,53,44,.015);} .lkvg-table tbody tr:nth-child(even) td:nth-child(2){background:rgba(31,53,44,.045);} /* Icons */ .lkvg-check{width:22px;height:22px;display:inline-block;} .lkvg-cross{width:20px;height:20px;display:inline-block;} /* Footer */ .lkvg-table tfoot td{padding:16px 12px;border-top:1px solid rgba(31,53,44,.08);} .lkvg-table tfoot td:nth-child(2){background:var(--g);border-radius:0 0 14px 14px;text-align:center;padding:18px 12px;} .lkvg-table tfoot td:nth-child(3){background:var(--cream);text-align:center;} .lkvg-garantie{display:inline-flex;align-items:center;gap:5px;font-size:10px !important;font-weight:600 !important;letter-spacing:.08em !important;text-transform:uppercase !important;color:var(--mint) !important;} .lkvg-garantie svg{width:14px;height:14px;} .lkvg-nope{font-size:10px !important;color:#999 !important;font-weight:400 !important;} /* Animation */ @keyframes lkvgUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}} .lkvg .la{opacity:0;transform:translateY(16px);} .lkvg .la.v{animation:lkvgUp .6s cubic-bezier(.22,1,.36,1) forwards;} /* colgroup widths */ .lkvg-table colgroup .lkvg-cw-feat{width:auto;} .lkvg-table colgroup .lkvg-cw-lk{width:120px;} .lkvg-table colgroup .lkvg-cw-other{width:110px;} /* Desktop */ @media(min-width:916px){ .lkvg-inner{padding:60px 40px 64px;} .lkvg-head{margin-bottom:36px;} .lkvg-table tbody td{padding:18px 16px;font-size:15px !important;} .lkvg-table tbody td:first-child{padding-left:28px;} .lkvg-table thead th:first-child{padding-left:28px;} .lkvg-table colgroup .lkvg-cw-lk{width:140px;} .lkvg-table colgroup .lkvg-cw-other{width:130px;} .lkvg-col-lk-name span{font-size:15px !important;} } /* Small mobile */ @media(max-width:380px){ .lkvg-inner{padding:36px 10px 40px;} .lkvg-table tbody td{padding:12px 8px;font-size:12.5px !important;} .lkvg-table tbody td:first-child{padding-left:12px;} .lkvg-table thead th:first-child{padding-left:12px;} .lkvg-table thead th{padding:12px 8px;} .lkvg-table colgroup .lkvg-cw-lk{width:80px;} .lkvg-table colgroup .lkvg-cw-other{width:72px;} .lkvg-col-lk-name span{font-size:11px !important;} .lkvg-col-lk-badge{font-size:7px !important;padding:2px 6px;} .lkvg-check{width:18px;height:18px;} .lkvg-cross{width:16px;height:16px;} .lkvg-garantie{font-size:8px !important;} .lkvg-garantie svg{width:12px;height:12px;} } @media(prefers-reduced-motion:reduce){.lkvg .la{opacity:1 !important;animation:none !important;transform:none !important;}} .section-template--21537298841686__custom_liquid_hQQYBH-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_hQQYBH-padding { padding-top: 0px; padding-bottom: 0px; } } .lkfaq,.lkfaq div,.lkfaq span,.lkfaq p,.lkfaq h2{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;} .lkfaq [data-f="s"]{font-family:Georgia,'Times New Roman',serif !important;font-stretch:normal !important;} .lkfaq{--g:#1F352C;--gb:#1E8A5E;--mint:#7ED9A6;--cream:#FAF6EF;position:relative;background:var(--g);padding:48px 20px 56px;-webkit-font-smoothing:antialiased;overflow:hidden;} .lkfaq *{box-sizing:border-box;margin:0;padding:0;} .lkfaq-bg{position:absolute;top:0;right:0;bottom:0;left:0;} .lkfaq-bg img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.5;} .lkfaq-bg .lkfaq-bg-mob{display:none;} .lkfaq-bg::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 50%,rgba(20,36,28,.5) 0%,rgba(20,36,28,.3) 60%,rgba(20,36,28,.1) 100%);} .lkfaq-inner{position:relative;z-index:1;max-width:960px;margin:0 auto;} .lkfaq-head{text-align:center;margin-bottom:36px;} .lkfaq-badge{display:inline-block;background:rgba(126,217,166,.12);border:1px solid rgba(126,217,166,.2);color:var(--mint);font-size:10.5px !important;font-weight:700 !important;letter-spacing:.2em !important;text-transform:uppercase;padding:7px 18px;border-radius:100px;margin-bottom:14px;} .lkfaq-title{font-size:clamp(26px,4.2vw,40px) !important;font-weight:700 !important;line-height:1.15 !important;color:#FFF !important;text-shadow:0 2px 12px rgba(0,0,0,.3);} .lkfaq-title em{font-style:italic !important;color:var(--mint) !important;} .lkfaq-sub{font-size:15px !important;line-height:1.6 !important;color:rgba(255,255,255,.7) !important;max-width:440px;margin:10px auto 0 !important;} .lkfaq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;} .lkfaq-col{display:flex;flex-direction:column;gap:10px;} .lkfaq-item{background:rgba(255,255,255,.06);border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .3s,box-shadow .3s,background .3s;} .lkfaq-item.is-open{border-color:rgba(126,217,166,.2);box-shadow:0 4px 20px rgba(0,0,0,.15);background:rgba(255,255,255,.08);} .lkfaq-q{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;cursor:pointer;gap:12px;-webkit-tap-highlight-color:transparent;} .lkfaq-q-text{font-size:14.5px !important;font-weight:600 !important;color:#FFF !important;line-height:1.4 !important;letter-spacing:.01em !important;flex:1;text-shadow:0 1px 4px rgba(0,0,0,.2);} .lkfaq-q-icon{width:28px;height:28px;border-radius:50%;background:rgba(126,217,166,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s;} .lkfaq-q-icon svg{width:14px;height:14px;color:var(--mint);transition:transform .4s cubic-bezier(.22,1,.36,1);} .lkfaq-item.is-open .lkfaq-q-icon{background:rgba(126,217,166,.18);} .lkfaq-item.is-open .lkfaq-q-icon svg{transform:rotate(45deg);} .lkfaq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1);} .lkfaq-a-inner{padding:0 18px 18px;font-size:13.5px !important;line-height:1.7 !important;color:rgba(255,255,255,.75) !important;letter-spacing:.015em !important;} .lkfaq-a-inner b,.lkfaq-a-inner strong{color:#FFF !important;font-weight:700 !important;} @keyframes lkfUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}} .lkfaq-badge,.lkfaq-title,.lkfaq-sub{opacity:0;} .lkfaq-ready .lkfaq-badge{animation:lkfUp .6s .04s cubic-bezier(.16,1,.3,1) forwards;} .lkfaq-ready .lkfaq-title{animation:lkfUp .6s .12s cubic-bezier(.16,1,.3,1) forwards;} .lkfaq-ready .lkfaq-sub{animation:lkfUp .6s .20s cubic-bezier(.16,1,.3,1) forwards;} .lkfaq .la{opacity:0;transform:translateY(16px);} .lkfaq .la.v{animation:lkfUp .55s cubic-bezier(.22,1,.36,1) forwards;} @media(max-width:768px){.lkfaq{padding:36px 14px 44px;}.lkfaq-head{margin-bottom:28px;}.lkfaq-grid{grid-template-columns:1fr;gap:0;}.lkfaq-col{gap:8px;}.lkfaq-col+.lkfaq-col{margin-top:8px;}.lkfaq-q{padding:14px 14px;}.lkfaq-q-text{font-size:13.5px !important;}.lkfaq-q-icon{width:26px;height:26px;}.lkfaq-q-icon svg{width:13px;height:13px;}.lkfaq-a-inner{padding:0 14px 16px;font-size:13px !important;}.lkfaq-bg .lkfaq-bg-desk{display:none;}.lkfaq-bg .lkfaq-bg-mob{display:block;}} @media(max-width:380px){.lkfaq-q-text{font-size:12.5px !important;}.lkfaq-a-inner{font-size:12px !important;}} @media(prefers-reduced-motion:reduce){.lkfaq-badge,.lkfaq-title,.lkfaq-sub,.lkfaq .la{opacity:1 !important;animation:none !important;transform:none !important;}.lkfaq-a,.lkfaq-q-icon svg{transition:none !important;}} .section-template--21537298841686__custom_liquid_zT79Eb-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-template--21537298841686__custom_liquid_zT79Eb-padding { padding-top: 0px; padding-bottom: 0px; } } .lkr,.lkr div,.lkr span,.lkr p,.lkr h2,.lkr a,.lkr button{font-family:'Helvetica Neue',Arial,sans-serif !important;font-stretch:normal !important;letter-spacing:.03em !important;} .lkr [data-f="s"]{font-family:Georgia,'Times New Roman',serif !important;font-stretch:normal !important;} .lkr{--g:#1F352C;--gb:#1E8A5E;--mint:#7ED9A6;--cream:#FAF6EF;background:#FFF;padding:48px 20px 52px;-webkit-font-smoothing:antialiased;} .lkr *{box-sizing:border-box;margin:0;padding:0;} .lkr-inner{max-width:960px;margin:0 auto;} .lkr-head{text-align:center;margin-bottom:32px;} .lkr-title{font-size:clamp(26px,4.2vw,40px) !important;font-weight:700 !important;line-height:1.15 !important;color:var(--g) !important;letter-spacing:.02em !important;margin-bottom:12px !important;} .lkr-title em{font-style:italic !important;color:var(--gb) !important;} .lkr-summary{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;} .lkr-stars{display:inline-flex;gap:1px;} .lkr-stars svg{width:16px;height:16px;fill:var(--gb);} .lkr-summary-text{font-size:13.5px !important;color:#6B6B62 !important;letter-spacing:.04em !important;} .lkr-summary-text strong{color:var(--g) !important;font-weight:700 !important;} .lkr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;} .lkr-card{background:var(--cream);border-radius:16px;padding:22px 20px;border:1px solid rgba(31,53,44,.05);display:none;flex-direction:column;gap:14px;} .lkr-card.is-vis{display:flex;} .lkr-card-stars{display:inline-flex;gap:1px;} .lkr-card-stars svg{width:13px;height:13px;fill:var(--gb);} .lkr-rev{display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .lkr-rev-name{font-size:14px !important;font-weight:700 !important;color:var(--g) !important;line-height:1.2 !important;letter-spacing:.04em !important;} .lkr-verified{display:inline-flex;align-items:center;gap:3px;font-size:10px !important;font-weight:600 !important;color:var(--gb) !important;background:rgba(30,138,94,.06);padding:2px 7px;border-radius:100px;letter-spacing:.03em !important;} .lkr-verified svg{width:10px;height:10px;fill:var(--gb);flex-shrink:0;} .lkr-rev-title{font-size:16px !important;font-weight:700 !important;color:var(--g) !important;line-height:1.35 !important;letter-spacing:.03em !important;} .lkr-rev-body{font-size:13.5px !important;line-height:1.7 !important;color:#55554E !important;letter-spacing:.04em !important;} .lkr-rev-imgs{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;} .lkr-rev-imgs img{width:88px;height:88px;border-radius:12px;object-fit:cover;border:1px solid rgba(31,53,44,.06);cursor:pointer;transition:transform .2s,box-shadow .2s;} .lkr-rev-imgs img:hover{transform:scale(1.04);box-shadow:0 4px 16px rgba(31,53,44,.12);} .lkr-rev-imgs img:active{transform:scale(.98);} .lkr-lb{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px;cursor:zoom-out;} .lkr-lb.is-open{display:flex;} .lkr-lb img{max-width:92vw;max-height:88vh;border-radius:12px;object-fit:contain;box-shadow:0 8px 40px rgba(0,0,0,.4);} .lkr-lb-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;} .lkr-lb-close:hover{background:rgba(255,255,255,.3);} .lkr-lb-close svg{width:16px;height:16px;color:#FFF;} .lkr-btns{text-align:center;margin-top:24px;} .lkr button.lkr-more,.lkr button.lkr-less{font-size:13px !important;font-weight:600 !important;color:var(--gb) !important;cursor:pointer;text-decoration:underline !important;text-underline-offset:3px !important;border:none !important;background:none !important;padding:8px 16px !important;letter-spacing:.04em !important;} @keyframes lkrUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}} .lkr-title,.lkr-summary{opacity:0;} .lkr-ready .lkr-title{animation:lkrUp .6s .04s cubic-bezier(.16,1,.3,1) forwards;} .lkr-ready .lkr-summary{animation:lkrUp .6s .12s cubic-bezier(.16,1,.3,1) forwards;} .lkr .la{opacity:0;transform:translateY(16px);} .lkr .la.v{animation:lkrUp .55s cubic-bezier(.22,1,.36,1) forwards;} @media(max-width:768px){.lkr{padding:36px 14px 44px;}.lkr-head{margin-bottom:24px;}.lkr-grid{grid-template-columns:1fr;gap:12px;}.lkr-card{padding:18px 16px;gap:12px;}.lkr-rev-title{font-size:15px !important;}.lkr-rev-body{font-size:13px !important;}.lkr-stars svg{width:14px;height:14px;}.lkr-rev-imgs img{width:80px;height:80px;}} @media(prefers-reduced-motion:reduce){.lkr-title,.lkr-summary,.lkr .la{opacity:1 !important;animation:none !important;transform:none !important;}} .section-sections--21537299005526__custom_liquid_HnecR6-padding { padding-top: calc(0px * 0.75); padding-bottom: calc(0px * 0.75); } @media screen and (min-width: 750px) { .section-sections--21537299005526__custom_liquid_HnecR6-padding { padding-top: 0px; padding-bottom: 0px; } } .lkf { --lkf-green: #2D4A3E; --lkf-green-deep: #1F352C; --lkf-mint: #7ED9A6; --lkf-cream: #FAF6EF; position: relative; font-family: 'Helvetica Neue', Arial, sans-serif !important; -webkit-font-smoothing: antialiased; color: #FFFFFF !important; overflow: hidden; } .lkf * { box-sizing: border-box; margin: 0; padding: 0; } .lkf a { text-decoration: none !important; } /* ---------- Background ---------- */ .lkf-bg { position: absolute; inset: 0; z-index: 0; } .lkf-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .lkf-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(18, 34, 27, 0.78) 0%, rgba(18, 34, 27, 0.68) 40%, rgba(18, 34, 27, 0.82) 100% ); } .lkf-content { position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } /* ---------- Top: Logo + Tagline ---------- */ .lkf-top { text-align: center; padding: 48px 24px 12px; } .lkf-logo-row { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .lkf-logo-row span { font-family: 'Helvetica Neue', Arial, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; color: #FFFFFF !important; } .lkf-tagline { font-family: Georgia, 'Times New Roman', serif !important; font-style: italic !important; font-size: 16px !important; color: rgba(255, 255, 255, 0.65) !important; line-height: 1.5 !important; letter-spacing: 0.01em !important; } /* ---------- Hergestellt-Zeile ---------- */ .lkf-made { text-align: center; padding: 18px 24px 0; } .lkf-made-line { width: 48px; height: 1px; background: rgba(126, 217, 166, 0.25); margin: 0 auto 16px; } .lkf-made-text { font-family: 'Helvetica Neue', Arial, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.50) !important; } .lkf-brand-text { font-family: 'Helvetica Neue', Arial, sans-serif !important; font-size: 13px !important; color: rgba(255, 255, 255, 0.48) !important; line-height: 1.7 !important; letter-spacing: 0.015em !important; max-width: 360px; margin: 12px auto 0; } /* ---------- Divider ---------- */ .lkf-divider { width: calc(100% - 48px); max-width: 860px; height: 1px; background: rgba(126, 217, 166, 0.10); margin: 22px auto 0; } /* ---------- Grid: 2 Spalten ---------- */ .lkf-grid { max-width: 1100px; margin: 0 auto; padding: 28px 28px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .lkf-col-title { font-family: 'Helvetica Neue', Arial, sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--lkf-mint) !important; margin-bottom: 14px !important; opacity: 0.8; } /* Links */ .lkf-address { font-style: normal; display: flex; flex-direction: column; gap: 9px; color: #FFFFFF; font-size: 14px !important; line-height: 1.65 !important; letter-spacing: 0.09em !important; } .lkf-address a, .lkf-address a:link, .lkf-address a:visited { display: flex; flex-direction: column; gap: 9px; color: var(--lkf-mint) !important; text-decoration: none !important; font-size: 14px !important; line-height: 1.65 !important; letter-spacing: 0.09em !important; transition: color 0.2s ease !important; } .lkf-address span { display: block; font-size: 14px !important; line-height: 1.65 !important; letter-spacing: 0.09em !important; } .lkf-address a:hover, .lkf-address a:focus-visible { color: #FFFFFF !important; } .lkf-links { list-style: none; display: flex; flex-direction: column; gap: 9px; } .lkf-links a { font-family: 'Helvetica Neue', Arial, sans-serif !important; font-size: 13.5px !important; color: rgba(255, 255, 255, 0.68) !important; letter-spacing: 0.015em !important; transition: color 0.2s ease !important; } .lkf-links a:hover { color: var(--lkf-mint) !important; } /* Kontakt */ .lkf-ci { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; } .lkf-ci:last-of-type { margin-bottom: 0; } .lkf-ci svg { width: 14px; height: 14px; color: var(--lkf-mint); opacity: 0.6; flex-shrink: 0; } .lkf-ci span, .lkf-ci a { font-family: 'Helvetica Neue', Arial, sans-serif !important; font-size: 13.5px !important; color: rgba(255, 255, 255, 0.68) !important; line-height: 1.4 !important; letter-spacing: 0.015em !important; } .lkf-ci a:hover { color: var(--lkf-mint) !important; } .lkf-social { display: flex; gap: 10px; margin-top: 16px; } .lkf-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(126, 217, 166, 0.06); border: 1px solid rgba(126, 217, 166, 0.12); color: rgba(255, 255, 255, 0.55); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .lkf-social a:hover { background: rgba(126, 217, 166, 0.14); border-color: rgba(126, 217, 166, 0.25); color: var(--lkf-mint); } .lkf-social a svg { width: 15px; height: 15px; } /* ---------- Bottom ---------- */ .lkf-bottom { border-top: 1px solid rgba(126, 217, 166, 0.08); padding: 18px 24px 26px; text-align: center; } .lkf-copy { font-family: 'Helvetica Neue', Arial, sans-serif !important; font-size: 11.5px !important; color: rgba(255, 255, 255, 0.52) !important; letter-spacing: 0.02em !important; line-height: 1.6 !important; } .lkf-copy .lkf-heart { color: #d4564e !important; font-size: 11px !important; } /* ---------- Desktop ---------- */ @media (min-width: 769px) { .lkf-top { padding: 52px 32px 14px; } .lkf-logo-row span { font-size: 18px !important; } .lkf-tagline { font-size: 17px !important; } .lkf-grid { max-width: 1100px; padding: 32px 32px 30px; grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- Mobile ---------- */ @media (max-width: 768px) { .lkf-top { padding: 44px 20px 16px; } .lkf-logo-row { margin-bottom: 10px; } .lkf-logo-row span { font-size: 15px !important; letter-spacing: 0.22em !important; } .lkf-tagline { font-size: 14.5px !important; } .lkf-made { padding: 22px 20px 0; } .lkf-made-line { margin-bottom: 14px; width: 40px; } .lkf-made-text { font-size: 10px !important; } .lkf-brand-text { font-size: 12.5px !important; max-width: 300px; margin-top: 10px; } .lkf-divider { width: calc(100% - 40px); margin-top: 26px; } .lkf-grid { gap: 32px 20px; padding: 30px 24px 30px; } .lkf-col-title { margin-bottom: 14px !important; font-size: 9.5px !important; } .lkf-links { gap: 11px; } .lkf-links a { font-size: 14px !important; } .lkf-address, .lkf-address a, .lkf-address span { letter-spacing: 0.075em !important; } .lkf-ci { margin-bottom: 13px; } .lkf-ci span, .lkf-ci a { font-size: 13.5px !important; } .lkf-social { margin-top: 20px; } .lkf-social a { width: 38px; height: 38px; } .lkf-social a svg { width: 16px; height: 16px; } .lkf-bottom { padding: 24px 20px 34px; } .lkf-copy { font-size: 11.5px !important; } } @media (max-width: 380px) { .lkf-grid { grid-template-columns: 1fr; } .lkf-logo-row span { font-size: 13px !important; } .lkf-tagline { font-size: 13px !important; } } /* ---------- Scroll-Animation ---------- */ @keyframes lkfUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .lkf .lfa { opacity: 0; } .lkf .lfa.lfa-in { animation: lkfUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .lkf .lfa1.lfa-in { animation-delay: 0.06s; } .lkf .lfa2.lfa-in { animation-delay: 0.14s; } .lkf .lfa3.lfa-in { animation-delay: 0.22s; } .lkf .lfa4.lfa-in { animation-delay: 0.30s; } @media (prefers-reduced-motion: reduce) { .lkf .lfa { opacity: 1 !important; animation: none !important; } } #kins_root { display: block !important; } body{margin:0;font-family:Helvetica,Arial,sans-serif;overflow-x:clip} .shop-carousel-container,.page-fade-in{opacity:1!important;transform:none!important} .shop-thumbnail{cursor:pointer} .shop-image-zoom-wrapper{display:none!important}.shop-image-zoom-wrapper.active{display:block!important}.shop-main-image{display:block;width:100%;height:auto}.shop-thumbnail img{width:100%;height:100%;object-fit:cover}.lymphoria-zoom{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:10000;display:flex;align-items:center;justify-content:center;cursor:zoom-out}.lymphoria-zoom img{max-width:94vw;max-height:94vh;object-fit:contain}.lymphoria-zoom button{position:absolute;right:20px;top:20px;color:white;background:none;border:0;font-size:32px}.lymphoria-cart-error{color:#a32121;font-size:14px} .mojo-sf{font-family:Helvetica,Arial,sans-serif!important} .shop-add-to-cart-button{width:100%} header-drawer details[open] #menu-drawer{transform:translateX(0);visibility:visible} .lkr-card:not(.is-vis){display:none} .la{opacity:1!important;transform:none!important} .lsf-trigger-wrap,.llt-wrap{width:100%!important;max-width:100%!important;left:auto!important;transform:none!important}.mojo-sf .mojo-sf-tier{height:71px!important;min-height:71px!important;box-sizing:border-box!important;border:0!important;border-radius:16px!important;box-shadow:inset 0 0 0 1px rgba(0,138,78,.3)!important;background:#fff!important;padding:12px 15px!important}.mojo-sf .mojo-sf-tier.is-selected{background:#e9fff6!important;box-shadow:inset 0 0 0 2px #008a4e!important}.mojo-sf .mojo-sf-tier-title,.mojo-sf .mojo-sf-tier-price-current{font-size:12px!important;font-weight:500!important;line-height:1.4!important}.mojo-sf .mojo-sf-tier-title{color:#000!important}.mojo-sf .mojo-sf-tier-price-current{color:#b91314!important}.mojo-sf .mojo-sf-tier-subtitle,.mojo-sf .mojo-sf-tier-price-compare{font-size:11px!important;font-weight:500!important;line-height:1.4!important}.mojo-sf .mojo-sf-tier-subtitle{color:#000!important}.mojo-sf .mojo-sf-tier-price-compare{color:#555!important}.mojo-sf .mojo-sf-tier-radio{border-color:rgba(0,138,78,.3)!important}.mojo-sf .is-selected .mojo-sf-tier-radio{border-color:#008a4e!important}.lymphoria-offer-timer{border-radius:16px!important}kaching-bundle{display:none!important}