/* ── CSS 變數 ────────────────────────────────────────── */
:root {
    --brand-red:        #c8102e;    /* 大氣經典赤芝紅 */
    --brand-red-dark:   #8a0c20;   /* 奢華暗紅 */
    --brand-gold:       #dc3545;    /* 亮麗寶石紅 */
    --brand-gold-light: #fff5f6;   /* 極柔粉櫻紅 */
    /*--bg-neutral:       #e6f1ed;*/    /* 淡色星巴克綠 */
    /*--bg-neutral:       #FFFACD;*/
    /*--bg-neutral:       #FFF8D7;*/
    /*--bg-neutral:       #fefce8;*/   /*最接近的極淺鵝黃/奶油白，明度與 #fff5f5 一致*/
    /*--bg-neutral:       #fffde7;*/   /*柔和奶油黃，彩度稍微豐富一些*/
    /*--bg-neutral:       #fffbeb;*/     /*柔和奶油黃，彩度稍微豐富一些*/
    --bg-neutral:       #fefce8;
    
    --text-dark:        #2c2a29;    /* 溫和深炭灰 */
    --text-muted:       #7c7774;    /* 優雅灰 */
}

/* ── Body ────────────────────────────────────────────── */
html {
    overflow-x: hidden;
}
body {
    font-family: 'Inter', 'Noto Sans TC', sans-serif;
    background-color: var(--bg-neutral);
    color: var(--text-dark);
}

/* ── Navbar ──────────────────────────────────────────── */
.shopping-navbar {
    /*background-color: rgba(230, 241, 237, 0.95) !important;*/
    background-color: var(--bg-neutral);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(200, 16, 46, 0.2);
}

/* ── Custom Buttons ──────────────────────────────────── */
.btn-brand {
    background-color: var(--brand-red);
    border: 1px solid var(--brand-red);    
    color: #fff;
    transition: all .3s ease;
}
.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active {
    background-color: var(--brand-red-dark);
    border-color: var(--brand-red-dark);    
    color: #fff;
}
.btn-outline-brand {
    color: var(--brand-red);
    border: 1px solid var(--brand-red);
    background-color: transparent;
    transition: all .3s ease;
}
.btn-outline-brand:hover,
.btn-outline-brand:focus,
.btn-outline-brand:active {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

.btn-addcart {
    /*background-color: var(--brand-red);
    border: 1px solid var(--brand-red);*/
    background-color: #906B28;
    border: 1px solid #906B28;
    color: #fff;
    transition: all .3s ease;
}
.btn-addcart:hover,
.btn-addcart:focus,
.btn-addcart:active {
    /*background-color: var(--brand-red-dark);
    border-color: var(--brand-red-dark);*/
    background-color: #62390C;
    border-color: #62390C;
    color: #fff;
}

.text-brand    { color: var(--brand-red) !important; }
.text-gold     { color: var(--brand-gold) !important; }
.bg-brand      { background-color: var(--brand-red) !important; }
.bg-gold-light { background-color: var(--brand-gold-light) !important; }
.border-gold   { border-color: var(--brand-gold) !important; }

/* ── Orderer Pill ────────────────────────────────────── */
.orderer-pill {
    background-color: var(--brand-gold-light);
    border: 1px solid var(--brand-gold);
    border-radius: 30px;
    padding: .3rem .85rem;
    white-space: nowrap;
}

/* ── Category Nav Pills ──────────────────────────────── */
.nav-pills .nav-link {
    color: var(--text-dark);
    border: 1px solid rgba(220, 53, 69, 0.3);
    background-color: transparent;
    margin: 0 4px;
    border-radius: 30px;
    padding: 8px 18px;
    font-weight: 500;
    transition: all .3s ease;
    white-space: nowrap;
}
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
    background-color: var(--brand-red);
    color: #fff !important;
    border-color: var(--brand-red);
}

/* ── Product Image Wrapper ───────────────────────────── */
.product-img-wrapper {
    background-color: #ffffff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-img-wrapper img {
    height: 180px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform .5s ease;
}
.product-card:hover .product-img-wrapper img {
    transform: scale(1.05);
}
.product-img-placeholder {
    height: 180px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

/* ── Wishlist Button (absolute on product-card) ───────── */
.wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(220, 53, 69, 0.2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all .2s ease;
    color: var(--text-muted);
    font-size: 1rem;
    padding: 0;
    line-height: 1;
}
.wishlist-btn:hover {
    background: #fff;
    transform: scale(1.1);
    color: var(--brand-red);
}
.wishlist-btn.active {
    background-color: var(--brand-red);
    color: #fff !important;
    border-color: var(--brand-red);
}

/* ── Product Card ────────────────────────────────────── */
.product-card {
    /*background: #f2f8f5;*/
    background-color: var(--bg-neutral);
    border: 1px solid rgba(220, 53, 69, 0.15) !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(200, 16, 46, 0.12);
    border-color: var(--brand-red) !important;
}

/* ── PV Badge ────────────────────────────────────────── */
.badge-pv {
    background-color: var(--brand-gold);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
}

/* ── Price styles ────────────────────────────────────── */
.price-retail {
    color: var(--text-muted);
    font-size: .85rem;
}
.price-member {
    /*color: var(--brand-red);*/
    color: #306546;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ── Product Name ────────────────────────────────────── */
.product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

/* ── Product Detail Image ────────────────────────────── */
.product-detail-img {
    object-fit: cover;
    max-height: 480px;
    width: 100%;
}
.product-detail-img-placeholder {
    min-height: 300px;
}

/* ── Banner ──────────────────────────────────────────── */
.banner-img {
    max-height: 420px;
    object-fit: cover;
    width: 100%;
}

/* ── Price row (三欄 flex-nowrap，375px 不折行) ─────── */
.d-flex.flex-nowrap {
    flex-wrap: nowrap !important;
}
@media (max-width: 400px) {
    .d-flex.flex-nowrap.gap-3 { gap: .75rem !important; }
}

/* ── Floating Cart Button (圓形) ─────────────────────── */
.btn-floating-cart-wrapper {
    z-index: 1050;
}
.btn-floating-cart {
    background-color: var(--brand-red);
    color: #ffffff;
    border: 2px solid #ffffff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(200, 16, 46, 0.4);
    transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    text-decoration: none;
}
.btn-floating-cart:hover {
    background-color: var(--brand-red-dark);
    transform: scale(1.1);
    color: #ffffff;
}

/* ── Back to Top Button ─────────────────────────────── */
.btn-floating-back-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: var(--brand-red);
    color: #ffffff;
    border: 2px solid #ffffff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(200, 16, 46, 0.4);
    transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    visibility: hidden;
    z-index: 1030;
    cursor: pointer;
    font-size: 1.25rem;
}
.btn-floating-back-to-top.show {
    opacity: 1;
    visibility: visible;
}
.btn-floating-back-to-top:hover {
    transform: scale(1.1);
    color: #ffffff;
}

/* ── Custom Footer ───────────────────────────────────── */
.custom-footer {
    /*background-color: #dbebe4 !important;*/
    background-color: var(--bg-neutral);
    border-top: 2px solid var(--brand-red) !important;
}

/* ── Member Badge ────────────────────────────────────── */
.member-badge {
    font-size: .75rem;
    background: linear-gradient(135deg, #ff4d6d 0%, #c8102e 100%);
    color: white;
    border-radius: 4px;
    padding: 2px 8px;
}

/* ── Responsive tweaks ───────────────────────────────── */
@media (max-width: 575px) {
    .product-img-wrapper img { height: 140px; }
    .orderer-pill { display: none !important; }
}

/* ── Product Detail Tabs ─────────────────────────────── */
.detail-tab {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.detail-tab::-webkit-scrollbar { display: none; }
.detail-tab .nav-item {
    flex: 1 1 auto;
    text-align: center;
}
.detail-tab .nav-link {
    color: var(--text-dark);
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    padding: 10px 8px;
    font-size: 0.9rem;
    width: 100%;
    white-space: nowrap;
    background-color: transparent !important;
}
@media (min-width: 576px) {
    .detail-tab .nav-link { padding: 12px 24px; font-size: 1rem; }
}
.detail-tab .nav-link.active {
    color: var(--brand-red) !important;
    border-bottom: 2px solid var(--brand-red);
}

/* ── Quick Order List ────────────────────────────────── */
.quick-order-header {
    background-color: var(--brand-red);
    color: white;
    border-radius: 8px 8px 0 0;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.9rem;
}
.quick-order-row {
    background-color: #ffffff;
    border: 1px solid rgba(220, 53, 69, 0.15);
    border-top: none;
    padding: 12px 16px;
    transition: all 0.2s ease;
}
.quick-order-row:hover {
    /*background-color: #f2f8f5;*/
    background-color: var(--bg-neutral);
}
.quick-order-row:last-child {
    border-radius: 0 0 8px 8px;
    border-bottom: 1px solid rgba(220, 53, 69, 0.15);
}
.quick-order-row.in-cart {
    border-left: 4px solid var(--brand-red);
    background-color: #fff9fa;
}
.wishlist-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #dee2e6;
    transition: all 0.2s;
    line-height: 1;
}
.wishlist-toggle:hover { color: var(--brand-red-dark); transform: scale(1.1); }
.wishlist-toggle.active { color: var(--brand-red); }
.qty-ctrl-btn {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: var(--text-dark);
    width: 32px;
    padding: 0;
    line-height: 1;
}
.qty-ctrl-btn:hover { background-color: #e9ecef; }
.qty-ctrl-input {
    width: 41px;
    text-align: center;
    border-left: 0;
    border-right: 0;
    background-color: #ffffff !important;
    font-weight: bold;
}
.price-qty-container { width: 100%; gap: 4px; }
.price-col { flex: 1 1 auto; white-space: nowrap; }
.pv-col    { flex: 1 1 auto; white-space: nowrap; }
.qty-col   { flex: 0 0 auto; }
@media (min-width: 992px) {
    .price-qty-container { width: auto; gap: 0; justify-content: flex-end; }
    .price-col { width: 120px; flex: none; }
    .pv-col    { width: 100px; flex: none; }
    .qty-col   { width: 160px; flex: none; }
}