.main-title { font-size: 24px; font-weight: 700; color: #1a1a1a; margin-bottom: 20px; }
/* ================= 佈局與模組作用域 ================= */
#software-catalog {width: 100%;padding: 20px 0px;}
#software-catalog .workframe {max-width: 100%;margin: 0 auto;display: flex;gap: 30px;align-items: flex-start;width: 100%;}
/* 手機版選單開關 (純 CSS 實現) */
#software-catalog .menu-toggle-checkbox { display: none; }
#software-catalog .menu-toggle-label {display: none;background: #006bb3;color: white;padding: 14px 24px;border-radius: 10px;cursor: pointer;font-weight: 600;font-size: 16px;align-items: center;justify-content: center;gap: 10px;box-shadow: 0 4px 15px rgba(0,107,179,0.3);transition: background 0.3s;}
#software-catalog .menu-toggle-label:active { transform: scale(0.98); }
/* ================= 側邊欄導覽 (#side-nav 作用域) ================= */
#side-nav {width: 260px;flex-shrink: 0;background: #ffffff;border-radius: 0;box-shadow: 0 10px 30px rgba(0,0,0,0.04);padding: 10px 0;position: sticky;top: 70px;z-index: 10;border: 1px solid rgba(0,0,0,0.03);}
#side-nav .Cate li {border-bottom: 1px solid #f0f4f8;width: 100%;}
#side-nav .Cate li:last-child { border-bottom: none; }
#side-nav .nav-item-title { display: block; }
#content #side-nav .nav-item-title a { display: block; padding: 15px 25px; color: #5a6c7d; font-size: 15px; font-weight: 500; position: relative; overflow: hidden; }
#side-nav .nav-item-title a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #006bb3; transform: scaleY(0); transition: transform 0.3s ease; transform-origin: center; }
#side-nav .nav-item-title a:hover { color: #006bb3; background: #f8fbff; padding-left: 32px; }
#side-nav .nav-item-title a:hover::before { transform: scaleY(1); }
#side-nav .action .nav-item-title a { color: #006bb3; background: #f0f7ff; padding-left: 32px; font-weight: 700; }
#side-nav .action .nav-item-title a::before { transform: scaleY(1); }
/* ================= 內容區塊 (#describe 作用域) ================= */
#describe { flex: 1; min-width: 0; }
#describe .pro-list {display: grid;grid-template-columns: repeat(auto-fill,minmax(300px,1fr));gap: 30px;padding: 0;}
/* 產品卡片 */
#describe .p-box {background: #ffffff;border-radius: 0;overflow: hidden;box-shadow: 0 5px 20px rgba(0,0,0,0.03);transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1);display: flex;flex-direction: column;height: 100%;position: relative;border: 1px solid rgba(0,0,0,0.04);group;cursor: pointer;}
#describe .p-box:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,107,179,0.12); border-color: rgba(0,107,179,0.2); }
/* 圖片區域 */
#describe .bgimg { height: 220px; width: 100%; overflow: hidden; background-color: #fcfcfc; position: relative; border-bottom: 1px solid #f0f4f8; }
#describe .bgimg a { display: block; width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1); }
#describe .p-box:hover .bgimg a { transform: scale(1.08); }
#describe .bgimg img { display: none; }
/* 隱藏原本用來撐開的空白圖，完全由 CSS 控制高度 */
/* 資訊區域 */
#describe .p-info { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; position: relative; z-index: 1; }
#describe .card-title { font-size: 18px; color: #1a2b3c; font-weight: 700; margin-bottom: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s; }
#describe .p-box:hover .card-title { color: #006bb3; }
#describe .describe { font-size: 14px; color: #6b7c93; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; line-height: 1.7; }
/* 浮動箭頭按鈕 */
#describe .p-info b { position: absolute; right: 25px; top: -25px; width: 45px; height: 45px; background: #006bb3; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: 0; transform: translateY(15px) scale(0.8); transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); box-shadow: 0 8px 20px rgba(0,107,179,0.4); z-index: 2; }
#describe .p-box:hover .p-info b { opacity: 1; transform: translateY(0) scale(1); }
/* 分頁導覽 */
#describe #pagenav { display: flex; justify-content: center; align-items: center; margin-top: 50px; gap: 8px; padding-bottom: 20px; }
#describe #pagenav a,#describe #pagenav strong { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 10px; font-size: 15px; font-weight: 600; color: #5a6c7d; background: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.03); transition: all 0.3s ease; border: 1px solid rgba(0,0,0,0.02); }
#describe #pagenav a:hover { background: #f0f7ff; color: #006bb3; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,107,179,0.15); border-color: #006bb3; }
#describe #pagenav strong.number_hit { background: #006bb3; color: #ffffff; box-shadow: 0 6px 15px rgba(0,107,179,0.35); border-color: #006bb3; transform: scale(1.05); }
/* ================= 頂部導覽與篩選區塊 (.waylink 作用域) ================= */
.waylink {width: 100%;background-color: #f8fafc;padding: 20px 20px;border-bottom: 1px solid rgba(0,0,0,0.05);box-shadow: 0 4px 20px rgba(0,0,0,0.02);margin-bottom: 20px;}
.waylink .workframe { max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.waylink.nobackgd{
    background-color: unset;
    box-shadow: unset;
    border-bottom: none;
    margin: 0;
    padding: 0 0;
}

.waylink .order_box {display: flex;align-items: center;flex-wrap: wrap;gap: 10px;background: #f8fafc;padding: 15px 20px;border-radius: 12px;}

.waylink select#product_order { appearance: none; -webkit-appearance: none; background-color: #ffffff; border: 1px solid #d2dce6; padding: 10px 40px 10px 15px; border-radius: 8px; font-size: 14px; color: #333; font-weight: 600; cursor: pointer; outline: none; transition: border-color 0.3s,box-shadow 0.3s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6c7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; min-width: 180px; }
.waylink select#product_order:hover,.waylink select#product_order:focus { border-color: #006bb3; box-shadow: 0 0 0 3px rgba(0,107,179,0.1); }

.waylink .search_box { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; flex-grow: 1; position: relative; }

#content .waylink .search_box > p:first-child { font-size: 14px; font-weight: 700; color: #1a2b3c; white-space: nowrap; }
#content .waylink .product_search { display: flex; flex-wrap: wrap; gap: 6px; }
#content .waylink .product_search span { position: relative; }
#content .waylink .product_search input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
#content .waylink .product_search label {display: inline-flex;align-items: center;justify-content: center;min-width: 32px;height: 32px;padding: 0 8px;background-color: #ffffff;border: 1px solid #d2dce6;border-radius: 0px;font-size: 13px;font-weight: 600;color: #5a6c7d;cursor: pointer;transition: all 0.2s cubic-bezier(0.4,0,0.2,1);user-select: none;}
#content .waylink .product_search label:hover { background-color: #f0f7ff; color: #006bb3; border-color: #bbd6ee; transform: translateY(-1px); }
#content .waylink .product_search input[type="radio"]:checked + label { background-color: #006bb3; color: #ffffff; border-color: #006bb3; box-shadow: 0 4px 10px rgba(0,107,179,0.25); transform: translateY(-1px); }
#content .waylink .product_search span:first-child label { padding: 0 12px; }

#content .waylink .scroll-hint { display: none; font-size: 12px; color: #a0aec0; margin-top: 5px; text-align: right; width: 100%; animation: pulse 2s infinite; }

@media (max-width:1024px) {
  #software-catalog .workframe { gap: 20px; }
  #side-nav { width: 220px; }
  #describe .pro-list { grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 20px; }
}
@media (max-width:850px) {
  #software-catalog .workframe { flex-direction: column; }
  #software-catalog .menu-toggle-label {display: flex;position: fixed;top: 100px;z-index: 999;}
  #side-nav { width: 100%; position: static; display: none; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
  #software-catalog .menu-toggle-checkbox:checked ~ #side-nav {display: block;animation: slideDownfade 0.4s cubic-bezier(0.165,0.84,0.44,1) forwards;position: fixed;top: 200px;height: 500px;overflow-y: scroll;width: 90%;max-height: 80vh;}
  #describe .pro-list { grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); }
  #describe .p-info b { opacity: 1; transform: none; top: auto; bottom: 20px; right: 20px; width: 35px; height: 35px; font-size: 16px; box-shadow: none; background: rgba(0,107,179,0.1); color: #006bb3; }
  #describe .p-info { padding-bottom: 60px; }
  #content .waylink .order_box {flex-direction: column;align-items: flex-start;background: unset;padding: 10px 0 30px;}
  #content .waylink select#product_order { width: 100%; }
}
@media (max-width:480px) {
  #software-catalog { padding: 20px 15px; }
  #describe .pro-list { grid-template-columns: 1fr; }
  #describe .bgimg { height: 200px; }
  #content .waylink {padding: 0;background-color: unset;}
  #content .waylink .search_box { width: 100%; align-items: flex-start; flex-direction: column; gap: 8px; }

  #content .waylink .product_search {flex-wrap: nowrap;overflow-x: auto;padding-bottom: 10px;width: 100%;-webkit-overflow-scrolling: touch;scrollbar-width: none;gap: 1px;}
  #content .waylink .product_search::-webkit-scrollbar { display: none; }
  #content .waylink .product_search span { flex-shrink: 0; }
 
  #content .waylink .scroll-hint { display: block; }
}

@keyframes slideDownfade {
  from { opacity: 0; transform: translateY(-15px) scaleY(0.95); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes pulse {
  0% { opacity: 0.6; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(-3px); }
  100% { opacity: 0.6; transform: translateX(0); }
}