/* =========================================================
   產品頁專屬樣式
   ========================================================= */
.product-hero { background:radial-gradient(circle at 82% 28%,rgba(245,179,53,.22),transparent 24%),radial-gradient(circle at 16% 78%,rgba(0,119,200,.12),transparent 30%),linear-gradient(180deg,#fbfdff,#eef8ff); }
.product-hero-art { position:relative; min-height:470px; perspective:1200px; }
.product-stack-card { position:absolute; width:260px; aspect-ratio:1; overflow:hidden; border:1px solid rgba(0,119,200,.14); border-radius:28px; background:#fff; box-shadow:var(--shadow-lg); transition:transform .55s var(--ease),filter .4s; }
.product-stack-card img { width:100%; height:100%; object-fit:cover; }
.product-stack-card.card-a { z-index:3; left:50%; top:50%; transform:translate(-50%,-50%) rotate(2deg); }
.product-stack-card.card-b { z-index:2; left:8%; top:9%; transform:rotate(-10deg) scale(.82); filter:saturate(.8); }
.product-stack-card.card-c { z-index:1; right:2%; bottom:5%; transform:rotate(11deg) scale(.78); filter:saturate(.85); }
.product-hero-art:hover .card-a { transform:translate(-50%,-54%) rotate(0) scale(1.03); }
.product-hero-art:hover .card-b { transform:translate(-15px,-8px) rotate(-14deg) scale(.85); }
.product-hero-art:hover .card-c { transform:translate(14px,10px) rotate(14deg) scale(.8); }
.orbit-line { position:absolute; inset:7%; border:1px dashed rgba(0,119,200,.28); border-radius:50%; animation:spin 20s linear infinite; }
.product-hero-art>.gem-blue { position:absolute; right:14%; top:5%; width:42px; height:42px; animation:gemFloat 3.6s ease-in-out infinite; }
.product-hero-art>.gem-yellow { position:absolute; left:8%; bottom:12%; width:48px; height:48px; animation:gemFloat 4.3s ease-in-out infinite reverse; }

.product-feature-section { padding-top:88px; }
.featured-product-viewport { position:relative; min-height:520px; }
.featured-product-slide { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:34px; padding:42px; opacity:0; visibility:hidden; transform:translateX(20px); transition:opacity .55s ease,transform .65s var(--ease),visibility .55s; }
.featured-product-slide.is-active { opacity:1; visibility:visible; transform:none; }
.featured-product-slide::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 15% 50%,rgba(0,119,200,.08),transparent 35%),radial-gradient(circle at 90% 10%,rgba(245,179,53,.16),transparent 30%); }
.featured-product-slide img { width:min(440px,100%); justify-self:center; border-radius:28px; box-shadow:0 24px 60px rgba(3,48,88,.16); }
.featured-product-slide>div { padding-right:36px; }
.featured-product-slide span { color:var(--orange); font-size:.76rem; font-weight:950; letter-spacing:.1em; }
.featured-product-slide h3 { margin:12px 0 16px; color:var(--blue-900); font-size:clamp(2rem,4vw,3.4rem); }
.featured-product-slide p { color:var(--muted); font-size:1.04rem; }

.product-toolbar { display:grid; grid-template-columns:minmax(280px,1fr) auto; gap:16px; align-items:center; margin-bottom:18px; }
.product-search { position:relative; }
.product-search::before { content:"⌕"; position:absolute; z-index:2; left:17px; top:50%; color:var(--blue-700); font-size:1.25rem; transform:translateY(-52%); }
.product-search input { width:100%; height:54px; padding:0 18px 0 48px; border:1px solid #cfe0ee; border-radius:17px; background:#fff; outline:none; transition:border-color .2s,box-shadow .2s; }
.product-search input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,119,200,.1); }
.product-sort { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.8rem; font-weight:900; }
.product-sort select { height:54px; padding:0 38px 0 14px; border:1px solid #cfe0ee; border-radius:17px; color:var(--blue-900); background:#fff; font-weight:800; }
.product-filters { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; }
.filter-button { min-height:42px; padding:0 15px; border:1px solid #cfe0ee; border-radius:999px; color:#4e6077; background:#fff; font-size:.83rem; font-weight:900; cursor:pointer; transition:transform .2s,color .2s,background .2s,border-color .2s; }
.filter-button:hover { transform:translateY(-2px); color:var(--blue-800); border-color:#8dc8ee; }
.filter-button.is-active { color:#fff; border-color:var(--blue); background:linear-gradient(135deg,var(--blue),var(--blue-800)); box-shadow:0 10px 24px rgba(0,119,200,.18); }
.favorite-filter.is-active { color:var(--blue-950); border-color:var(--yellow); background:linear-gradient(135deg,#ffe493,var(--yellow)); }
.product-result-bar { display:flex; justify-content:space-between; gap:20px; margin:18px 0 28px; padding:12px 16px; border-radius:14px; color:var(--muted); background:#eaf6ff; font-size:.82rem; }
.product-result-bar strong { color:var(--blue-800); }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.product-card { position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease),box-shadow .35s,border-color .35s; }
.product-card:hover { transform:translateY(-9px); border-color:#8ec8ed; box-shadow:var(--shadow-md); }
.product-image { position:relative; overflow:hidden; aspect-ratio:1; background:#eef8ff; }
.product-image img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.product-card:hover .product-image img { transform:scale(1.045); }
.favorite-button { position:absolute; z-index:3; top:13px; right:13px; display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,.7); border-radius:50%; color:#fff; background:rgba(3,31,60,.55); backdrop-filter:blur(8px); font-size:1.15rem; cursor:pointer; transition:transform .2s,background .2s,color .2s; }
.favorite-button:hover { transform:scale(1.08); }
.favorite-button.is-favorite { color:var(--blue-950); background:var(--yellow); }
.product-category { position:absolute; left:13px; bottom:13px; padding:6px 10px; border-radius:999px; color:var(--blue-900); background:rgba(255,255,255,.9); backdrop-filter:blur(8px); font-size:.7rem; font-weight:950; }
.product-content { display:flex; flex:1; flex-direction:column; padding:22px; }
.product-code { color:#95a8b8; font-size:.7rem; font-weight:900; letter-spacing:.1em; }
.product-content h3 { margin:7px 0 8px; color:var(--blue-900); }
.product-subtitle { color:var(--muted); font-size:.9rem; }
.product-specs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0; }
.product-specs span { padding:9px 10px; border-radius:12px; color:#506176; background:#f2f8fc; font-size:.73rem; font-weight:800; }
.product-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.product-tags span { padding:5px 8px; border-radius:999px; color:var(--blue-800); background:#e9f6ff; font-size:.68rem; font-weight:900; }
.product-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.product-open { padding:0; border:0; color:var(--blue-700); background:none; font-weight:950; cursor:pointer; }
.product-open:hover { text-decoration:underline; }
.empty-state { grid-column:1/-1; padding:70px 20px; text-align:center; border:1px dashed #bcd4e7; border-radius:24px; color:var(--muted); background:#fff; }
.empty-state strong { display:block; margin-bottom:8px; color:var(--blue-900); font-size:1.3rem; }

.product-guide { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.guide-card { padding:32px; border:1px solid var(--line); border-radius:26px; background:#fff; box-shadow:var(--shadow-sm); }
.guide-card .badge { display:inline-flex; padding:6px 10px; border-radius:999px; color:var(--blue-800); background:#eaf6ff; font-size:.72rem; font-weight:950; }
.guide-card h3 { margin:18px 0 14px; color:var(--blue-900); }
.guide-card ol { margin:0; padding-left:22px; color:var(--muted); }
.guide-card li+li { margin-top:8px; }

.product-modal-layout { display:grid; grid-template-columns:minmax(300px,.9fr) 1.1fr; gap:30px; align-items:start; }
.product-modal-image { overflow:hidden; border-radius:22px; background:#eef8ff; }
.product-modal-image img { width:100%; aspect-ratio:1; object-fit:cover; }
.product-modal-copy>span { color:var(--orange); font-size:.75rem; font-weight:950; letter-spacing:.1em; }
.product-modal-copy h2 { margin:8px 0 10px; color:var(--blue-900); font-size:clamp(1.8rem,4vw,3rem); }
.product-modal-copy .lead { color:var(--muted); font-size:1.02rem; }
.product-modal-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:18px 0; }
.product-modal-meta div { padding:13px; border:1px solid var(--line); border-radius:14px; background:#f8fcff; }
.product-modal-meta small { display:block; color:#91a3b3; font-weight:800; }.product-modal-meta strong { color:var(--blue-900); }
.product-modal-copy ul { padding-left:20px; color:var(--muted); }
.product-modal-note { margin-top:20px; padding:15px 17px; border-left:4px solid var(--yellow); border-radius:0 12px 12px 0; color:#5e4a15; background:#fff7dc; font-size:.86rem; }

@media (max-width:980px) {
  .product-hero-art { min-height:410px; }
  .product-stack-card { width:225px; }
  .featured-product-slide { grid-template-columns:.9fr 1.1fr; }
  .product-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px) {
  .product-hero-art { min-height:350px; }
  .product-stack-card { width:190px; }
  .product-stack-card.card-b { left:1%; }.product-stack-card.card-c { right:-4%; }
  .featured-product-viewport { min-height:760px; }
  .featured-product-slide { grid-template-columns:1fr; align-content:start; padding:24px 22px 74px; }
  .featured-product-slide img { width:min(390px,100%); }
  .featured-product-slide>div { padding:0; }
  .product-toolbar { grid-template-columns:1fr; }
  .product-sort { justify-content:space-between; }.product-sort select{flex:1}
  .product-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:5px; scrollbar-width:none; }.product-filters::-webkit-scrollbar{display:none}.filter-button{flex:0 0 auto}
  .product-result-bar { display:grid; }
  .product-grid,.product-guide { grid-template-columns:1fr; }
  .product-modal-layout { grid-template-columns:1fr; }
}