/* ===================================================================
   ezbuy3c 軟體優先改造 — 疊加樣式 (載入於 style.css 之後)
   =================================================================== */

/* ---- 頂部公告列 ---- */
.topbar {
    background: linear-gradient(90deg, var(--secondary), var(--primary));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 0.4rem 1rem;
}

/* ===================================================================
   易享數位｜全站深色科技主題（前台覆寫層）
   =================================================================== */
:root {
    color-scheme: dark;
    --page-bg:#0a0d17; --surface:#11162a; --surface-raised:#1a2138;
    --surface-soft:#141b30; --line:rgba(255,255,255,.08);
    --line-strong:rgba(107,131,242,.38); --text-primary:#e8ecf5;
    --text-secondary:#a8b5c9; --text-muted:#7f8da6;
    --gray-50:#0d1221; --gray-100:#1a2138; --gray-200:#27314d;
    --gray-300:#46516a; --gray-400:#7f8da6; --gray-500:#94a3b8;
    --gray-600:#c3ccdc; --danger:#fb5b72;
    --shadow-sm:0 1px 2px rgba(0,0,0,.28);
    --shadow-md:0 14px 36px rgba(0,0,0,.24);
    --shadow-lg:0 18px 42px rgba(0,0,0,.32);
    --shadow-xl:0 24px 56px rgba(0,0,0,.4);
}
html{background:var(--page-bg)}
body{color:var(--text-primary);background:radial-gradient(circle at 12% 8%,rgba(67,97,238,.08),transparent 30rem),radial-gradient(circle at 92% 36%,rgba(34,211,238,.04),transparent 28rem),var(--page-bg)}
.main-content{background:transparent}.main-content>.container{position:relative}
p,li,dd{color:var(--text-secondary)}h1,h2,h3,h4,h5,h6,dt,strong,b{color:var(--text-primary)}
a{color:#8ea4ff}a:hover{color:#22d3ee}.text-dark,.text-body{color:var(--text-primary)!important}
.text-muted,.text-secondary{color:var(--text-muted)!important}.bg-white{background-color:var(--surface-raised)!important}.bg-light{background-color:var(--surface-soft)!important}
.border,.border-top,.border-bottom,.border-start,.border-end{border-color:var(--line)!important}hr{border-color:var(--line);opacity:1}
.topbar{background:linear-gradient(90deg,#243cb9,#4361ee 55%,#087d98);border-bottom:1px solid rgba(255,255,255,.12)}
.navbar{background:rgba(10,13,23,.94)!important}.navbar .dropdown-menu{background:rgba(17,22,42,.98);border:1px solid var(--line);box-shadow:var(--shadow-xl)}
.navbar .dropdown-item{color:var(--text-secondary)}.navbar .dropdown-item:hover,.navbar .dropdown-item:focus{background:var(--surface-raised);color:#fff}.dropdown-divider{border-color:var(--line)}
.hero-section{background:linear-gradient(135deg,#080b14 0%,#11172d 52%,#202066 100%)}.hero-section::after{background:linear-gradient(to top,var(--page-bg),transparent)}
.page-header{margin-bottom:0;background:linear-gradient(115deg,#0c1120,#141b31 58%,#17265a);border-bottom:1px solid var(--line)}
.page-header::after{content:'';position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.55),transparent)}
.section-title{color:var(--text-primary)}.section-title::after{background:linear-gradient(90deg,var(--primary),#22d3ee);width:52px}
.card,.brand-card,.service-card,.category-card,.contact-card,.search-card,.sidebar-card,.accordion-item{background:linear-gradient(145deg,rgba(20,27,48,.96),rgba(15,20,37,.98));border:1px solid var(--line)!important;color:var(--text-primary);box-shadow:var(--shadow-sm)}
.card:hover,.brand-card:hover,.service-card:hover,.category-card:hover,.contact-card:hover{border-color:var(--line-strong)!important}
.brand-card:hover,.service-card:hover,.category-card:hover,.product-card:hover,.contact-card:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(0,0,0,.34),0 0 0 1px rgba(67,97,238,.18)}
.card-header{color:var(--text-primary);background:var(--surface-raised);border-bottom:1px solid var(--line)}.card-footer{background:rgba(10,13,23,.32);border-top-color:var(--line)}.card-body{color:var(--text-secondary)}
.brand-card>img,.product-card .card-img-top,.product-detail-image,.cart-item-image{background:#0d1221}.brand-card-body h5,.service-card h5,.category-card h6{color:var(--text-primary)}
.brand-card-body p,.service-card p{color:var(--text-muted)}.brand-card-cta,.service-cta,.product-card .product-category{color:#65dff1}.brand-card-count{background:rgba(5,8,16,.86);border:1px solid var(--line)}
.product-card{overflow:hidden}.product-card::after{content:'';position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(180deg,var(--primary),#22d3ee);opacity:0;transition:opacity .25s ease;pointer-events:none}.product-card:hover::after{opacity:1}
.price-sale{color:#ff6b81}.price-normal{color:#f4f7ff}.price-original{color:var(--text-muted)}.badge-sale,.bg-danger{background:#e93f5c!important}.product-detail-card{background:#0d1221}
.assurance-band,.trust-section,.hardware-strip{background:linear-gradient(135deg,#10162a,#151d34);border:1px solid var(--line)}
.assurance-ico.ai-1,.trust-icon-shield{background:rgba(16,185,129,.14);color:#45e6aa}.assurance-ico.ai-2{background:rgba(236,28,36,.14);color:#ff6670}
.assurance-ico.ai-3,.trust-icon-headset{background:rgba(0,120,212,.17);color:#50b7ff}.assurance-ico.ai-4,.trust-icon-bolt{background:rgba(245,158,11,.14);color:#fbc052}.trust-icon-truck{background:rgba(125,42,232,.16);color:#b585ff}
.cta-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sidebar-card .card-header{background:linear-gradient(120deg,#172044,#263b91)}.sidebar-card .list-group-item{color:var(--text-secondary);background:transparent;border-bottom:1px solid rgba(255,255,255,.045)}
.sidebar-card .list-group-item:hover{background:var(--surface-raised);color:#fff}.sidebar-card .list-group-item.active{color:#fff;background:linear-gradient(90deg,rgba(67,97,238,.95),rgba(36,74,183,.88))}.list-group-item{color:var(--text-secondary);background:var(--surface);border-color:var(--line)}
.form-label{color:#bdc8da}.form-control,.form-select,.input-group-text,textarea{color:var(--text-primary);background-color:#0d1324;border-color:#2a3552}.form-control::placeholder,textarea::placeholder{color:#68758e;opacity:1}
.form-control:focus,.form-select:focus{color:#fff;background:#10172a;border-color:#6b83f2;box-shadow:0 0 0 3px rgba(67,97,238,.2)}.form-control:disabled,.form-select:disabled,.form-control[readonly]{background:#171d2f;color:#8d99ad}.form-select{color-scheme:dark}
.form-check-input{background-color:#0d1324;border-color:#52617e}.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}.input-group-text{color:var(--text-muted)}
.btn-outline-secondary{color:#bdc8da;border-color:#3a4867}.btn-outline-secondary:hover{color:#fff;background:#273450;border-color:#52698f}.btn-outline-primary{color:#8fa4ff;border-color:#5d76e7}.btn-light{color:var(--text-primary);background:var(--surface-raised);border-color:var(--line)}
.table{--bs-table-bg:transparent;--bs-table-color:var(--text-secondary);--bs-table-border-color:var(--line);color:var(--text-secondary)}.table>:not(caption)>*>*{background:transparent;color:inherit;border-color:var(--line)}.table thead th{color:#dce4f2;background:rgba(255,255,255,.025)}.table-hover>tbody>tr:hover>*{--bs-table-bg-state:rgba(67,97,238,.08);color:#fff}
.accordion-button{color:var(--text-primary);background:var(--surface)}.accordion-button:not(.collapsed){color:#a9b9ff;background:var(--surface-raised)}.accordion-button::after{filter:invert(1) grayscale(1) brightness(1.7)}.accordion-body{color:var(--text-secondary);background:rgba(10,13,23,.32);border-top:1px solid var(--line)}
.alert{border:1px solid var(--line)}.alert-info{color:#a9ddff;background:rgba(14,116,179,.15)}.alert-warning{color:#f7d58a;background:rgba(180,113,16,.16)}.alert-success{color:#9ce9c8;background:rgba(16,185,129,.14)}.alert-danger{color:#ffadb8;background:rgba(239,68,68,.14)}
.breadcrumb-item,.breadcrumb-item.active{color:var(--text-muted)}.breadcrumb-item+.breadcrumb-item::before{color:#56627a}
.pagination{--bs-pagination-bg:var(--surface);--bs-pagination-border-color:var(--line);--bs-pagination-color:#a9b9ff;--bs-pagination-hover-bg:var(--surface-raised);--bs-pagination-hover-border-color:#5066c5;--bs-pagination-hover-color:#fff;--bs-pagination-disabled-bg:#0d1220;--bs-pagination-disabled-border-color:var(--line);--bs-pagination-disabled-color:#4d5870}.page-item.active .page-link{background:var(--primary);border-color:var(--primary)}
.modal-content,.offcanvas{color:var(--text-primary);background:var(--surface);border:1px solid var(--line)}.modal-header,.modal-footer{border-color:var(--line)}.btn-close{filter:invert(1) grayscale(1) brightness(1.8)}.toast{color:var(--text-primary);background:rgba(17,22,42,.96);border-color:var(--line)}
.status-pending{background:rgba(245,158,11,.16);color:#fbc55f}.status-confirming{background:rgba(59,130,246,.16);color:#86b8ff}.status-paid{background:rgba(16,185,129,.15);color:#63e6b3}.status-processing{background:rgba(139,92,246,.16);color:#bda0ff}.status-completed{background:rgba(148,163,184,.13);color:#c4cede}.status-cancelled{background:rgba(239,68,68,.16);color:#ff8797}
.contact-icon-line{background:rgba(6,199,85,.13);color:#3ee481}.contact-icon-email{background:rgba(67,97,238,.16);color:#8ea4ff}.contact-icon-phone{background:rgba(245,158,11,.14);color:#fbc052}.footer{background:#080b13!important}.cart-float-btn,.ezchat-launcher{border:1px solid rgba(255,255,255,.16)}
@media(max-width:991px){.navbar-collapse{padding:.75rem;margin-top:.55rem;background:#11162a;border:1px solid var(--line);border-radius:var(--radius-md)}.navbar .dropdown-menu{background:#0d1221;border:1px solid var(--line)}}
@media(max-width:767.98px){.container.py-5{padding-top:2.5rem!important;padding-bottom:2.5rem!important}.page-header{padding:2rem 0}.card-body.p-4,.card-body.p-md-5{padding:1.25rem!important}.product-card .card-body{padding:.9rem}.product-card .card-img-top{height:155px}.search-card .btn{padding-left:.8rem!important;padding-right:.8rem!important}.table-responsive{border:1px solid var(--line);border-radius:var(--radius-md)}}
.topbar i { opacity: 0.95; }

/* ---- 導覽下拉選單（深色 navbar 上的白色選單卡） ---- */
.navbar .dropdown-menu {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    margin-top: 0.4rem;
    min-width: 240px;
    animation: fadeInUp 0.18s ease-out both;
}
.navbar .dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--text-secondary);
    transition: var(--transition);
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: var(--gray-50);
    color: var(--primary);
    transform: translateX(3px);
}
.navbar .dropdown-menu .dropdown-item i { width: 1.2rem; }

/* 導覽「線上客服」與「註冊」 */
.nav-chat-link { color: #a9e5c8 !important; }
.nav-chat-link:hover { color: #fff !important; background: rgba(6,199,85,0.18) !important; }
.btn-nav-register {
    background: var(--primary);
    color: #fff !important;
    border-radius: 50px;
    padding: 0.4rem 1.1rem !important;
    margin-left: 0.3rem;
}
.btn-nav-register:hover { background: var(--primary-dark); color:#fff !important; }

/* 手機版導覽列上一直看得見的登入入口（header.ejs，桌面版以 d-lg-none 收起）。
   ⛔ 存在的理由:登入/註冊原本只在漢堡選單裡,而客人不會想到要去點三條線。
   ⭐ 用外框而不是實心:實心會跟 Hero 上的主要行動鈕（立即選購軟體）搶注意力,
      而在首頁上「買東西」才是主要動作。 */
.nav-mobile-auth {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 50px;
    padding: 0.32rem 0.8rem !important;
    font-size: 0.85rem;
    white-space: nowrap;
    line-height: 1.2;
}
.nav-mobile-auth:hover,
.nav-mobile-auth:focus { background: rgba(255,255,255,0.14); color: #fff !important; }

/* ---- Hero 微調（軟體版） ---- */
.hero-software h1 { font-size: 3rem; }
.hero-software .lead { max-width: 560px; }

/* Hero 品牌拼貼 2x2 */
.hero-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 420px;
    margin-left: auto;
}
.hero-collage img {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: 0 14px 34px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    transition: var(--transition);
}
.hero-collage img:nth-child(1) { transform: translateY(-12px) rotate(-2deg); }
.hero-collage img:nth-child(2) { transform: translateY(10px) rotate(2deg); }
.hero-collage img:nth-child(3) { transform: translateY(-4px) rotate(1.5deg); }
.hero-collage img:nth-child(4) { transform: translateY(14px) rotate(-1.5deg); }
.hero-collage img:hover { transform: translateY(-4px) scale(1.03) rotate(0); box-shadow: 0 20px 46px rgba(0,0,0,0.45); z-index: 2; }

/* ---- 品牌軟體牆 ---- */
.brand-card {
    display: block;
    position: relative;
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none !important;
    transition: var(--transition);
    height: 100%;
}
.brand-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}
.brand-card > img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
.brand-card-body { padding: 1rem 1.15rem 1.15rem; }
.brand-card-body h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem;
}
.brand-card-body p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 0.6rem;
}
.brand-card-cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    transition: var(--transition);
}
.brand-card:hover .brand-card-cta { letter-spacing: 0.3px; }
.brand-card-cta i { transition: var(--transition); }
.brand-card:hover .brand-card-cta i { transform: translateX(4px); }
.brand-card-count {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(15,14,23,0.72);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.22rem 0.6rem;
    border-radius: 50px;
    backdrop-filter: blur(4px);
}

/* 數位商品徽章 */
.product-badge-digital {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    background: rgba(67,97,238,0.92);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 50px;
}
.product-badge-digital i { font-size: 0.62rem; }

/* ---- 專業服務卡 ---- */
.service-card {
    display: block;
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.35rem;
    text-decoration: none !important;
    transition: var(--transition);
    height: 100%;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}
.service-icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    transition: var(--transition);
}
.service-card:hover .service-icon { transform: scale(1.08) rotate(-4deg); }
.service-card h5 { font-size: 1.02rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.4rem; }
.service-card p {
    font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6;
    margin-bottom: 0.9rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.7em;
}
.service-cta { font-size: 0.85rem; font-weight: 600; color: var(--primary); }
.service-card:hover .service-cta i { margin-left: 3px; }

/* ---- 安心保障帶（蝦皮式，全程站內） ---- */
.assurance-band {
    background: linear-gradient(135deg, #f4f6ff, #eef2ff);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-xl);
    padding: 1.75rem 0.5rem;
}
.assurance-item { padding: 1rem 0.75rem; }
.assurance-ico {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin: 0 auto 0.75rem;
}
.assurance-ico.ai-1 { background:#dcfce7; color:#16a34a; }
.assurance-ico.ai-2 { background:#fee2f0; color:#db2777; }
.assurance-ico.ai-3 { background:#dbeafe; color:#2563eb; }
.assurance-ico.ai-4 { background:#fef3c7; color:#d97706; }
.assurance-item h6 { font-weight: 700; font-size: 0.98rem; margin-bottom: 0.25rem; color: var(--text-primary); }
.assurance-item p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

/* ---- 真實評價卡（蝦皮賣場搬過來的真實評論） ---- */
.review-card {
    height: 100%;
    background: linear-gradient(145deg, rgba(20,27,48,.96), rgba(15,20,37,.98));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.review-stars { color: #fbbf24; font-size: 0.9rem; letter-spacing: 0.1em; }
.review-comment {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.review-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}
.review-source { color: #ee4d2d; font-weight: 600; }

/* ---- 電腦硬體（次要區塊） ---- */
.hardware-strip {
    background: #fff;
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.hardware-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hw-chip {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 50px;
    color: var(--text-secondary);
    font-weight: 500; font-size: 0.9rem;
    text-decoration: none !important;
    transition: var(--transition);
}
.hw-chip:hover { background: var(--dark); color: #fff; border-color: var(--dark); transform: translateY(-2px); }
.hw-chip i { font-size: 1rem; }
.hw-chip small { background: var(--gray-200); color: var(--gray-600); border-radius: 50px; padding: 0 0.45rem; font-size: 0.72rem; font-weight: 700; }
.hw-chip:hover small { background: rgba(255,255,255,0.22); color: #fff; }

/* ---- 站內客服 CTA 帶 ---- */
.cta-band {
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-surface) 55%, var(--secondary) 100%);
    color: #fff;
    padding: 3.5rem 0;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 25% 30%, rgba(67,97,238,0.22) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(247,37,133,0.14) 0%, transparent 55%);
    pointer-events: none;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { font-weight: 900; font-size: 2rem; letter-spacing: -0.5px; margin-bottom: 0.75rem; }
.cta-band h2 span { background: linear-gradient(135deg, var(--primary-light), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.cta-band p { color: rgba(255,255,255,0.72); max-width: 620px; margin: 0 auto 1.75rem; font-size: 1.02rem; }

/* ---- 浮動鈕重排（LINE 浮鈕已移除，購物車移到右下角） ---- */
.cart-float-btn { bottom: 24px !important; }
@media (max-width: 768px) {
    .cart-float-btn { bottom: 16px !important; }
}

/* ---- RWD ---- */
@media (max-width: 991px) {
    .navbar .dropdown-menu { box-shadow: none; background: rgba(255,255,255,0.04); margin: 0.2rem 0; }
    .navbar .dropdown-item { color: rgba(255,255,255,0.8); }
    .navbar .dropdown-item:hover { background: rgba(255,255,255,0.08); color:#fff; }
    .btn-nav-register { display: inline-block; margin: 0.3rem 0; }
}
@media (max-width: 768px) {
    .hero-software h1 { font-size: 2rem; }
    .cta-band h2 { font-size: 1.5rem; }
    .assurance-item { padding: 0.9rem 0.4rem; }
    .assurance-ico { width: 48px; height: 48px; font-size: 1.25rem; }
    .brand-card-body { padding: 0.8rem 0.9rem 0.95rem; }
    .brand-card-body h5 { font-size: 0.9rem; }
}

/* Final cascade: keep legacy component rules from restoring light surfaces. */
body{color:var(--text-primary);background:var(--page-bg)}
.main-content{background:radial-gradient(circle at 12% 8%,rgba(67,97,238,.08),transparent 30rem),var(--page-bg)}
.hero-section::after{background:linear-gradient(to top,var(--page-bg),transparent)}
.brand-card,.service-card,.category-card,.contact-card,.product-card,.card,.search-card,.sidebar-card,.accordion-item{background:linear-gradient(145deg,#141b30,#0f1425);border-color:var(--line)!important;color:var(--text-primary)}
.brand-card-body h5,.service-card h5,.category-card h6,.product-card .card-title,.price-normal,.section-title{color:var(--text-primary)}
.brand-card-body p,.service-card p,.section-subtitle,.accordion-body{color:var(--text-secondary)}
.assurance-band,.trust-section,.hardware-strip{background:linear-gradient(135deg,#10162a,#151d34);border-color:var(--line)}
.navbar .dropdown-menu{background:#11162a;border:1px solid var(--line)}
.navbar .dropdown-item{color:var(--text-secondary)}.navbar .dropdown-item:hover{background:#1a2138;color:#fff}
.sidebar-card .list-group-item{background:transparent;color:var(--text-secondary);border-color:var(--line)}
.sidebar-card .list-group-item:hover{background:#1a2138;color:#fff}.sidebar-card .list-group-item.active{color:#fff;background:linear-gradient(90deg,#4361ee,#2948b7)}
.form-control,.form-select,.input-group-text,textarea{color:var(--text-primary);background:#0d1324;border-color:#2a3552}.form-control:focus,.form-select:focus{color:#fff;background:#10172a;border-color:#6b83f2}
.accordion-button{color:var(--text-primary);background:#11162a}.accordion-button:not(.collapsed){color:#a9b9ff;background:#1a2138}.accordion-body{background:rgba(10,13,23,.32)}
.product-card .card-img-top,.product-detail-image,.cart-item-image{background:#0d1221}.page-header{margin-bottom:0}

/* CDN resilience: essential Bootstrap layout primitives used by the storefront. */
.container{width:100%;margin-inline:auto;padding-inline:12px}.row{display:flex;flex-wrap:wrap;margin-inline:-12px}.row>*{width:100%;max-width:100%;padding-inline:12px}
.g-3,.gy-3{--ey-gutter-y:1rem}.g-4,.gy-4{--ey-gutter-y:1.5rem}.g-5,.gy-5{--ey-gutter-y:3rem}.g-3>*,.g-4>*,.g-5>*{margin-top:var(--ey-gutter-y)}
.col-4{flex:0 0 auto;width:33.333%}.col-6{flex:0 0 auto;width:50%}.col-12{flex:0 0 auto;width:100%}
.d-flex{display:flex!important}.d-none{display:none!important}.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.flex-grow-1{flex-grow:1!important}
.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.align-items-center{align-items:center!important}.align-items-end{align-items:flex-end!important}.align-items-start{align-items:flex-start!important}
.text-center{text-align:center!important}.w-100{width:100%!important}.h-100{height:100%!important}.position-relative{position:relative!important}.overflow-hidden{overflow:hidden!important}
.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.mx-auto{margin-inline:auto!important}.ms-auto{margin-left:auto!important}.me-auto{margin-right:auto!important}
.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}
.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.py-3{padding-block:1rem!important}.py-4{padding-block:1.5rem!important}.py-5{padding-block:3rem!important}.px-4{padding-inline:1.5rem!important}
.btn{display:inline-block;padding:.5rem .9rem;border:1px solid transparent;border-radius:var(--radius-sm);font:inherit;line-height:1.5;text-align:center;text-decoration:none;cursor:pointer}.btn-sm{padding:.32rem .7rem;font-size:.875rem}.btn-lg{padding:.7rem 1.15rem;font-size:1.1rem}.btn-primary{color:#fff;background:var(--primary);border-color:var(--primary)}.btn-outline-primary{color:#8fa4ff;background:transparent;border-color:#5d76e7}.btn-success{color:#fff;background:#06c755;border-color:#06c755}
.card{display:flex;flex-direction:column}.card-body{flex:1 1 auto}.list-unstyled{padding-left:0;list-style:none}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item{display:block;padding:.7rem 1.25rem;text-decoration:none}
.form-control,.form-select{display:block;width:100%;padding:.55rem .75rem;font:inherit;line-height:1.5;border:1px solid #2a3552;border-radius:var(--radius-sm)}.input-group{display:flex;align-items:stretch;width:100%}.input-group>.form-control{min-width:0;flex:1 1 auto}.input-group-text{display:flex;align-items:center;padding:.55rem .75rem;border:1px solid #2a3552}
.navbar>.container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.navbar-brand{display:inline-flex;align-items:center;text-decoration:none}.navbar-toggler{display:block;padding:.45rem;border:0;background:transparent}.navbar-toggler-icon{display:block;width:1.35rem;height:1rem;background:linear-gradient(#aeb9cd 0 0) top/100% 2px no-repeat,linear-gradient(#aeb9cd 0 0) center/100% 2px no-repeat,linear-gradient(#aeb9cd 0 0) bottom/100% 2px no-repeat}.navbar-collapse{display:none;width:100%}.navbar-collapse.show{display:block}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin:0;list-style:none}.dropdown-menu{display:none;position:absolute;z-index:1000;list-style:none}.dropdown-menu.show{display:block}.nav-link{display:block;text-decoration:none}
.pagination{display:flex;padding-left:0;list-style:none}.page-link{display:block;padding:.45rem .72rem;text-decoration:none;border:1px solid var(--line);background:var(--surface);color:#a9b9ff}.page-item:not(:first-child) .page-link{margin-left:-1px}.page-item.disabled .page-link{pointer-events:none;opacity:.55}
.accordion-button{width:100%;padding:1rem 1.25rem;border:0;text-align:left;font:inherit}.accordion-collapse:not(.show){display:none}
.breadcrumb{display:flex;flex-wrap:wrap;padding:0;margin:0;list-style:none}.breadcrumb-item{list-style:none}.quantity-btn{background:#182039!important;color:#dce5f4!important;border-color:#34415f!important}
@media(min-width:576px){.container{max-width:540px}.col-sm-6{flex:0 0 auto;width:50%}}
@media(min-width:768px){.container{max-width:720px}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.333%}.col-md-5{flex:0 0 auto;width:41.667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.333%}.col-md-8{flex:0 0 auto;width:66.667%}.col-md-9{flex:0 0 auto;width:75%}.d-md-inline-block{display:inline-block!important}.flex-md-row{flex-direction:row!important}.mt-md-0{margin-top:0!important}.p-md-5{padding:3rem!important}}
@media(min-width:992px){.container{max-width:960px}.col-lg-2{flex:0 0 auto;width:16.667%}.col-lg-4{flex:0 0 auto;width:33.333%}.col-lg-5{flex:0 0 auto;width:41.667%}.col-lg-7{flex:0 0 auto;width:58.333%}.col-lg-8{flex:0 0 auto;width:66.667%}.col-lg-10{flex:0 0 auto;width:83.333%}.d-lg-block{display:block!important}.mb-lg-0{margin-bottom:0!important}.navbar-expand-lg{flex-wrap:nowrap}.navbar-expand-lg .navbar-toggler{display:none}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto;width:auto;padding:0;margin:0;background:transparent;border:0}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .dropdown-menu{position:absolute}.align-items-lg-center{align-items:center!important}}
@media(min-width:1200px){.container{max-width:1140px}}@media(min-width:1400px){.container{max-width:1320px}}

/* ---- 未定價商品(改版期間先建品項、後台再逐項填價)---- */
.price-tbd {
    display: inline-block;
    color: #FBBF24;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.btn-ask {
    border: 1px dashed rgba(251, 191, 36, 0.55) !important;
    color: #FBBF24 !important;
    background: rgba(251, 191, 36, 0.08) !important;
}
.btn-ask:hover {
    background: rgba(251, 191, 36, 0.18) !important;
    border-color: #FBBF24 !important;
    color: #FDE68A !important;
}

/* ---- 交付方式標示(給序號 / 給帳密 / 給下載點)---- */
.order-status.status-fulfilment {
    background: rgba(34, 211, 238, 0.12);
    color: #67E8F9;
    border: 1px solid rgba(34, 211, 238, 0.35);
}

/* ---- 品牌卡上的價格標(首頁品牌牆)---- */
.brand-card-price {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.15rem 0 0.55rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #FDE68A;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.brand-card-price i { font-size: 0.72rem; opacity: 0.9; }

/* ---- 授權綁定標示(綁硬體 / 綁帳號)---- */
.order-status.status-binding {
    background: rgba(167, 139, 250, 0.14);
    color: #C4B5FD;
    border: 1px solid rgba(167, 139, 250, 0.38);
}

/* ---- 分類側欄的子分類 ---- */
.list-group-item.sidebar-subcat {
    padding-left: 2.4rem;
    font-size: 0.9rem;
    opacity: 0.86;
}
.list-group-item.sidebar-subcat.active { opacity: 1; }

/* ===================================================================
   商品列表精緻化：資訊層級、比較標籤與科技感互動
   =================================================================== */
.page-header{position:relative;isolation:isolate;overflow:hidden}
.page-header::before{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(112,145,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(112,145,255,.055) 1px,transparent 1px),radial-gradient(circle at 84% 18%,rgba(34,211,238,.14),transparent 28%);background-size:28px 28px,28px 28px,auto;mask-image:linear-gradient(90deg,transparent 2%,#000 36%,#000 100%)}
.page-header .container{position:relative;z-index:1}.page-header h2{letter-spacing:-.04em;text-shadow:0 0 26px rgba(101,223,241,.16)}
.page-header h2 i{font-size:.72em;color:#65dff1}.page-header p{max-width:760px}

.product-card{position:relative;height:100%;border-color:rgba(116,142,222,.2)!important;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.product-card::after{width:3px;background:linear-gradient(180deg,#65dff1,#4361ee 65%,transparent)}
.product-card:hover{transform:translateY(-6px);border-color:rgba(101,223,241,.55)!important;box-shadow:0 22px 52px rgba(0,0,0,.42),0 0 24px rgba(67,97,238,.13)}
.product-card-media{position:relative;display:block;overflow:hidden;background:#0b1020;border-bottom:1px solid rgba(101,223,241,.22)}
.product-card-media::after{content:"";position:absolute;pointer-events:none;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(31,52,104,.24));box-shadow:inset 0 -1px rgba(101,223,241,.15)}
.product-card .card-img-top{display:block;width:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.product-card:hover .card-img-top{transform:scale(1.035);filter:saturate(1.08) brightness(1.04)}
.product-card .card-body{display:flex;flex-direction:column;align-items:stretch;padding:1.15rem 1.15rem 1.2rem;min-width:0}
.product-card .product-category{font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-bottom:.65rem}
.product-card .card-title{font-size:1.04rem;line-height:1.4;margin:0 0 .45rem;min-height:2.8em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.product-card .card-title a{color:#edf3ff;text-decoration:none}.product-card .card-title a:hover{color:#83e9f5}
.product-variant-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem;max-width:100%;margin:0 0 .7rem;padding:.25rem .55rem;border:1px solid rgba(167,139,250,.35);border-radius:5px;background:rgba(139,92,246,.1);color:#cfc1ff;font-size:.7rem;font-weight:700;line-height:1.25}
.product-variant-tag i{color:#a78bfa}
.product-sold-count{font-size:.72rem;color:var(--text-muted);margin:0 0 .5rem}
.product-sold-count i{color:#22c55e}
.product-meta-badges{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.38rem;min-height:4.25rem;margin-bottom:.65rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.065)}
.product-meta-badge{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;padding:.28rem .48rem;border:1px solid;border-radius:5px;font-size:.66rem;font-weight:650;line-height:1.2;white-space:nowrap}
.product-meta-badge i{font-size:.72rem}.product-meta-badge.meta-binding{color:#c4b5fd;background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.28)}
.product-meta-badge.meta-fulfilment{color:#67e8f9;background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.27)}
.product-meta-badge.meta-digital{color:#93c5fd;background:rgba(59,130,246,.09);border-color:rgba(96,165,250,.25)}
.product-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem;margin-top:auto;margin-bottom:.85rem;min-height:2rem}
.product-price .price-normal,.product-price .price-sale{font-size:1.35rem;font-weight:850;letter-spacing:-.035em;color:#8ceafa;text-shadow:0 0 18px rgba(34,211,238,.2)}
.product-price .price-sale{color:#ff7187;text-shadow:0 0 18px rgba(251,91,114,.2)}
.product-price small{font-size:.58em;font-weight:700;letter-spacing:.04em;opacity:.78}
.product-price .price-original{font-size:.78rem;color:#8491a8;text-decoration:line-through}.product-price .price-original small{font-size:1em}
.product-card .btn-add-cart{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:43px;border:1px solid rgba(112,138,255,.8)!important;border-radius:7px;background:linear-gradient(105deg,#3450d4,#4e6af1)!important;color:#fff!important;font-size:.84rem;font-weight:750;letter-spacing:.02em;box-shadow:0 8px 22px rgba(45,72,190,.22);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.product-card .btn-add-cart:hover{transform:translateY(-1px);filter:brightness(1.12);box-shadow:0 11px 28px rgba(67,97,238,.38),0 0 16px rgba(101,223,241,.11)}
.product-card:hover .btn-add-cart:not(.btn-ask){border-color:#83e9f5!important}
.product-card .btn-ask{background:rgba(251,191,36,.07)!important;border-style:solid!important;box-shadow:none}

.search-card{border-color:rgba(104,130,217,.2)!important}.search-card .card-body{padding:1rem!important}
.product-toolbar{display:flex;align-items:center;gap:.85rem}.product-search-wrap{flex:1 1 520px;min-width:0}.product-sort-wrap{flex:0 1 210px}
.search-card .input-group{filter:drop-shadow(0 6px 14px rgba(0,0,0,.13))}.search-card .input-group-text{color:#65dff1;background:#0b1121!important;border:1px solid #2b3858;border-right:0;border-radius:7px 0 0 7px}
.search-card .form-control{border-left:0;border-radius:0;background:#0b1121}.search-card .input-group .btn{border-radius:0 7px 7px 0;background:linear-gradient(105deg,#3450d4,#4e6af1)}
.product-sort-wrap{position:relative}.product-sort-wrap>i{position:absolute;z-index:2;left:.75rem;top:50%;transform:translateY(-50%);color:#65dff1;pointer-events:none}
.product-sort-wrap .form-select{padding-left:2.25rem;background-color:#0b1121;border-color:#2b3858;border-radius:7px;cursor:pointer}

.sidebar-card{overflow:hidden}.sidebar-card .card-header{padding:.9rem 1rem;background:linear-gradient(105deg,rgba(54,79,196,.65),rgba(30,44,92,.7));font-size:.9rem;font-weight:750;letter-spacing:.03em}
.sidebar-card .list-group-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.66rem .9rem;border-left:3px solid transparent;font-size:.86rem;line-height:1.25}
.sidebar-card .list-group-item>span:first-child{min-width:0}.sidebar-card .list-group-item i{color:#7f94db}.sidebar-card .list-group-item.active{border-left-color:#65dff1}.sidebar-card .list-group-item.active i{color:#fff}
.category-count{flex:0 0 auto;min-width:1.65rem;padding:.16rem .42rem;border:1px solid rgba(143,164,255,.2);border-radius:999px;background:rgba(104,128,210,.09);color:#9cadd0;font-size:.66rem;font-weight:750;text-align:center}
.sidebar-card .list-group-item.active .category-count{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:#fff}
.list-group-item.sidebar-subcat{position:relative;padding-left:1.65rem!important;background:rgba(6,10,22,.18)!important;font-size:.8rem!important;opacity:1!important}.list-group-item.sidebar-subcat::before{content:"";position:absolute;left:1rem;top:0;bottom:0;width:1px;background:rgba(101,223,241,.14)}
.sidebar-subcat-hint{display:block;padding:.35rem .9rem .45rem 2.4rem;color:#64728f;font-size:.7rem;background:rgba(5,9,18,.16)}
.fade-in-up:has(> .product-card){display:flex}.fade-in-up:has(> .product-card)>.product-card{width:100%}

@media(max-width:767.98px){
  .product-toolbar{align-items:stretch;flex-direction:column}.product-search-wrap,.product-sort-wrap{flex:1 1 auto;width:100%}
  .product-card .card-body{padding:.8rem}.product-card .card-title{font-size:.88rem}.product-card .product-category{font-size:.59rem}
  .product-meta-badges{min-height:5.35rem;gap:.3rem}.product-meta-badge{font-size:.59rem;padding:.25rem .38rem;white-space:normal}
  .product-variant-tag{font-size:.61rem}.product-price .price-normal,.product-price .price-sale{font-size:1.08rem}
  .product-card .btn-add-cart{min-height:40px;padding:.45rem .35rem;font-size:.75rem}.product-badge-digital{top:8px;right:8px}
  .page-header::before{background-size:22px 22px,22px 22px,auto}
}
@media(max-width:390px){.product-card .card-body{padding:.7rem}.product-meta-badge{gap:.25rem;font-size:.56rem}.product-card .btn-add-cart i{display:none}}

/* ---- 子分類切換籤 ---- */
.subcat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.subcat-chip {
    display: inline-block;
    padding: 0.34rem 0.95rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: #C7D2E4;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: all 0.15s ease;
}
.subcat-chip:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
}
.subcat-chip.active {
    color: #fff;
    background: var(--primary, #4361ee);
    border-color: var(--primary, #4361ee);
}

/* ---- 側欄:未展開的分類顯示子分類數量 ---- */
.sidebar-subcat-hint {
    display: block;
    padding: 0.28rem 1rem 0.5rem 2.4rem;
    font-size: 0.76rem;
    color: #6B7B95;
    letter-spacing: 0.2px;
}

/* ===================================================================
   快速購買區塊
   =================================================================== */
.quick-buy-section {
    position: relative;
}
.quick-buy-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.quick-buy-heading .section-title i {
    color: #65dff1;
}
.quick-buy-hint {
    align-items: center;
    gap: 0.45rem;
    color: #a8b5c9;
    font-size: 0.86rem;
    font-weight: 600;
}
.quick-buy-hint i {
    color: #65dff1;
}
.quick-buy-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.85rem;
}
.quick-buy-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: linear-gradient(145deg, #141b30, #0f1425);
    border: 1px solid rgba(116, 142, 222, 0.2);
    border-radius: var(--radius-lg);
    color: #a8b5c9;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.quick-buy-card::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #65dff1, #4361ee 65%, transparent);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.quick-buy-card:hover {
    transform: translateY(-6px);
    border-color: rgba(101, 223, 241, 0.55);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42), 0 0 24px rgba(67, 97, 238, 0.13);
}
.quick-buy-card:hover::after {
    opacity: 1;
}
.quick-buy-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #0b1020;
    border-bottom: 1px solid rgba(101, 223, 241, 0.22);
}
.quick-buy-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}
.quick-buy-card:hover .quick-buy-media img {
    transform: scale(1.04);
}
.quick-buy-badge {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    color: #fff;
    background: #4361ee;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}
.quick-buy-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 0.85rem;
}
.quick-buy-body h3 {
    margin: 0 0 0.75rem;
    min-height: 2.8em;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}
.quick-buy-body h3 a {
    display: -webkit-box;
    overflow: hidden;
    color: #edf3ff;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.quick-buy-body h3 a:hover {
    color: #83e9f5;
}
.quick-buy-price {
    margin-top: auto;
    margin-bottom: 0.75rem;
    color: #65dff1;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.quick-buy-card .add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 40px;
    padding: 0.55rem 0.7rem;
    color: #fff;
    background: #4361ee;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.quick-buy-card .add-to-cart-btn:hover {
    background: #5570f3;
    box-shadow: 0 8px 20px rgba(67, 97, 238, 0.28);
}

@media (max-width: 1199.98px) {
    .quick-buy-grid {
        display: flex;
        gap: 1rem;
        margin-inline: -12px;
        padding: 0 12px 0.9rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: rgba(101, 223, 241, 0.35) transparent;
    }
    .quick-buy-card {
        flex: 0 0 190px;
        scroll-snap-align: start;
    }
}
@media (max-width: 575.98px) {
    .quick-buy-heading {
        align-items: flex-start;
    }
    .quick-buy-card {
        flex-basis: min(62vw, 220px);
    }
    .quick-buy-media {
        aspect-ratio: 4 / 3;
    }
    .quick-buy-body {
        padding: 0.8rem;
    }
    .quick-buy-body h3 {
        font-size: 0.9rem;
    }
}

/* 頁尾營業人資訊（公司名 + 統編）。法定揭露，不是裝飾，所以給它獨立的樣式
   而不是塞進上面那段介紹文裡，避免之後改文案時被順手刪掉。 */
.footer-legal {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* ===== 數量輸入框:讓數字看得見 =====
   .quantity-input 只有 38px 寬、左右各 12px 內距,內容區只剩 14px。Chrome 的數字輸入框
   還會在上面疊一組原生的上下箭頭(::-webkit-inner-spin-button),把那 14px 再吃掉一截,
   數字就被擠出可視範圍 —— 桌機看不到數量、手機正常,正是因為觸控裝置不渲染那組箭頭。
   兩側各有 − / + 按鈕了,原生箭頭本來就是多餘的,直接關掉並把內距收窄。 */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity-input {
    -moz-appearance: textfield;
    appearance: textfield;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* ===== 購物車列:窄螢幕換行 =====
   一列是「圖片 + 品名(可伸縮) + 控制組」,而控制組是固定寬度的:數量 120px、小計
   min-width 100px、再加一顆刪除鈕與兩個 me-3。加起來超過 390px 且不會縮,於是整頁的
   版面視窗被撐到 486px —— 小計被切一半、刪除鈕整顆推出畫面外(手機使用者根本刪不掉商品)。
   窄螢幕改成讓控制組整組換到第二行,並鬆開那兩個固定寬度。 */
@media (max-width: 575.98px) {
    .cart-item { flex-wrap: wrap; }
    .cart-item > .flex-grow-1 { min-width: 0; }
    .cart-item > .d-flex {
        width: 100%;
        margin-top: 0.85rem;
        justify-content: space-between;
    }
    .cart-item > .d-flex > .input-group { margin-right: 0 !important; }
    .cart-item > .d-flex > .fw-bold {
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: auto;
        padding-right: 0.75rem;
        white-space: nowrap;
    }
}