/* 商品詳細ページセクション */
.ProductItem {}

/* 商品詳細情報を表示する最上位コンテナ */
.ProductItemContainer {
    display: grid;
    /* 画像のサイズに関係なく、1：1のカラム表示にする */
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 40px;

    .ProductImageArea {
        grid-column: 1 / 2;
    }
    .ProductInfoArea {
        grid-column: 2 / 3;
    }
    .ProductDescriptionArea {
        grid-column: 1 / 3;
    }

    .SectionTitle {
        font-size: 1.2em;
        font-weight: bold;
    }
}

/* 商品写真表示領域 */
.ProductImageArea {
    display: grid;
    margin: 0 auto;
    gap: 20px;

    .MainImageBlock {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 7px;
        /* background-color: #fff; */
        overflow: hidden;

        .MainImage {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    .ImageListBlock {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;

        .ImageBox {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 5px;
            overflow: hidden;
            cursor: pointer;

            border: 1px solid var(--PrimaryColor_Tint1);

            .ImageThumb {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    }
}

/* 商品情報表示領域 */
.ProductInfoArea {
    display: grid;

    /* アイテムの上揃え */
    /* 商品画像表示領域の高さにかかわらず上揃えに表示 */
    align-items: start;
    align-content: start;

    /* ブロックの一部にボーダーを追加 */
    .BorderBottom {
        border-bottom: 1px solid var(--LineColor);
    }

    /* 直下のdivは表示block */
    & > div {
        padding: 20px 0;
    }

    /* 項目ラベル */
    .Label {
        font-weight: 300;
        color: var(--SubText1);
    }

    .BasicInfoBlock {
        display: grid;
        gap: 10px;

        .SeriesDesignName {
            font-size: 0.95em;
            color: var(--SubText1);
        }

        .ProductName {
            font-size: 1.5em;
            font-weight: bold;
        }
        .ProductCode {
            
        }
        .ProductPrice {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 4px;

            .Value {
                font-size: 1.2em;
                font-weight: bold;
            }
        }

        .ProductPrice--wholesale {
            .Value {
                color: var(--PrimaryColor);
            }
        }
    }

    /* 種別 */
    .ClassInfoBlock {
        display: grid;
        gap: 3px;

        .LinkValue {
            color: var(--PrimaryColor);
            text-decoration: underline;
        }
    }

    /* 寸法 */
    .DimensionInfoBlock {
        display: grid;
        /* 寸法と詳細寸法をそれぞれのボックスとして左右に表示 */
        grid-template-columns: 50% 50%;
        gap: 10px;

        .DimensionBox,
        .AdditionalDimensionBox
        {
            display: grid;
            gap: 5px;
            /* アイテムの上揃え */
            align-items: start;
            align-content: start;

            .List {
                display: grid;
                gap: 3px;
            }
        }
    }

    /* 注文など操作 */
    .OrderBlock {
        display: grid;
        gap: 15px;

        .CartControlRow {
            display: grid;
            grid-template-columns: 150px 1fr;
            gap: 12px;
            align-items: end;

            .QuantityField {
                display: grid;
                gap: 5px;
            }

            .CartQuantityInput {
                width: 100%;
            }

            .CartButton {
                /* UI_Buttonのfit-content設定を上書き */
                width: 100%;
            }
        }

        .RequestSampleBox {
            display: grid;
            gap: 5px;

            .RequestSampleNote {
                font-size: 0.9em;
                color: var(--SubText1);
            }
        }

        .FavoriteToggleButton {
            justify-self: start;
            color: #b2466b;
        }

        .FavoriteToggleButton.IsActive {
            border-color: #d88aa6;
            background-color: #fff4f8;
        }
    }
}

@media screen and (max-width: 768px) {
    .ProductItemContainer {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: 24px;

        .ProductImageArea,
        .ProductInfoArea,
        .ProductDescriptionArea,
        .SetProductArea,
        .SetOwnerProductArea {
            grid-column: 1 / -1;
        }

        .ProductImageArea {
            order: 1;
        }

        .ProductInfoArea {
            order: 2;
        }

        .ProductDescriptionArea {
            order: 3;
        }

        .SetProductArea {
            order: 4;
        }

        .SetOwnerProductArea {
            order: 5;
        }
    }

    .ProductInfoArea {
        .DimensionInfoBlock {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .OrderBlock {
            .CartControlRow {
                grid-template-columns: 1fr;
            }
        }
    }
}

/* 商品説明表示領域 */
.ProductDescriptionArea {
    display: grid;
    gap: 10px;

    .ProductDescription {
        padding: 20px;
        border-radius: 7px;
        background-color: #f9f9f9;
        
        color: #555;

        /* 改行表示対応 */
        white-space: pre-wrap;
        word-wrap: break-word;
    }
}

/* 山津向け: 関連商品一覧 */
.SetProductArea,
.SetOwnerProductArea {
    display: grid;
    gap: 12px;
    grid-column: 1 / 3;
}

.SetProductArea .SummaryText,
.SetOwnerProductArea .SummaryText {
    color: var(--MainText2);
}

.SetProductTableWrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    background-color: #fff;
}

.SetProductTableWrapper .ProductGroupTable {
    --ProductGroupTableColumns:
        72px
        minmax(180px, 2.2fr)
        minmax(110px, 1fr)
        minmax(110px, 1fr)
        minmax(148px, 1.08fr)
        minmax(148px, 1.08fr)
        minmax(110px, 0.92fr)
        minmax(132px, 1fr);
    width: 100%;
    min-width: 1080px;
}

.SetProductTableWrapper .ProductGroupTable.ProductGroupTable--singlePrice {
    --ProductGroupTableColumns:
        72px
        minmax(180px, 2.35fr)
        minmax(110px, 1fr)
        minmax(110px, 1fr)
        minmax(148px, 1.12fr)
        minmax(110px, 0.92fr)
        minmax(132px, 1fr);
    min-width: 960px;
}

.SetProductTableWrapper .ProductGroupTableHeader,
.SetProductTableWrapper .ProductGroupTableBody {
    display: grid;
}

.SetProductTableWrapper .ProductGroupTableHeaderRow,
.SetProductTableWrapper .ProductGroupTableRow {
    display: grid;
    grid-template-columns: var(--ProductGroupTableColumns);
    align-items: center;
}

.SetProductTableWrapper .ProductGroupTableCell {
    min-width: 0;
    padding: 10px 12px;
    text-align: left;
}

.SetProductTableWrapper .ProductGroupTableHeaderRow {
    background-color: #f7f8fb;
    border-bottom: 1px solid #edf0f5;
}

.SetProductTableWrapper .ProductGroupTableHeaderRow .ProductGroupTableCell {
    color: var(--MainText1);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.SetProductTableWrapper .ProductGroupTableBody .ProductGroupTableRow {
    background-color: #fff;
    color: var(--MainText2);
    font-size: 0.95rem;
}

.SetProductTableWrapper .ProductGroupTableBody .ProductGroupTableRow:not(:last-child) {
    border-bottom: 1px solid #edf0f5;
}

.SetProductTableWrapper .ProductGroupTableBody .ProductGroupTableCellLabel {
    display: none;
}

.SetProductTableWrapper .ProductGroupTableBody .ProductNameCell {
    min-width: 180px;
}

.SetProductTableWrapper .ProductGroupTableBody .PriceCell {
    color: var(--PrimaryColor);
    font-weight: 700;
    white-space: nowrap;

    .PriceDisplayStack {
        display: grid;
        gap: 2px;
    }

    .PriceDisplayMain {
        font-weight: 700;
        color: var(--PrimaryColor);
        line-height: 1.2;
    }

    .PriceDisplaySub {
        font-size: 0.76rem;
        color: var(--SubText1);
        line-height: 1.3;
    }
}

.SetProductTableWrapper .ProductGroupTableBody .QuantityInput,
.SetProductTableWrapper .ProductGroupTableBody .SetQuantityInput {
    width: 92px;
    max-width: 100%;
}

.SetProductTableWrapper .ProductGroupTableBody .ActionCell {
    white-space: nowrap;
}

.SetProductTableWrapper .ProductGroupTableBody .ActionCell .ActionCellInner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.SetProductTableWrapper .ProductGroupTableBody .ActionCell .UI_Button {
    white-space: nowrap;
}

.SetProductTableWrapper .ProductGroupTable .ProductImageLink {
    display: inline-block;
    line-height: 0;
}

.SetProductTableWrapper .ProductGroupTable .ProductNameLink {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}

.SetProductTableWrapper .ProductGroupTable .ProductNameLink:hover,
.SetProductTableWrapper .ProductGroupTable .ProductNameLink:focus-visible {
    text-decoration: underline;
}

.SetProductTableWrapper .ProductGroupTable .CodeCell {
    white-space: nowrap;
}

.SetProductTableWrapper .ProductGroupTable .ProductImage {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid #ececec;
    border-radius: 6px;
}

.SetSummaryBox {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

@media (max-width: 820px) {
    .SetProductTableWrapper {
        overflow: visible;
        border: none;
        background-color: transparent;
    }

    .SetProductTableWrapper .ProductGroupTable {
        min-width: 0;
    }

    .SetProductTableWrapper .ProductGroupTableHeader {
        display: none;
    }

    .SetProductTableWrapper .ProductGroupTableBody {
        gap: 12px;
    }

    .SetProductTableWrapper .ProductGroupTableBody .ProductGroupTableRow {
        border-bottom: none;
        gap: 10px 12px;
        padding: 14px;
        border: 1px solid #e4e8ef;
        border-radius: 10px;
        background-color: #fff;
        grid-template-columns: 72px repeat(4, minmax(0, 1fr));
    }

    .SetProductTableWrapper .ProductGroupTable:not(.ProductGroupTable--singlePrice) .ProductGroupTableBody .ProductGroupTableRow {
        grid-template-areas:
            "image name name name name"
            "image code1 code1 code2 code2"
            "image listPrice listPrice wholesalePrice wholesalePrice"
            "image quantity actions actions actions";
    }

    .SetProductTableWrapper .ProductGroupTable.ProductGroupTable--singlePrice .ProductGroupTableBody .ProductGroupTableRow {
        grid-template-areas:
            "image name name name name"
            "image code1 code1 code2 code2"
            "image price price price price"
            "image quantity actions actions actions";
    }

    .SetProductTableWrapper .ProductGroupTableBody .ProductGroupTableCell {
        padding: 0;
    }

    .SetProductTableWrapper .ProductGroupTableBody .ProductGroupTableCellLabel {
        display: block;
        margin-bottom: 4px;
        color: var(--SubText1);
        font-size: 0.76rem;
        font-weight: 700;
        line-height: 1.4;
    }

    .SetProductTableWrapper .ProductGroupTableBody .ImageCell .ProductGroupTableCellLabel,
    .SetProductTableWrapper .ProductGroupTableBody .ProductNameCell .ProductGroupTableCellLabel,
    .SetProductTableWrapper .ProductGroupTableBody .Code1Cell .ProductGroupTableCellLabel,
    .SetProductTableWrapper .ProductGroupTableBody .Code2Cell .ProductGroupTableCellLabel {
        display: none;
    }

    .SetProductTableWrapper .ProductGroupTableBody .ImageCell {
        grid-area: image;
    }

    .SetProductTableWrapper .ProductGroupTableBody .ProductNameCell {
        grid-area: name;
        min-width: 0;
    }

    .SetProductTableWrapper .ProductGroupTableBody .Code1Cell {
        grid-area: code1;
    }

    .SetProductTableWrapper .ProductGroupTableBody .Code2Cell {
        grid-area: code2;
    }

    .SetProductTableWrapper .ProductGroupTableBody .ListPriceCell {
        grid-area: listPrice;
    }

    .SetProductTableWrapper .ProductGroupTableBody .WholesalePriceCell {
        grid-area: wholesalePrice;
    }

    .SetProductTableWrapper .ProductGroupTableBody .PriceSingleCell {
        grid-area: price;
    }

    .SetProductTableWrapper .ProductGroupTableBody .QuantityCell {
        grid-area: quantity;
    }

    .SetProductTableWrapper .ProductGroupTableBody .ActionCell {
        grid-area: actions;
        white-space: normal;
    }

    .SetProductTableWrapper .ProductGroupTableBody .QuantityInput,
    .SetProductTableWrapper .ProductGroupTableBody .SetQuantityInput {
        width: 100%;
        max-width: 124px;
    }

    .SetSummaryBox {
        grid-template-columns: 1fr;
    }
}

.ProductInfoArea .BasicInfoBlock .ProductPrice {
    .PriceDisplayStack {
        display: grid;
        gap: 3px;
    }

    .PriceDisplayMain {
        font-size: 1.2em;
        font-weight: 700;
        color: var(--MainText1);
        line-height: 1.2;
    }

    .PriceDisplaySub {
        font-size: 0.8em;
        color: var(--SubText1);
        line-height: 1.3;
    }
}

.ProductInfoArea .BasicInfoBlock .ProductPrice--wholesale .PriceDisplayMain {
    color: var(--PrimaryColor);
}