/* CUSTOM STYLE BY RICCARDO MIOSI - miosiriccardo.it */


/* GLOBAL */
.text-bold {
    font-weight: 700;
}

:root {
    --FONT-WEIGHT-HEADING-MEDIUM: 500;
    --FONT-WEIGHT-HEADING-BOLD: 700;
    --FONT-WEIGHT-HEADING: 700;
}

@media (max-width: 1024px) {
    .main-content {
        margin-top: 43px;
    }

    .template-page {
        & .slide__text__wrapper {
            margin: 0 !important;
            padding-bottom: 20px !important;

            & > * {
                --adjust-heading: 1 !important;
            }
        }
    }
}
/* END - GLOBAL */


/* ANNOUNCEMENT BAR */
.announcement {
    --announcement-height: 30px;
    --line-height: 1;

    & .announcement__slide {
        padding: 5.5px 0;

        & .announcement__text {
            font-size: 12px;
            line-height: 1;
        }
    }
}
/* END - ANNOUNCEMENT BAR */


/* HEADER */
#SiteHeader {
    --gutter: 12px;
    height: 45px;
    box-shadow: 0 -40px 90px rgb(0 0 0 / 31%);
    --wrapper-width: calc(var(--site-width) - var(--gutter-mobile) * 2);
    
    & > .wrapper {
        --header-height: 45px;
        --header-sticky-height: 45px;
        --header-background-height: 45px;
        padding: 0;

        & .nav {
            justify-content: space-between;
            position: relative;

            & .header__dropdown__wrapper {
                transform: translateY(0);
                padding: 20px 10px 10px 10px;
                overflow-x: hidden;

                & .header__dropdown__inner {
                    width: auto;

                    & .header__grandparent__links {
                        margin: 0;

                        & .dropdown__family {
                            & .navlink--child {
                                font-weight: 700;
                            }

                            & .navlink, & .navtext {
                                font-size: 13px;
                                line-height: 1.5;
                            }
                        }
                    }
                }
            }
        }

        & .custom-header-search-form {
            width: 240px;
            opacity: 1;

            & .search-form {
                position: inherit;
            }

            & .search-form__inner {
                height: 100%;
                min-height: inherit;
                padding: 3.5px 0;
                max-height: 45px;

                & .search-form__label {
                    right: 15px;
                    width: 16px;
                    left: inherit;
                }

                & .search-form__input {
                    background: transparent;
                    border-radius: 40px;
                    border: 1px solid #979797;
                    padding: .3rem 1.5rem;
                    font-size: 14px;
                }
            }

            &[open="true"] .search-popdown__results {
                background: rgb(0 0 0 / 84%);

                & .predictive-search {
                    margin: 0;

                }
            }
        }

        & .menu__item--icons {
            position: relative;
        }
    }
}

.has-scrolled .site-header--has-logo .logo {
    height: auto !important;
}

@media (max-width: 1024px) {
    #SiteHeader {
        box-shadow: none !important;
    }

    .mobile-menu {
        display: none !important;
    }
    
    .mobile-menu__button--burger {
        display: flex !important;
    }

    .shopify-section-header .site-header:not(.js__header__clone) .nav--default {
        display: flex;
        justify-content: end !important;

        & .logo {
            left: 50%;
            transform: translateX(-50%);
            position: absolute;
            margin: 10px 0;
        }

        & .menu__item {
            display: flex;

            &.menu__item--compress {
                display: none;
            }
        }

        & .menu__item--icons {
            display: flex;
        }

        & .menu__item--compress, & .menu__items {
            display: none;
        }

        & .custom-header-search-form {
            width: 100% !important;
            position: absolute;
            top: 44px;
            left: 0;
            right: 0;

            & .search-form {
                width: 100%;
                background: #FFF;
                padding-left: 15px;
                padding-right: 15px;

                & .search-form__inner {
                    padding-bottom: 8px;
                }

                & .predictive-search {
                    width: 100%;
                }
            }
        }
    }
}
/* END - HEADER */


/* FOOTER */
#SiteFooter {
    --RADIUS: 30px;
    --gutter-mobile: 16px;
    border-top: 1px solid #dee2e6;

    & small p {
        --text-size: calc(.75rem * var(--adjust-body));
        font-size: var(--text-size);
    }

    & .footer-content {
        & .footer-blocks {
            justify-content: center;
        }

        & .footer-block--logo-full {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            @media only screen and (max-width: 767px) {
                flex-direction: column;
                gap: 30px;

                & .footer-block__logo-full-image {
                    width: 200px;
                }
            }
        }

        & .footer-block--menu {
            padding-top: 60px;
            padding-bottom: 90px;

            @media only screen and (max-width: 767px) {
                padding: 0;
            }
        }
    }

    & .footer-bottom {
        & .footer-copyright__menu {
            text-align: left;
            font-size: calc(.75rem * var(--adjust-body));
        }

        & .payment-icon-list {
            justify-content: center;
            direction: ltr;
            grid-template-columns: auto;
            grid-auto-flow: column;
            padding-bottom: 30px;

            @media only screen and (max-width: 767px) {
                padding-bottom: 10px;
            }
        }

        & .footer-copyright__credits p {
            text-align: right;
            font-size: calc(.75rem * var(--adjust-body));
        }
    }

    & .footer-title, & .footer-title__button {
        font-weight: 500;
    }
}
/* END - FOOTER */


/* COLLECTION */
.template-collection, .template-search {
    overflow: inherit !important;

    & .breadcrumbs {
        justify-content: center;
        padding: 10px;
        background-color: #FFF;
        color: #000;
    }

    & .shopify-section.text {
        & h1, & h2, & h3, & h4, & h5, & h6, & .h1, & .h2, & .h3, & .h4, & .h5, & .h6 {
            margin-bottom: .8px;
        }
    }

    & .collection__wrapper {
        --gutter: 12px;

        #CollectionStickyBar {
            display: none;
        }

        & .custom-filter-accordion {
            display: flex;
            margin-bottom: 10px;

            & #open-filters-desktop {
                display: flex;
                flex-direction: row-reverse;
                gap: 5px;
                font-size: 16px;
                color: var(--white);
                background: var(--black);
                padding: 5px 20px 5px 15px;
                width: max-content;

                & .collection__filter__count {
                    position: relative;
                    width: 20px;
                    height: 20px;

                    & svg {
                        color: #FFF;
                    }
                }
            }

            & .collection__filters__reset {
                color: var(--white);
                font-size: 16px;
                background: #DB0032;
                padding: 5px 10px;
                display: inline-block;
                align-items: center;
                width: max-content;
                cursor: pointer;
                transition: all 0.3s ease-in-out;
                text-decoration: none;
            }

            & .collection__sort-bar {
                padding-left: 10px;

                & .collection__sort__option-wrapper {
                    z-index: 100;
                    top: 38px;
                    left: 0;
                    padding: 14px;
                    border-color: #ececec;
                    background: #f9f9f9;
                }
            }
        }

        & .collection__filters {
            width: 100%;
            background-color: #FFF;
            position: relative;
            max-height: inherit;
            overflow: inherit;
            top: 0;
            transition: all .5s;
            margin: 0;
            height: 0;

            &.is-expanded {
                opacity: 1;
                height: 100%;
            }
            
            @media only screen and (max-width: 767px) {
                z-index: inherit;
                visibility: visible;
                transform: inherit;
                transition: inherit;

                & .collection__filters-wrapper {
                    padding: 0;

                    & .collection__filters-list {
                        width: 100%;
                    }
                }
            }

            & .collection__filters-wrapper {
                max-height: inherit;

                & .collection__filters-list {
                    height: inherit;

                    & .collection__filters-list__inner {
                        width: 100%;
                        height: inherit;
                        max-height: inherit;
                        margin: 0;
                        padding: 0;

                        & form {
                            display: flex;
                            gap: 20px;
                            padding: 0 20px 30px 20px;

                            @media only screen and (max-width: 767px) {
                                flex-wrap: wrap;
                                padding: 0 0 20px 0;
                                justify-content: space-between;
                            }

                            & .collection__filter {
                                pointer-events: none;
                                width: fit-content;
                                max-width: 25%;
                                height: auto;

                                @media only screen and (max-width: 767px) {
                                    max-width: 45%;
                                    width: 100%;
                                }

                                & .collection__filter__title {
                                    font-size: 16px;
                                    padding-right: 50px;
                                }

                                & .collection__filter-tags-wrapper {
                                    @media only screen and (max-width: 767px) {
                                        height: 100% !important;
                                        opacity: 1;
                                        overflow: hidden;
                                        visibility: visible;
                                        will-change: height;
                                    }

                                    & .collection__filter-tags {

                                        @media only screen and (max-width: 767px) {
                                            transform: none;
                                        }

                                        &:has(input[name="filter.p.m.custom.activity"]), &:has(input[name="filter.p.m.custom.fit"]), &:has(input[name="filter.v.option.size"]) {
                                            display: flex;
                                            flex-wrap: wrap;
                                        }

                                        & .collection__filter-tag {
                                            &:has(input[name="filter.p.m.custom.activity"]), &:has(input[name="filter.p.m.custom.fit"]), &:has(input[name="filter.v.option.size"]) {

                                                &:has(input:checked) {
                                                    & .filter__button {
                                                        color: #FFF;
                                                        background: #000;
                                                    }
                                                }

                                                & .filter__button {
                                                    font-size: 12px;
                                                    text-transform: uppercase;
                                                    color: #000;
                                                    padding: 2px 12px;
                                                    border: 1px solid #000;
                                                    display: inline-block;
                                                    margin-bottom: 5px;
                                                    margin-right: 5px;
                                                    text-align: center;
                                                    width: max-content;
                                                    transition: all 0.3s ease-in-out;
                                                    line-height: 1.7;

                                                    &::before {
                                                        display: none;
                                                    }

                                                    &:hover {
                                                        color: #FFF;
                                                        background: #000;
                                                    }
                                                }
                                            }

                                            & .filter__button {
                                                &::before {
                                                    border: 1px solid #dee2e6;
                                                    border-radius: .25em;
                                                    background-color: #979797;
                                                }
                                            }
                                        }
                                    }
                                }
                                
                                & .icon {
                                    display: none;
                                }
                            }
                        }
                    }

                    & .collection__filters-bottom {
                        display: none;
                    }
                }
            }
        }

        & .collection__products {
            width: 100%;
        }

        
    }
}

.subcollections {
    margin: 0 12px;

    & .grid__container {
        @media only screen and (max-width: 767px) {
            margin: 0;
        }
    }
    
    & .grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 24px;

        & .subcollection__title {
            right: 0;
            background-color: #f9f9f9;

            & span:after {
                display: none;
            }
        }

        & .subcollection__image:hover img {
            filter: brightness(1.4);
        }

        @media only screen and (max-width: 767px) {
            grid-template-columns: repeat(2, 1fr);

            & .subcollection {
                width: 100%;
            }
        }
    }
}

.template-collection {
    & .collection-promo {
        grid-row: span 2;

        & .custom-subcollection-title {
            & * {
                margin: 0;
            }

            & h1 {
                font-size: 3rem;
                line-height: 1em;
            }

            & p {
                font-weight: 700;
                font-size: 2rem;
                line-height: 1em;
                color: rgba(255, 255, 255, .6);
            }
        }
    }
}

/* END - COLLECTION */


/* SLIDESHOW SECTION */
.slider {
    & .flickity-prev-next-button {
        opacity: 1;
        z-index: 1;
        visibility: visible;
        transform: scale(1) translateY(-50%);
        color: #FFF;
        background: none;
        width: 20px;
        height: 20px;

        & svg {
            display: block;
        }
    }

    & .flickity-page-dots {
        text-align: right;
        padding: 0 var(--gutter-mobile);

        & .dot {
            width: 18px;
            height: 3px;
            margin: 3px;
            background: rgba(255, 255, 255, .5);
            transition: color .2s ease;
            border-radius: 0;
            border: none;
            opacity: 1;

            &.is-selected {
                background: #DB0032;
            }
        }
    }

    & .slide__image__inner {
        max-height: var(--full-height);
        height: 100%;
        
        & video {
            width: 100%;
            height: 100%;
            object-fit: cover;

            &.desktop-video {
                display: block;
            }

            &.mobile-video {
                display: none;
            }

            @media only screen and (max-width: 767px) {
                &.desktop-video {
                    display: none;
                }

                &.mobile-video {
                    display: block;
                }
            }
        }
    }
}
/* END - SLIDESHOW SECTION */


/* COLLECTION LIST SECTION */
.list-collections-section .grid__container .list-collections__item:hover {

    & .list-collections__item__title {
        text-decoration: underline;
    }
    
    & .list-collections__item__image-bg:before {
        opacity: .7;
        transition: opacity .5s;
    }
}

.list-collections-section .wrapper--full-padded {
    padding: 0 var(--gutter-mobile) !important;
}

@media (max-width: 1024px) {
    .collection-list .list-collections-section.list-collections-section--overlay-text .grid--mobile {
        row-gap: 4px;

        & .list-collections__item {
            padding: 0 2px;
        }
    }
}

/* END - COLLECTION LIST SECTION */


/* PRODUCT */
.template-product {
    & .wrapper--full-padded {
        padding: 0 var(--gutter-mobile) !important;
    }

    & .product-single__wrapper {
        grid-template-columns: calc(60% - var(--gutter-mobile) / 2) calc(40% - var(--gutter-mobile) / 2);
        gap: var(--gutter-mobile);
        justify-content: space-between;

        & .product-gallery {
            
        }
        & .product-single__details {
            & .form__wrapper {
                max-width: inherit;

                & .product__title-and-price {
                    gap: 8px;

                    & .breadcrumbs {
                        text-transform: uppercase;
                        font-weight: 700;
                    }

                    & .product__title {
                        font-size: 50px;
                        line-height: 1em;
                    }

                    & .product-subtitle {
                        text-transform: inherit;
                        line-height: 1em;
                        font-size: 32px;

                        @media (max-width: 767px) {
                            font-size: calc(1.325rem + .9vw);
                        }
                    }
                }

                & .radio__legend__label {
                    font-size: 14px;
                }

                & .siblings {
                    & .siblings__swatch {
                        --swatch-size: 98px;
                        --rectangle-ratio: 98px;
                        border: 2px solid #f9f9f9;
                        margin-right: 10px;
                        --BORDER-WIDTH: 0;

                        &[aria-current="true"] {
                            border-color: #000;
                        }
                    }
                }

                & .product-code-details {
                    display: grid;
                    grid-auto-flow: row;
                    gap: 0;
                    font-size: 11px;
                    margin-top: 5px;
                }

                & .product__selectors {
                    & .selector-wrapper {
                        & .radio__button {
                            min-width: 52px;
                            margin: 0 5px 5px 0;
                        }

                        & .radio__fieldset .radio__label:hover, & .radio__fieldset .radio__label:active, & .radio__fieldset .radio__label:focus, & .radio__fieldset .radio__input:checked~.radio__label {
                            background: #000;
                            border-color: #000;
                            color: #FFF;
                        }

                        & .radio__label {
                            font-size: 12px;
                            text-transform: uppercase;
                            color: #000;
                            padding: 4.5px 10px;
                            border: 1px solid #000;
                            display: block;
                            text-align: center;
                            min-width: 52px;
                            transition: all 0.3s ease-in-out;
                        }
                    }
                }

                & .product__price-and-badge {
                    padding-top: 22px;
                    padding-bottom: 0;
                }

                & .selector-wrapper--qty {
                    & .select__label {
                        display: none;
                    }
                }
            }

            & .product__accordions {
                & .product__accordion__inner.is-description {
                    & table {
                        display: none;
                    }
                }
            }

            & .product__icon__row {
                padding: 10px 0 20px 0 !important;
                gap: 20px;
                
                & .icons-row-block__item {
                    background: #f9f9f9;
                    padding-bottom: 15px;

                    @media (max-width: 767px) {
                        width: calc(50vw - var(--gutter-mobile) - 10px);
                        margin: 0;
                    }

                    & .icons-row-block__icon img {
                        padding-top: 10px;
                    }

                    & .icons-row-block__detail {
                        text-transform: uppercase;
                        line-height: 1.2em;
                    }
                }
            }

            & .product__guide.guide {
                width: calc(50% - 10px);
                display: inline-grid;
                margin-right: 20px;
                float: left;

                @media (max-width: 767px) {
                    width: calc(50vw - var(--gutter-mobile) - 10px);
                }

                &:nth-child(even) {
                    margin: 0;
                }

                & .guide_header {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }

    & .shopify-section.text:not(:has(.text__heading)) {
        display: none;
    }

    & .image-with-text:not(:has(img)) {
        display: none;
    }
}
/* END - PRODUCT */


/* END - CUSTOM STYLE BY RICCARDO MIOSI - miosiriccardo.it */