/**
 * Square Catalog CSS
 * カタログページのスタイル定義
 * 
 * @package Square_Integration
 * @version 1.0.0
 */

/* ==========================================================================
   CSS Variables (カスタムプロパティ)
   ========================================================================== */
   
:root {
  /* カラーパレット - モノクロ系 */
  --square-primary: #333333;
  --square-primary-light: #666666;
  --square-primary-dark: #222222;
  --square-secondary: #f5f5f5;
  --square-accent: #666666;
  --square-orange: #ff6600;
  
  /* グレースケール */
  --square-white: #ffffff;
  --square-light-gray: #f9f9f9;
  --square-gray: #ddd;
  --square-dark-gray: #999999;
  --square-black: #333;
  
  /* モーダル用 */
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --modal-background: var(--square-white);
  --modal-border: var(--square-gray);
  
  /* スペーシング */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  
  /* ボーダー */
  --border-radius: 5px;
  --border-width: 1px;
  
  /* トランジション */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  
  /* 商品表示用追加変数 */
  --square-product-bg: #fafafa;
  --square-product-border: #e0e0e0;
  --square-success-color: #333333;
  --square-warning-color: #ff9800;
  --square-error-color: #f44336;
  --square-info-color: #666666;
}


/* ==========================================================================
   Modal Styles - モーダルウィンドウ
   ========================================================================== */

.square-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  
  &.active {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-overlay);
    cursor: pointer;
  }
  
  .modal-content {
    position: relative;
    background: var(--modal-background);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--modal-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-height: 90vh;
    overflow: hidden;
    z-index: 1;
    
    /* レスポンシブ幅設定 */
    width: 80%;
    max-width: 800px;
    
    @media (max-width: 768px) {
      width: 95%;
      max-height: 85vh;
    }
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: var(--border-width) solid var(--square-gray);
    /* background: var(--square-light-gray); */
    
    .modal-title {
      margin: 0;
      color: var(--square-primary);
      font-size: 1.3rem;
      font-weight: 600;
      
        /* モーダルタイトル内の要素スタイル*/
        .modal-category {
          display: block;
          font-size: 0.8rem;
          color: #666;
          font-weight: normal;
          display: block;
        }
        
        .modal-product-name {
          display: block;
          margin: 0;
          color: var(--square-primary);
          font-size: 1.3rem;
          font-weight: 600;
        }
    }
    
    .modal-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: var(--square-dark-gray);
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: var(--transition-fast);
      
      &:hover {
        background: var(--square-gray);
        color: var(--square-black);
      }
      
      &:active {
        background: var(--square-primary);
        color: var(--square-white);
      }
    }
  }
  
  .modal-body {
    padding: var(--spacing-lg);
    max-height: 60vh;
    overflow-y: auto;
    
    /* 既存JSON表示（デバッグモード用保持） */
    .json-display {
      background: var(--square-light-gray);
      border: var(--border-width) solid var(--square-gray);
      border-radius: var(--border-radius);
      padding: var(--spacing-md);
      margin: 0;
      font-family: "Monaco", "Consolas", "Courier New", monospace;
      font-size: 0.85rem;
      line-height: 1.4;
      white-space: pre-wrap;
      word-break: break-word;
      color: var(--square-black);
      max-height: 50vh;
      overflow-y: auto;
    }
    
    /* 商品情報表示コンテナ - 表示順序：カテゴリー→商品名→画像→説明→バリエーション→カートボタン */
    .product-info-display {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-lg);
      
      /* 表示順序制御 */
      .product-category-section { order: 1; }
      .product-images { order: 2; }
      .product-description-section { order: 3; }
      .product-variations { order: 4; }
      .add-to-cart-section { order: 5; }
      .product-stock-info { order: 6; }
      .product-price-info { order: 7; display: none; } /* 非表示 */
      
      h4, h5, h6 {
        margin: 0 0 var(--spacing-sm) 0;
        color: var(--square-primary);
      }
      
      h4 {
        font-size: 1.3rem;
        border-bottom: 2px solid var(--square-primary);
        padding-bottom: var(--spacing-xs);
      }
      
      h5 {
        font-size: 1.1rem;
        color: var(--square-accent);
      }
      
      h6 {
        font-size: 1rem;
        color: var(--square-dark-gray);
      }
      
      p {
        margin: 0 0 var(--spacing-sm) 0;
        line-height: 1.5;
      }
    }
    
    /* 価格情報セクション - 画像直下表示は削除、バリエーション内表示のみ */
    .product-price-info {
      display: none; /* 画像直下の価格表示を削除 */
    }
    
    /* 在庫情報セクション */
    .product-stock-info {
      background: var(--square-white);
      padding: var(--spacing-md);
      border-radius: var(--border-radius);
      
      .stock-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--spacing-sm);
        
        p {
          background: var(--square-light-gray);
          padding: var(--spacing-xs);
          border-radius: 3px;
          text-align: center;
          font-size: 0.9rem;
          margin: 0;
        }
      }
    }
    
    /* バリエーション表示 */
    .product-variations {
      padding: var(--spacing-md);
      border-radius: var(--border-radius);
      
      /* 新しい表形式レイアウト */
      .variation-table {
        width: 100%;
        margin: 0;
        background: var(--square-white);
        border-radius: var(--border-radius);
        overflow: hidden;
      }
      
      .variation-row {
        display: grid;
        grid-template-columns: 30% 40% 30%;
        align-items: center;
        min-height: 60px;
        border-bottom: var(--border-width) solid var(--square-gray);
        transition: var(--transition-fast);
        
        &:last-child {
          border-bottom: none;
        }
        
        &:hover {
          background: var(--square-secondary);
        }
      }
      
      .variation-quantity,
      .variation-price,
      .variation-input {
        padding: var(--spacing-md);
        display: flex;
        align-items: center;
        
        &:last-child {
          color: inherit;
        }
      }
      
      .variation-quantity {
        font-weight: 600;
        color: var(--square-primary);
        justify-content: flex-start;
        text-align: left;
      }
      
      .variation-price {
        font-size: 1.2rem;
        font-weight: 700;
        justify-content: flex-end;
        text-align: right;
      }
      
      .variation-input {
        justify-content: flex-end;
        text-align: right;
        
        .variation-quantity-input {
          width: 60px;
          padding: var(--spacing-xs);
          border: var(--border-width) solid var(--square-gray);
          border-radius: var(--border-radius);
          text-align: center;
          font-size: 1rem;
          background: none;
          
          /* 数値入力欄のスピナー（上下ボタン）を非表示化 */
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: textfield;
          
          &::-webkit-outer-spin-button,
          &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
          }
          
          &:focus {
            outline: 2px solid var(--square-primary);
            border-color: var(--square-primary);
          }
        }
        
        .quantity-label {
          display: none;
        }
        
        /* プラス/マイナスボタン用のスタイル */
        .quantity-controls {
          display: flex;
          align-items: center;
          gap: 5px;
        }
        
        .quantity-btn {
          width: 30px;
          height: 30px;
          border: var(--border-width) solid var(--square-gray);
          border-radius: var(--border-radius);
          background: var(--square-white);
          color: var(--square-primary);
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: var(--transition-fast);
          display: flex;
          align-items: center;
          justify-content: center;
          
          &:hover {
            background: var(--square-secondary);
            border-color: var(--square-primary);
          }
          
          &:active {
            background: var(--square-primary);
            color: var(--square-white);
          }
          
          &:focus {
            outline: 2px solid var(--square-primary);
            outline-offset: 1px;
          }
        }
        
        .quantity-minus {
          /* マイナスボタン特有のスタイル */
          color: inherit;
        }
        
        .quantity-plus {
          /* プラスボタン特有のスタイル */
          color: inherit;
        }
      }
      
      /* 単一バリエーション表示（新方式） */
      .single-variation-row {
        display: grid;
        grid-template-columns: 30% 40% 30%;
        align-items: center;
        min-height: 60px;
        background: var(--square-white);
        border-radius: var(--border-radius);
        margin: var(--spacing-md) 0;
        
        .variation-quantity,
        .variation-price,
        .variation-input {
          padding: var(--spacing-md);
          display: flex;
          align-items: center;
          
          &:last-child {
            color: inherit;
          }
        }
        
        .variation-quantity {
          font-weight: 600;
          color: var(--square-primary);
          justify-content: flex-start;
          text-align: left;
        }
        
        .variation-price {
          font-size: 1.2rem;
          font-weight: 700;
          justify-content: flex-end;
          text-align: right;
        }
        
        .variation-input {
          justify-content: flex-end;
          text-align: right;
          
          .variation-quantity-input {
            width: 60px;
            padding: var(--spacing-xs);
            border: var(--border-width) solid var(--square-gray);
            border-radius: var(--border-radius);
            text-align: center;
            font-size: 1rem;
            background: none;
            
            &:focus {
              outline: 2px solid var(--square-primary);
              border-color: var(--square-primary);
            }
          }
          
          .quantity-label {
            display: none;
          }
          
          /* プラス/マイナスボタン用のスタイル（単一バリエーション行用） */
          .quantity-controls {
            display: flex;
            align-items: center;
            gap: 5px;
          }
          
          .quantity-btn {
            width: 30px;
            height: 30px;
            border: var(--border-width) solid var(--square-gray);
            border-radius: var(--border-radius);
            background: var(--square-white);
            color: var(--square-primary);
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-fast);
            display: flex;
            align-items: center;
            justify-content: center;
            
            &:hover {
              background: var(--square-secondary);
              border-color: var(--square-primary);
            }
            
            &:active {
              background: var(--square-primary);
              color: var(--square-white);
            }
            
            &:focus {
              outline: 2px solid var(--square-primary);
              outline-offset: 1px;
            }
          }
          
          .quantity-minus {
            /* マイナスボタン特有のスタイル */
            color: inherit;
          }
          
          .quantity-plus {
            /* プラスボタン特有のスタイル */
            color: inherit;
          }
        }
        
        .selected-variation-id {
          display: none;
        }
      }

      /* バリエーション選択器（新機能） */
      .variation-selector {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-md);
        
        .variation-selector-item {
          cursor: pointer;
          padding: var(--spacing-md);
          background: var(--square-white);
          border: 2px solid var(--square-gray);
          border-radius: var(--border-radius);
          transition: var(--transition-fast);
          display: flex;
          gap: var(--spacing-sm);
          align-items: flex-start;
          
          &:hover {
            border-color: var(--square-primary-light);
            background: var(--square-secondary);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          }
          
          &.selected {
            border-color: var(--square-primary);
            background: var(--square-secondary);
            box-shadow: 0 0 0 2px var(--square-primary-light);
          }
          
          &:focus {
            outline: 2px solid var(--square-primary);
            outline-offset: 2px;
          }
          
          .variation-image {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            border-radius: var(--border-radius);
            overflow: hidden;
            background: var(--square-light-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            border: var(--border-width) solid var(--square-gray);
            
            .variation-thumb {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            
            &.no-variation-image {
              .variation-placeholder {
                font-size: 1.5rem;
                color: var(--square-dark-gray);
                opacity: 0.5;
              }
            }
          }
          
          .variation-info {
            flex: 1;
            
            h6 {
              margin: 0 0 var(--spacing-xs) 0;
              color: var(--square-black);
              font-size: 1rem;
              font-weight: 600;
            }
            
            .variation-price {
              margin: 0 0 var(--spacing-xs) 0;
              font-size: 1.1rem;
              font-weight: 700;
            }
            
            .variation-stock {
              margin: 0 0 var(--spacing-xs) 0;
              font-size: 0.85rem;
              color: var(--square-dark-gray);
            }
            
            .variation-image-count {
              margin: 0;
              font-size: 0.8rem;
              color: var(--square-info-color);
              font-weight: 500;
            }
            
            .variation-quantity {
              margin: var(--spacing-xs) 0;
              
              label {
                display: block;
                font-size: 0.8rem;
                color: var(--square-dark-gray);
                margin-bottom: 2px;
              }
              
              .variation-quantity-input {
                width: 50px;
                padding: 2px;
                border: var(--border-width) solid var(--square-gray);
                border-radius: 3px;
                text-align: right;
                font-size: 0.8rem;
                
                &:focus {
                  outline: 1px solid var(--square-primary);
                  border-color: var(--square-primary);
                }
              }
            }
          }
        }
      }
    }
    
    /* 画像表示セクション */
    .product-images {
      padding: var(--spacing-md);
      border-radius: var(--border-radius);
      
      .no-images {
        text-align: center;
        padding: var(--spacing-lg);
        color: var(--square-dark-gray);
        
        .no-image-placeholder {
          max-width: 150px;
          height: auto;
          opacity: 0.7;
          margin-bottom: var(--spacing-sm);
        }
      }
      
      .image-gallery {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        
        .main-image-container {
          position: relative;
          text-align: center;
          min-height: 200px;
          background: var(--square-light-gray);
          border-radius: var(--border-radius);
          display: flex;
          align-items: center;
          justify-content: center;
          
          .image-loading-spinner {
            color: var(--square-info-color);
            font-size: 1rem;
          }
          
          .main-image {
            max-width: 100%;
            max-height: 300px;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }
          
          .image-error {
            text-align: center;
            color: var(--square-error-color);
            
            .error-image {
              max-width: 100px;
              height: auto;
              opacity: 0.5;
              margin-bottom: var(--spacing-sm);
            }
          }
        }
        
        .thumbnail-container {
          h6 {
            margin-bottom: var(--spacing-sm);
            color: var(--square-dark-gray);
          }
          
          .thumbnail-list {
            display: flex;
            gap: var(--spacing-sm);
            flex-wrap: wrap;
            justify-content: center;
            
            .thumbnail-item {
              width: 60px;
              height: 60px;
              border: 2px solid var(--square-gray);
              border-radius: var(--border-radius);
              overflow: hidden;
              cursor: pointer;
              transition: var(--transition-fast);
              
              &:hover {
                border-color: var(--square-primary);
                transform: scale(1.05);
              }
              
              &.active {
                border-color: var(--square-primary);
                box-shadow: 0 0 0 2px var(--square-primary-light);
              }
              
              &.error {
                border-color: var(--square-error-color);
                opacity: 0.6;
                cursor: not-allowed;
              }
              
              .thumbnail-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                
                &.error {
                  opacity: 0.5;
                }
              }
            }
          }
        }
      }
      
      /* 統合ギャラリー（新機能） */
      .unified-gallery {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        position: relative;
        
        /* 新しいギャラリーコンテナ */
        .gallery-container {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-md);
        }
        
        /* ナビゲーションエリア（3カラムグリッド） */
        .gallery-navigation-area {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          gap: var(--spacing-md);
          padding: var(--spacing-sm) 0;
          min-height: 40px;
        }
        
        /* キャプション表示エリア */
        .gallery-caption-area {
          text-align: center;
          padding: var(--spacing-sm);
          margin-top: calc(-1 * var(--spacing-md)); /* ナビゲーションエリアとのギャップをゼロに */
          
          .image-caption {
            color: var(--square-black);
            font-size: 0.9rem;
            font-weight: 500;
            margin: 0;
          }
        }
        
        .main-image-area {
          position: relative;
          text-align: center;
          min-height: 250px;
          background: var(--square-light-gray);
          border-radius: var(--border-radius);
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          
          .image-loading-spinner {
            color: var(--square-info-color);
            font-size: 1.1rem;
          }
          
          .main-gallery-image {
            max-width: 100%;
            max-height: 400px;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: var(--transition-normal);
          }
          
          /* 販売停止・売り切れ表示用のスタイル */
          .sold-out-display {
            color: #f44336;
            font-weight: bold;
            text-align: center;
            padding: var(--spacing-xs);
          }
          
          .image-error {
            text-align: center;
            color: var(--square-error-color);
            
            .error-image {
              max-width: 150px;
              height: auto;
              opacity: 0.5;
              margin-bottom: var(--spacing-sm);
            }
          }
        }
        
        /* ナビゲーション矢印（新配置） */
        .gallery-nav {
          background: transparent;
          border: none;
          color: var(--square-primary);
          font-size: 1.5rem;
          cursor: pointer;
          transition: var(--transition-fast);
          padding: var(--spacing-xs);
          border-radius: var(--border-radius);
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          
          &:hover {
            background: var(--square-secondary);
            border: none;
            outline: none;
          }
          
          &:active {
            transform: scale(0.95);
            background: var(--square-primary);
            color: var(--square-white);
          }
          
          &:focus {
            outline: 2px solid var(--square-primary);
            outline-offset: 2px;
          }
          
          &.gallery-nav-prev {
            justify-self: start;
          }
          
          &.gallery-nav-next {
            justify-self: end;
          }
        }
        
        /* SVGナビゲーション矢印用のスタイル */
        .gallery-nav-svg {
          width: 24px;
          height: 24px;
          fill: currentColor;
          transition: var(--transition-fast);
        }
        
        /* ナビゲーション矢印ホバー時のSVG色変更 */
        .gallery-nav:hover .gallery-nav-svg {
          fill: var(--square-orange);
        }
        
        /* 画像インジケーター（中央カラム配置） */
        .image-indicators {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 8px;
          padding: var(--spacing-xs);
          justify-self: center;
        }
        
        .indicator {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: var(--square-gray);
          cursor: pointer;
          transition: var(--transition-fast);
        }
        
        .indicator.active {
          background: var(--square-primary);
        }
        
        .indicator:hover {
          background: var(--square-primary-light);
          transform: scale(1.2);
        }

      }
    }
    
    /* カートに追加ボタン */
    .add-to-cart-section {
      padding: var(--spacing-md);
      border: none;
      border-radius: var(--border-radius);
      text-align: center;
      padding-left: 0;
      padding-right: 0;
      
      .add-to-cart-button {
        background: var(--square-primary);
        color: var(--square-white);
        border: none;
        padding: var(--spacing-md) var(--spacing-xl);
        border-radius: var(--border-radius);
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition-fast);
        width: 100%;
        
        &:hover {
          background: var(--square-primary-dark);
          transform: translateY(-1px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        &:active {
          transform: translateY(0);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        &:disabled {
          background: var(--square-gray);
          color: var(--square-dark-gray);
          cursor: not-allowed;
          transform: none;
          box-shadow: none;
        }
        
        &:focus {
          outline: 2px solid var(--square-primary-light);
          outline-offset: 2px;
        }
      }
      
      .cart-button-note {
        margin-top: var(--spacing-sm);
        font-size: 0.9rem;
        color: var(--square-dark-gray);
        font-style: italic;
      }
      
      .quantity-selector {
        margin-bottom: var(--spacing-md);
        
        label {
          display: block;
          margin-bottom: var(--spacing-xs);
          font-weight: 500;
          color: var(--square-black);
        }
        
        input[type="number"] {
          width: 80px;
          padding: var(--spacing-xs);
          border: var(--border-width) solid var(--square-gray);
          border-radius: var(--border-radius);
          text-align: center;
          font-size: 1rem;
          
          &:focus {
            outline: 2px solid var(--square-primary);
            border-color: var(--square-primary);
          }
        }
      }
    }
    

    
    /* エラー表示 */
    .error-content {
      background: #ffebee;
      border: var(--border-width) solid var(--square-error-color);
      border-radius: var(--border-radius);
      padding: var(--spacing-lg);
      text-align: center;
      
      h4 {
        color: var(--square-error-color);
        margin-bottom: var(--spacing-md);
      }
      
      p {
        color: #c62828;
        margin: var(--spacing-sm) 0;
      }
    }
  }
}

/* ==========================================================================
   Responsive Design - レスポンシブ対応
   ========================================================================== */

/* タブレット */
@media (max-width: 1024px) {
  #square-catalog-page {
    .square-product-list {
      ul {
        border-radius: 0;
      }
    }
  }
  
  .square-modal .modal-content {
    width: 90%;
  }
}

/* スマートフォン */
@media (max-width: 768px) {
  #square-catalog-page {
    .square-product-list {
      margin: var(--spacing-md) 0;
      
      h2 {
        font-size: 1.3rem;
      }
      
      .product-link {
        padding: var(--spacing-sm) var(--spacing-md);
      }
    }
  }
  
  .square-modal {
    .modal-header {
      padding: var(--spacing-md);
      
    }
    
    .modal-body {
      padding: var(--spacing-md);
      max-height: 70vh;
      
      .json-display {
        font-size: 0.8rem;
        padding: var(--spacing-sm);
        margin-top: var(--spacing-md);
      }
      
      /* 商品情報モバイル対応 */
      .product-info-display {
        gap: var(--spacing-md);
        
        h4 {
          font-size: 1.1rem;
        }
        
        h5 {
          font-size: 1rem;
        }
      }
      
      .product-price-info,
      .product-stock-info,
      .product-variations,
      .product-images,
      .add-to-cart-section {
        padding: var(--spacing-sm);
      }
      
      /* カートボタンのモバイル対応 */
      .add-to-cart-section {
        .add-to-cart-button {
          min-width: 150px;
          font-size: 1rem;
          padding: var(--spacing-sm) var(--spacing-lg);
        }
        
        .quantity-selector {
          input[type="number"] {
            width: 60px;
            font-size: 0.9rem;
          }
        }
      }
      
      /* バリエーション表示モバイル対応 - 新しい表形式レイアウト */
      .product-variations {
        .variation-row {
          grid-template-columns: 1fr;
          min-height: auto;
          
          .variation-quantity,
          .variation-price,
          .variation-input {
            /* border-right: none; */ /* 削除済み */
            /* border-bottom: var(--border-width) solid var(--square-gray); */ /* 削除 */
            
            &:last-child {
              /* border-bottom: none; */ /* 削除 */
              color: inherit;
            }
          }
          
          /* 1カラム表示時のバリエーションタイトルに背景色設定 */
          .variation-quantity {
            background: var(--square-light-gray);
          }
          
          /* バリエーション名が空の場合は背景色を非表示 */
          .variation-quantity.no-variation-name {
            background: transparent !important;
            display: none;
          }
          
          /* 金額と数量セルの縦方向の間隔を調整し、視覚的なまとまりを作る */
          .variation-price {
            margin-bottom: 5px;
          }
          
          .variation-input {
            margin-bottom: 5px;
          }
        }
        
        .single-variation-row {
          grid-template-columns: 1fr;
          
          .variation-quantity,
          .variation-price,
          .variation-input {
            /* border-right: none; */ /* 削除済み */
            /* border-bottom: var(--border-width) solid var(--square-gray); */ /* 削除 */
            
            &:last-child {
              /* border-bottom: none; */ /* 削除 */
              color: inherit;
            }
          }
          
          /* 1カラム表示時のバリエーションタイトルに背景色設定 */
          .variation-quantity {
            background: var(--square-light-gray);
          }
          
          /* バリエーション名が空の場合は背景色を非表示 */
          .variation-quantity.no-variation-name {
            background: transparent !important;
            display: none;
          }
          
          /* 金額と数量セルの縦方向の間隔を調整し、視覚的なまとまりを作る */
          .variation-price {
            margin-bottom: 5px;
          }
          
          .variation-input {
            margin-bottom: 5px;
          }
        }
        
        /* レスポンシブ対応時のボタン表示を調整（ボタンサイズを小さく25px） */
        .variation-row .variation-input .quantity-btn,
        .single-variation-row .variation-input .quantity-btn {
          width: 25px;
          height: 25px;
          font-size: 0.9rem;
        }
      }
      
      /* 在庫情報モバイル対応 */
      .product-stock-info .stock-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xs);
        
        p {
          font-size: 0.8rem;
          padding: var(--spacing-xs);
        }
      }
      
      /* 画像表示モバイル対応 */
      .product-images {
        /* 画像インジケーターのモバイル対応 */
        .image-indicators {
          gap: 6px;
          
          .indicator {
            width: 8px;
            height: 8px;
          }
        }
        
        .image-gallery .main-image-container {
          min-height: 150px;
          
          .main-image {
            max-height: 200px;
          }
        }
        
        /* Unified Galleryのタブレット対応 */
        .unified-gallery {
          .gallery-navigation-area {
            grid-template-columns: auto auto auto;
            gap: var(--spacing-sm);
            justify-content: space-between;
          }
          
          .gallery-nav {
            width: 35px;
            height: 35px;
            
            .gallery-nav-svg {
              width: 20px;
              height: 20px;
            }
          }
          
          .gallery-caption-area {
            padding: var(--spacing-xs);
            
            .image-caption {
              font-size: 0.85rem;
            }
          }
        }
      }
      
      /* バリエーション選択器のモバイル対応 */
      .product-variations .variation-selector {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        
        .variation-selector-item {
          padding: var(--spacing-sm);
          
          .variation-image {
            width: 50px;
            height: 50px;
          }
          
          .variation-info {
            h6 {
              font-size: 0.95rem;
            }
            
            .variation-price {
              font-size: 1rem;
            }
            
            .variation-stock,
            .variation-image-count {
              font-size: 0.8rem;
            }
          }
        }
      }
      

      
      /* デバッグモードモバイル対応 */
      .debug-content .debug-header {
        h4 {
          font-size: 1rem;
        }
      }
    }
  }
}

/* 小さいスマートフォン */
@media (max-width: 480px) {
  #square-catalog-page {
    .square-product-list {
      .product-link {
        font-size: 0.9rem;
      }
    }
  }
  
  .square-modal .modal-content {
    width: 98%;
    margin: var(--spacing-sm);
    
    .modal-body {
      padding: var(--spacing-sm);
      max-height: 75vh;
      
      .json-display {
        font-size: 0.75rem;
        max-height: 40vh;
      }
      
      /* 極小画面での商品情報対応 */
      .product-info-display {
        gap: var(--spacing-sm);
        
        h4 {
          font-size: 1rem;
        }
        
        h5 {
          font-size: 0.9rem;
        }
        
        h6 {
          font-size: 0.8rem;
        }
      }
      
      .product-price-info,
      .product-stock-info,
      .product-variations,
      .product-images,
      .add-to-cart-section {
        padding: var(--spacing-xs);
      }
      
      /* カートボタンの極小画面対応 */
      .add-to-cart-section {
        .add-to-cart-button {
          min-width: 120px;
          font-size: 0.9rem;
          padding: var(--spacing-xs) var(--spacing-md);
        }
        
        .cart-button-note {
          font-size: 0.8rem;
        }
        
        .quantity-selector {
          input[type="number"] {
            width: 50px;
            font-size: 0.8rem;
          }
        }
      }
      
      /* 在庫情報極小画面対応 */
      .product-stock-info .stock-summary {
        grid-template-columns: 1fr;
        
        p {
          font-size: 0.75rem;
        }
      }
      
      /* 画像表示極小画面対応 */
      .product-images {
        .image-gallery .main-image-container {
          min-height: 120px;
          
          .main-image {
            max-height: 150px;
          }
        }
        
        .thumbnail-container .thumbnail-list {
          gap: var(--spacing-xs);
          
          .thumbnail-item {
            width: 35px;
            height: 35px;
          }
        }
        
        /* Unified Galleryのスマートフォン対応 */
        .unified-gallery {
          .gallery-navigation-area {
            grid-template-columns: auto 1fr auto;
            gap: var(--spacing-xs);
            padding: var(--spacing-xs) 0;
          }
          
          .gallery-nav {
            width: 30px;
            height: 30px;
            
            .gallery-nav-svg {
              width: 18px;
              height: 18px;
            }
          }
          
          .image-indicators {
            gap: 6px;
            
            .indicator {
              width: 8px;
              height: 8px;
            }
          }
          
          .gallery-caption-area {
            padding: var(--spacing-xs);
            
            .image-caption {
              font-size: 0.8rem;
            }
          }
        }
      }
      
      /* バリエーション選択器の極小画面対応 */
      .product-variations .variation-selector {
        .variation-selector-item {
          padding: var(--spacing-xs);
          flex-direction: column;
          text-align: center;
          gap: var(--spacing-xs);
          
          .variation-image {
            width: 35px;
            height: 35px;
            align-self: center;
          }
          
          .variation-info {
            h6 {
              font-size: 0.85rem;
            }
            
            .variation-price {
              font-size: 0.9rem;
            }
            
            .variation-stock,
            .variation-image-count {
              font-size: 0.7rem;
            }
          }
        }
      }
      
      /* バリエーション表示の極小画面対応 - 新しい表形式レイアウト */
      .product-variations {
        .variation-row,
        .single-variation-row {
          .variation-input .variation-quantity-input {
            width: 45px;
            font-size: 0.8rem;
            text-align: center; /* rightからcenterに変更 */
          }
          
          .variation-price {
            font-size: 1rem;
          }
          
          /* 極小画面でのボタンサイズ調整 */
          .variation-input .quantity-btn {
            width: 20px;
            height: 20px;
            font-size: 0.8rem;
          }
        }
      }
      
      /* 価格表示極小画面対応 */
      .product-price-info .price-range {
        font-size: 1rem;
      }
    }
  }
}

/* ==========================================================================
   Accessibility - アクセシビリティ対応
   ========================================================================== */

/* フォーカス表示 */
#square-catalog-page .product-link:focus,
.square-modal .modal-close:focus {
  outline: 2px solid var(--square-primary);
  outline-offset: 2px;
}

/* 動きを抑制する設定 */
@media (prefers-reduced-motion: reduce) {
  #square-catalog-page .square-product-list li,
  #square-catalog-page .product-link,
  .square-modal .modal-close {
    transition: none;
  }
}

/* ハイコントラストモード対応 */
@media (prefers-contrast: high) {
  #square-catalog-page {
    .square-product-list {
      ul {
        border-width: 2px;
      }
      
      .product-link:hover {
        background: var(--square-primary);
        color: var(--square-white);
      }
    }
  }
  
  .square-modal .modal-content {
    border-width: 2px;
  }
}