:root {
    --pfred: #e02e05; 
    --pfreddark: #ba181b;
    --pfredlink: #d74b2b;
    --white: #ffffff;
    --darkgrey: #0b090a;
    --midgrey: #b1a7a6;
    --lightgrey: #E5E5E5;
    --superlightgrey: #F8F8F8;
    --bs-font-sans-serif: "Libre Franklin", sans-serif;
    --bs-primary: orange;
}



html {
    background-color: var(--superlightgrey);
}

body {
    color: var(--darkgrey);
    font-family: var(--bs-font-sans-serif);
    background-color: var(--white);
    padding-top: 88px;
}

form {
    background-color: var(--white);
}

.main-content {
    min-height: calc(100vh - 150px);
}

.page-title {
    margin: 1.5rem 0;
}

.zone-title {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 500;
    padding-left: 0;
    padding-top: 0;
    padding-right: 40px;
    padding-bottom: 8px;
    margin-left: 0;
    margin-top: 25px;
    margin-right: 0;
    margin-bottom: 15px;
    border-bottom: solid 2px var(--pfred);
}

h1 {
    font-size: 1.3rem;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

h3 {
    font-size: 0.8rem;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

a {
    color: var(--darkgrey);
    text-decoration: none;
}

    a:hover {
        color: var(--pfredlink);
        text-decoration: none;
        cursor: pointer;
    }

hr {
    border: none;
    border-top: 1px solid #c7c7c7;
    margin: 20px 0;
    opacity: 1;
}

.cursor-pointer {
    cursor: pointer;
}

/*.pfbutton {
    background-color: var(--pfred);
    border-color: var(--pfred);
    color: var(--white);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.15s ease;
}

    .pfbutton:hover {
        background-color: var(--pfreddark);
        border-color: var(--pfreddark);
    }*/


.main-content {
    /*background-color: yellow;*/
    background-color: var(--white);
}

.footer {
    /*    position: relative;*/
    margin-top:100px;
    width: 100%;
    background-color: var(--superlightgrey);
    font-size: 0.9rem;
}

.footer-link {
    padding: 4px 0px 4px 0px;
}

.footer i {
    margin-right: 7px;
}

.footer h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

.homepage-news h3,
.homepage-news span {
    font-size: 0.8rem;
    font-weight: 500;
}

.homepage-news p {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--midgrey);
    margin-top: 2px;
}

.homepage-big-link-image {
    cursor: pointer;
    width: 200px;
}


/*.footer .copyright {
    color: var(--bs-gray-600);*/
/*font-size: 1.1rem;*/
/*}*/
.mh-50 {
    min-height: 50px;
}

.mh-75 {
    min-height: 75px;
}

.mh-100 {
    min-height: 100px;
}


/* NAVIGATION */


/*.navigationbar-sm {
    display: flex;
    width: 100%;
    height: 67px;
    background-color: var(--pfred);
    color: var(--white);
}

    .navigationbar-sm .container-left {
        width: 70%;
    }

    .navigationbar-sm .container-right {
        width: 30%;
    }

    .navigationbar-sm .logo {
        height: 55px;
        margin-left: 7px;
        margin-top: 6px;
    }*/



/* Search Bar */
.searchbar-sm {
    display: flex;
    align-items: center;
    /*border: dashed 1px aqua;*/
}

    .searchbar-sm input[type="text"] {
        flex: 1;
        height: 34px;
        border-left: solid 1px var(--lightgrey);
        border-top: solid 1px var(--lightgrey);
        border-right: none;
        border-bottom: solid 1px var(--lightgrey);
        border-top-left-radius: 6px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 6px;
        margin: 0;
        padding: 0 10px;
        outline: none;
        background-color: var(--white);
        box-shadow: none;
        font-size: 0.9rem;
    }

    .searchbar-sm button {
        height: 34px;
        border-left: none;
        border-top: solid 1px var(--lightgrey);
        border-right: solid 1px var(--lightgrey);
        border-bottom: solid 1px var(--lightgrey);
        border-radius: 0 4px 4px 0;
        padding: 0 15px;
        cursor: pointer;
        background-color: var(--white);
        color: var(--darkgrey);
        font-size: 0.9rem;
    }


/* Pixi List */
.pixilist-gridview-container {
    cursor: pointer;
    border: solid 2px transparent;
    transition: border-color 0.15s ease;
}

    .pixilist-gridview-container:hover {
        cursor: pointer;
        border: solid 2px var(--lightgrey);
    }

.pixilist-listview-container {
    cursor: pointer;
    border-left: solid 1px var(--lightgrey);
    border-top: solid 1px var(--lightgrey);
    border-right: solid 1px var(--lightgrey);
    border-bottom: none;
}

.pixilist-listview-last-item {
    border-bottom: solid 1px var(--lightgrey);
}

.pixilist-name {
    width: 100%;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
    color: var(--darkgrey);
    display: inline-block;
}

    .pixilist-name:hover {
        color: var(--pfredlink);
    }

.pixilist-label {
    font-size: 0.8rem;
    color: var(--midgrey);
}

    .pixilist-label::after {
        content: ":";
    }

.pixilist-label-highlight {
    color: var(--darkgrey);
}

.pixilist-value {
    font-size: 0.8rem;
    color: var(--darkgrey);
}


.square-container {
    width: 100%; /* Automatically adjust based on parent width */
    aspect-ratio: 1 / 1; /* Ensures a perfect square */
    overflow: hidden; /* Hides overflow */
}

    .square-container img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Ensures the image covers the square without distortion */
    }

.rectangle-container {
    width: 100%; /* Automatically adjust based on parent width */
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

    .rectangle-container img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Ensures the image covers the square without distortion */
    }

.pixilist-referenceprice {
    font-size: 0.8rem;
}

.pixilist-sellingprice {
    font-size: 0.9rem;
    font-weight: 600;
}

.pixilist-notavailable {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--midgrey);
}

.pixilist-status {
    font-size: 0.8rem;
    border-radius: 3px;
    background-color: var(--superlightgrey);
    border: solid 1px var(--lightgrey);
    color: var(--midgrey);
    padding-left: 8px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    margin-top: 10px;
    display: inline-block;
}

.pixilist-status-yes {
    color: var(--darkgrey);
}

    .pixilist-status-yes i {
        margin-right: 5px;
        color: green;
    }

.pixilist-status-no i {
    margin-right: 5px;
    color: var(--midgrey);
}

/* Pixi Filter Bar */
.pixi-filterbar {
    padding: 15px;
    margin-bottom: 1rem;
    background-color: var(--superlightgrey);
    border: solid 1px var(--lightgrey);
}

.pixi-filterbar-label {
    margin-bottom: 10px;
}

.pixi-filterbar-counter {
    align-self: flex-end;
    padding-top: 6px;
    padding-bottom: 6px;
}


/* Pixi details page */
.pixidetails-attributes {
}

    .pixidetails-attributes dt {
        font-size: 0.9rem;
        font-weight: 600;
        padding-top: 0px;
        color: var(--darkgrey);
    }

    .pixidetails-attributes-value,
    .pixidetails-attributes dd,
    .pixidetails-attributes span {
        font-size: 0.9rem;
        padding-top: 0;
        padding-bottom: .2rem;
        color: var(--darkgrey);
    }

    .pixidetails-attributes dd {
        margin-bottom: .5rem;
    }

.pixidetails-stock-status {
    font-size: 0.9rem;
    border-radius: 3px;
    background-color: var(--superlightgrey);
    border: solid 1px var(--lightgrey);
    color: var(--midgrey);
    padding-left: 8px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    margin-top: 10px;
    display: inline-block;
}



/* Buttons */
.btn-pf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 12px;
}

    .btn-pf span {
        flex: 1 1 60%;
    }

    .btn-pf .left {
        text-align: left;
        align-items: flex-start;
    }

        .btn-pf .left i {
            margin-right: 7px;
        }

    .btn-pf .right {
        text-align: right;
        flex: 1 1 40%;
    }

.btn-buy {
    background-color: var(--darkgrey);
    border-color: var(--darkgrey);
    color: var(--white);
    width: 100%;
}

    .btn-buy .right {
        font-size: 1.1rem;
    }

.btn-add-to-collection {
    /*    background-color: var(--white);
    border-color: var(--pfreddark);
    color: var(--pfreddark);*/
    width: 100%;
}


    .btn-add-to-collection .right {
        font-size: 1.1rem;
    }


/*.chocolat-image {
    cursor: zoom-in;
}

.chocolat-overlay {
    background-color: rgba(0,0,0, 0.9) !important;
}

.chocolat-wrapper .chocolat-bottom {
    height: 40px;
    font-size: 1rem;
    background: rgba(0,0,0, 1) !important;
}

.chocolat-wrapper .chocolat-left {*/
/*background: rgba(0,0,0, 0.8) !important;*/
/*}

.chocolat-wrapper .chocolat-right {*/
/*background: rgba(0,0,0, 0.8) !important;*/
/*}*/

/* Homepage */
.full-width-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}


.carousel-item {
    cursor: pointer;
}

.carousel-caption {
    left: 0;
    right: auto;
    bottom: -10px;
    padding-bottom: 0;
    padding-top: 0;
}

    .carousel-caption h5 {
        background-color: rgba(0,0,0,0.54);
        color: var(--white) !important;
        margin-left: 0;
        margin-right: auto;
        padding: 10px;
        width: auto;
        display: inline-block;
        font-family: 'Times New Roman', Times, serif;
        font-size: 1rem;
        padding: 5px;
    }

.homepage-container {
}

    .homepage-container h1 {
        text-transform: uppercase;
        font-size: 1.2rem;
        font-weight: normal;
    }




.catalog-square {
    /*font-weight: normal;*/
    font-size: 0.9rem;
    /*margin-bottom: 25px;*/
    cursor: pointer;
    border: solid 2px transparent;
    transition: border-color 0.15s ease;
}

    .catalog-square:hover {
        cursor: pointer;
        border: solid 2px var(--lightgrey);
    }

    /*    .catalog-square div {
        border: dashed 1px red;
    }*/


    .catalog-square h1 {
        font-size: 1rem;
        font-weight: 400;
        margin-top: 5px;
        margin-bottom: 1px;
    }

    .catalog-square span {
        font-size: 0.7rem;
        line-height: normal;
        color: var(--midgrey) !important;
        /*            margin-top: 0px;
            margin-bottom: 15px;*/
    }
/*.catalog-square-row {
    display: flex;
    align-items: flex-start;
    margin-top: 3px;
}

.catalog-square-title {
    flex: 0 0 80%;
}

.catalog-square-counter {
    flex: 0 0 20%;*/
/*    text-align: right;
    vertical-align: top;*/
/*padding-left: 3px;*/
/*display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

    .catalog-square-counter span {
        font-size: 0.7rem;
        border: solid 1px var(--midgrey);
        color: var(--darkgrey);
        width: 24px;*/ /* square size → adjust if needed */
/*height: 24px;
        padding: 3px;
        display: flex;
        align-items: center;*/ /* vertical center */
/*justify-content: center;*/ /* horizontal center */
/*box-sizing: border-box;*/ /* padding included in size */
/*}*/


/* Forms */
/*        .form-check-input {
            height: 1.4em !important;
            width: 2.4em !important;
            margin-right: 5px;
        }*/

.form-check-input:checked {
    background-color: var(--pfred);
    border-color: var(--darkgrey);
    border-color: pink;
}

.form-switch .form-check-label {
    margin-top: 5px;
}

.form-label {
    font-size: 0.9rem;
    margin-bottom: 0.2rem !important;
}
/* Login */
.login-container {
    /*max-width: 900px;  TODO */
    margin-left: auto;
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 50px;
    padding: 10px;
    background: white;
    border-radius: 15px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /*white-space: nowrap;*/
}

    .login-container .left-panel {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        height: auto;
        border-radius: 6px;
    }

        .login-container .left-panel img {
            /*height: 200px;*/
            width: 100%;
            border-radius: 6px;
        }

    .login-container .right-panel {
        padding-left: 1.5rem;
        padding-top: 0;
        padding-right: 1.5rem;
        padding-bottom: 0.5rem;
    }

        .login-container .right-panel h1 {
            font-size: 1.5rem;
        }

        .login-container .right-panel p {
            font-size: 0.9rem;
        }

    .login-container .alert {
        white-space: normal;
        font-size: 0.8rem;
    }

/* BASKET */
.basket-total-container {
    background-color: var(--superlightgrey);
    border: solid 1px var(--lightgrey);
}

.basket-sellingprice {
    font-size: 0.9rem;
    font-weight: 600;
    margin-right: 16px;
}

.basket-remove {
    font-size: 0.8rem;
    font-weight: 500;
}

    .basket-remove:hover {
        color: var(--pfred);
    }

    .basket-remove i {
        margin-right: 3px;
    }

.paimentmethods {
    /*display: flex;*/
}

    .paimentmethods img {
        height: 14px;
        margin-top: 8px;
        margin-right: 8px;
    }
/* Utils */
.border-lightgrey-bottom {
    border-bottom: solid 1px var(--lightgrey);
}


.collapsible {
    padding: 1rem;
    border-left: solid 1px var(--lightgrey);
    border-top: solid 1px var(--lightgrey);
    border-right: solid 1px var(--lightgrey);
}

    .collapsible .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-size: 1rem;
    }

        .collapsible .title .icon {
            flex: 0 0 auto;
        }

        .collapsible .title .text {
            flex: 1 1 auto;
            padding-left: 10px;
            padding-right: 10px;
        }

    .collapsible .chevron {
        transition: transform 0.5s ease;
    }

    .collapsible .description {
        overflow: hidden;
        max-height: 0;
        font-size: 0.8rem;
        transition: max-height 0.5s ease;
    }

    .collapsible.open .description {
        max-height: 800px; /* Large enough to show full content */
        /*display: block;*/
    }

    .collapsible.open .chevron {
        transform: rotate(180deg); /* Flip arrow up */
    }

.nav-basket-item {
    width: 100%;
    display: flex;
}

.nav-basket-item-image {
    flex: 0 0 30%; /* fixed 30% */
}

.nav-basket-item-text {
    flex: 0 0 70%; /* fixed 70% */
    padding-left: 10px;
}

.nav-basket-item p {
    font-size: 0.8rem;
    margin-top: 5px;
    margin-bottom: 0px;
}

.nav-basket-item span {
    font-size: 0.8rem;
    font-weight: 500;
}

.nav-basket-total-price {
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.tooltip-wide-300 {
    --bs-tooltip-max-width: 90%;
    margin-left: 10px !important;
}

.tooltip-wide-400 {
    --bs-tooltip-max-width: 90%;
    margin-left: 10px !important;
}

.tooltip-wide-500 {
    --bs-tooltip-max-width: 90%;
    margin-left: 10px !important;
}


.pf-toast-container {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 99999;
}

.pf-toast-success {
    background-color: #28a745 !important;
    font-weight: bold !important;
    color: var(--white) !important;
    /*min-width: 400px !important;*/
}

.pf-toast-error {
    background-color: #dc3545 !important;
    font-weight: bold !important;
    color: var(--white) !important;
    /*min-width: 400px !important;*/
}


.pagination {
    --bs-pagination-color: #000;
}

.page-link {
    color: var(--darkgrey);
}

    .page-link:hover {
        color: var(--darkgrey);
    }

.page-item .active {
    background-color: var(--darkgrey);
}

.active > .page-link, .page-link.active {
    /*    z-index: 3;
    color: var(--bs-pagination-active-color);*/
    background-color: var(--midgrey);
    border-color: var(--midgrey);
}


/* desktop only */
@media (min-width: 992px) {

    h1 {
        font-size: 1.3rem;
        font-weight: 500;
    }

    h2 {
        font-size: 1rem;
        font-weight: 500;
    }

    h3 {
        font-size: 0.8rem;
        font-weight: normal;
    }

    .main-content {
        min-height: calc(100vh - 210px);
    }

    .btn-buy {
        width: 80%;
    }

    .btn-add-to-collection {
        width: 80%;
    }

    .carousel-caption {
        left: 15%;
        right: 15%;
        bottom: 30px;
    }

        .carousel-caption h5 {
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
            font-size: 1.2rem;
        }

    .homepage-container {
    }

        .homepage-container h1 {
            font-size: 1.3rem;
        }

        .homepage-container .homepage-catalog h5 {
            font-size: 1.1rem;
        }

    .homepage-news h3,
    .homepage-news span {
        font-size: 0.9rem;
    }

    .homepage-news p {
        font-size: 0.8rem;
    }
    /* Login */
    .login-container {
        max-width: 900px;
        margin-top: 100px;
    }

        .login-container .left-panel {
            display: flex;
            justify-content: left;
            align-items: normal;
        }

            .login-container .left-panel img {
                /*height: 450px;*/
                width: 100%;
                max-width: 420px;
            }

        .login-container .right-panel {
            padding-left: 3.5rem;
            padding-top: 0;
            padding-right: 3.5rem;
            padding-bottom: 0.5rem;
        }


    .tooltip-wide-300 {
        --bs-tooltip-max-width: 300px;
    }

    .tooltip-wide-400 {
        --bs-tooltip-max-width: 400px;
    }

    .tooltip-wide-500 {
        --bs-tooltip-max-width: 500px;
    }

    .pixilist-name {
        font-size: 1rem;
        font-weight: 500;
    }
}

/* desktop only */
@media (min-width: 1200px) {
    .btn-buy {
        width: 70%;
    }

    .btn-add-to-collection {
        width: 70%;
    }

    .pixilist-name {
        font-size: 1rem;
        font-weight: 500;
    }
}