/*
Theme Name: FineArtPrints
Theme URI: https://fineartprints.pl
Author: CODEDUCK
Description: Autorski szablon 2025 FineArtPrints
Author URI: https://codeduck.pl
Text Domain: fineartprints
Version: 1.0
*/

:root {
    --fap-w-fluid-320-1200w-8-16px: clamp(0.5rem, 0.3182rem + 0.9091vw, 1rem);
    --fap-html-fs: var(--fap-w-fluid-320-1200w-8-16px);
}

html {
    font-size: var(--fap-html-fs);
    scroll-behavior: smooth;
}

body {
    color: #333;
    font: 1rem/1.25 Poppins, system-ui, sans-serif;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
    line-height: inherit;
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:active,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
    -webkit-background-clip: text;
    transition: background-color 5000s ease-in-out 0s;
}

.container {
    margin-inline: auto;
    max-inline-size: 96rem !important;
}

.text-xxs {
    font-size: 0.625rem;
}

.fap-button {
    align-items: center;
    background-color: #fff;
    border: 0.0625rem solid #333;
    border-radius: calc(infinity * 1px);
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    gap: 0.5rem;
    inline-size: fit-content;
    justify-content: center;
    padding: 0.75rem 1.25rem;
}

.fap-button--primary {
    background-color: #0025F8;
    border-color: #0025F8;
    color: #fff;
}

.size-16x16 {
    block-size: 1rem;
    inline-size: 1rem;
}

.size-16x20 {
    block-size: 1.25rem;
    inline-size: 1rem;
}

.size-24x24 {
    block-size: 1.5rem;
    inline-size: 1.5rem;
}

.dynamic-content {

    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6 {
        font-weight: 700;
    }

    & ul {
        list-style: disc;
        padding-inline-start: 2rem;
    }

}

.swiper {

    & .swiper-picture {
        & img {
            inline-size: 100%;
        }
    }

    & .swiper-button-prev,
    & .swiper-button-next {
        background-color: #fff;
        border: 0.0625rem solid #f4f4f4;
        height: 2.75rem;
        margin-top: 0;
        position: static;
        width: 2.75rem;

        &::after {
            color: #777;
            font-size: 1.1875rem;
        }
    }

    & .swiper-pagination {
        display: flex;
        height: 0.125rem;
        position: static;
    }

    & .swiper-pagination-bullet {
        background-color: #f4f4f4;
        border-radius: 0;
        flex-basis: 100%;
        height: 100%;
        margin: 0;
    }

    & .swiper-pagination-bullet-active {
        background-color: #777;
    }

    &.swiper-light {

        & .swiper-pagination-bullet {
            background-color: #fff;
            opacity: 1;
        }

        & .swiper-pagination-bullet-active {
            background-color: #777;
        }
    }

}

.woocommerce-product-gallery__wrapper {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}

/* Swiper hot-fix: wyczyść custom properties używane do liczenia szerokości */
.swiper,
.swiper * {
  --swiper-wrapper-size: initial !important;
  --swiper-slide-size: initial !important;
  --swiper-centered-offset-before: initial !important;
  --swiper-centered-offset-after: initial !important;
}

/* Twarde bezpieczniki układu (nieważne od Tailwinda/prefixu) */
.swiper { width: 100%; }
.swiper-wrapper { display: flex; width: auto !important; } /* nadpisuje inline width z JS */
.swiper-slide { flex-shrink: 0; }

/* (opcjonalnie) Jeżeli prefix Tailwinda wyłączył te utilsy – aliasy: */
.container { width:100%; margin-inline:auto; padding-inline:1rem; max-inline-size:1200px; }
.mx-auto { margin-left:auto; margin-right:auto; }
.px-4 { padding-left:1rem; padding-right:1rem; }

/* failsafe dla Swipera w układach flex/grid */
.artist-swiper,
.swiper { width: 100%; overflow: hidden; }

.swiper-wrapper { box-sizing: border-box; }

.swiper-slide { box-sizing: border-box; }

.breadcrumbs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.625rem;
    gap: 0.75rem;

    & > li {
        align-items: center;
        display: flex;
        gap: 0.75rem;

        & + li {

            &::before {
                content: '/';
            }
        }
    }
}

.img-child-w-full {

    & > img {
        inline-size: 100%;
        block-size: auto;
    }
}

.woocommerce-variation.single_variation {
    display: none!important;
}