/* Datei: product-finder.css */

/* Product Finder Main */

#product-finder-container {
    padding: 0 5rem;
}

#product-finder-card-container {
    display: none;
}

/* Tabellenansicht sichtbar */
#product-finder-table-container {
    display: block;
}

#product-finder-container .taxonomy-card:hover,
#product-finder-container button:hover,
#product-finder-container button {
    cursor: pointer !important;
}

#quform-popup-wrapper form textarea,
#quform-popup-wrapper form input {
    border: 1px solid var(--smk--color--primary);
    border-radius: 0.5rem;
    padding: 1rem;
}

#quform-popup-wrapper .quform_wrapper {
    margin-top: 1rem;
}

.quform-label.quform-label-16_12,
.quform-label.quform-label-17_12{
    display: none;
}

#quform-popup-wrapper .quform-element-textarea label,
#quform-popup-wrapper .quform-element-text label{
    padding-right: 0.3rem;
    padding-left: 0.3rem;
    left: 1.1rem;
    position: relative;
    top: 1.25rem;
    z-index: 1;
    background-color: var(--smk--color--white);
    color: var(--smk--color--black);
    width: fit-content;
    font-size: clamp(16px, 1.15rem, 30px);
}

#quform-popup-wrapper .quform_wrapper label,
#quform-popup-wrapper .quform-field.quform-field-text {
    letter-spacing: -0.01em;
    font-size: clamp(16px, 1.15rem, 30px);
}

#product-finder-table-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-family: "Roboto", Arial, sans-serif;
}

#product-finder-table-container tr,
#product-finder-table-container th,
#product-finder-table-container td {
    /* border: 1px solid #ddd; */
    border-top: none !important;
    border: none;
    padding: 12px;
    text-align: left;
    line-height: 1.5;
}

#product-finder-table-container th {
    /* background-color: #f2f2f2; */
    border-bottom: 1px solid #d9d9d9;
    font-weight: bold;
}

#product-finder-table-container td {
    border-bottom: 1px solid #d9d9d9;
}

#product-finder-table-container td:nth-child(1) {
    width: 17.5%;
}

#product-finder-table-container td:nth-child(4) {
    width: 15%;
}

#product-finder-table-counter {
    font-weight: bold;
    position: relative;
    left: 0.45rem;
    margin-top: 5rem;
}

/* #product-finder-table-container tr:nth-child(even) {
    background-color: #f9f9f9;
} */

#product-finder-table-container tbody tr:hover {
    /* background-color: #e9e9e9; */
    -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
    transition: all 0.3s;
    background-color: #f4f4f4;
    z-index: 1000;
}

#product-finder-container h1 {
    text-align: center;
    margin-bottom: 1rem;
    padding-top: 12rem;
    font-size: clamp(2.8rem, 3.2rem, 3.5rem);
    line-height: 1.45;
    font-weight: bold;
}

.product-finder-container-subheadline {
    display: block;
    margin: 5rem 0 0 0 !important;
    text-align: center;
}

#product-finder-container h2 {
    font-size: clamp(32px, 2.3rem, 2.3rem);
    line-height: 121%;
    letter-spacing: -0.01em;
    hyphens: none;
    margin-bottom: clamp(21px, 0.6em, 0.6em);
}

#product-finder-container p {
    text-align: left;
    font-style: inherit;
}

#taxonomy-filters-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.taxonomy-section:nth-of-type(3),
.taxonomy-section:nth-of-type(4),
.taxonomy-section:nth-of-type(5) {
    /* width: clamp(50% 55% 60%); */
}

/* Styles für die Taxonomie-Buttons */
.taxonomy-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc((98% - (0.75rem * 3)) / 4); /* Breite = (Container - (3 × Gap)) ÷ 4 Cards */
    max-width: none;
    min-width: 16rem;
    aspect-ratio: 1;
    margin: 0;
    padding: 1.2rem 1.8rem;
    border-radius: 10px;
    aspect-ratio: 1;
    -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
}

.taxonomy-card:hover {
    transform: scale(1.02);
    transition: all 0.3s;
}

.taxonomy-card.disabled {
    color: #777;
    background-color: #eee;
    pointer-events: none; /* Verhindert das Klicken auf deaktivierte Cards */
}

.taxonomy-card.active {
    color: var(--smk--color--black);
    background-color: #fff;
    /* Weitere Styling-Anpassungen für aktive Cards */
}

.taxonomy-card h3 {
    text-align: center;
    display: block;
    min-height: 5rem;
    margin: 0;
}

.taxonomy-icon-wrapper {
    width: 45%; /* Breite des Containers */
    overflow: hidden; /* Verhindert, dass übergroße Bilder den Container verlassen */
    position: relative; /* Für absolute Positionierung des Bildes */
    margin: auto;
}

.taxonomy-card img {
    /* height: 100%; */
    object-fit: cover; /* Skaliert das Bild so, dass es den Container vollständig abdeckt */
    object-position: center; /* Zentriert das Bild innerhalb des Containers */
    display: block;
}

.taxonomy-section {
    margin-bottom: 20px;
    /* display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    width: 100%;
    max-width: 1600px;
    text-align: center;
}

.taxonomy-buttons {
    justify-content: center;
}

.taxonomy-section h2 {
    margin-bottom: 10px;
    font-size: 1.2em;
}

.product-contact-button-container,
.taxonomy-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#buttons-specific_adhesives,
#buttons-product_categories_to_bond {
    gap: 1rem;
}

/* Allgemeine Button-Stile */
.quform-submit,
.button,
.button:focus {
    font-size: clamp(15px, 0.75rem, 30px) !important;
    padding: 0.5rem 1.2rem !important;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    transition:
        background-color 250ms ease,
        color 250ms ease,
        border-color 250ms ease;
    cursor: pointer;
    border: none;
}

/* Gefüllte Button-Stile */
.quform-submit,
.button-filled,
.button-filled:focus {
    background-color: var(--smk--color--primary);
    color: var(--smk--color--white);
}

.button-filled.green {
    background-color: var(--smk--color--primary);
}

.quform-submit:hover,
.quform-submit:focus,
.button-filled:hover {
    /* background-color: var(--smk--color--primary); */
    background-color: rgb(45, 45, 45);
    color: var(--smk--color--white);
    margin: unset;
    padding: 0.5rem 1.2rem !important;
    font-weight: 400 !important;
    font-size: clamp(15px, 0.75rem, 30px) !important;
}

.button.green:hover {
    background-color: rgb(141, 130, 10);
}

.quform-submit:active,
.button-filled.active,
.button-filled:active {
    /* background-color: var(--smk--color--primary); */
    background-color: rgb(45, 45, 45);
    color: var(--smk--color--white);
    margin: unset;
    padding: 0.5rem 1.2rem;
}

/* Outline Button-Stile */
.button-outline:active,
.button-outline:focus,
.button-outline {
    background-color: transparent;
    color: var(--smk--color--primary);
    border: 2px solid var(--smk--color--primary);
    margin: unset;
    padding: 0.5rem 1.2rem;
    font: unset;
    font-size: clamp(15px, 0.75rem, 30px);
    font-weight: bolder;
}

.button-outline:hover {
    background-color: rgb(141, 130, 10);
    color: var(--smk--color--white);
    border: 2px solid rgb(141, 130, 10);
    margin: unset;
    padding: 0.5rem 1.2rem;
    font: unset;
    font-size: clamp(15px, 0.75rem, 30px);
}

.quform-element-submit button {
    line-height: inherit !important;
}

/* Zusätzliche spezifische Stile für Taxonomy-Buttons */
.taxonomy-button.active,
.taxonomy-card.active {
    position: relative; /* Ermöglicht die Positionierung des Pseudo-Elements */
}

/* .taxonomy-button.active::after, */
.taxonomy-card.active::after {
    content: "";
    position: absolute;
    top: calc(100% - 10px);
    right: 0px;
    width: 100%;
    height: 10px;
    background-color: var(--smk--color--primary);
    pointer-events: none;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

#filter-reset-container {
    display: flex;
    justify-content: end;
    margin-top: 60px;
}

/* Styles für deaktivierte Taxonomie-Buttons */
.taxonomy-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Shared Popup Styles */
.pf-popup-overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 10000;
}

.pf-popup-box {
    position: relative;
    max-height: 80vh;
    background-color: #fff;
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: auto;
    border-radius: 8px;
    display: none;
}

.pf-popup-box.active {
    display: block;
}

.pf-popup-close {
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.pf-popup-close::after {
    content: url("data:image/svg+xml,<svg width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"1.35355\" y1=\"0.646447\" x2=\"28.3536\" y2=\"27.6464\" stroke=\"black\" stroke-width=\"2.3\"/><line x1=\"0.646447\" y1=\"27.6464\" x2=\"27.6464\" y2=\"0.646448\" stroke=\"black\" stroke-width=\"2.3\"/></svg>");
    display: block;
    transform: scale(0.7);
}

/* Quform Popup Overrides */
.quform-popup-close {
    width: 100%;
    height: 3rem;
    display: flex;
    align-items: end;
    position: static;
}

.quform-popup-close::after {
    transform: scale(0.85);
    margin-left: auto;
}

.quform-popup-content.products {
    display: block;
}

.quform-popup-content.general {
    display: none;
}

/* hidden field */
.quform-element-17_17 {
    display: none;
}

.quform-spacer {
    padding: 0;
}

#quform-popup-wrapper:has(#quform-popup.active) {
    display: block;
}

#quform-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1600px;
    width: 70%;
    height: auto;
    padding: 1rem 4rem;
    z-index: 1000;
}

#quform-popup h1 {
    margin: 1rem 0;
    font-size: 3rem;
}

#quform-popup h3 {
    margin: 0.5rem 0;
    font-size: 1.5rem;
}

.quform-input {
    margin: 0.5rem 0;
}

/* Styles für Kontakt buttons */
.product-finder-contact {
    margin: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    background-color: #f4f4f4;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 0;
    transform: translateY(-50%);
}

.product-finder-contact .button {
    padding: 0.3rem 0.6rem !important;
    transition: all 0.3s ease;
    overflow: hidden;
    width: auto;
    max-height: 3rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.product-finder-contact:hover .button {
    justify-content: space-between !important;
}

.product-finder-contact i {
    display: inline-flex;
    transition: margin 0.3s ease;
}

.product-finder-contact span {
    opacity: 0;
    width: 0;
    transform: translateX(-20px);
    transition:
        opacity 0s ease,
        transform 0.2s ease,
        width 0.3s ease 0.1s; /* verzögerte Animation der Breite */
}

.product-finder-contact:hover .button {
    /* padding: 0.3rem 1.05rem 0.3rem 0.6rem !important; */
    padding-right: 1rem !important;
}

.product-finder-contact:hover i {
    margin-right: 0.5rem;
}

.product-finder-contact:hover span {
    opacity: 1;
    width: auto;
    transform: translateX(0);
    transition:
        width 0.3s ease,
        opacity 0.2s ease 0.1s,
        transform 0.2s ease 0.1s; /* verzögerte Einblendung */
}

/* CSS für den Loader */
#loader {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    /* backdrop-filter: blur(30px); */
    background-color: #00000070;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    width: 100vw;
    height: 100vh;
}

.spinner {
    position: relative;
    border: 12px solid #f3f3f3; /* Light grey */
    border-top: 12px solid var(--smk--color--primary);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    left: calc(50% - 30px);
    top: calc(50% - 30px);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*Reihenfolge der Taxonomie-Buttons*/
#buttons-product_categories_to_bond .taxonomy-card:nth-child(1) {
    order: 3;
}

#buttons-product_categories_to_bond .taxonomy-card:nth-child(2) {
    order: 4;
}

#buttons-product_categories_to_bond .taxonomy-card:nth-child(3) {
    order: 1;
}

#buttons-product_categories_to_bond .taxonomy-card:nth-child(4) {
    order: 2;
}

#filter-specific_adhesives .taxonomy-card:nth-child(1) {
    order: 2;
}

#filter-specific_adhesives .taxonomy-card:nth-child(2) {
    order: 4;
}

#filter-specific_adhesives .taxonomy-card:nth-child(3) {
    order: 3;
}

#filter-specific_adhesives .taxonomy-card:nth-child(4) {
    order: 1;
}

#reset-filters-button .icon-filter path:nth-of-type(1) {
    fill: var(--smk--color--primary);
    stroke: var(--smk--color--primary);
}

#reset-filters-button:hover .icon-filter path:nth-of-type(1) {
    fill: var(--smk--color--white);
    stroke: var(--smk--color--primary);
}

#reset-filters-button .icon-filter path:nth-of-type(2) {
    fill: var(--smk--color--primary);
}

#reset-filters-button:hover .icon-filter path:nth-of-type(2) {
    fill: var(--smk--color--white);
}

.product-finder-contact a:hover{
    cursor: pointer !important;
}

@media screen and (max-width: 1100px) {
    .product-finder-contact .button {
        padding: 2rem 0 !important;
    }
    .button-outline:active,
    .button-outline:focus,
    .button-outline {
        border: 1px solid var(--smk--color--primary);
    }
    .product-card h3 {
        font-weight: bold;
    }
}

@media (hover: none) and (pointer: coarse) {
    .quform-submit:hover,
    .quform-submit:focus,
    .button-filled:hover {
        /* background-color: var(--smk--color--primary); */
        background-color: var(--smk--color--primary);
        color: var(--smk--color--white);
        margin: unset;
        padding: 0.5rem 1.2rem !important;
        font: unset;
        font-weight: 400;
        font-size: clamp(15px, 0.75rem, 30px) !important;
    }

    .quform-submit:active,
    .button-filled.active,
    .button-filled:active {
        background-color: var(--smk--color--primary);
        background-color: rgb(45, 45, 45);
        color: var(--smk--color--white);
        margin: unset;
        padding: 0.5rem 1.2rem;
    }
}

@media screen and (max-width: 1100px) and (orientation: landscape) {
    #product-finder-table-container thead tr th:nth-of-type(7) {
        width: 15%;
    }
    .quform-popup-close::after {
        transform: scale(0.6);
    }
    #quform-popup {
        width: 80%;
    }
}

@media screen and (max-width: 1100px) and (orientation: portrait) {
    #product-finder-container h1 {
        margin-top: 10rem;
    }

    /* Verstecke die Tabellenansicht auf mobilen Geräten */
    #product-finder-table-container {
        display: none;
    }

    /* Zeige die Kartenansicht auf mobilen Geräten */
    #product-finder-card-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        padding: 1.5rem;
    }

    #product-finder-container {
        padding: 0 3rem;
    }

    .quform-popup-close::after {
        transform: scale(0.5);
    }

    .card_link_container:hover {
        box-shadow: none;
        transform: none;
    }

    #quform-popup {
        width: 85%;
    }

    .taxonomy-card {
        width: 33%;
        min-width: auto;
    }

    .taxonomy-card h3 {
        font-size: clamp(18px, 0.65rem, 40px);
        line-height: 1.2;
    }

    .product-finder-contact {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .product-contact-button-container {
        width: 100%;
    }

    .taxonomy-card.active::after {
        height: 8px;
        top: calc(100% - 8px);
    }

    #product-finder-container h2 {
        font-size: clamp(20px, 1.3rem, 1.6rem);
    }

    .product-finder-contact .button {
        padding: 2rem 0rem !important;
    }

    .product-finder-contact .button i {
        transform: scale(0.75);
    }

    /* Optional: Anpassung der Produktkarten */
    .product-card {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition:
            transform 0.3s,
            box-shadow 0.3s;
        align-items: baseline;
    }

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
    }

    .product-card h3 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
        color: var(--smk--color--black);
    }

    .product-card p {
        margin: 0.5rem 0;
        color: #000000;
        line-height: 1.4;
    }

    .product-card p strong {
        color: #000000;
        font-weight: 400;
    }

    .product-actions {
        margin-top: 1rem;
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        width: 80%;
    }

    .product-actions .button.button-outline {
        /* flex: 1;
        text-align: center;
        background-color: var(--smk--color--primary);
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 0.5rem 1rem;
        cursor: pointer;
        transition: background-color 0.3s; */
    }

    .product-actions .button:hover {
        background-color: #333;
    }
}

@media screen and (max-width: 768px) {
    /* Verstecke die Tabellenansicht auf mobilen Geräten */

    #product-finder-table-container {
        display: none;
    }

    /* Zeige die Kartenansicht auf mobilen Geräten */
    #product-finder-card-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        padding: 1.5rem;
    }

    #product-finder-container {
        padding: 0 1rem;
    }

    .quform-popup-close::after {
        transform: scale(0.5);
    }

    .card_link_container:hover {
        box-shadow: none;
        transform: none;
    }

    #quform-popup {
        width: 85%;
    }

    .taxonomy-card {
        width: 45%;
        min-width: auto;
    }

    .taxonomy-card h3 {
        font-size: clamp(18px, 0.65rem, 40px);
        line-height: 1.2;
    }

    .product-finder-contact {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .product-contact-button-container {
        width: 100%;
    }

    .taxonomy-card.active::after {
        height: 8px;
        top: calc(100% - 8px);
    }

    #product-finder-container h2 {
        font-size: clamp(20px, 1.3rem, 1.6rem);
    }

    .product-finder-contact .button {
        padding: 2rem 0rem !important;
    }

    .product-finder-contact .button i {
        transform: scale(0.75);
    }

    /* Optional: Anpassung der Produktkarten */
    .product-card {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
        padding-right: 3rem /* ggf. entfernen */;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition:
            transform 0.3s,
            box-shadow 0.3s;
        align-items: baseline;
    }

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
    }

    .product-card h3 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
        color: var(--smk--color--black);
    }

    .product-card p {
        margin: 0.5rem 0;
        color: #000000;
        line-height: 1.4;
    }

    .product-card p strong {
        color: #000000;
        font-weight: 400;
    }

    .product-actions {
        margin-top: 1rem;
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        width: 80%;
    }

    .product-actions .button.button-outline {
        /* flex: 1;
        text-align: center;
        background-color: var(--smk--color--primary);
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 0.5rem 1rem;
        cursor: pointer;
        transition: background-color 0.3s; */
    }

    .product-actions .button:hover {
        background-color: #333;
    }
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    .quform-popup-close::after {
        transform: scale(0.5);
    }

    #quform-popup {
        width: 94%;
        padding: 1rem 2rem;
    }
}

/* Product Info Popup Overrides */
.product-info-popup-wrapper.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-info-popup {
    max-width: 800px;
    width: 90%;
    padding: 2rem 3rem;
    display: block;
}

.product-info-popup-content h2 {
    /*margin-bottom: 1.5rem;*/
    /*font-size: 1.8rem;*/
}

.product-info-popup-content p {
    /*margin: 0.5rem 0;*/
    /*line-height: 1.6;*/
}

.product-info-popup-content ul {
    margin-bottom: 28px;
}

.product-info-popup-content ul li {
    list-style: none;
    display: flex;
    align-items: center;
    line-height: 2;
}

.product-info-popup-content ul li::before {
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    /* transition: .3s all; */
    display: block;
    margin-right: 1.25rem;
    /* width: 42px;
    height: 40px; */
    height: auto;
    width: 2rem;
    min-height: 1.8rem;
}

.product-info-popup-content ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='41' viewBox='0 0 43 41' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6.5C6.85786 6.5 3.5 9.85786 3.5 14V30C3.5 34.1421 6.85786 37.5 11 37.5H27C31.1421 37.5 34.5 34.1421 34.5 30V18.5C34.5 17.6716 35.1716 17 36 17C36.8284 17 37.5 17.6716 37.5 18.5V30C37.5 35.799 32.799 40.5 27 40.5H11C5.20101 40.5 0.5 35.799 0.5 30V14C0.5 8.20101 5.20101 3.5 11 3.5H29C29.8284 3.5 30.5 4.17157 30.5 5C30.5 5.82843 29.8284 6.5 29 6.5H11Z' fill='%23AC9E00'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M42.0548 0.933485C42.6438 1.51602 42.6491 2.46575 42.0665 3.05477L19.3198 26.0548C19.038 26.3397 18.6539 26.5 18.2532 26.5C17.8525 26.5 17.4685 26.3397 17.1867 26.0548L8.93348 17.7096C8.35095 17.1206 8.35621 16.1709 8.94523 15.5884C9.53425 15.0058 10.484 15.0111 11.0665 15.6001L18.2532 22.8668L39.9335 0.945228C40.516 0.356208 41.4658 0.35095 42.0548 0.933485Z' fill='%23AC9E00'/%3E%3C/svg%3E");
}

.product-info-popup-content a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    margin: unset;
    padding: 0.5rem 1.2rem;
    font: unset;
    font-size: clamp(15px, 0.75rem, 30px);
    font-weight: bolder;
    text-decoration: none;
    border: 2px solid var(--smk--color--primary);
    border-radius: 10px;
    background-color: transparent;
    color: var(--smk--color--primary);
    cursor: pointer;
    transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}

.product-info-popup-content a:hover {
    background-color: rgb(141, 130, 10);
    color: var(--smk--color--white);
    border-color: rgb(141, 130, 10);
}

/* Product info link style */
.product-info-link {
    color: var(--smk--color--primary);
    cursor: pointer;
}

.product-info-link:hover {
    color: rgb(141, 130, 10);
}

@media screen and (max-width: 768px) {
    .product-info-popup {
        width: 94%;
        padding: 1.5rem 2rem;
    }

    .product-info-popup-content h2 {
        font-size: 1.4rem;
    }
}