/* ==================================================
   Product Detail
================================================== */


/* ==================================================
   Product
================================================== */

.product-detail {

    width:
        100%;

    padding:
        calc(var(--header-height) + 60px)
        var(--side-padding)
        100px;

    background:
        var(--color-bg);

}


.product-detail-inner {

    width:
        100%;

    max-width:
        600px;

    margin:
        0 auto;

}


.product-detail h1 {

    margin:
        60px
        0
        50px;

    text-align:
        center;

    font-family:
        var(--font-en);

    font-size:
        clamp(1.35rem, 5.5vw, 1.9rem);

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        0.22em;

    color:
        var(--color-text);

}



/* ==================================================
   Product Image
================================================== */

.product-main-image {

    width:
        min(100%, 330px);

    margin:
        0 auto
        70px;

    overflow:
        hidden;

    background:
        var(--color-bg-light);

}


.product-main-image img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

}



/* ==================================================
   Product Information
================================================== */

.product-information {

    width:
        100%;

    max-width:
        480px;

    margin:
        0 auto;

}


.product-information h2 {

    margin:
        0
        0
        32px;

    font-family:
        var(--font-jp);

    font-size:
        clamp(0.98rem, 4vw, 1.2rem);

    font-weight:
        500;

    line-height:
        1.7;

    letter-spacing:
        0.1em;

    color:
        var(--color-text);

}



/* ==================================================
   Product Data
================================================== */

.product-data {

    margin:
        0
        0
        34px;

    border-top:
        1px solid
        var(--color-line);

}


.product-data > div {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        17px
        0;

    border-bottom:
        1px solid
        var(--color-line);

}


.product-data dt {

    font-family:
        var(--font-jp);

    font-size:
        0.65rem;

    line-height:
        1.6;

    letter-spacing:
        0.09em;

    color:
        var(--color-text-soft);

}


.product-data dd {

    margin:
        0;

    font-family:
        var(--font-en);

    font-size:
        0.9rem;

    line-height:
        1.4;

    letter-spacing:
        0.08em;

    color:
        var(--color-text);

}


.product-data dd small {

    margin-left:
        4px;

    font-family:
        var(--font-jp);

    font-size:
        0.55rem;

    letter-spacing:
        0.04em;

    color:
        var(--color-text-soft);

}



/* ==================================================
   Product Cart
================================================== */

.product-cart-area {

    display:
        grid;

    grid-template-columns:
        76px
        1fr;

    align-items:
        end;

    gap:
        12px;

}


.product-quantity-area {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


.product-quantity-area label {

    font-family:
        var(--font-jp);

    font-size:
        0.62rem;

    line-height:
        1;

    letter-spacing:
        0.09em;

    color:
        var(--color-text-soft);

}


.product-quantity {

    width:
        100%;

    min-height:
        50px;

    padding:
        0
        12px;

    border:
        1px solid
        var(--color-line);

    border-radius:
        0;

    background:
        transparent;

    font-family:
        var(--font-en);

    font-size:
        0.82rem;

    color:
        var(--color-text);

}


.product-cart-button {

    width:
        100%;

    min-height:
        50px;

    padding:
        12px
        16px;

    border:
        1px solid
        var(--color-text);

    border-radius:
        0;

    background:
        var(--color-text);

    font-family:
        var(--font-jp);

    font-size:
        0.67rem;

    font-weight:
        500;

    line-height:
        1.5;

    letter-spacing:
        0.11em;

    color:
        var(--color-bg-light);

}


.product-cart-button:disabled,
.product-quantity:disabled {

    cursor:
        not-allowed;

    opacity:
        0.46;

}


.product-note {

    margin:
        15px
        0
        0;

    font-family:
        var(--font-jp);

    font-size:
        0.6rem;

    line-height:
        1.8;

    letter-spacing:
        0.065em;

    color:
        var(--color-text-soft);

}



/* ==================================================
   Handling
================================================== */

.product-handling {

    padding:
        80px
        var(--side-padding);

    background:
        var(--color-bg-light);

}


.product-handling-inner {

    width:
        100%;

    max-width:
        480px;

    margin:
        0 auto;

}


.product-section-en {

    margin:
        0
        0
        17px;

    font-family:
        var(--font-en);

    font-size:
        0.61rem;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        0.2em;

    color:
        var(--color-text-soft);

}


.product-handling h2 {

    margin:
        0
        0
        25px;

    font-family:
        var(--font-jp);

    font-size:
        clamp(0.8rem, 3.4vw, 0.98rem);

    font-weight:
        500;

    line-height:
        1.7;

    letter-spacing:
        0.1em;

    color:
        var(--color-text);

}


.product-handling-body p {

    margin:
        0
        0
        11px;

    font-family:
        var(--font-jp);

    font-size:
        clamp(0.58rem, 2.35vw, 0.68rem);

    line-height:
        1.9;

    letter-spacing:
        0.06em;

    color:
        var(--color-text-soft);

}


.product-handling-body p:last-child {

    margin-bottom:
        0;

}



/* ==================================================
   Back To Products
================================================== */

.product-back {

    padding:
        58px
        var(--side-padding)
        68px;

    text-align:
        center;

    background:
        var(--color-bg);

}


.product-back-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    font-family:
        var(--font-jp);

    font-size:
        0.61rem;

    line-height:
        1;

    letter-spacing:
        0.1em;

    color:
        var(--color-text-soft);

    text-decoration:
        none;

}


.product-back-button span {

    transition:
        transform
        0.4s
        var(--ease-main);

}


.product-back-button:hover span {

    transform:
        translateX(-4px);

}



/* ==================================================
   Tablet
================================================== */

@media screen and (min-width: 768px) {

    .product-detail {

        padding-top:
            calc(var(--header-height) + 75px);

        padding-bottom:
            130px;

    }


    .product-detail h1 {

        margin-top:
            70px;

        margin-bottom:
            58px;

    }


    .product-main-image {

        width:
            min(100%, 370px);

        margin-bottom:
            85px;

    }


    .product-handling {

        padding-top:
            95px;

        padding-bottom:
            95px;

    }


    .product-back {

        padding-top:
            70px;

        padding-bottom:
            80px;

    }

}



/* ==================================================
   Desktop
================================================== */

@media screen and (min-width: 1100px) {

    .product-main-image {

        width:
            min(100%, 390px);

    }

}



/* ==================================================
   Small Height Screens
================================================== */

@media screen and (max-height: 720px) {

    .product-detail {

        padding-top:
            calc(var(--header-height) + 35px);

    }


    .product-detail h1 {

        margin-top:
            38px;

        margin-bottom:
            38px;

    }


    .product-main-image {

        width:
            min(100%, 300px);

        margin-bottom:
            55px;

    }

}



/* ==================================================
   Reduced Motion
================================================== */

@media
(prefers-reduced-motion: reduce) {

    .product-back-button span {

        transition:
            none;

    }

}