/* -------------------------------------------------------------------------
       DESIGN SYSTEM & VARIABLES (トップページのトンマナを完全に引き継ぎ)
    ------------------------------------------------------------------------- */

    /* 基本リセット */

            button, select { background: none; border: none; font: inherit; cursor: pointer; }

    /* フェードインアニメーション */

    /* -------------------------------------------------------------------------
       【共通デザイン：グローバルナビゲーション】
    ------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
       【セクション1：パンくずリスト】
    ------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
       【セクション2：商品情報エリア（ファーストビュー）】
    ------------------------------------------------------------------------- */
    .product-essential-wrapper {
      max-width: 1400px;
      margin: 2rem auto 6rem auto;
      padding: 0 2rem;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 4rem;
    }

    /* 左カラム：画像表示エリア */
    .product-images-column {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .main-image-viewport {
      background-color: #FFFFFF;
      border: 1px solid rgba(138, 106, 74, 0.08);
      aspect-ratio: 1 / 1;
      overflow: hidden;
      position: relative;
      cursor: zoom-in;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .main-image-viewport img {
      width: 85%;
      height: 85%;
      object-fit: contain;
      transition: transform 0.5s ease;
    }
    .main-image-viewport:hover img {
      transform: scale(1.02);
    }
    .thumbnail-strip {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1rem;
    }
    .thumb-btn {
      aspect-ratio: 1 / 1;
      border: 1px solid rgba(138, 106, 74, 0.15);
      background-color: #FFFFFF;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.3s, opacity 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .thumb-btn img {
      width: 85%;
      height: 85%;
      object-fit: contain;
    }
    .thumb-btn.is-active {
      border: 2px solid var(--color-main);
    }
    .thumb-btn:hover {
      opacity: 0.85;
    }

    /* 右カラム：購入情報エリア */
    .product-purchase-column {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .product-essential-category {
      display: inline-flex;
      align-self: flex-start;
      background-color: var(--color-sub);
      color: #FFFFFF;
      font-family: var(--font-display);
      font-size: 0.8rem;
      padding: 0.3rem 1.2rem;
      letter-spacing: 0.1em;
      margin-bottom: 1.5rem;
    }
    .product-essential-title {
      font-family: var(--font-display);
      font-size: 2.2rem;
      font-weight: 500;
      color: var(--text-dark);
      line-height: 1.4;
      margin-bottom: 1rem;
    }
    .product-essential-catch {
      font-family: var(--font-display);
      font-size: 1rem;
      color: var(--text-muted);
      line-height: 1.8;
      margin: 0 0 1.5rem;
    }
    .product-essential-price {
      font-family: var(--font-display);
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 2rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid rgba(138, 106, 74, 0.15);
    }
    .purchase-status-row {
      display: flex;
      align-items: center;
      gap: 2rem;
      margin-bottom: 2rem;
    }
    .status-label {
      font-family: var(--font-display);
      font-size: 0.9rem;
      color: var(--text-muted);
    }
    .status-badge {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--color-main);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .status-badge::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--color-main);
    }

    /* 数量選択とCTA */
    .purchase-interactive-area {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      margin-bottom: 2.5rem;
    }
    .quantity-selector-group {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }
    .quantity-counter {
      display: flex;
      border: 1px solid rgba(138, 106, 74, 0.3);
      background-color: #FFFFFF;
    }
    .counter-btn {
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      color: var(--text-dark);
      transition: background-color 0.2s;
    }
    .counter-btn:hover {
      background-color: var(--bg-base);
    }
    .counter-value {
      width: 60px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 500;
      border-left: 1px solid rgba(138, 106, 74, 0.15);
      border-right: 1px solid rgba(138, 106, 74, 0.15);
    }

    /* カート追加ボタン（最重要CTAとしてくすみゴールド＆木目ブラウンのアクティブ調整） */
    .add-to-cart-cta {
      width: 100%;
      height: 60px;
      background-color: var(--color-accent);
      color: var(--text-dark);
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      z-index: 1;
      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .add-to-cart-cta::before {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 0; height: 100%;
      background-color: var(--color-sub);
      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      z-index: -1;
    }
    .add-to-cart-cta:hover {
      color: #FFFFFF;
    }
    .add-to-cart-cta:hover::before {
      width: 100%;
    }
    .delivery-notice-text {
      font-size: 0.85rem;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    /* -------------------------------------------------------------------------
       【セクション9：配送・返品について】
    ------------------------------------------------------------------------- */
    .logistics-container {
      max-width: 950px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
    }
    .logistics-block {
      background-color: #FFFFFF;
      border: 1px solid rgba(138, 106, 74, 0.05);
      padding: 3rem 2rem;
      display: flex;
      flex-direction: column;
    }
    .logistics-block-title {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 1.5rem;
      padding-bottom: 0.8rem;
      border-bottom: 1px solid rgba(138, 106, 74, 0.15);
    }
    .logistics-block-desc {
      font-size: 0.88rem;
      color: var(--text-muted);
      line-height: 1.8;
      margin-bottom: 2rem;
      flex-grow: 1;
    }
    .logistics-inline-link {
      font-family: var(--font-display);
      font-size: 0.88rem;
      color: var(--color-sub);
      align-self: flex-start;
      border-bottom: 1px solid var(--color-sub);
      padding-bottom: 0.2rem;
    }
    .logistics-inline-link:hover {
      color: var(--color-main);
      border-color: var(--color-main);
    }

    /* -------------------------------------------------------------------------
       【各種インタラクション用：ライトボックス拡大 & トースト】
    ------------------------------------------------------------------------- */
    .lightbox-modal {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background-color: rgba(44, 51, 39, 0.95);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }
    .lightbox-modal.is-active {
      opacity: 1;
      pointer-events: auto;
    }
    .lightbox-content {
      max-width: 85%;
      max-height: 85%;
      position: relative;
    }
    .lightbox-image {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 80vh;
      object-fit: contain;
      border: 1px solid rgba(248, 245, 240, 0.2);
    }
    .lightbox-close-btn {
      position: absolute;
      top: -40px; right: 0;
      color: #FFFFFF;
      font-size: 2rem;
      font-family: var(--font-en);
    }

    .toast-notification {
      position: fixed;
      bottom: 40px; right: 40px;
      background-color: var(--text-dark);
      color: var(--bg-base);
      padding: 1.2rem 2.5rem;
      font-family: var(--font-display);
      font-size: 0.95rem;
      border-left: 4px solid var(--color-accent);
      box-shadow: 0 10px 30px rgba(0,0,0,0.15);
      z-index: 3000;
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .toast-notification.is-active {
      opacity: 1;
      transform: translateY(0);
    }

    /* -------------------------------------------------------------------------
       RESPONSIVE DESIGN (スマホ最適化)
    ------------------------------------------------------------------------- */
    @media (max-width: 1024px) {
      .product-essential-wrapper { grid-template-columns: 1fr; gap: 3rem; }
      .logistics-container { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .section-title { font-size: 1.8rem; }
      .logistics-container { grid-template-columns: 1fr; }
      .toast-notification { bottom: 20px; right: 20px; left: 20px; text-align: center; }
    }