/* CSS File für Shop Custom Theme */

/* Allgemeine Schriftart für WooCommerce */
.woocommerce,
.woocommerce-page,
.wc-block-components-form,
.wc-block-checkout__form,
.wc-block-cart,
.woocommerce-MyAccount-content,
.woocommerce-form-login,
.woocommerce-order {
    font-family: "Circular XX", Helvetica, Arial, sans-serif;
}

.woocommerce-notices-wrapper {
    top: 155px;
    position: absolute;
    max-width: 1000px;
    width: fit-content;
    background-color: white;
    z-index: 2;
    outline: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.woocommerce-notices-wrapper.hide {
    opacity: 0;
    visibility: hidden;
}
.woocommerce-message {
    outline: none;
}

.product-gallery .thumbnail-gallery {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.product-gallery .thumbnail-gallery img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.product-gallery .thumbnail-gallery img:hover,
.product-gallery .thumbnail-gallery img.active {
    border-color: #007bff;
    border-width: 2px;
}

.woocommerce-product-gallery__image:not(:first-child):not(.thumbnail-gallery *) {
    display: none !important;
}

.product-gallery .thumbnail-gallery img:hover, .product-gallery .thumbnail-gallery img.active,
.product-gallery .thumbnail-gallery img {
    border: none !important
}

.woocommerce-Tabs-panel h2 {
    display: none;
}

h1.product_title {
    font-size: 32px !important;
    line-height: 36px;
    font-family: "Circular XX", Helvetica, Arial, sans-serif;
    font-weight: 500;
}

.input-text {
    padding: 0.5rem 0;
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/* Login */
.woocommerce-form-login label {
    display: none !important;
}

.woocommerce-form-login input::placeholder {
    color: #000000;
    opacity: 1; /* Firefox benötigt dies für konsistente Darstellung */
}

.login .input-text {
    margin-bottom: -1px;
    margin-top: 0;
}

/* Orders im Mein Konto */
.woocommerce-orders-table__header {
    padding: 0.5rem 0;
}
.woocommerce-orders-table__cell {
    padding: 0.5rem 0;
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    margin-top: -1px;
    vertical-align: top !important;
    line-height: normal !important;
}
.woocommerce-orders-table__cell * {
    font-size: 16px !important;
    line-height: normal !important;
}
.woocommerce-orders-table__cell a {
    display: block;
}

/* Button-Styling für alle Ansichten */
.woocommerce-orders-table__cell-order-actions a.button {
    color: rgb(0,80,165) !important;
}

/* Hover-Effekt für Buttons */
.woocommerce-orders-table__cell-order-actions a.button:hover {
    color: rgb(0,80,165) !important;
}

/* Mobile Ansicht für Bestelltabelle */
@media screen and (max-width: 767px) {
    /* Tabelle umgestalten */
    .woocommerce-orders-table {
        display: block;
        border: none;
    }
    
    /* Tabellenkopf ausblenden */
    .woocommerce-orders-table thead {
        display: none;
    }
    
    /* Zeilen als Blöcke darstellen */
    .woocommerce-orders-table tbody,
    .woocommerce-orders-table tr {
        display: block;
    }
    
    /* Jede Bestellung als eigener Kartenblock */
    .woocommerce-orders-table__row {
        display: block;
        padding: 1rem 0;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid #e5e5e5;
    }
    
    /* Zellen als Blöcke anzeigen */
    .woocommerce-orders-table__cell {
        display: block;
        padding: 0.5rem 0;
        border: none;
        text-align: left;
    }
    
    /* Beschriftungen für Zellen hinzufügen */
    .woocommerce-orders-table__cell::before {
        content: attr(data-title);
        display: block;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }
    
    /* Bestellnummer formatieren */
    .woocommerce-orders-table__cell-order-number {
        font-size: 18px;
        padding-top: 0;
    }
    
    /* Aktionsbuttons untereinander statt nebeneinander */
    .woocommerce-orders-table__cell-order-actions {
        display: flex;
        flex-direction: column; /* Untereinander statt nebeneinander */
        gap: 0.75rem; /* Mehr Abstand zwischen den Buttons */
        padding-top: 0.75rem; /* Abstand zum Text darüber */
    }
    
    /* Buttons im Style anpassen */
    .woocommerce-orders-table__cell-order-actions a.button {
        text-align: left;
        padding: 0.2rem 0;
        width: fit-content;
        color: rgb(0,80,165) !important; /* Blau */
        padding-right: 1.9rem;
        background-image: url("../img/arrow-blue.svg");
        background-position: right center;
        background-repeat: no-repeat;
        transition: all 0.3s ease;
    }
    
    /* Hover-Effekt für Buttons */
    .woocommerce-orders-table__cell-order-actions a.button:hover {
        padding-right: 2.25rem;
        color: rgb(0,80,165) !important;
    }
}

.wp-block-woocommerce-checkout-order-summary-block * {
    font-family: "Circular XX", Helvetica, Arial, sans-serif;
}

/* Passwort vergessen Label ausblenden */
.woocommerce-ResetPassword label {
    display: none !important;
}
.woocommerce-ResetPassword input {
    min-width: 350px;
}
.woocommerce-ResetPassword input::placeholder {
    color: #000000;
    opacity: 1;
}



.woocommerce-Button {
    color: rgb(0,80,165);
    padding-right: 1.9rem;
    background-image: url("../img/arrow-blue.svg");
    background-position: right center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}
.woocommerce-Button:hover {
    padding-right: 2.25rem;
}
.single_add_to_cart_button {
    color: rgb(0,80,165);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    font-size: 20px;
    margin-top: 1em;
}
@media screen and (min-width: 768px) {
    .single_add_to_cart_button {
        font-size: 20px;
    }
}
.single_add_to_cart_button:hover {
    color: rgb(0,80,165);
}
.single_add_to_cart_button::after {
    content: '';
    display: inline-block;
    width: 17px; /* von 21px auf 17px reduziert */
    height: 17px; /* von 21px auf 17px reduziert */
    margin-left: 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4835_8749)'%3E%3Cpath d='M9 22C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20C8.44772 20 8 20.4477 8 21C8 21.5523 8.44772 22 9 22Z' stroke='rgb(0,80,165)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20C19.4477 20 19 20.4477 19 21C19 21.5523 19.4477 22 20 22Z' stroke='rgb(0,80,165)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 21.3086 14.8504 21.4 14.39L23 6H6' stroke='rgb(0,80,165)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4835_8749'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.3s ease;
}
@media screen and (min-width: 768px) {
    .single_add_to_cart_button::after {
        width: 24px; /* von 28px auf 24px reduziert */
        height: 24px; /* von 28px auf 24px reduziert */
    }
}
.single_add_to_cart_button:hover::after {
    stroke: rgb(34,197,94);
    transform: translateX(0.45rem);
}
/* add to cart button im product grid */
.woocommerce-products-wrapper .single_add_to_cart_button {
    font-size: 20px;
    margin-top: 0;
}
.woocommerce-products-wrapper .single_add_to_cart_button::after {
    width: 15px; /* von 19px auf 15px reduziert */
    height: 15px; /* von 19px auf 15px reduziert */
}


.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child {
    aspect-ratio: 5/4;
    width: 100%;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cart */
.wc-block-cart__submit-container {
    text-align: left;
    margin-left: 18px;
}
.wc-block-cart__submit-button {
    width: fit-content !important;
    color: rgb(0,80,165);
    padding-right: 1.9rem;
    background-image: url("../img/arrow-blue.svg");
    background-position: right center;
    background-repeat: no-repeat;
    transition: all 0.3s ease !important;
}
.wc-block-cart__submit-button:hover {
    padding-right: 2.45rem !important;
    color: rgb(0,80,165);
}

.wc-block-components-totals-shipping strong {
    font-weight: 500;
}

.wp-element-button {
    width: fit-content !important;
    color: rgb(0,80,165);
    padding-right: 1.9rem !important;
    background-image: url("../img/arrow-blue.svg");
    background-position: right center;
    background-repeat: no-repeat;
    transition: all 0.3s ease !important;
}
.wp-element-button:hover {
    padding-right: 2.25rem !important;
    color: rgb(0,80,165);
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator {
    margin-bottom: 4em;
}
.wp-block-woocommerce-empty-cart-block .wp-block-product-new {
    margin-top: 2em;
}
.wp-block-woocommerce-empty-cart-block .add_to_cart_button {
    color: rgb(0,80,165);
    padding-right: 1.9rem;
    background-image: url("../img/arrow-blue.svg");
    background-position: right center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    font-size: 18px !important;
}
.wp-block-woocommerce-empty-cart-block .add_to_cart_button:hover {
    padding-right: 2.25rem;
    color: rgb(0,80,165);
}
.warenkorb-icon.menu-active {
    z-index: 99;
}
.wc-block-cart .wc-block-cart__submit-container--sticky {
    background: #fff !important;
}
.wp-block-woocommerce-cart {
    margin-top: 98px !important;
}
.wp-block-woocommerce-checkout {
    margin-top: 64px !important;
}
.wp-block-woocommerce-cart strong {
    font-weight: 500;
    font-size: inherit;
    line-height: inherit;
}
.wc-block-components-totals-shipping-address-summary {
    font-size: 16px;
    line-height: 1.2em;
    font-weight: 300 !important;
}
.wc-block-components-shipping-address {
    display: none !important;
}

/* Checkout */
.wc-block-components-text-input input {
    border: none !important;
    border-bottom: 1px solid #c4c4c4 !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
}
.wc-blocks-components-select__select {
    border: none !important;
    border-bottom: 1px solid #c4c4c4 !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
}
.wc-block-components-textarea{
    border: none !important;
    border-bottom: 1px solid #c4c4c4 !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
}
.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label {
    left: 0 !important;
}
.wc-block-checkout__login-prompt {
    width: fit-content !important;
    color: rgb(0,80,165) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    /* margin-top: -35px !important; */
    padding-right: 1.9rem;
    background-image: url("../img/arrow-blue.svg");
    background-position: right center;
    background-repeat: no-repeat;
    transition: all 0.3s ease !important;
}
.wc-block-checkout__login-prompt:hover {
    padding-right: 2.25rem !important;
    color: rgb(0,80,165) !important;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.wc-block-components-radio-control--highlight-checked--first-selected:after {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.wc-block-components-radio-control-accordion-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control.disable-radio-control .wc-block-components-radio-control__option {
    padding-left: 0 !important;
}
.wp-block-woocommerce-checkout-order-summary-block {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-radius: 0 !important;
}
.wc-block-components-address-form__address_2-toggle {
    display: none !important;
}
.wc-block-cart-items__header,
.wp-block-woocommerce-cart-order-summary-heading-block {
    text-transform: none !important;
    font-size: 16px !important;
}
.wc-block-components-product-name,
.wc-block-cart-item__total-price-and-sale-badge-wrapper {
    font-size: 20px !important;
    line-height: 1.5em !important;
}
.wc-block-components-product-metadata__description * {
    font-size: 16px !important;
    line-height: 1.5em !important;
}
.wc-block-components-validation-error * {
    font-size: 16px !important;
    line-height: 1.5em !important;
}
.wc-block-checkout__login-prompt {
    line-height: 1em !important;
}
.wc-block-components-totals-shipping .wc-block-components-totals-item__value * {
    font-size: 16px !important;
    line-height: 1.5em !important;
}
.wc-block-components-title {
    font-size: 16px !important;
    line-height: 1.5em !important;
    font-weight: 700 !important;
}
.wc-block-components-checkout-order-summary__title {
    margin-top: 0 !important;
}
.wc-block-components-checkout-order-summary__title-text {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5em !important;
}
/* Media Query Überschreibung für 2500px+ */
@media screen and (min-width: 2500px) {
    .wc-block-components-sidebar * {
        /* Setze die Schriftgröße auf den Wert, den sie bei 1440px haben würde */
        font-size: 16px !important;
    }
    
    /* Wichtige Überschriften und spezielle Elemente individuell behandeln */
    .wc-block-components-product-name,
    .wc-block-components-totals-footer-item * {
        font-size: 20px !important;
    }
}


/* Login */
.woocommerce-form-login {
    max-width: 450px;
    margin-top: 30px;
}
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"] {
    width: 100%;
}
.woocommerce-LostPassword {
    margin-top: 1rem;
}
.woocommerce-form-login__rememberme {
    display: none !important;
}

/* Mein Konto */
.account.menu-active svg {
    stroke: #fff;
}
.woocommerce-MyAccount-navigation {
    margin-bottom: 2em;
}
.woocommerce-MyAccount-navigation li {
    display: inline-block;
    padding-right: 1.2em;
}
.woocommerce-MyAccount-navigation li a {
    font-weight: 500;
    transition: all 0.3s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
    color: rgb(0,80,165);
}
.woocommerce-MyAccount-navigation li.is-active a {
    color: rgb(0,80,165);
}
.woocommerce-form-login__submit {
    color: rgb(0,80,165);
    padding-right: 1.9rem;
    background-image: url("../img/arrow-blue.svg");
    background-position: right center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    margin: 20px 0;
}
.woocommerce-form-login__submit:hover {
    padding-right: 2.25rem;
    color: rgb(0,80,165);
}
.shop_table {
    width: 100%;
}
.woocommerce-Address {
    margin-top: 3em;
}
.woocommerce-Address .edit {
    color: rgb(0,80,165);
    padding-right: 1.9rem;
    background-image: url("../img/arrow-blue.svg");
    background-position: right center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    margin: 20px 0 !important;
    display: inline-block;
}
.woocommerce-Address .edit:hover {
    padding-right: 2.25rem;
    color: rgb(0,80,165);
}
.woocommerce-Address header {
    height: auto;
}
.woocommerce-MyAccount-content h2 {
    margin-bottom: 1em;
}
.woocommerce-MyAccount-content .form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}
.woocommerce-MyAccount-content .form-row {
    width: 100%;
    max-width: 600px;
}
.woocommerce-MyAccount-content abbr.required {
    -webkit-text-decoration: none;
    text-decoration: none;
}
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="number"],
.woocommerce-MyAccount-content input[type="date"] {
    width: 100%;
    padding-left: 0;
}
.woocommerce-MyAccount-content .woocommerce-input-wrapper:has(select){
    margin-bottom: 1em;
}
.woocommerce-MyAccount-content button {
    color: rgb(0,80,165);
    padding-right: 1.9rem;
    background-image: url("../img/arrow-blue.svg");
    background-position: right center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    margin: 20px 0;
}
.woocommerce-MyAccount-content button:hover {
    padding-right: 2.25rem;
    color: rgb(0,80,165);
}
#account_display_name_description em {
    font-size: 16px;
    font-weight: 300 !important;
}
.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    margin-top: 1em;
}
#payment .button {
    color: rgb(0,80,165);
    padding-right: 1.9rem;
    background-image: url("../img/arrow-blue.svg");
    background-position: right center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    margin-top: 20px;
}
#payment .button:hover {
    padding-right: 2.25rem;
    color: rgb(0,80,165);
}

/* Bestellbestätigung */
.woocommerce-notice--success {
    margin-bottom: 1em;
}
.woocommerce-order strong {
    font-weight: 500;
}
.woocommerce-order h2 {
    margin-top: 1em;
}
.woocommerce-order td {
    padding-right: 4em;
}


/* Produktslider Styling */
.product-slider-container {
    position: relative;
    margin-bottom: 2rem;
}

.product-slider.swiper {
    max-width: 100%;
}

.product-slider .swiper-slide {
    aspect-ratio: 1/1;
    margin-bottom: 30px;
    box-shadow: none;
}

.product-slider .swiper-slide img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.product-slider .swiper-button-next,
.product-slider .swiper-button-prev {
    display: none;
}

.product-slider .swiper-pagination-bullet-active {
    background: rgb(0,0,0);
}

.product-slider .swiper-pagination {
    bottom: 0 !important;
}

/* Lightbox Styling */
.cursor-zoom-in {
    cursor: zoom-in;
}

/* Fancybox Anpassungen */
.fancybox__backdrop {
    background-color: rgba(0, 0, 0, 0.9);
}

.fancybox__toolbar {
    background: transparent;
}

.fancybox__button {
    color: #fff;
}

.fancybox__container {
    --fancybox-accent-color: rgb(0,80,165);
}

/* Menü Icon Konto-Login */
.menu-active svg path {
    stroke: #fff !important;
}
.menu-active:hover svg path {
    stroke: #000 !important;
}


/* Zoom-Effekt für Produktbilder - quadratischer Zoom */
.listing-bild {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1/1;
    display: block;
    margin-bottom: 1rem;
}

.listing-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.listing-bild:hover img {
    transform: scale(1.08);
}

.woocommerce-loop-product__title {
    font-weight: 700 !important;
    font-family: "Circular XX", Helvetica, Arial, sans-serif;
    font-size: 20px;
}

.woocommerce-Price-amount {
    font-weight: 500;
    font-family: "Circular XX", Helvetica, Arial, sans-serif;
    font-size: 20px;
}

.woocommerce-message {
    font-family: "Circular XX", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 500;
}
.woocommerce-message a {
    color: rgb(0,80,165);
    font-weight: 500;
    font-size: 16px;
}
