/**
 * 商品カード (共通パーツ)
 *
 * Product/_product_card.twig 用。記事本文に埋め込むカードのために
 * categoryProductListPage.css からカード関連の規則だけを複製したもの。
 * 規則の順序は元ファイルのままで、後段が前段を上書きする関係を保っている。
 *
 * NOTE: 現状 categoryProductListPage.css 側にも同じ規則が残っている。
 *       カードの見た目を変える時は両方を直すこと。
 *       (元ファイルは @media 480px 内に body{} を含むため、記事ページから
 *        まるごと読み込むと背景色が変わってしまい、共有できなかった)
 */

.ev-product-name {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 10px 0;
  color: #333;
  line-height: 1.4;
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  
}

.ev-product-item {
  background-color: #ffffff;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
  overflow: hidden;
  height: 400px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease-in-out;

}

.ev-product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.ev-product-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.ev-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.ev-product-item:hover .ev-product-image img {
  transform: scale(1.05);
}

.ev-product-info {
  padding: 15px;
}

.ev-product-codes {
  margin-bottom: 8px;
}

.ev-product-codes-value {
  font-size: 12px;
  color: #777777;
  padding: 2px 0px;
  border-radius: 3px;
}

.ev-product-prices {
  margin-bottom: 10px;
}

.ev-product-price-value {
  font-size: 15px;
  font-weight: 700;
  color: #222222;
}

.ev-product-price-tax {
  font-size: 11px;
  color: #222222;
  margin-left: 4px;
}

@media (max-width: 500px) {
  .ev-product-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .ev-product-info {
      padding: 10px;
  }

  .ev-product-price-value {
      font-size: 13px;
  }

}

.ev-product-item:hover {
  border: 1px solid #DB002F;
  border-radius: 4px;
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ev-product-tag {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3px;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.ev-product-tag-value {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 1;
  padding: 2px 8px;
  margin: 2px;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .ev-product-tag-value {
    font-size: 11px;
    padding: 2px 8px;
    margin: 1px;
  }

}

.ev-product-image {
  margin: 10px;
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.ev-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ev-product-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
  color: #222222;
  font-weight: 400;

}

.ev-product-codes {
  color: #777777;
  margin-bottom: 10px;
}

.ev-product-prices {
  margin-bottom: 10px;
}

.ev-product-price-tax {
  font-size: 11px;
}

.ev-product-description {
  font-size: 14px;
  line-height: 1.5;
  max-height: calc(1.5em * 3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #000000;
}

@media (max-width: 480px) {
  .ev-product-name {
    font-size: 14px;
  }

  .ev-product-image{
    padding: 10px;
  }

  .ev-product-item{
    padding: 10px;
    height: 360px;
  }

  .ev-product-info{
    padding: 0px;
  }

  .ev-product-description{
    font-size: 13px;
  }

}

/** 記事本文に埋め込んだカードの一列 */
.ev-article-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 2px;
  width: 100%;
  margin: 32px 0;
}

@media (max-width: 500px) {
  .ev-article-products {
    grid-template-columns: repeat(auto-fill, minmax(159px, 1fr));
  }
}

/**
 * テーマ CSS が無い場所 (default_frame を継承しない単体ページ等) でも
 * カードが崩れないようにするための指定。
 *
 * - リンク下線: カード全体が <a> で囲まれており、祖先の <a> に付いた
 *   text-decoration は子孫側から打ち消せない (CSS 仕様)。a 自体に指定する。
 *   テーマも a { text-decoration: underline } を指定しているため、
 *   商品一覧ページでも同様に必要。
 * - box-sizing: テーマが全体に border-box を当てている前提で
 *   height と padding を組んでいるため、単体でも自分で指定する。
 */
.ev-article-products a,
.ev-product-grid a {
  text-decoration: none;
  color: inherit;
}

.ev-product-item,
.ev-product-item * {
  box-sizing: border-box;
}