/* =========================================
   WIZARD OVERLAY - CLAMP RESPONSIVE
   (Ersetzt alte Media Queries)
   ========================================= */
.ow-image img {
    width: clamp(160px, 20vw, 280px);
    margin-bottom: clamp(20px, 3vw, 30px);
}

.ow-title {
    font-size: clamp(2.2rem, 5vw, 4rem) !important;
    line-height: clamp(2.2rem, 5vw, 4.2rem) !important;
    margin-bottom: clamp(20px, 4vw, 40px) !important;
}

#odin-wizard-qty {
    font-size: clamp(2.2rem, 3vw, 3rem) !important;
    width: clamp(80px, 10vw, 100px) !important;
    height: clamp(50px, 7vw, 70px) !important;
}

.ow-counter-box {
    gap: clamp(15px, 3vw, 30px) !important;
    margin-bottom: clamp(20px, 4vw, 50px) !important;
}

.ow-btn {
    font-size: clamp(3rem, 5vw, 4.5rem) !important;
}

.ow-submit {
    width: clamp(150px, 20vw, 260px) !important;
    font-size: clamp(1.2rem, 1.5vw, 1.6rem) !important;
    margin: clamp(10px, 3vw, 30px) auto 0 auto !important;
}

.odin-wizard-wrapper {
    min-height: clamp(40vh, 60vh, 70vh);
    padding: clamp(0px, 3vw, 60px) 20px;
}

/* Popup Close Button */
@media only screen and (max-width: 1023px) {
    #mfn-popup-template-382 .exit-mfn-popup-abs {
        top: 70px !important;
        right: 66px !important;
    }
}

/* Container Padding für Mobile */
@media only screen and (max-width: 668px) {
    .content_wrapper .section_wrapper,
    .container,
    .four.columns .widget-area {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }





    #mfn-popup-template-382 .exit-mfn-popup-abs {
        top: 69px !important;
        right: 55px !important;
    }

    .player-dropdown {
        width: 345px !important;
        right: -53px !important;
    }

    section.mcb-section-b24b27657 {
        padding-top: 120px !important;
    }

    .ohc-container {
        gap: 10px !important;
    }

    .odin-hero-cart {
        padding: 0;
    }

    .ohc-title {
        margin-top: 0 !important;
        margin-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 15px;
    }

    .prod-name-text {
        font-size: 1.8rem !important;
    }

    .tiny-label {
        font-size: 13px !important;
    }

    .ohc-title h1 {
        padding-bottom: 15px;
    }

    .prod-name-text {
        margin: 0;
    }

    .col-prod {
        gap: 8px;
    }

    .ohc-qty-control {
        margin: 0;
    }

    .ohc-qty-control .quantity input.qty {
        font-size: 2.5rem !important;
        height: 60px !important;
    }

    /* .odin-std-price {
    font-size: 2.5rem !important;
} */
    .ohc-qty-control .quantity .plus {
        font-size: 3.5rem !important;
    }

    .ohc-qty-control .quantity .minus {
        font-size: 3.5rem !important;
    }

    .col-qty {
        margin-top: 2px;
    }

    .col-price {
        gap: 3px;
    }

    .odin-price-col {
        padding: 0;
        margin-bottom: 10px;

    }

    /* MEINE TRÄNKE MODAL - MOBILE FIXES */
    .ec-cart-widget .ec-minicart {
        max-height: calc(100vh - 120px) !important;
        /* Höher machen */
        height: auto !important;
        padding-bottom: 120px !important;
        /* Platz für Buttons unten */
    }

    /* KASSE & TRUNKLAGER BUTTONS - Größer und mehr Padding */
    .ec-cart .form-control__button,
    .ec-confirmation__continue .form-control__button,
    .form-control--primary .form-control__button {
        width: 180px !important;
        height: 70px !important;
        padding: 18px 10px !important;
        /* Mehr Top/Bottom Padding */
        margin: 8px auto !important;
        font-size: 1.2rem !important;
    }

    /* SUMME / PREIS - Mehr Spacing */
    .ec-cart__summary,
    .ec-cart__subtotal {
        padding: 15px 0 !important;
        margin: 15px 0 !important;
    }

    /* Modal Content Wrapper - Mehr Abstand */
    .ec-cart .ec-cart__body {
        padding-bottom: 30px !important;
    }

    /* STICKY FOOTER BUTTONS - Mehr Abstand nach oben */
    .ec-cart .ec-cart__footer {
        padding-top: 20px !important;
        margin-top: 20px !important;
    }
}

.icon-menu-fine:before {
    color: #EAAE69 !important;
}















/* -----------------------------------------
  ecwid shop
   ----------------------------------------- */




.ec-store__category-page--0 .ec-grid,
.ec-store__category-page--0 .grid__wrap {
    display: none !important;
}

.ec-related-products,
.related-products,
.ec-store__related-products,
.ec-product-details__related,
.ec-page-title__featured-products,
#featured-products-anchor,
#featured-products-anchor~* {
    display: none !important;
}

.ec-breadcrumbs,
.ec-store__breadcrumbs,
.ec-footer,
.ec-search,
.ec-search-widget,
.ec-store__category-title,
.ec-page-title,
.ec-header-h1 {
    display: none !important;
}

/* B) HERO DESIGN */
.ec-store__content-wrapper,
.ec-grid .grid__wrap,
.ec-store__category-page,
.ecwid-productBrowser {
    background-color: transparent !important;
    background: transparent !important;
}

.ec-grid .grid__wrap {
    justify-content: center !important;
    display: flex !important;
}

/* Produkt-Karte */
.ec-grid .grid-product {
    width: 100% !important;
    max-width: 450px !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px !important;
}

.ec-grid .grid-product__wrap,
.ec-grid .grid-product__shadow,
.ec-grid .grid-product__inner {
    background: transparent !important;
    box-shadow: none !important;
}

.ec-grid .grid-product__image {
    max-height: 500px !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease;
}

.ec-grid .grid-product__image-area {
    height: auto !important;
    min-height: 400px !important;
}

.ec-grid .grid-product:hover .grid-product__image {
    transform: scale(1.02);
}

/* Text & Preis */
.ec-grid .grid-product__title-inner {
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.6em !important;
    color: #fff !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 5px #000 !important;
}

.ec-grid .grid-product__price-amount {
    font-size: 1.8em !important;
    color: #BF8139 !important;
    font-weight: normal !important;
    text-align: center !important;
    display: block !important;
    margin-top: 10px !important;
    text-shadow: 0 0 5px #000 !important;
}

.ec-grid .grid-product__label {
    background-color: #a32a2a !important;
    color: #fff !important;
    border-radius: 4px !important;
}

/* C) BUTTONS (Runen Stein Style) */
/* Ecwid Buttons — Pill + Gold Ring (edits.css override) */
.ec-cart .form-control__button,
.ec-confirmation__continue .form-control__button,
.form-control--primary .form-control__button,
.form-control--secondary .form-control__button,
.ec-minicart__button--checkout {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 200px !important;
    height: 50px !important;
    margin: 10px 0 !important;
    margin-right: auto !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    position: relative !important;
    overflow: visible !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: filter 0.3s ease !important;
}
.ec-cart .form-control__button::before,
.ec-confirmation__continue .form-control__button::before,
.form-control--primary .form-control__button::before,
.form-control--secondary .form-control__button::before,
.ec-minicart__button--checkout::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 999px !important;
    padding: 2px !important;
    background: linear-gradient(120deg, #c5a059, #d4b06a, #f3d895, #ffe3a0, #f3d895, #d4b06a, #c5a059) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
}

/* Hover Glow */
.ec-cart .form-control__button:hover,
.ec-confirmation__continue .form-control__button:hover,
.form-control--primary .form-control__button:hover,
.form-control--secondary .form-control__button:hover,
.ec-minicart__button--checkout:hover {
    filter: drop-shadow(0 0 12px rgba(244, 192, 100, 0.6)) drop-shadow(0 0 25px rgba(244, 192, 100, 0.3)) !important;
}

/* Mobile Anpassung */
@media (max-width: 320px) {

    .ec-cart .form-control__button,
    .form-control--primary .form-control__button {
        width: 100% !important;
        height: auto !important;
        padding: 20px 0 !important;
    }
}

/* D) HORN WIDGET (Ausblenden Original) */
.ec-minicart,
.ec-cart-widget,
.ec-minicart--floating,
.ec-minicart--fixed,
.ec-minicart__popup {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

a.odin-cart-widget {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    height: 70px !important;
    width: 70px !important;
    margin-left: 20px;
    transition: transform 0.3s ease;
    z-index: 2147483640 !important;
}

a.odin-cart-widget:hover {
    transform: scale(1.05);
}

.odin-horn-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#horn-full {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    clip-path: inset(100% 0 0 0);
   transition: clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#horn-empty {
    z-index: 1;
}

.odin-count {
    position: absolute;
    bottom: -3px;
    right: -8px;
    top: auto;
    min-width: 30px;
    height: 30px;
    padding: 0 5px 2px 5px !important;
    border-radius: 15px;
    background: #ffffff !important;
    color: #BF8139 !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.2s, opacity 0.2s;
}

/* Füllhorn - clip-path wird von JS gesteuert */
/* Beide Bilder IMMER sichtbar */

a.odin-cart-widget.is-filled .odin-count {
    opacity: 1;
}

/* E) LEERER WARENKORB DESIGN
   JS baut eigenen Container AUSSERHALB des Ecwid-Stores
   und versteckt den ganzen Ecwid-Container per display:none.
   Hier nur das Styling für unseren eigenen Container. */

/* ── Odin Custom Empty Cart Container (per JS eingefügt) ── */
.odin-empty-cart-custom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    padding: 20px 0 0 0;
    margin-bottom: 100px !important;
}

/* Horn Container — 1:1 wie MEINE TRÜNKE Popup */
.odin-empty-cart-custom .odin-horn-wrap {
    position: relative !important;
    width: 280px !important;
    height: 280px !important;
    margin: 0 auto 20px auto !important;
    filter: drop-shadow(0 0 10px rgba(191, 129, 57, 0.4));
    transition: filter 0.4s ease;
}
/* KEIN Glow-Hover auf dem Horn-Bild */
/* Beide Horn-Bilder ABSOLUT übereinander */
.odin-empty-cart-custom .odin-horn-wrap img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
}
.odin-empty-cart-custom .odin-horn-empty { z-index: 1 !important; }
.odin-empty-cart-custom .odin-horn-full {
    z-index: 2 !important;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 2s ease-out;
}
/* Fill-Animation auf Button-Hover (JS setzt .is-filling auf horn-wrap) */
.odin-empty-cart-custom .odin-horn-wrap.is-filling .odin-horn-full {
    clip-path: inset(0 0 0 0) !important;
    transition: clip-path 3s ease;
}

/* Button: 1:1 wie .odin-grid-btn (Sammeln auf Startseite) */
.odin-empty-cart-custom .odin-cart-fallback-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: clamp(140px, 16vw, 180px) !important;
    height: 60px !important;
    margin-top: 15px !important;
    padding: 0 clamp(18px, 2vw, 28px) !important;
    border-radius: 999px !important;
    border: none !important;
    background: linear-gradient(120deg, #f3d895 0%, #ffe3a0 40%, #fff0c4 70%, #ffe3a0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-color: transparent !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.35rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: 0 0 4px rgba(230, 168, 91, 0.15) !important;
    transition: box-shadow 0.5s ease !important;
    transform: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    overflow: visible !important;
}
.odin-empty-cart-custom .odin-cart-fallback-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 999px !important;
    padding: 2px !important;
    background: linear-gradient(120deg, #c5a059, #d4b06a, #f3d895, #ffe3a0, #f3d895, #d4b06a, #c5a059) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
}
.odin-empty-cart-custom .odin-cart-fallback-btn:hover {
    box-shadow: 0 0 14px rgba(230, 168, 91, 0.7), 0 0 28px rgba(230, 168, 91, 0.35) !important;
    text-decoration: none !important;
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(120deg, #f3d895 0%, #ffe3a0 40%, #fff0c4 70%, #ffe3a0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Text: "DEIN HORN IST LEER." — Odin Font I */
.odin-empty-cart-text {
    font-family: 'ITC Odin Con', serif !important;
    font-size: 3.4rem !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
    margin: 0 0 25px 0 !important;
    padding: 0 20px !important;
    background: linear-gradient(120deg, #f3d895 0%, #ffe3a0 40%, #fff0c4 70%, #ffe3a0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #f3d895 !important;
    text-shadow: none !important;
}

@media screen and (max-width: 768px) {
    .odin-empty-cart-custom {
        margin-bottom: 60px !important;
    }
    .odin-empty-cart-custom .odin-horn-wrap {
        width: 200px !important;
        height: 200px !important;
    }
    .odin-empty-cart-text {
        font-size: 2rem !important;
        line-height: 2.2rem !important;
    }
}



/* =========================================
   SCHRIFTGRÖSSEN: EINZEL-PRODUKTSEITE (FIX)
   ========================================= */

/* 1. PRODUKT-TITEL (Auf der Detailseite) */
html#ecwid_html body#ecwid_body .product-details__product-title {
    font-family: 'ITC Odin Con', 'Cinzel', serif !important;
    font-size: clamp(1.8rem, 7vw, 3rem) !important;
    line-height: 3.2rem !important;
    margin-bottom: 0px !important;
    text-transform: uppercase;
    font-weight: normal !important;
    display: inline-block;
    color: #dab262 !important;
}

/* 2. PREIS (Auf der Detailseite) */
html#ecwid_html body#ecwid_body .details-product-price__value,
html#ecwid_html body#ecwid_body .product-details__product-price {
    font-family: 'Odin Text Reg', serif !important;
    font-size: 42px !important;
    /* <--- Hier Größe anpassen */
    font-weight: normal !important;
    color: #fff !important;
    /* Odin Gold */
    text-shadow: 0 0 8px #000 !important;
}

/* Falls du auch das Währungssymbol (€) riesig haben willst: */
html#ecwid_html body#ecwid_body .details-product-price__currency {
    font-size: 42px !important;
    color: #BF8139 !important;
}

/* 3. MOBILE ANPASSUNG (Damit es auf dem Handy passt) */
@media (max-width: 480px) {
    html#ecwid_html body#ecwid_body .product-details__product-title {
        font-size: 34px !important;
    }

    html#ecwid_html body#ecwid_body .details-product-price__value {
        font-size: 30px !important;
    }
}



/* =========================================
   ODIN GALERIE: BILD FIXIEREN (Kein Zoom/Swipe)
   ========================================= */

/* 1. Die Pfeile links/rechts ausblenden */
.details-gallery__arrow,
.details-gallery__arrow--prev,
.details-gallery__arrow--next {
    display: none !important;
}

/* 2. Das große Bild "totstellen" 
   - pointer-events: none -> Verhindert Klicks (Lightbox) und Wischen (Swipe)
   - cursor: default -> Zeigt normalen Mauszeiger statt Hand
*/
.details-gallery__image-wrapper,
.details-gallery__main-image-wrapper {
    pointer-events: none !important;
    cursor: default !important;

    /* Verhindert, dass man das Bild markieren kann */
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Optional: Falls da noch ein Zoom-Icon ist, weg damit */
.details-gallery__zoom-icon {
    display: none !important;
}



/* =========================================
   ODIN GALERIE: TOTAL-LOCK (Kein Lightbox, Kein Links/Rechts)
   ========================================= */

/* 1. Die unsichtbaren Klick-Zonen (Links/Rechts) entfernen */
/* Wir löschen den kompletten Container für die Steuerung */
.details-gallery__images-controls,
.details-gallery__images-control,
.details-gallery__images-control--left,
.details-gallery__images-control--right {
    display: none !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* 2. Sichtbare Pfeile (falls noch Reste da sind) */
.details-gallery__arrow,
.details-gallery__arrow--prev,
.details-gallery__arrow--next {
    display: none !important;
}

/* 3. Das Hauptbild "totstellen" (Kein Klick, kein Wischen) */
.details-gallery__image-wrapper,
.details-gallery__main-image-wrapper,
.details-gallery__images-container {
    /* pointer-events: none sorgt dafür, dass Klicks einfach "durchfallen" */
    pointer-events: none !important;
    cursor: default !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: none !important;
    /* Verhindert Wischen auf Handys */
}

/* 4. Zoom-Icon entfernen */
.details-gallery__zoom-icon {
    display: none !important;
}

/* =========================================
   COOKIE BANNER KILLER (Version 2.0)
   Versteckt das Banner basierend auf deinem Screenshot
   ========================================= */

/* Wir greifen den Container direkt am Klassennamen */
.ec-notice.ec-notice--cookie,
.ec-notice--cookie,
.ec-notice__message,
div[class*="ec-notice--cookie"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    /* Zur Sicherheit schieben wir es aus dem Bild */
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -1 !important;
    height: 0 !important;
    width: 0 !important;
}

/* Falls noch ein Wrapper drumherum ist */
.ec-notices_wrap .ec-notice--cookie {
    display: none !important;
}


/* =========================================
   SCROLLBAR FIX - Braune Scrollbar
   Füge diesen Code ans Ende deiner style.css
   oder edits.css hinzu
   ========================================= */

/* =========================================
   SCROLLBAR - Dunkelbraun mit Gold Hover
   ========================================= */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    background: #0d0905 !important;
}

::-webkit-scrollbar-track {
    background: #0d0905 !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
    background: #2a1f15 !important;
    border-radius: 4px !important;
    transition: background 0.3s ease !important;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background: #c5a059 !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: #2a1f15 !important;
}

html::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:active {
    background: #c5a059 !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: #0d0905 !important;
}

* {
    scrollbar-color: #2a1f15 #0d0905 !important;
    scrollbar-width: thin !important;
}

html, body {
    scrollbar-color: #2a1f15 #0d0905 !important;
    scrollbar-width: thin !important;
}


::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: #0d0905 !important;
}

::-webkit-scrollbar-thumb {
    background: #2a1f15 !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:active {
    background: #c5a059 !important;
}

* {
    scrollbar-color: #2a1f15 #0d0905 !important;
    scrollbar-width: thin !important;
}

/* =========================================
   MOBILE SPLASH EFFEKT (Wassertropfen)
   ========================================= */
.odin-drop {
    position: fixed;
    width: var(--size, 5px);
    height: var(--size, 5px);
    background: radial-gradient(circle at 30% 30%, #fff0c4, #ffe3a0, #f3d895);
    border-radius: 50%;
    pointer-events: none;
    z-index: 100000;
    box-shadow: 0 0 8px rgba(255, 227, 160, 0.9), 0 0 12px rgba(241, 198, 91, 0.5);
    animation: odinSplash 1s ease-out forwards;
    animation-delay: var(--delay, 0s);
    transform: translate(-50%, -50%);
}

@keyframes odinSplash {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.9);
    }
    80% {
        opacity: 0.6;
        transform: translate(-50%, -50%) translate(var(--tx), calc(var(--ty) + 10px)) scale(0.6);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--tx), calc(var(--ty) + 20px)) scale(0.2);
    }
}