/* codebuy 共通スタイル */
.p-codebuy__page--list-coordination, .p-codebuy__section--top {
  .l-codebuy__container {
    .l-codebuy__columns {
      @media ( min-width: 750px ) {
        gap: 12px;
      }

      .p-codebuy__typeA_profile {
        padding-top: 24px;
        padding-bottom: 30px;

        .p-codebuy__typeA_profile_list {
          ul {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 8px;

            .p-codebuy__typeA_name {
              font-family: "Times New Roman", Times, serif;
              font-size: 20px;
              font-weight: 500;
            }

            .p-codebuy__typeA_txt {
              font-size: 11px;
            }
          }
        }
      }
    }

    #code-view-all-btn {
      margin-top: 30px;

      a {
        display: inline-block;
        width: auto;
        padding: 0.5em 0.1em 0.1em;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #000;
        text-decoration: none;
        color: inherit;
        font-size: 16px;
        letter-spacing: 0;
        transition: opacity 0.2s ease;
        font-family: "Times New Roman", SansSerif;
      }
    }
  }
  
  @media(max-width:767px){
    .l-codebuy__container {
      max-width:100%!important;
    }
  }
}

/* トップページ */
.p-codebuy__section--top {
  .ck-codebuy-ui {
    padding-top: 20px !important;
  }

  .l-codebuy__container {
    .l-codebuy__columns {
      @media (max-width: 749px) {
        gap: 5px !important;
      }

      .l-codebuy__column.p-codebuy__coordination_list_item {
        .p-codebuy__typeA_profile {
          display: none;

          .p-codebuy__typeA_link{
            align-items: flex-end;
          }

          .p-codebuy__typeB_tags {
            display: none;
          }

          .p-codebuy__typeA_name {
            font-family: "Times New Roman", Times, serif;
            font-weight: normal;
            letter-spacing: 0;
            font-size: 20px;
            text-box: trim-both cap alphabetic;
            text-transform: uppercase!important;
          }

          .p-codebuy__typeA_txt{
            font-size: 11px!important;
            transform: translateY(3px);
          }
        }

        &:first-child {
          @media (max-width: 749px) {
            .p-codebuy__typeA_profile {
              display: block;
            }
          }
        }

        &.bento-grid > div {
          @media (max-width: 749px) {
            width: calc(100% + 32px);
            margin-left: -16px;
          }

          img {
            max-width: unset;
          }
        }

        &:not(:last-child) {
          @media (max-width: 749px) {
            margin-bottom: 0;
          }
        }

        &:first-child {
          @media (max-width: 749px) {
            margin-bottom: 12px;
          }
        }

        &:not(:first-child) {
          @media (max-width: 749px) {
            width: calc((100% - 10px) / 3);
          }
        }

        &:nth-child(13) {
          @media (min-width: 750px) {
            display: none;
          }
        }
      }
    }
  }
}

/*詳細モーダル*/
.ck-codebuy-modal__overlay{
  background: #fff!important;
  pointer-events: none!important;
}
.ck-codebuy-modal{
  .ck-codebuy-modal__container{
    box-shadow: none;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto!important;
    padding: 0!important;
    transform: unset !important;
    position: relative!important;
  }

  .ck-codebuy-modal__content:has(article){
   background: url(/cdn/shop/files/Treat_logo.png?v=1779194247) no-repeat 10px 0 / 80px;
  }

  .ck-codebuy-modal__close{
    width: 40px!important;
    height: 40px!important;
    top: 10px!important;
    right: 10px!important;
    position: fixed!important;
  }

  .p-codebuy__section_ttl{
    display: none;
  }

  .p-codebuy__coordination_single_columns{
    padding: 0 20px 78px;
    position: relative;
  }

  .p-codebuy__coordination_single_slider{
    margin-top: 0!important;
    margin-right: -20px!important;
    margin-left: -20px!important;
    position: static;
  }

  #codebuy-app-block .swiper{
    position: static;
  }

  .js-coordination-slider-thumbnail .swiper-slide {
    opacity: 1;
  }
  .js-coordination-slider-thumbnail .swiper-slide-thumb-active img,
  .js-coordination-slider-thumbnail .swiper-slide-thumb-active video {
    outline: 1px solid #ccc !important;
    outline-offset: -1px !important;
    border: none !important;
    padding: 3px !important;
  }

  .p-codebuy__coordination_single_collection_list{
    display: none!important;
  }

  .other-staff-coordination{
    display: none!important;
  }

  .p-codebuy__coordination_single_left {
    display: none!important;
  }
  .p-codebuy__coordination_single_right{
    width: 100%!important;
    max-width: 100%!important;
    text-align: center!important;
    ul{
      display: inline-flex;
      align-items: flex-end;
      gap: 10px;

      li{
        margin: 0!important;
        text-box: trim-both cap alphabetic;
      }

      .p-codebuy__coordination_single_name{
        font-family: "Times New Roman", Times, serif;
        font-size: 22px;
        font-weight: normal;
      }

      .p-codebuy__staff_single_txt{
        font-size: 12px;
      }
    }
  }

  .ck-codebuy-rich-text{
    color: #636262;
    font-size: 12px;
    p{
      margin-top: 0!important;
      margin-bottom: 0!important;
    }
  }

  .p-codebuy__coordination_single_ttl{
    text-align: center;
    margin-top: 40px!important;
    font-family: "Times New Roman", Times, serif;
    font-weight: normal;
    font-size: 16px;
  }
  .js-inserted-size-info{
    display:flex;
    gap: 10px;
    font-size: 12px;
    margin-top: 20px;
    color: #636262;
    @media ( max-width : 749px ) {
      justify-content: center;
    }
  }
  
  /* リスト全体：常に1列 */
  .l-codebuy__columns.sp-columns.p-codebuy__coordination_single_cart_columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  /* 商品1件分：画像 / テキスト(縦積み) / セレクターの3カラム構成 */

  .l-codebuy__column.col3.sp-col2.p-codebuy__coordination_single_cart_product {
    display: grid !important;
    grid-template-columns: 100px 1fr 110px !important;
    grid-template-rows: 1fr min-content min-content 1fr !important;
    grid-template-areas:
    "image .     variation"
    "image ttl   variation"
    "image price variation"
    "image .     variation" !important;
    align-items: center;
    column-gap: 16px;
    row-gap: 10px; /* 商品名・価格間の間隔はここで調整 */

    /* 画像エリア（縦2行分に跨る） */
    .p-codebuy__coordination_single_cart_img {
      grid-area: image;
      width: 140px; /* 画像の基準幅。後で調整可 */
    }

    .p-codebuy__coordination_single_cart_img img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* 商品名 */
    .p-codebuy__coordination_single_cart_txt.ttl {
      grid-area: ttl;
      font-size: 12px;
      text-align: left;
      margin: 0 auto 0 0;
    }

    /* 価格 */
    .p-codebuy__coordination_single_cart_txt.price {
      grid-area: price;
      margin: 0 auto 0 0;
      justify-content: flex-start;
      align-items:center;
      flex-wrap:wrap;
      gap: 0.2em 5px;

      > *{
        margin-left:0;
      }

      .p-codebuy__coordination_single_cart_txt_new {
        font-size: 16px;
        font-family: "Times New Roman", Times, serif;
      }

      .p-codebuy__coordination_single_cart_txt_compare{
        display: inline-block;
        font-size:10px;
        padding-top: 0.25em!important;
      }
    }

    /* バリエーション（カラーセレクター） */
    .p-codebuy__coordination_single_cart_variation {
      grid-area: variation;
      margin: 0;
      list-style: none;
      padding: 0;

      .p-codebuy__coordination_single_cart_txt{
        display: none;
      }
    }

    .p-codebuy__coordination_single_cart_default_variation {
      display: none;
    }

    .p-codebuy__coordination_single_cart_variation select {
      width: 100%;
      cursor: pointer;
      border-radius: 50px;
      border-width: 1px;
      border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
      background-color: transparent;
      padding: 10px 10px;
      font-size: 8px;
      color: #282524B3;
      letter-spacing:-0.1mm;
    }
    
    .p-codebuy__coordination_single_cart_txt .discount-rate-badge{
      font-size: 10px!important;
      font-weight: normal!important;
    }
  }

  .p-codebuy__coordination_single_cart_btn{
    width: 100%;
  }

  .p-codebuy__coordination_single_cart_btn button {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: block;
    width: 100%!important;
    max-width: 100% !important;
    cursor: pointer;
    border-radius: 0;
    border-style: none;
    background-color: var(--ck-codebuy-primary-color);
    padding-top: var(--ck-codebuy-space-4);
    padding-bottom: var(--ck-codebuy-space-4);
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    color: #000;
    height:62px;
  }

  .coordination-staff-info{
   display: none!important;
  }

  .p-codebuy__coordination_single_favorite_btn{
    width: calc(100% - 40px);
    left: 0;
    right: 0!important;
    margin: auto;
    height: 50px;
    background: #fff!important;
    border: #000 solid 1px;
    color: #000;
    gap: 0.5em;

    &:after{
      content: 'コーディネートをお気に入りする';
      font-size: 12px;
    }

    &:has(svg.ck-codebuy-favorited){
      &:after{
        content: 'お気に入り追加済み';
      }
    }

    svg {
      color: #000;
      fill: none;
      stroke-width: 0.2mm;
      width: 24px;
      height: 24px;

      &.ck-codebuy-favorited{
        fill: #edd8d8;
        stroke: #edd8d8;
      }
    }
  }
}

/* --- Codebuy: セット一覧のmasonryレイアウト --- */
.p-codebuy__page--list-coordination {
  overflow-x: hidden;
  width: 100%;

  #js-code-item {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-flow: row dense;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    @media ( max-width: 767px ) {
      gap: 5px;
    }
  }

  #js-code-item .p-codebuy__coordination_list_item {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important; 
    height: 100% !important;
    max-width: none !important;
    transform: none !important; 
    flex: none !important;
    box-sizing: border-box;
  }

  #js-code-item .p-codebuy__typeA_profile {
    display: none !important;
  }

  #js-code-item .p-codebuy__typeA_thumbnail {
    aspect-ratio: 3 / 4 !important;
    width: 100%;
  }

  #js-code-item .p-codebuy__typeA_thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #js-code-item .p-codebuy__coordination_list_item:nth-child(12n + 4) {
    grid-column: 1 / span 2;
    grid-row: span 2;
  }

  #js-code-item .p-codebuy__coordination_list_item:nth-child(12n + 11) {
    grid-column: 1;
  }

  #js-code-item .p-codebuy__coordination_list_item:nth-child(12n + 12) {
    grid-column: 2 / span 2;
    grid-row: span 2;
  }
}

/*詳細ページアイテムブロック*/
.p-codebuy__section--useproduct{
  .p-codebuy__typeA_link{
    display: flex;
    align-items: flex-end;
    gap: var(--ck-codebuy-space-4);

    .p-codebuy__typeA_name {
      font-family: "Times New Roman", Times, serif;
      font-weight: normal;
      letter-spacing: 0;
      font-size: 20px;
      text-box: trim-both cap alphabetic;
    }

    .p-codebuy__typeA_txt {
      font-size: 11px !important;
      transform: translateY(4px);
    }
  }

  @media (min-width: 768px) {
    .l-codebuy__column.col4 {
      width: calc((100% - 48px) / 4)!important;
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  .c-codebuy__zoom:hover img {
    transform: scale(1.05);
  }
}

.p-codebuy__coordination_single_cart_img figcaption{
  font-size: 10px!important;
  font-weight:300!important;
}

.codebuy_snap:has(#code-item-use-section[style*="display: none"]) {
  display: none;
}