div.section.header {
    --image-height: 500px;

    @media (max-width: 768px) {
        --image-height: 400px;

        div.wrapper {
            min-height: 200px !important;
            margin-top: -50px !important;
            margin-bottom: -65px !important;
        }
    }

    margin-bottom: 0;

    div.wrapper {
        z-index: 1;
        position: relative;
        margin-top: 100px;
        min-height: 280px;
        text-align: center;

        h1 {
            font-size: 4rem;
        }

        p.subtitle {
            font-size: 2.8rem;
            font-weight: normal;
        }
    }
}

div.product-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;

    @media (max-width: 768px) {
        gap: 9px;

        article.product-card {
            max-width: unset !important;
            width: calc(50% - 4.5px) !important;
        }
    }
}

article.product-card {
    display: flex;
    flex-direction: column;
    max-width: 350px;
    width: 100%;
    background-color: var(--colour-black);
    box-shadow: var(--big-shadow);

    &.gift-card {
        [data-gift-card-configure] {
            &:not(.active) {
                form {
                    display: none;
                }
            }

            &.active {
                button.configure {
                    display: none;
                }
            }

            form {
                border-top: 1px solid var(--colour-clara);
                padding-top: 18px;

                button {
                    margin-top: 18px;
                }
            }
        }
    }

    img {
        aspect-ratio: 4/3;
        object-fit: cover;
        width: 100%;
        height: auto;
    }

    div.info {
        display: flex;
        flex-direction: column;
        gap: 9px;
        padding: 18px;
        height: 100%;

        p.summary {
            flex: 1;
        }

        a.button, button {
            display: block;
            width: 100%;
            text-align: center;
        }
    }
}

div.how-it-works {
    margin-bottom: 150px;
    div.wrapper {
        display: flex;
        gap: 22px;
        justify-content: space-evenly;

        @media (max-width: 768px) {
            flex-direction: column;
        }

        div.step {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

            div.icon {
                position: relative;
                background-color: var(--colour-clara);
                width: 100px;
                height: 100px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;

                svg {
                    width: 50%;
                    fill: white;
                }

                span.step {
                    position: absolute;
                    background-color: var(--colour-silver);
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    left: 0px;
                    top: 0px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 1.2rem;
                    font-family: 'Bubblegum Sans';
                }
            }       
            
            h3 {
                margin-top: 9px;
            }
            
            p.description {
                font-size: 0.8rem;
            }
        }
    }
}

div.pdp {
    @media (max-width: 768px) {
        margin-top: 20px !important;
    }

    div.product-head {
        display: flex;
        justify-content: space-between;

        @media (max-width: 768px) {
            flex-direction: column;
            align-items: center;

            div.gallery {
                max-width: 300px;
                margin-bottom: 22px;
            }

            div.content {
                width: 100% !important;
                padding-left: 0 !important;

                h1 {
                    font-size: 2.4rem !important;
                    text-align: center;
                }

                label.variant {
                    width: 100%;
                }
            }
        }

        div.gallery {
            flex: 1;

            img.stage {
                width: 100%;
                aspect-ratio: 1/1;
                object-fit: cover;
            }

            &:not(.overflowing) {
                div.thumbs-row div.arrow {
                    display: none;
                }
            }

            div.thumbs-row {
                position: relative;

                div.arrow {
                    --size: 30px;
                    position: absolute;
                    top: calc(50% - var(--size) / 2);
                    width: var(--size);
                    height: var(--size);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: var(--colour-silver);
                    border-radius: 50%;
                    z-index: 10;
                    cursor: pointer;

                    &.left {
                        left: calc(0px - var(--size) / 2);
                    }

                    &.right {
                        right: calc(0px - var(--size) / 2);
                    }

                    svg {
                        width: 60%;
                        height: 60%;
                        fill: white;
                    }

                    &:hover {
                        background-color: var(--colour-primary);
                    }
                }

                div.thumbs {
                    padding: 18px;
                    display: flex;
                    gap: 18px;
                    user-select: none;
                    cursor: pointer;
                    overflow: hidden;
                    touch-action: pan-y;

                    &.dragging {
                        cursor: grabbing;
                        user-select: none;
                    }

                    img {
                        width: 80px;
                        aspect-ratio: 1/1;
                        object-fit: cover;
                        transition: opacity 0.2s;

                        &.active {
                            border: 2px solid var(--colour-maya);
                        }

                        &:hover {
                            opacity: 0.8;
                        }
                    }
                }
            }
        }

        div.content {
            width: 60%;
            padding-left: 22px;

            h1 {
                font-size: 4rem;
                margin-top: -22px;
            }

            p.summary {
                background-color: var(--colour-silver);
                padding: 9px;
                width: fit-content;
                font-size: 0.9rem;
            }

            div.description {
                margin-top: 22px;
            }

            div.variants {
                margin-top: 22px;
                display: flex;
                gap: 18px;
                flex-wrap: wrap;
                
                label.variant {
                    background-color: white;
                    border-radius: 4px;
                    padding: 9px;
                    cursor: pointer;
                    color: black;

                    display: flex;
                    align-items: center;
                    gap: 9px;
                    user-select: none;

                    div {
                        p.title {
                            font-weight: bold;
                        }

                        p.price {
                            font-size: 0.8rem;
                        }
                    }

                    &:has(input:checked) {
                        background-color: var(--colour-primary);
                        color: white;
                    }
                }
            }

            div.variant-forms {
                margin-top: 22px;
                form {
                    &:not(.active) {
                        display: none;
                    }

                    div.variant-options {
                        div.group {
                            width: fit-content;
                            display: flex;
                            flex-direction: column;
                            gap: 11px;
                            margin-top: 22px;
                            width: 100%;

                            p.section-title {
                                font-weight: bold;
                                font-size: 1.2rem;
                                font-family: 'Bubblegum Sans';
                            }
                            
                            div.option {
                                width: 100%;
                                background-color: var(--colour-black);
                                padding: 11px;

                                div.toggle {
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;
                                    gap: 22px;

                                    &:has(input[type="radio"]), &:has(input[type="checkbox"]) {
                                        &:not(:has(input[disabled])) {
                                            cursor: pointer;
                                        }
                                    }

                                    div.text {
                                        flex-grow: 1;
                                        p.label {
                                            font-weight: bold;
                                            margin-top: 0;
                                        }

                                        p.description {
                                            margin-top: 0;
                                        }
                                    }

                                    div.price {
                                        text-wrap: nowrap;
                                    }

                                    div.quantity {
                                        flex-shrink: 0;

                                        width: 75px;

                                        input {
                                            &:not([type="checkbox"]):not([type="radio"]) {
                                                width: 100%;
                                            }

                                            text-align: center;
                                            display: block;
                                            margin: 0 auto;
                                        }

                                        &:has(input[type="checkbox"]), &:has(input[type="radio"]) {
                                            input[type="number"] {
                                                display: none;
                                            }
                                        }

                                        &:has(input[data-input-quantity][min="1"]) {
                                            display: none;
                                        }
                                    }
                                }

                                div.customisations {
                                    margin-top: 11px;

                                    &:not(.active) {
                                        display: none;
                                    }

                                    div.customisation {
                                        margin-top: 11px;

                                        &:only-child {
                                            p.label {
                                                display: none;
                                            }
                                        }

                                        p.label {
                                            font-weight: bold;
                                            margin-top: 0;
                                        }

                                        p.description {
                                            margin-top: 0;
                                            font-size: 0.8rem;
                                        }

                                        div.single-line-text {
                                            input {
                                                width: 100%;
                                                padding: 9px;
                                            }
                                        }

                                        div.choices {
                                            display: flex;
                                            flex-wrap: wrap;
                                            justify-content: flex-start;
                                            gap: 11px;

                                            select {
                                                width: 100%;
                                                padding: 9px;
                                            }

                                            &:has(label.choice) {
                                                padding-left: 18px;
                                            }

                                            label.choice {
                                                max-width: 200px;
                                                width: 100%;
                                                display: flex;
                                                align-items: center;
                                                gap: 11px;
                                                cursor: pointer;

                                                input {
                                                    flex-shrink: 0;
                                                }

                                                p {
                                                    margin-top: 0;
                                                    font-size: 0.9rem;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    div.controls {
                        width: fit-content;
                        margin-top: 22px;
                        margin-left: auto;
                        margin-right: 0;
                    }
                }
            }

            div.faqs {
                margin-top: 22px;
                width: 95%;
                margin-left: auto;
                margin-right: auto;
                
                div.faq {
                    background-color: var(--colour-black);

                    &:not(:first-of-type) {
                        border-top: 1px solid var(--colour-phoebe);
                    }

                    label.title {
                        width: 100%;
                        cursor: pointer;
                        padding: 11px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-weight: bold;

                        svg {
                            width: 24px;
                            height: 24px;
                            fill: var(--colour-primary);
                        }

                        input {
                            display: none;
                        }
                    }
                    
                    div.content {
                        display: none;

                        padding-left: 11px;
                        padding-right: 11px;
                        padding-bottom: 11px;
                        width: 100%;

                        p:not(:first-of-type) {
                            margin-top: 11px;
                        }
                    }

                    &:has(input[type="checkbox"]:checked) {
                        div.content {
                            display: block;
                        }

                        label > svg {
                            transform: rotate(180deg);
                        }
                    }
                }
            }
        }
    }
}

div.section.gift-card-description {
    div.wrapper {
        margin-top: 44px;
        margin-bottom: 44px;

        >h2, >p {
            text-align: center;
        }

        a {
            margin: 18px auto;
        }
    }
}