/* =========================
   全域防止橫向捲動
   ========================= */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ✅ 只改顏色：讓 details.css 吃全站主題 var() */


/* =========================
   商品詳情版面（桌機 1920 基準）
   ========================= */

.pd-wrap {
    display: grid;
    grid-template-columns: 520px 1fr; /* 左圖右文 */
    gap: 28px;
    align-items: flex-start;
}

.pd-left {
    position: relative;
}

.pd-right {
    background: var(--pd-card-bg);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    padding: 18px;
}

/* 標題與簡介 */
.pd-title {
    font-size: 22px;
    margin: 0 0 8px;
    color: var(--pd-accent);
}

/* 商品敘述 */
.pd-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color, #555);
    margin: 0 0 8px;
    white-space: normal; /* 我們用 <br> 自己換行 */
    text-align: left;
    text-indent: 0;
    padding-left: 0;
}

    .pd-desc p {
        margin: 0;
        text-align: left;
        text-indent: 0;
        padding-left: 0;
    }

/* 評價 / 已售出 */
.pd-meta {
    display: flex;
    align-items: center;
    color: var(--muted);
    color: var(--pd-muted);
    gap: 10px;
    margin-bottom: 8px;
}

    .pd-meta .stars .s {
        color: #f59e0b; /* 星星維持橘色 */
        margin-left: 4px;
    }

    .pd-meta .sep {
        color: var(--border-soft);
        color: var(--pd-muted-2);
    }

/* 價格區 */
.pd-price {
    background: #fff5f5; /* fallback */
    background: color-mix(in srgb, var(--pd-accent) 8%, var(--surface));
    border-radius: 8px;
    padding: 14px 16px;
    margin: 10px 0 14px;
    border: 1px solid #ffe1e1; /* fallback */
    border-color: color-mix(in srgb, var(--pd-accent) 18%, var(--surface));
}

    .pd-price .p-now {
        color: var(--pd-accent);
        font-size: 28px;
        font-weight: 700;
    }

    .pd-price .p-old {
        text-decoration: line-through;
        color: #999;
        margin-left: 8px;
    }

/* 保障條列（如果有用到） */
.pd-protect {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 0;
    margin: 0 0 14px;
    list-style: none;
    color: var(--pd-muted);
}

/* 規格區 */
.opt-block {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

    .opt-block .label {
        width: 60px;
        color: var(--pd-muted);
        flex: 0 0 auto;
        line-height: 32px;
    }

.opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.opt {
    border: 1px solid var(--border-soft);
    border-color: var(--pd-border);
    border-radius: 6px;
    padding: 6px 10px;
    background: var(--pd-card-bg);
    cursor: pointer;
    color: var(--text-color, var(--text));
}

    .opt.on {
        border-color: var(--pd-accent);
        box-shadow: 0 0 0 2px #ffd7dc inset; /* fallback */
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--pd-accent) 20%, var(--surface)) inset;
    }

    .opt:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

/* 庫存 / 提示 */
.pd-hint {
    min-height: 24px;
    color: var(--text-color, var(--text));
}

    .pd-hint .warn {
        color: var(--pd-accent);
    }

/* 購買區 */
.pd-buy {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
}

.qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--pd-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--pd-card-bg);
}

    .qty input {
        width: 64px;
        height: 40px;
        border: 0;
        text-align: center;
        background: transparent;
        color: var(--text-color, #111);
    }

.q-btn {
    width: 40px;
    height: 40px;
    border: 0;
    background: color-mix(in srgb, var(--pd-primary) 10%, var(--surface));
    color: var(--text-color, var(--text));
}

.btn-add {
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--pd-accent);
    color: var(--pd-accent);
    background: var(--pd-card-bg);
    border-radius: 8px;
}

    .btn-add[disabled] {
        opacity: .6;
        cursor: not-allowed;
    }

.btn-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--pd-accent);
    color: var(--header-text, var(--surface));
    text-decoration: none;
}

/* 回到首頁按鈕 */
.btn-back-home {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--pd-border);
    background: var(--pd-card-bg);
    color: var(--text-color, var(--text));
    text-decoration: none;
    font-size: 14px;
}

    .btn-back-home:hover {
        background: color-mix(in srgb, var(--pd-primary) 8%, var(--pd-card-bg));
        border-color: color-mix(in srgb, var(--pd-primary) 18%, var(--surface));
        color: var(--text-color, #000);
    }

/* =========================
   圖庫區
   ========================= */
.gallery {
    position: relative;
}

#g-main {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    background: var(--pd-card-bg);
}

.gallery .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--overlay);
    color: var(--surface);
    font-size: 22px;
}

    .gallery .nav.prev {
        left: 8px;
    }

    .gallery .nav.next {
        right: 8px;
    }

.thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
}

    .thumb.active {
        border-color: var(--pd-primary);
    }

/* =========================
   賣家卡片
   ========================= */
.seller-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--pd-border);
    border-radius: 8px;
    padding: 12px;
    margin-top: 16px;
    background: var(--pd-card-bg);
}

    .seller-card .logo {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid var(--pd-border);
    }

    .seller-card .name {
        font-weight: 700;
        color: var(--pd-accent);
    }

    .seller-card .stats {
        color: var(--pd-muted);
        font-size: 12px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .seller-card .actions {
        margin-left: auto;
    }

/* =========================
   RWD：iPad Pro（≤1024）
   ========================= */
@media (max-width: 1024px) {
    .pd-wrap {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pd-left,
    .pd-right {
        max-width: 100%;
    }

    .pd-right {
        padding: 16px;
    }

    .gallery {
        max-width: 640px;
        margin: 0 auto;
    }

    .seller-card {
        flex-direction: column;
        align-items: flex-start;
    }

        .seller-card .actions {
            margin-left: 0;
            width: 100%;
        }
}

/* =========================
   RWD：iPhone 14 Pro Max（≤430）
   ========================= */
@media (max-width: 430px) {
    .pd-right {
        padding: 12px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .pd-title {
        font-size: 18px;
    }

    .pd-meta {
        flex-wrap: wrap;
        font-size: 13px;
    }

    .pd-price .p-now {
        font-size: 22px;
    }

    .pd-buy {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .qty {
        width: 100%;
        justify-content: center;
    }

    .btn-add,
    .btn-buy {
        width: 100%;
        justify-content: center;
    }

    .thumb {
        width: 60px;
        height: 60px;
    }

    .seller-card {
        gap: 8px;
    }

        .seller-card .actions {
            margin-left: 0;
            width: 100%;
        }
}
/* ===== 商品詳情頁：改成吃全站 var 配色（放在 details.css 最下面覆蓋） ===== */
.pd-wrap{
  --pd-primary: var(--primary-color, var(--brand));
  --pd-secondary: var(--secondary-color, var(--accent));
  --pd-surface: var(--product-bg, var(--bg));
  --pd-text: var(--text-color, var(--text));
  --pd-border: rgba(0,0,0,.08);
  --pd-shadow: 0 10px 28px rgba(15,23,42,.08);
}

/* 左右兩塊統一成同一張卡的感覺 */
.pd-left .gallery,
.pd-right{
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: 12px;
  box-shadow: var(--pd-shadow);
}

/* 左圖那塊現在是白底太突兀 → 給 padding + 同底色 */
.pd-left .gallery{ padding: 14px; }
#g-main{
  border: 0;
  border-radius: 10px;
  background: var(--surface);
}

/* 縮圖：把 #0d6efd（Bootstrap 藍）換成主色 */
.thumb{ border: 2px solid rgba(0,0,0,.10); }
.thumb.active{
  border-color: var(--pd-primary);
  box-shadow: 0 0 0 2px rgba(78,144,158,.16);
}

/* 標題/文字 */
.pd-title{ color: var(--pd-secondary); }
.pd-desc{ color: rgba(55,65,81,.85); }
.pd-meta{ color: rgba(55,65,81,.70); }

/* 價格區：不要那麼「大紅」，改成柔一點的紅棕系 */
.pd-price{
  background: rgba(154,55,52,.07);
  border: 1px solid rgba(154,55,52,.16);
}
.pd-price .p-now{ color: var(--pd-secondary); }

/* 規格選擇：用 secondary（跟價錢/主 CTA 同系） */
.opt.on{
  border-color: var(--pd-secondary);
  box-shadow: 0 0 0 2px rgba(154,55,52,.18) inset;
}

/* 兩顆購買按鈕：跟全站一致、也別太刺眼 */
.btn-add{
  border-color: var(--pd-secondary);
  color: var(--pd-secondary);
}
.btn-add:hover{ background: rgba(154,55,52,.06); }

.btn-buy{ background: var(--pd-secondary); }
.btn-buy:hover{ filter: brightness(.92); }

/* 賣家卡片那顆「查看賣場」會冒出 Bootstrap 藍 → 限定只在詳情頁改掉 */
.pd-right .btn-outline-primary{
  border-color: var(--pd-primary);
  color: var(--pd-primary);
}
.pd-right .btn-outline-primary:hover{
  background: var(--pd-primary);
  color: var(--header-text, var(--surface));
}
/* ===== 商品詳情頁：改成吃全站 var 配色（放在 details.css 最下面覆蓋） ===== */
.pd-wrap{
  --pd-primary: var(--primary-color, var(--brand));
  --pd-secondary: var(--secondary-color, var(--accent));
  --pd-surface: var(--product-bg, var(--bg));
  --pd-text: var(--text-color, var(--text));
  --pd-border: rgba(0,0,0,.08);
  --pd-shadow: 0 10px 28px rgba(15,23,42,.08);
}

/* 左右兩塊統一成同一張卡的感覺 */
.pd-left .gallery,
.pd-right{
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: 12px;
  box-shadow: var(--pd-shadow);
}

/* 左圖那塊現在是白底太突兀 → 給 padding + 同底色 */
.pd-left .gallery{ padding: 14px; }
#g-main{
  border: 0;
  border-radius: 10px;
  background: var(--surface);
}

/* 縮圖：把 #0d6efd（Bootstrap 藍）換成主色 */
.thumb{ border: 2px solid rgba(0,0,0,.10); }
.thumb.active{
  border-color: var(--pd-primary);
  box-shadow: 0 0 0 2px rgba(78,144,158,.16);
}

/* 標題/文字 */
.pd-title{ color: var(--pd-secondary); }
.pd-desc{ color: rgba(55,65,81,.85); }
.pd-meta{ color: rgba(55,65,81,.70); }

/* 價格區：不要那麼「大紅」，改成柔一點的紅棕系 */
.pd-price{
  background: rgba(154,55,52,.07);
  border: 1px solid rgba(154,55,52,.16);
}
.pd-price .p-now{ color: var(--pd-secondary); }

/* 規格選擇：用 secondary（跟價錢/主 CTA 同系） */
.opt.on{
  border-color: var(--pd-secondary);
  box-shadow: 0 0 0 2px rgba(154,55,52,.18) inset;
}

/* 兩顆購買按鈕：跟全站一致、也別太刺眼 */
.btn-add{
  border-color: var(--pd-secondary);
  color: var(--pd-secondary);
}
.btn-add:hover{ background: rgba(154,55,52,.06); }

.btn-buy{ background: var(--pd-secondary); }
.btn-buy:hover{ filter: brightness(.92); }

/* 賣家卡片那顆「查看賣場」會冒出 Bootstrap 藍 → 限定只在詳情頁改掉 */
.pd-right .btn-outline-primary{
  border-color: var(--pd-primary);
  color: var(--pd-primary);
}
.pd-right .btn-outline-primary:hover{
  background: var(--pd-primary);
  color: var(--header-text, var(--surface));
}
/* =========================
   商品詳情：配色改成用全站 var()
   （不動結構，只覆蓋顏色）
   ========================= */


/* 右側資訊卡 */
.pd-right {
    background: var(--product-bg);
    border-color: var(--pd-border);
}

/* 文字 */
.pd-title {
    color: var(--secondary-color);
}

.pd-desc {
    color: var(--pd-muted);
}

.pd-meta {
    color: rgba(154,55,52,.65);
}

/* 價格框：不要用舊的粉紅，改成淡 secondary */
.pd-price {
    background: var(--pd-soft);
    border-color: var(--pd-border);
}

    .pd-price .p-now {
        color: var(--secondary-color);
    }

/* 規格按鈕 */
.opt {
    border-color: var(--pd-border);
    background: rgba(248,238,222,.75);
    color: var(--secondary-color);
}

    .opt.on {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 2px rgba(154,55,52,.12) inset;
    }

/* 提示紅字（原本 #d0011b） */
.pd-hint .warn {
    color: var(--secondary-color);
}

/* 數量步進器：把那個怪怪的偏藍/偏灰拉回主題 */
.qty {
    border-color: var(--pd-border);
    background: rgba(255,255,255,.35);
}

.q-btn {
    background: var(--pd-soft2);
    color: var(--secondary-color);
}

    .q-btn:hover {
        filter: brightness(.97);
    }

/* 按鈕：加入購物車 / 直接購買 */
.btn-add {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    background: rgba(255,255,255,.35);
}

    .btn-add:hover {
        background: rgba(154,55,52,.08);
    }

.btn-buy {
    background: var(--secondary-color);
    color: var(--header-text);
}

    .btn-buy:hover {
        filter: brightness(.95);
    }

/* 縮圖選取框：把 Bootstrap 藍改成你的主色 */
.thumb.active {
    border-color: var(--primary-color);
}

/* 賣家卡片：不要一整塊死白 + 裡面還藍/紅亂跳 */
.pd-right .seller-card {
    background: rgba(255,255,255,.55);
    border-color: rgba(0,0,0,.06);
}

    .pd-right .seller-card .stats {
        color: rgba(154,55,52,.65);
    }

    /* 如果賣家卡片內用了 Bootstrap 的 text-danger / btn-outline-primary，把它收斂回主題 */
    .pd-right .seller-card .text-danger {
        color: var(--secondary-color) !important;
    }

    .pd-right .seller-card .btn-outline-primary {
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

        .pd-right .seller-card .btn-outline-primary:hover {
            background: rgba(78,144,158,.12);
        }
        /* =========================
   商品評價區：配色統一（奶茶底 + 紅棕）
   ========================= */
#product-reviews h4{
  color: var(--secondary-color);
  font-weight: 700;
}

/* 平均分那行的文字（Bootstrap text-muted） */
#product-reviews .text-muted{
  color: rgba(154,55,52,.65) !important;
}

/* 單筆評價卡片 */
#product-reviews .review-card{
  border-radius: 12px;
  border: 1px solid rgba(154,55,52,.14);
  background: rgba(255,255,255,.55);
  box-shadow: 0 8px 22px rgba(15,23,42,.05);
}

/* 評價者名字 */
#product-reviews .review-card .fw-semibold{
  color: var(--secondary-color);
}

/* 日期 */
#product-reviews .review-card .small{
  color: rgba(154,55,52,.55) !important;
}

/* 星星：空心淡、實心金色保留 */
#product-reviews .review-stars-large .star,
#product-reviews .review-stars-small .star{
  color: rgba(154,55,52,.22);
}
#product-reviews .star.filled{
  color: #f59e0b;
}

/* 評價內容文字 */
#product-reviews .review-card .card-body{
  color: rgba(154,55,52,.78);
}

/* 評價圖片縮圖 */
#product-reviews .review-img-thumb{
  border-radius: 8px;
  border: 1px solid rgba(154,55,52,.16);
  background: rgba(248,238,222,.5);
}
#product-reviews .review-img-thumb:hover{
  box-shadow: 0 6px 14px rgba(154,55,52,.10);
  transform: translateY(-1px);
  transition: .15s ease;
}
.pd-basic-meta {
    margin: 10px 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--pd-border);
    border-radius: 10px;
    background: rgba(255,255,255,.35);
    color: var(--text-color, var(--text));
    line-height: 1.9;
}

    .pd-basic-meta strong {
        color: var(--secondary-color);
    }
/* =========================================================
   Buyer product detail RWD hardening - 2026-06-02
   ========================================================= */
.pd-wrap,
.pd-left,
.pd-right,
.gallery,
.seller-card,
.similar-price-card {
    min-width: 0;
}

.pd-wrap {
    width: 100%;
}

.pd-title,
.pd-desc,
.pd-basic-meta,
.similar-price-message {
    overflow-wrap: anywhere;
}

.thumbs {
    max-width: 100%;
}

.pd-buy,
.pd-favorite-row,
.opt-block,
.opts {
    min-width: 0;
}

.opt {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

.similar-price-grid,
.similar-product-grid {
    width: 100%;
}

.similar-product-card {
    min-width: 0;
}

@media (max-width: 1200px) {
    .pd-wrap {
        grid-template-columns: minmax(360px, 46vw) minmax(0, 1fr);
        gap: 22px;
    }
}

@media (max-width: 992px) {
    .pd-wrap {
        grid-template-columns: 1fr;
    }

    .pd-left .gallery {
        max-width: 680px;
        margin: 0 auto;
    }

    .pd-right {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .pd-left .gallery,
    .pd-right {
        border-radius: 14px;
    }

    .pd-meta,
    .pd-protect {
        flex-wrap: wrap;
    }

    .pd-price {
        padding: 12px 14px;
    }

    .pd-price .p-now {
        font-size: 24px;
    }

    .opt-block {
        display: block;
    }

    .opt-block .label {
        width: auto;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .thumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .thumb {
        flex: 0 0 auto;
    }

    .similar-price-grid,
    .similar-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .pd-right {
        padding: 14px;
        border-left: 1px solid var(--pd-border);
        border-right: 1px solid var(--pd-border);
        border-radius: 14px;
    }

    .pd-title {
        font-size: 1.25rem;
        line-height: 1.35;
    }

    .pd-price .p-now {
        font-size: 1.55rem;
    }

    .pd-buy {
        flex-direction: column;
        align-items: stretch;
    }

    .qty,
    .btn-add,
    .btn-buy,
    .favorite-btn--detail {
        width: 100%;
        justify-content: center;
    }

    .pd-favorite-row {
        display: block;
    }

    .gallery .nav {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .similar-price-card .card-body {
        padding: 14px;
    }

    .similar-price-grid,
    .similar-product-grid {
        gap: 10px;
    }

    .similar-price-stat {
        padding: 10px;
    }
}

@media (max-width: 380px) {
    .similar-price-grid,
    .similar-product-grid {
        grid-template-columns: 1fr;
    }
}