/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.product p.wc-gzd-additional-info {
	color: var(--e-global-color-secondary) !important;
	margin-bottom: 0;
}

/* Produktbild 100% Breite nur für hier hinterlegte Produkt-ID's */
body.postid-2772 .elementor-277 .elementor-element.elementor-element-812651c img,
body.postid-2771 .elementor-277 .elementor-element.elementor-element-812651c img {
    width: 100% !important;
    height: auto !important;
}


/* Instagram */
.ti-widget[data-wkey="feed-instagram"][data-style=custom-style][data-widget-type=social] .ti-widget-card .ti-card-body .ti-card-media img, .ti-widget[data-wkey="feed-instagram"][data-style=custom-style][data-widget-type=social] .ti-widget-body {
    max-height: 350px !important;
}

/*CHECKOUT*/
.woocommerce-checkout th.product-name {
	width: 50%;
}

/* Korrekturen aus dem Shop-Review vom 30.07.2026 */

/* Die Bocksbeutel-PNGs sind selbst auf identische Ränder normalisiert. */

/* Auf hohen Desktop-Displays muss die Bildbreite mit der 95-vh-Höhe
 * mitwachsen. So bleibt das 2:3-Format vollständig sichtbar statt durch
 * object-fit: cover seitlich beschnitten zu werden. */
@media (min-width: 1024px) and (min-height: 1170px) {
    body.hoefling-bocksbeutel-product .elementor-277 .elementor-element.elementor-element-812651c img {
        width: min(100%, 63.333vh) !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* Breite Lagenkarten erhalten Luft, damit ihre Außenlinien nicht abgeschnitten werden. */
body.hoefling-wide-product-map .elementor-277 .elementor-element.elementor-element-97a0d0d::before {
    background-size: calc(100% - 40px) auto !important;
}

/* Medaillen werden dauerhaft in ihren Originalfarben gezeigt. */
.elementor-277 .hoefling-product-badge img {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.hoefling-filter-reset {
    margin-top: 28px;
}

.hoefling-filter-reset__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 18px;
    border: 1px solid currentColor;
    color: var(--e-global-color-primary, #2d382d);
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease;
}

.hoefling-filter-reset__link:hover,
.hoefling-filter-reset__link:focus-visible {
    background-color: var(--e-global-color-primary, #2d382d);
    color: #fff;
}

.hoefling-filter-reset__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Newsletter-Shortcode auf der Seite „Aktuelles“. */
.elementor-element-5f289ed .tnp-subscription {
    max-width: 680px;
    margin: 0 auto;
}

.elementor-element-5f289ed .tnp-subscription form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
}

.elementor-element-5f289ed .tnp-subscription .tnp-field {
    margin: 0;
}

.elementor-element-5f289ed .tnp-subscription label {
    display: block;
    margin: 0 0 7px;
    color: var(--e-global-color-primary, #2a2a2a);
    font-size: 14px;
}

.elementor-element-5f289ed .tnp-subscription input.tnp-email {
    width: 100%;
    height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--e-global-color-primary, #2a2a2a);
    border-radius: 0;
    background: rgba(255, 255, 255, .72);
    color: var(--e-global-color-primary, #2a2a2a);
}

.elementor-element-5f289ed .tnp-subscription input.tnp-submit {
    min-width: 170px;
    height: 48px;
    padding: 0 30px;
    border: 1px solid var(--e-global-color-accent, #01bedb);
    border-radius: 999px;
    background: var(--e-global-color-accent, #01bedb);
    color: #fff;
    font-family: "Dharma Gothic", sans-serif;
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.elementor-element-5f289ed .tnp-subscription input.tnp-submit:hover,
.elementor-element-5f289ed .tnp-subscription input.tnp-submit:focus-visible {
    background: transparent;
    color: var(--e-global-color-accent, #01bedb);
}

.elementor-element-5f289ed .tnp-subscription input:focus-visible {
    outline: 2px solid var(--e-global-color-accent, #01bedb);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    body.hoefling-wide-product-map .elementor-277 .elementor-element.elementor-element-97a0d0d::before {
        background-size: calc(100% - 24px) auto !important;
    }

    .elementor-element-5f289ed .tnp-subscription form {
        grid-template-columns: 1fr;
    }

    .elementor-element-5f289ed .tnp-subscription input.tnp-submit {
        width: 100%;
    }
}

/* =========================================================
   WooCommerce-Hinweise – Typografie-Override
   Überschreibt die hängenden Elementor-Einstellungen
   (Global + Individuell gleichzeitig aktiv)
   Farben & Bold bleiben unangetastet
   ========================================================= */

/* --- 1. Der Hinweis-Block selbst --- */
.elementor-widget-woocommerce-notices .woocommerce-info,
.elementor-widget-woocommerce-notices .woocommerce-message,
.elementor-widget-woocommerce-notices .woocommerce-error,
.e-woocommerce-notices-wrapper .woocommerce-info,
.e-woocommerce-notices-wrapper .woocommerce-message,
.e-woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-info.sw-karton-notice {
    font-family: "Museo Slab", "museo-slab", "MuseoSlab", Georgia, serif !important;
    font-size: 16px !important;
    line-height: 1.3em !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* --- 2. Alle Textkinder mitziehen (Elementor stylt Kinder separat) --- */
.elementor-widget-woocommerce-notices .woocommerce-info p,
.elementor-widget-woocommerce-notices .woocommerce-info span,
.elementor-widget-woocommerce-notices .woocommerce-info a,
.elementor-widget-woocommerce-notices .woocommerce-info li,
.elementor-widget-woocommerce-notices .woocommerce-info div,
.elementor-widget-woocommerce-notices .woocommerce-message p,
.elementor-widget-woocommerce-notices .woocommerce-message span,
.elementor-widget-woocommerce-notices .woocommerce-message a,
.elementor-widget-woocommerce-notices .woocommerce-error p,
.elementor-widget-woocommerce-notices .woocommerce-error span,
.elementor-widget-woocommerce-notices .woocommerce-error a,
.e-woocommerce-notices-wrapper .woocommerce-info p,
.e-woocommerce-notices-wrapper .woocommerce-info span,
.e-woocommerce-notices-wrapper .woocommerce-info a,
.e-woocommerce-notices-wrapper .woocommerce-info li,
.e-woocommerce-notices-wrapper .woocommerce-info div,
.e-woocommerce-notices-wrapper .woocommerce-message p,
.e-woocommerce-notices-wrapper .woocommerce-message span,
.e-woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-info.sw-karton-notice p,
.woocommerce-info.sw-karton-notice span,
.woocommerce-info.sw-karton-notice a,
.woocommerce-info.sw-karton-notice div {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

/* --- 3. Bold bleibt Bold (Headline / Hervorhebungen) --- */
.elementor-widget-woocommerce-notices .woocommerce-info b,
.elementor-widget-woocommerce-notices .woocommerce-info strong,
.elementor-widget-woocommerce-notices .woocommerce-message b,
.elementor-widget-woocommerce-notices .woocommerce-message strong,
.elementor-widget-woocommerce-notices .woocommerce-error b,
.elementor-widget-woocommerce-notices .woocommerce-error strong,
.e-woocommerce-notices-wrapper .woocommerce-info b,
.e-woocommerce-notices-wrapper .woocommerce-info strong,
.e-woocommerce-notices-wrapper .woocommerce-message b,
.e-woocommerce-notices-wrapper .woocommerce-message strong,
.woocommerce-info.sw-karton-notice b,
.woocommerce-info.sw-karton-notice strong {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 700 !important;
}

/* --- 4. Icon (::before) von der Schriftgröße entkoppeln --- */
.elementor-widget-woocommerce-notices .woocommerce-info::before,
.elementor-widget-woocommerce-notices .woocommerce-message::before,
.elementor-widget-woocommerce-notices .woocommerce-error::before,
.e-woocommerce-notices-wrapper .woocommerce-info::before,
.e-woocommerce-notices-wrapper .woocommerce-message::before,
.e-woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-info.sw-karton-notice::before {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Produktverfügbarkeit im Elementor-Loop (Template 2076).
 * WooCommerce setzt .outofstock serverseitig auch bei AJAX-Ergebnissen. */
.elementor-2076.e-loop-item.product:not(.outofstock) .elementor-element-c45e5fa,
.elementor-2076.e-loop-item.product.outofstock .elementor-element-7300a74 {
    display: none !important;
}

.elementor-2076.e-loop-item.product.outofstock .elementor-element-11059a3 {
    position: relative;
}

.elementor-2076.e-loop-item.product.outofstock .elementor-element-11059a3 img {
    opacity: .68;
    filter: grayscale(.18) saturate(.72);
}

.elementor-2076.e-loop-item.product.outofstock .elementor-element-11059a3::after {
    content: "Leider ausgetrunken";
    position: absolute;
    z-index: 2;
    top: 24px;
    right: 24px;
    padding: 8px 16px 7px;
    border: 1px solid rgba(116, 43, 56, .42);
    border-radius: 999px;
    background: rgba(255, 252, 247, .94);
    box-shadow: 0 8px 22px rgba(45, 24, 27, .12);
    color: #742b38;
    font-family: "Dharma Gothic", sans-serif;
    font-size: 20px;
    line-height: 1;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.elementor-2076.e-loop-item.product.outofstock .elementor-element-c45e5fa {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: min(100%, 201px) !important;
    max-width: 201px;
    margin: 0 auto !important;
    z-index: 2;
}

.elementor-2076.e-loop-item.product.outofstock .elementor-element-c45e5fa .elementor-widget-container {
    padding: 30px 0 0 !important;
    background: transparent !important;
}

.elementor-2076.e-loop-item.product.outofstock .elementor-element-c45e5fa .stock.out-of-stock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0 !important;
    padding: 11px 19px 10px;
    border: 1px solid #742b38;
    border-radius: 999px;
    background: #742b38;
    color: #fff !important;
    font-family: "Dharma Gothic", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .035em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.elementor-2076.e-loop-item.product.outofstock .elementor-element-c45e5fa .stock.out-of-stock::before {
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-right: 9px;
    border-radius: 50%;
    background: currentColor;
    opacity: .82;
}

/* Auf der Produktdetailseite ersetzt WooCommerce das Warenkorbformular
 * automatisch durch den Lagerstatus. Der Hinweis greift dessen Gestaltung auf. */
body.single-product .elementor-element-ff1d3d4 .stock.out-of-stock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin: 0 !important;
    padding: 13px 22px 12px;
    border: 1px solid #742b38;
    border-radius: 999px;
    background: #742b38;
    color: #fff !important;
    font-family: "Dharma Gothic", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .035em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

body.single-product .elementor-element-ff1d3d4 .stock.out-of-stock::before {
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-right: 9px;
    border-radius: 50%;
    background: currentColor;
    opacity: .82;
}

@media (max-width: 767px) {
    .elementor-2076.e-loop-item.product.outofstock .elementor-element-11059a3::after {
        top: 14px;
        right: 14px;
        padding: 7px 13px 6px;
        font-size: 18px;
    }
}