/* ===================================================================
   商品內容編輯器 - 通用 RWD CSS 系統
   Product Content Editor - Universal Responsive CSS System
   
   使用方式：在商品內容編輯器的 HTML 中加入 class 即可套用樣式
   範例：<div class="pe-section">...</div>
   ================================================================ */

/* ===================================================================
   CSS 變數定義 - 方便全局客製化調整
   ================================================================ */
:root {
  /* 斷點設定 */
  --pe-breakpoint-mobile: 640px;
  --pe-breakpoint-tablet: 768px;
  --pe-breakpoint-desktop: 1200px;
  
  /* 容器寬度 */
  --pe-container-max: 1250px;
  --pe-container-padding-lg: 40px;
  --pe-container-padding-md: 30px;
  --pe-container-padding-sm: 20px;
  
  /* 間距系統 */
  --pe-spacing-xs: 10px;
  --pe-spacing-sm: 20px;
  --pe-spacing-md: 40px;
  --pe-spacing-lg: 60px;
  --pe-spacing-xl: 80px;
  
  /* 顏色系統 - 可根據品牌色調整 */
  --pe-color-primary: #ff9800;
  --pe-color-text-dark: #333333;
  --pe-color-text-medium: #666666;
  --pe-color-text-light: #999999;
  --pe-color-bg-light: #f5f5f5;
  --pe-color-bg-white: #ffffff;
  --pe-color-border: #e8e8e8;
  --pe-color-tag-bg: #4a4a4a;
  
  /* 字型設定 */
  --pe-font-family: Arial, sans-serif;
  --pe-font-size-h1: 32px;
  --pe-font-size-h2: 28px;
  --pe-font-size-h3: 24px;
  --pe-font-size-base: 16px;
  --pe-font-size-small: 14px;
  --pe-line-height-base: 1.6;
  --pe-line-height-relaxed: 1.8;
  
  /* 陰影效果 */
  --pe-shadow-card: 0 2px 8px rgba(0,0,0,0.08);
}

/* ===================================================================
   基礎容器樣式
   ================================================================ */

/* 外層區塊容器 - 帶背景色的區塊 */
.pe-section {
  background: var(--pe-color-bg-light);
  padding: var(--pe-spacing-sm);
  margin: 0;
}

/* 內層卡片容器 - 白色卡片效果 */
.pe-card {
  background: var(--pe-color-bg-white);
  box-shadow: var(--pe-shadow-card);
  padding: 50px var(--pe-container-padding-lg);
  max-width: 100%;
  margin: 0;
}

/* 限制最大寬度的容器 */
.pe-card-narrow {
  max-width: var(--pe-container-max);
  margin-left: auto;
  margin-right: auto;
}

/* ===================================================================
   標題樣式
   ================================================================ */

.pe-title-main {
  color: var(--pe-color-text-dark);
  font-family: var(--pe-font-family);
  font-size: var(--pe-font-size-h1);
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 15px 0;
  text-align: center;
  line-height: 1.4;
}

.pe-title-sub {
  color: var(--pe-color-text-dark);
  font-family: var(--pe-font-family);
  font-size: var(--pe-font-size-h2);
  font-weight: 700;
  margin: 0;
  text-align: center;
  line-height: 1.4;
}

/* 標題裝飾線 */
.pe-title-accent {
  background: var(--pe-color-primary);
  height: 3px;
  width: 80px;
  margin: var(--pe-spacing-md) auto;
}

/* ===================================================================
   文字內容樣式
   ================================================================ */

.pe-text-content {
  color: var(--pe-color-text-medium);
  font-family: var(--pe-font-family);
  font-size: var(--pe-font-size-base);
  line-height: var(--pe-line-height-relaxed);
  margin: 0;
  max-width: 100%;
}

.pe-text-center {
  text-align: center;
}

/* ===================================================================
   產品標籤 (型號)
   ================================================================ */

.pe-product-tag-wrapper {
  margin-bottom: var(--pe-spacing-md);
  text-align: center;
}

.pe-product-tag {
  background: var(--pe-color-tag-bg);
  border-radius: 25px;
  color: #ffffff;
  display: inline-block;
  font-family: var(--pe-font-family);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  padding: 8px 25px;
}

/* ===================================================================
   規格表格樣式
   ================================================================ */

.pe-spec-table {
  border-collapse: collapse;
  font-family: var(--pe-font-family);
  width: 100%;
  margin: 0;
}

.pe-spec-table tr {
  border-bottom: 1px solid var(--pe-color-border);
}

.pe-spec-table tr:last-child {
  border-bottom: none;
}

.pe-spec-table th,
.pe-spec-table td {
  padding: 20px 0;
  text-align: left;
  vertical-align: top;
}

.pe-spec-table th {
  color: var(--pe-color-text-dark);
  font-size: var(--pe-font-size-base);
  font-weight: 700;
  width: 40%;
}

.pe-spec-table td {
  color: var(--pe-color-text-medium);
  font-size: 15px;
  line-height: var(--pe-line-height-base);
}

.pe-spec-note {
  color: var(--pe-color-text-light);
  font-size: var(--pe-font-size-small);
  display: block;
  margin-top: 5px;
}

/* ===================================================================
   FAQ 問答樣式
   ================================================================ */

.pe-faq-item {
  border-bottom: 1px solid var(--pe-color-border);
  padding: 25px 0;
}

.pe-faq-item:last-child {
  border-bottom: none;
}

.pe-faq-question {
  color: var(--pe-color-text-dark);
  font-family: var(--pe-font-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 12px;
}

.pe-faq-answer {
  color: var(--pe-color-text-medium);
  font-family: var(--pe-font-family);
  font-size: 15px;
  line-height: var(--pe-line-height-relaxed);
  padding-left: var(--pe-spacing-sm);
}

/* ===================================================================
   圖片樣式 - 全寬圖片
   ================================================================ */

.pe-img-full {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

/* ===================================================================
   圖文排版區塊 (重點!) - 支援左右排列與上下堆疊
   ================================================================ */

/* 圖文容器 - 預設上下排列,大螢幕左右排列 */
.pe-image-text-block {
  display: flex;
  flex-direction: column; /* 手機版:上下排列 */
  gap: var(--pe-spacing-md);
  align-items: center;
  margin: var(--pe-spacing-md) 0;
}

/* 圖片區域 */
.pe-image-text-img {
  width: 100%;
  flex: 1;
}

.pe-image-text-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 文字區域 */
.pe-image-text-content {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 大螢幕:左右排列 (圖在左,文在右) */
@media (min-width: 768px) {
  .pe-image-text-block {
    flex-direction: row;
    gap: var(--pe-spacing-lg);
  }
  
  .pe-image-text-img,
  .pe-image-text-content {
    width: 50%;
  }
}

/* 反向排列 (文在左,圖在右) */
.pe-image-text-block.pe-reverse {
  flex-direction: column;
}

@media (min-width: 768px) {
  .pe-image-text-block.pe-reverse {
    flex-direction: row-reverse;
  }
}

/* 圖片比例調整變體 */
.pe-image-text-block.pe-img-60 .pe-image-text-img {
  width: 100%;
}

.pe-image-text-block.pe-img-60 .pe-image-text-content {
  width: 100%;
}

@media (min-width: 768px) {
  .pe-image-text-block.pe-img-60 .pe-image-text-img {
    width: 60%;
  }
  
  .pe-image-text-block.pe-img-60 .pe-image-text-content {
    width: 40%;
  }
}

/* ===================================================================
   雙欄圖片排版 - 手機單欄,平板/桌機雙欄
   ================================================================ */

.pe-two-col-images {
  display: grid;
  grid-template-columns: 1fr; /* 手機:單欄 */
  gap: var(--pe-spacing-sm);
  margin: var(--pe-spacing-md) 0;
}

@media (min-width: 640px) {
  .pe-two-col-images {
    grid-template-columns: 1fr 1fr; /* 平板以上:雙欄 */
    gap: var(--pe-spacing-md);
  }
}

.pe-two-col-images img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===================================================================
   三欄圖片排版
   ================================================================ */

.pe-three-col-images {
  display: grid;
  grid-template-columns: 1fr; /* 手機:單欄 */
  gap: var(--pe-spacing-sm);
  margin: var(--pe-spacing-md) 0;
}

@media (min-width: 640px) {
  .pe-three-col-images {
    grid-template-columns: 1fr 1fr; /* 平板:雙欄 */
    gap: var(--pe-spacing-md);
  }
}

@media (min-width: 1024px) {
  .pe-three-col-images {
    grid-template-columns: 1fr 1fr 1fr; /* 桌機:三欄 */
  }
}

.pe-three-col-images img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===================================================================
   特色列表 (icon + 文字)
   ================================================================ */

.pe-feature-list {
  list-style: none;
  padding: 0;
  margin: var(--pe-spacing-md) 0;
}

.pe-feature-item {
  display: flex;
  gap: 15px;
  margin-bottom: var(--pe-spacing-sm);
  align-items: flex-start;
}

.pe-feature-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--pe-color-primary);
}

.pe-feature-text {
  flex: 1;
  color: var(--pe-color-text-medium);
  font-family: var(--pe-font-family);
  font-size: var(--pe-font-size-base);
  line-height: var(--pe-line-height-base);
}

/* ===================================================================
   強調區塊 (Highlight Box)
   ================================================================ */

.pe-highlight-box {
  background: var(--pe-color-bg-light);
  border-left: 4px solid var(--pe-color-primary);
  padding: var(--pe-spacing-md);
  margin: var(--pe-spacing-md) 0;
}

.pe-highlight-box p {
  margin: 0;
  color: var(--pe-color-text-dark);
  font-size: var(--pe-font-size-base);
  line-height: var(--pe-line-height-relaxed);
}

/* ===================================================================
   按鈕樣式
   ================================================================ */

.pe-button {
  display: inline-block;
  background: var(--pe-color-primary);
  color: #ffffff;
  font-family: var(--pe-font-family);
  font-size: var(--pe-font-size-base);
  font-weight: 700;
  padding: 12px 30px;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.pe-button:hover {
  background: #e68900;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.pe-button-wrapper {
  text-align: center;
  margin: var(--pe-spacing-md) 0;
}

/* ===================================================================
   影片嵌入容器 (16:9 響應式)
   ================================================================ */

.pe-video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
  margin: var(--pe-spacing-md) 0;
}

.pe-video-container iframe,
.pe-video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ===================================================================
   步驟流程區塊
   ================================================================ */

.pe-steps {
  display: flex;
  flex-direction: column;
  gap: var(--pe-spacing-md);
  margin: var(--pe-spacing-md) 0;
}

@media (min-width: 768px) {
  .pe-steps {
    flex-direction: row;
  }
}

.pe-step-item {
  flex: 1;
  text-align: center;
  padding: var(--pe-spacing-md);
  background: var(--pe-color-bg-light);
  border-radius: 8px;
}

.pe-step-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background: var(--pe-color-primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px;
}

.pe-step-title {
  font-weight: 700;
  color: var(--pe-color-text-dark);
  margin-bottom: 10px;
  font-size: var(--pe-font-size-base);
}

.pe-step-desc {
  color: var(--pe-color-text-medium);
  font-size: var(--pe-font-size-small);
  line-height: var(--pe-line-height-base);
}

/* ===================================================================
   響應式調整 - 手機版
   ================================================================ */

@media (max-width: 767px) {
  .pe-card {
    padding: 30px var(--pe-spacing-sm);
  }
  
  .pe-title-main {
    font-size: 24px;
  }
  
  .pe-title-sub {
    font-size: 20px;
  }
  
  .pe-spec-table th {
    font-size: 14px;
  }
  
  .pe-spec-table td {
    font-size: 14px;
  }
  
  .pe-faq-question {
    font-size: 15px;
  }
  
  .pe-faq-answer {
    font-size: 14px;
  }
  
  /* 手機版表格改為堆疊顯示 */
  .pe-spec-table th,
  .pe-spec-table td {
    display: block;
    width: 100%;
    padding: 10px 0;
  }
  
  .pe-spec-table th {
    padding-top: 20px;
    padding-bottom: 5px;
  }
  
  .pe-spec-table td {
    padding-top: 5px;
    padding-bottom: 20px;
  }
}

/* ===================================================================
   工具類別 (Utility Classes)
   ================================================================ */

/* 間距工具 */
.pe-mt-sm { margin-top: var(--pe-spacing-sm); }
.pe-mt-md { margin-top: var(--pe-spacing-md); }
.pe-mt-lg { margin-top: var(--pe-spacing-lg); }
.pe-mb-sm { margin-bottom: var(--pe-spacing-sm); }
.pe-mb-md { margin-bottom: var(--pe-spacing-md); }
.pe-mb-lg { margin-bottom: var(--pe-spacing-lg); }
.pe-my-sm { margin-top: var(--pe-spacing-sm); margin-bottom: var(--pe-spacing-sm); }
.pe-my-md { margin-top: var(--pe-spacing-md); margin-bottom: var(--pe-spacing-md); }

/* 文字對齊 */
.pe-text-left { text-align: left; }
.pe-text-center { text-align: center; }
.pe-text-right { text-align: right; }

/* 文字顏色 */
.pe-text-primary { color: var(--pe-color-primary); }
.pe-text-dark { color: var(--pe-color-text-dark); }
.pe-text-medium { color: var(--pe-color-text-medium); }
.pe-text-light { color: var(--pe-color-text-light); }

/* 字體粗細 */
.pe-font-bold { font-weight: 700; }
.pe-font-normal { font-weight: 400; }

/* 隱藏/顯示 (響應式) */
.pe-hide-mobile {
  display: block;
}

@media (max-width: 767px) {
  .pe-hide-mobile {
    display: none;
  }
}

.pe-hide-desktop {
  display: none;
}

@media (max-width: 767px) {
  .pe-hide-desktop {
    display: block;
  }
}

/* ===================================================================
   印刷友善樣式
   ================================================================ */

@media print {
  .pe-section {
    background: white;
    padding: 0;
  }
  
  .pe-card {
    box-shadow: none;
    page-break-inside: avoid;
  }
  
  .pe-button {
    display: none;
  }
}