/* YM Reviews — 商品頁評論區（規劃 docs/REVIEWS_MODULE_PLAN.md §12.4）
   色彩沿用 J3 skin 變數；無陰影、無卡片邊框，分隔線 #eee */
.ym-reviews{--ymr-star:#f5a623;--ymr-star-off:#ddd;--ymr-line:#eee;--ymr-muted:#888;--ymr-ok-bg:#e8f5e9;--ymr-ok:#2e7d32;--ymr-reply-bg:#f7f7f7;
  margin:40px 0 20px;padding-top:28px;border-top:1px solid var(--ymr-line);font-size:15px;line-height:1.7;clear:both}
.ym-reviews *,.ym-reviews *:before,.ym-reviews *:after{box-sizing:border-box}
.ymr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ymr-title{margin:0;font-size:22px;font-weight:700}
.ymr-count{color:var(--ymr-muted);font-weight:400;font-size:16px}
.ymr-stars .fa{color:var(--ymr-star);font-size:14px;margin-right:1px}
.ymr-stars .fa-star-o{color:var(--ymr-star-off)}
.ymr-stars-lg .fa{font-size:20px}

/* 摘要 */
.ymr-summary{display:grid;grid-template-columns:170px 1fr;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--ymr-line)}
.ymr-avg{text-align:center}
.ymr-avg-num{font-size:48px;font-weight:700;line-height:1}
.ymr-avg-meta{font-size:13px;color:var(--ymr-muted);margin-top:4px}
.ymr-verified-meta{color:var(--ymr-ok)}
.ymr-dist{list-style:none;margin:0;padding:0;max-width:460px}
.ymr-dist li{margin:3px 0}
.ymr-dist a{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:13px}
.ymr-dist a:hover .ymr-bar>span{filter:brightness(.92)}
.ymr-dist-label{width:34px;white-space:nowrap}
.ymr-dist-label .fa{color:var(--ymr-star);font-size:11px;margin-left:2px}
.ymr-bar{flex:1;height:10px;background:#f0f0f0;border-radius:5px;overflow:hidden}
.ymr-bar>span{display:block;height:100%;background:var(--ymr-star);border-radius:5px;transition:width .3s}
.ymr-dist-n{width:32px;text-align:right;color:var(--ymr-muted)}

/* 圖牆 */
.ymr-wall{padding:16px 0;border-bottom:1px solid var(--ymr-line)}
.ymr-wall-title{font-weight:600;margin-bottom:8px}
.ymr-wall-title span{color:var(--ymr-muted);font-weight:400;font-size:13px}
.ymr-wall-scroll{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.ymr-wall-item{flex:0 0 80px;width:80px;height:80px;border-radius:6px;overflow:hidden;scroll-snap-align:start;background:#f4f4f4;display:flex;align-items:center;justify-content:center;text-decoration:none}
.ymr-wall-item img{width:100%;height:100%;object-fit:cover;display:block}
.ymr-wall-more span{font-weight:700;color:#555}

/* 篩選 / 排序 */
.ymr-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 0 6px}
.ymr-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ymr-chip{border:1px solid #ddd;background:#fff;border-radius:999px;padding:4px 14px;font-size:13px;white-space:nowrap;cursor:pointer;line-height:1.6}
.ymr-chip.active{border-color:#333;background:#333;color:#fff}
.ymr-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ymr-muted);margin:0;font-weight:400}
.ymr-sort select{width:auto;min-width:110px}

/* 評論卡 */
.ymr-item{padding:18px 0;border-bottom:1px solid var(--ymr-line)}
.ymr-item-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.ymr-author{font-weight:600;font-size:14px}
.ymr-date{color:var(--ymr-muted);font-size:13px;margin-left:auto}
.ymr-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:1px 8px;border-radius:999px;line-height:1.6}
.ymr-badge-verified{background:var(--ymr-ok-bg);color:var(--ymr-ok)}
.ymr-text{white-space:normal;word-break:break-word}
.ymr-collapsed{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ymr-expand{display:inline-block;font-size:13px;margin-top:2px}
.ymr-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ymr-images a{width:80px;height:80px;border-radius:6px;overflow:hidden;background:#f4f4f4;display:block}
.ymr-images img{width:100%;height:100%;object-fit:cover;display:block}
.ymr-reply{margin-top:12px;padding:10px 14px;background:var(--ymr-reply-bg);border-left:3px solid var(--ymr-star);border-radius:0 6px 6px 0}
.ymr-reply-head{font-size:13px;color:#555;margin-bottom:4px}
.ymr-reply-head time{color:var(--ymr-muted);margin-left:6px}
.ymr-reply-text{font-size:14px}
.ymr-disclosure{margin-top:8px;font-size:12px;color:var(--ymr-muted)}

/* 分頁 / 空狀態 */
.ymr-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 0}
.ymr-pag-info{font-size:13px;color:var(--ymr-muted)}
.ymr-pag-btns{display:flex;align-items:center;gap:10px}
.ymr-empty{text-align:center;padding:36px 12px;color:var(--ymr-muted)}
.ymr-empty .fa{font-size:40px;color:#ccc;margin-bottom:8px}
.ymr-empty p{margin:0 0 14px}
.ymr-login-hint{padding:16px 0}

/* 表單 */
.ymr-form-wrap{margin-top:22px;padding:22px;background:#fafafa;border-radius:8px}
.ymr-form-wrap[hidden]{display:none}
.ymr-form-title{margin:0 0 14px;font-size:18px;font-weight:700}
.ymr-field{margin-bottom:14px}
.ymr-field>label{display:block;font-weight:600;margin-bottom:6px;font-size:14px}
.ymr-field .form-control{width:100%;max-width:none}
.ymr-req{color:#e53935}
.ymr-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ymr-help{font-size:12px;color:var(--ymr-muted);margin-top:4px}
.ymr-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}
.ymr-rate{display:flex;align-items:center;gap:2px;flex-direction:row-reverse;justify-content:flex-end}
.ymr-rate input{position:absolute;opacity:0;width:0;height:0}
.ymr-rate label{cursor:pointer;margin:0;padding:2px;line-height:1}
.ymr-rate label .fa{font-size:34px;color:var(--ymr-star-off);transition:color .12s,transform .12s}
.ymr-rate label:hover .fa,.ymr-rate label:hover~label .fa,.ymr-rate input:checked~label .fa{color:var(--ymr-star)}
.ymr-rate label:hover .fa{transform:scale(1.1)}
.ymr-rate-text{order:-1;margin-left:10px;font-size:14px;color:var(--ymr-muted);min-width:3em}
.ymr-uploader{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.ymr-upload-btn{display:inline-flex;align-items:center;gap:6px;width:88px;height:88px;justify-content:center;flex-direction:column;border:1px dashed #bbb;border-radius:8px;cursor:pointer;font-size:12px;color:#555;background:#fff;margin:0;font-weight:400}
.ymr-upload-btn .fa{font-size:22px}
.ymr-upload-btn input{display:none}
.ymr-previews{display:flex;gap:10px;flex-wrap:wrap}
.ymr-preview{position:relative;width:88px;height:88px;border-radius:8px;overflow:hidden;background:#eee}
.ymr-preview img{width:100%;height:100%;object-fit:cover;display:block}
.ymr-preview .ymr-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:22px;text-align:center;cursor:pointer;padding:0}
.ymr-check{display:flex;align-items:flex-start;gap:8px;font-weight:400;font-size:14px;cursor:pointer}
.ymr-check input{margin:5px 0 0}
.ymr-honest{font-size:12px;color:var(--ymr-muted);margin:4px 0 14px}
.ymr-actions{display:flex;gap:10px;flex-wrap:wrap}
.ymr-alert{margin-top:12px;padding:10px 14px;border-radius:6px;font-size:14px}
.ymr-alert[hidden]{display:none}
.ymr-alert.is-error{background:#fdecea;color:#b71c1c}
.ymr-alert.is-success{background:var(--ymr-ok-bg);color:var(--ymr-ok)}
.ymr-alert.is-warning{background:#fff8e1;color:#8d6e00}

/* 商品頁上方星列錨點 */
.ymr-trust{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#555;margin:6px 0 0;text-decoration:none}
.ymr-trust .ymr-stars .fa{font-size:13px}
.ymr-trust:hover{text-decoration:underline}

/* 手機 */
@media (max-width:767px){
  .ym-reviews{margin-top:28px;font-size:14px}
  .ymr-title{font-size:19px}
  .ymr-summary{grid-template-columns:1fr;gap:12px}
  .ymr-avg{display:flex;align-items:baseline;gap:10px;justify-content:flex-start;flex-wrap:wrap;text-align:left}
  .ymr-avg-num{font-size:36px}
  .ymr-dist{max-width:none}
  .ymr-wall-item{flex-basis:72px;width:72px;height:72px}
  .ymr-toolbar{align-items:flex-start;flex-direction:column}
  .ymr-date{margin-left:0;width:100%}
  .ymr-row{grid-template-columns:1fr}
  .ymr-form-wrap{padding:16px;margin-left:-15px;margin-right:-15px;border-radius:0}
  .ymr-rate label .fa{font-size:40px}
  .ymr-rate label{padding:2px 3px}
  .ymr-actions .btn{flex:1}
  .ymr-images a,.ymr-preview,.ymr-upload-btn{width:72px;height:72px}
  .ymr-trust{display:none} /* 手機版 J3 購買列是 sticky，信任列塞進去會撐高 */
}