/* ========================================================================== AGT Product Catalog — 預設前台樣式 涵蓋範圍:catalog-wrap.php / catalog-card.php / single-product-content.php ========================================================================== */ :root { --agt-pv-primary: #1b6ef3; --agt-pv-primary-dark: #97886e; --agt-pv-text: #1f2430; --agt-pv-muted: #9e9e9f; --agt-pv-border: #e5e7eb; --agt-pv-bg-card: #ffffff; --agt-pv-bg-page: #f9f9f9; --agt-pv-radius: 12px; --agt-pv-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); --agt-pv-shadow-hover: 0 8px 24px rgba(16, 24, 40, 0.12); } .agt-pv-wrap, .agt-pv-detail { color: var(--agt-pv-text); font-size: 15px; line-height: 1.6; } .agt-pv-toolbar input:focus, .agt-pv-toolbar select:focus { outline: none; border-color: var(--agt-pv-primary); box-shadow: 0 0 0 3px rgba(27, 110, 243, 0.15); } .agt-pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; } .agt-pv-no-results { padding: 40px 0; text-align: center; color: var(--agt-pv-muted); font-size: 15px; } /* ========================================================================== 卡片 (catalog-card.php) ========================================================================== */ .agt-pv-card { display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: box-shadow 0.2s ease, transform 0.2s ease; } .agt-pv-card:hover { box-shadow: var(--agt-pv-shadow-hover); transform: translateY(-2px); } .agt-pv-card > a:first-child { display: block; text-decoration: none; color: inherit; } .agt-pv-card-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .agt-pv-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 16px 16px 8px; font-size: 18px !important; font-weight: 600 !important; line-height: 1.4 !important; min-height: 50px; color: var(--agt-pv-text) !important; } .agt-pv-card-category { color: #9e9e9f; font-weight: 600; font-size: 16px !important; margin: 0 16px 10px; } .agt-pv-card-meta { margin: 0 16px 12px; display: flex; flex-wrap: wrap; /* 多個 model 標籤時自動換行,避免超框 */ gap: 8px; row-gap: 8px; } .agt-pv-card-model, .agt-pv-card-sku { background: #eeeeef; color: #9e9e9f; font-size: 11pt; padding: 2px 14px; border-radius: 14px; white-space: nowrap; } /* 前往購買:主要 CTA 按鈕,貼齊卡片底部上緣 */ .agt-pv-card-btn { margin: auto 20px 20px; /* margin-top: auto 把整組(按鈕+下方連結)推到底部 */ background: #373838; color: #fff !important; text-align: center; padding: 8px 12px; border-radius: 6px; font-weight: 600; text-decoration: none; display: block; font-size: 14pt !important; } .agt-pv-card-btn:hover { background: #000000; } .agt-pv-card-shop-link { margin: 0 20px 12px; /* 補上左右 20px,跟 h3 / category / meta 的間距對齊 */ display: inline-block; font-size: 13pt !important; color: #cbb790; } .agt-pv-card-shop-link:hover { color: #a58a59; /* text-decoration: underline; */ } /* ========================================================================== 產品明細頁 (single-product-content.php) ========================================================================== */ .agt-pv-detail { max-width: 1000px; margin: 0 auto; display: flex; gap: 80px; align-items: center; border-radius: 16px; padding: 25px; } .agt-pv-detail-image { flex: 0 0 260px; max-width: 260px; border-radius: var(--agt-pv-radius); overflow: hidden; background: transparent; } .agt-pv-detail-image img { width: 100%; display: block; object-fit: contain; } .agt-pv-detail-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .agt-pv-detail-gallery-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--agt-pv-border); cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; } .agt-pv-detail-gallery-thumb:hover { border-color: #373838; transform: translateY(-2px); } .agt-pv-detail-body { margin-top: 0; flex: 1; min-width: 0; } .agt-pv-detail-category { display: block; font-size: 15pt; font-weight: 600; color: #9e9e9f; margin: 0 0 20px; } .agt-pv-detail-title { font-size: 22pt; font-weight: 700; line-height: 1.5; margin: 0 0 10px; color: #000; } .agt-pv-detail-model, .agt-pv-detail-sku { display: inline-block; font-size: 14pt; font-weight: 600; letter-spacing: normal; text-transform: none; color: #9e9e9f; background: #f1f1f1; padding: 2px 18px; border-radius: 999px; margin: 0 8px 10px 0; white-space: nowrap; } .agt-pv-detail-shop-link { display: inline-block; margin-top: 20px; padding: 8px 24px; border-radius: 8px; background: #373838; color: #fff !important; font-size: 20px !important; font-weight: 700; text-decoration: none !important; box-shadow: none; transition: background 0.15s ease; } .agt-pv-detail-shop-link:hover { background: #000; box-shadow: none; } /* ---- 下方「關於此商品」說明區 ---- */ .agt-pv-detail-description-area { max-width: 1000px; margin: 32px auto 0; padding: 0; } .agt-pv-detail-description-title { font-size: 18pt !important; font-weight: 700; color: #000; margin: 0 0 20px; } .agt-pv-detail-description p { font-size: 14pt !important; line-height: 1.8; text-align: justify; margin: 0 0 1em; font-weight: 400; color: #333; } .agt-pv-detail-description ul { list-style: none; padding: 0; margin: 0; } .agt-pv-detail-description ul li { position: relative; padding-left: 18px; margin-bottom: 18px; font-weight: 400; color: #333; } .agt-pv-detail-description ul li::before { content: "•"; position: absolute; left: 0; color: #333; } @media (max-width: 600px) { .agt-pv-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .agt-pv-detail { flex-direction: column; padding: 24px; gap: 24px; } .agt-pv-detail-title { font-size: 20pt; } .agt-pv-detail-image { max-width: 100%; flex: none; } .agt-pv-detail-description-area { padding: 0 20px; } .agt-pv-card-btn { font-size: 13px; padding: 5px 8px; } } /* ========================================================================== 列表頁 — 左側分類側邊欄(大分類 / 子分類樹狀導覽) ========================================================================== */ .agt-pv-catalog-wrap { display: flex; align-items: flex-start; gap: 32px; } .agt-pv-catalog-sidebar { flex: 0 0 220px; max-width: 220px; } .agt-pv-catalog-sidebar-title { margin: 0 0 12px; font-size: 22px !important; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #8c7a5b; } /* 去除所有清單原生樣式,並用 !important 蓋過主題可能的 li 預設樣式 */ .agt-pv-catalog-sidebar ul.agt-pv-category-tree, .agt-pv-catalog-sidebar ul.agt-pv-category-children, .agt-pv-catalog-sidebar li.agt-pv-category-item { list-style: none !important; margin: 0 !important; padding: 0 !important; } .agt-pv-category-tree, .agt-pv-category-children { list-style: none; margin: 0; padding: 0; } .agt-pv-category-children { display: none; margin-top: 4px; margin-left: 14px; border-left: 1px solid var(--agt-pv-border); padding-left: 10px; } .agt-pv-category-item.is-expanded > .agt-pv-category-children { display: block; } .agt-pv-category-item { margin-bottom: 2px; } /* 用 !important:主題對 有全域字體設定(body a { font-size:20px !important; line-height:1.5em !important }),不加會被蓋掉 */ .agt-pv-category-link { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; border-radius: 8px; font-size: 20px !important; line-height: 1.4 !important; color: #9e9e9f; text-decoration: none !important; transition: background 0.15s ease, color 0.15s ease; } .agt-pv-category-item .agt-pv-category-children .agt-pv-category-link { padding: 6px 10px; font-size: 16px !important; color: var(--agt-pv-muted); font-weight: 500; } .agt-pv-category-link:hover { background: var(--agt-pv-bg-page); color: var(--agt-pv-muted); } .agt-pv-category-item.is-active > .agt-pv-category-link { background: #f3eee3; color: #000000; font-weight: 700; } .agt-pv-category-toggle { flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s ease; opacity: 0.5; } .agt-pv-category-item.is-expanded > .agt-pv-category-link .agt-pv-category-toggle { transform: rotate(45deg); } .agt-pv-catalog-main { flex: 1 1 auto; min-width: 0; } .agt-pv-catalog-heading-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } /* 用 !important:主題對 h2 有全域字體設定(h2 { font-size:28px !important }),不加會被蓋掉 */ .agt-pv-catalog-current-category { margin: 0; font-size: 25px !important; font-weight: 700; color: var(--agt-pv-text); } /* ========================================================================== 搜尋列 ========================================================================== */ .agt-pv-catalog-filters input[type="text"] { width: 100%; padding: 14px 18px; font-size: 15px; color: var(--agt-pv-text); background: #fff; border: 1px solid var(--agt-pv-border); border-radius: 10px; outline: none; box-sizing: border-box; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); transition: border-color 0.2s ease, box-shadow 0.2s ease; margin-bottom: 20px; } .agt-pv-catalog-filters input[type="text"]::placeholder { color: var(--agt-pv-muted); } .agt-pv-catalog-filters input[type="text"]:hover { border-color: #c9c9c9; } .agt-pv-catalog-filters input[type="text"]:focus { border-color: var(--agt-pv-primary); box-shadow: 0 0 0 3px rgba(27, 110, 243, 0.12); } /* ========================================================================== 分頁 ========================================================================== */ .agt-pv-pagination { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .agt-pv-grid + .agt-pv-pagination { margin-top: 28px; } /* 用 !important:主題對 有全域字體設定,見上面 .agt-pv-category-link 的說明 */ .agt-pv-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--agt-pv-border); font-size: 14px !important; line-height: 1.4 !important; color: var(--agt-pv-text); text-decoration: none !important; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .agt-pv-page-link:hover { background: #f7f4f0; border-color: #b09c76; color: #b09c76; } .agt-pv-page-link.is-active { background: #b09c76; border-color: #b09c76; color: #fff; font-weight: 700; } @media (max-width: 780px) { .agt-pv-catalog-wrap { flex-direction: column; } .agt-pv-catalog-sidebar { flex: 1 1 auto; max-width: none; width: 100%; } } https://www.acergadget.com/sitemap-misc.xml 2026-09-23T02:26:02+00:00 https://www.acergadget.com/post_tag-sitemap.xml 2026-09-23T02:26:02+00:00 https://www.acergadget.com/category-sitemap.xml 2026-09-23T02:26:02+00:00 https://www.acergadget.com/post-sitemap.xml 2026-09-18T07:43:32+00:00 https://www.acergadget.com/page-sitemap.xml 2026-09-23T02:26:02+00:00 https://www.acergadget.com/authors-sitemap.xml 2026-09-23T02:26:02+00:00 https://www.acergadget.com/archives-sitemap.xml 2026-09-23T02:26:02+00:00