/* fp: (f)requent (p)roducts */
.pdp__fp {
    padding-top: 36px;
    /* background-color: lightblue; */
}

.fp__fp-container {
    position: relative;
    margin: 0 auto;
    padding-top: 36px;
    padding: 36px 0 0;
    /* background-color: lightcoral; */
}


.fp-container__fp-title {
    color: var(--bblack);
    font-size: 32px;
    font-family: "SF Pro Text"; font-weight: 600;
    line-height: 38px;
    letter-spacing: -0.02em;
    margin: 0;
    margin-bottom: 24px;
    text-align: center;
    word-break: break-word;
    /* background-color: lightcyan; */
}

/* aitc: (a)dd (i)tems (t)o (c)art */
.fp-container__fp-aitc {
    height: 0px;
    margin-top: 30px;
    /* background-color: lightgoldenrodyellow; */
}

/* lfp: (l)ist (f)requent (p)roducts */
.fp-container__fp-lfp {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--gray4);
    border-radius: 8px;
    flex-direction: row;
    height: auto;
    list-style: none;
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
    padding: 24px 16px 26px;
    width: 1220px;
}

/* cc: (c)ard (c)ontainer */
.fp-lfp__fp-cc {
    height: auto;
    list-style: none;
    margin: 0 16px auto 0;
    width: 24%;
    /* background-color: lightgreen; */
}

    .fp-lfp__fp-cc:last-child {
        margin-right: 0;
    }

.fp-cc__fp-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* background-color: lightpink; */
}

/* pc: (p)icture (c)ontainer */
.fp-card__fp-pc {
    position: relative;
    background-color: var(--wwhite);
    height: 280px;
    margin: auto;
    width: 100%;
    /* background-color: lightsalmon; */
}
    /* ----------------------------------------------------------------------------------------------- */
    .fp-card__fp-pc:hover .fp-pmb__fp-picture--second {
        display: block;
    }

        .fp-card__fp-pc:hover .fp-pmb__fp-picture--second > .fp-picture__fp-image {
            animation: scalePicture 600ms ease-in-out forwards;
        }


/* ----------------------------------------------------------------------------------------------- */

/* psc: (p)icture (s)ub (c)ontainer */
.fp-pc__fp-psc {
    height: 280px;
    width: auto;
    /* background-color: lightseagreen; */
}

/* pmb: (p)icture (m)edia (b)ox */
.fp-psc__fp-pmb {
    position: absolute;
    border-radius: 16px;
    bottom: 0;
    overflow: hidden;
    top: 0;
    width: 100%;
    /* background-color: lightskyblue; */
}

.fp-pmb__fp-picture {
}

.fp-pmb__fp-picture--second {
    display: none;
}

.fp-picture__fp-image {
    display: block;
    position: absolute;
    bottom: 0;
    height: 100%;
    left: 0;
    margin: auto;
    max-width: 100%;
    object-position: center center;
    padding: 18px;
    right: 0;
    top: 0;
    width: auto;
}

.fp-card__fp-details {
    display: grid;
    flex-grow: 1;
    grid-template-rows: minmax(0, 1fr) max-content minmax(0, 1fr);
    text-align: center;
    width: 100%;
    /* background-color: lightgoldenrodyellow; */
}

.fp-details__fp-tags {
    display: flex;
    height: 14.3px;
    justify-content: center;
    margin-top: 8px;
    /* background-color: tomato; */
}

.fp-tags__fp-tag {
    font-size: 12px;
    font-family: "SF Pro Text"; font-weight: 600;
    line-height: 14.32px;
}

/* tps: (t)itle (p)rice (s)elected */
.fp-details__fp-tps {
    grid-row-start: 2;
    padding: 4px 0 8px 0;
    /* background-color: rebeccapurple; */
}

/* tc: (t)itle (c)ontainer */
.fp-tps__fp-tc {
    /* background-color: red; */
}

.fp-tc__fp-title {
    height: 44px;
    max-width: 284px;
    margin: auto auto 0px auto;
    padding-top: 4px;
    width: fit-content;
}

.fp-title__fp-link {
    display: block;
    color: var(--bblack);
    font-size: 16px;
    font-family: "SF Pro Text"; font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.02em;
    text-align: center;
    word-break: break-word;
}

    .fp-title__fp-link:link, .fp-title__fp-link:visited {
        outline: none;
        text-decoration: none;
    }

    .fp-title__fp-link:hover {
        color: var(--bblack);
        text-decoration-line: underline;
        text-underline-offset: 0.3rem;
    }

/* ps: (p)rice (s)elected */
.fp-tps__fp-ps {
    margin-top: 4px;
    width: 100%;
    /* background-color: orangered; */
}

/* psc: (p)rice (s)eleted (c)ontainer */
.fp-ps__fp-psc {
    display: flex;
    flex-flow: column;
    height: auto;
    /* background-color: lightcoral; */
}

.fp-psc__fp-price {
    display: flex;
    flex-flow: column;
    height: 24px;
    justify-content: flex-end;
    /* background-color: lightgreen; */
}

/* pr: (p)rice (r)egular */
.fp-price__fp-pr {
    display: block;
    margin-top: 4px;
    /* background-color: lightseagreen; */
}

/* prc: (p)rice (r)egular (c)ontainer */
.fp-pr__fp-prc {
    display: flex;
    justify-content: center;
    /* background-color: gray; */
}

/* pp: (p)rice (p)roduct */
.fp-prc__fp-pp {
    display: inline-block;
    color: var(--bblack);
    font-size: 16px;
    font-family: "SF Pro Text"; font-weight: 500;
    height: auto;
    line-height: 22px;
    letter-spacing: -0.02em;
    margin: 0;
}

/* cbc: (c)heck (b)ox (c)ontainer */
.fp-tps__fp-cbc {
    display: flex;
    position: relative;
    align-items: center;
    cursor: pointer;
    height: 20px;
    margin: auto;
    margin-top: 8px;
    user-select: none;
    width: fit-content;
    /* background-color: aquamarine; */
}

    .fp-tps__fp-cbc:hover > .fp-cbc__fp-checkmark::after {
        display: block !important;
        border-color: #62bbfa;
    }

.fp-cbc__fp-checkmark {
    position: absolute;
    background-color: var(--wwhite);
    border: 1px solid var(--bblack);
    border-radius: 2px;
    height: 16px;
    left: -12px;
    padding: 3px;
    top: 2px;
    width: 16px;
}

    .fp-cbc__fp-checkmark::after {
        content: "";
        display: block;
        position: absolute;
        border: solid var(--bblue);
        border-width: 0 0 2px 2px;
        height: 7px;
        left: 2px;
        top: 2px;
        transform: rotate(310deg);
        width: 10px;
    }

.fp-cbc__fp-label {
    position: relative;
    color: var(--gray1);
    cursor: pointer;
    font-size: 12px;
    font-family: "SF Pro Text"; font-weight: 600;
    line-height: 12px;
    letter-spacing: -0.02em;
    left: 12px;
    margin: 0;
    text-transform: uppercase;
}

.fp-cbc__fp-check {
    position: relative;
    height: 1px;
    left: 0;
    opacity: 0;
    top: 0;
    width: 1px;
}

    .fp-cbc__fp-check:checked ~ .fp-cbc__fp-label > .fp-label__fp-msg--no-selected {
        display: none;
    }

    .fp-cbc__fp-check:not(:checked) ~ .fp-cbc__fp-label > .fp-label__fp-msg--selected {
        display: none;
    }

    .fp-cbc__fp-check:checked ~ .fp-cbc__fp-checkmark::after {
        display: block;
    }

    .fp-cbc__fp-check:not(:checked) ~ .fp-cbc__fp-checkmark::after {
        display: none;
    }

.fp-aitc__fp-button {
    display: flex;
    position: relative;
    align-items: center;
    border: none;
    flex-direction: row;
    font-family: "SF Pro Text"; font-weight: 600;
    column-gap: 4px;
    letter-spacing: -0.02em;
    height: auto;
    justify-content: center;
    margin: 0 auto;
    min-width: calc(12rem + 2px * 2);
    min-height: calc(4.5rem + 2px * 2);
    top: -54px;
    /*text-transform: capitalize;*/
    width: 396px;
}

@keyframes scalePicture {
    from {
        transform: scale(1.0);
    }

    to {
        transform: scale(1.03);
    }
}


@media screen and (max-width: 1199px) {
    .fp-card__fp-pc, .fp-pc__fp-psc {
        height: 240px;
    }
}

@media screen and (max-width: 1023px) {
    .fp-container__fp-title {
        font-size: 24px;
        line-height: 29px;
    }

    .fp-card__fp-pc {
        border-radius: 16px;
        height: 280px;
        margin: auto;
    }

    .fp-pc__fp-psc {
        position: relative;
        height: 280px;
        margin: 0 auto;
        width: 280px;
    }

    .fp-container__fp-lfp {
        display: block;
        padding: 8px 12px 40px;
    }

    .fp-picture__fp-image {
        padding: 0;
    }

    .fp-lfp__fp-cc {
        margin: 0 auto;
        width: 100%;
    }

    .fp-aitc__fp-button {
        width: auto;
    }

    .fp-card__fp-pc:hover .fp-pmb__fp-picture--second {
        display: none;
    }
}

@media screen and (max-width: 334px) {
    .fp-pc__fp-psc {
        max-width: 100%;
    }
}