.detail-page { min-height:100vh; background:#071210; color:#edf5f0; }
.detail-page .site-header { position:sticky; top:0; }
.back-link { margin-left:auto; color:#8be0b9; font-size:13px; font-weight:800; }
.detail-shell { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:48px 0 80px; }
.page-loading,.page-error { padding:80px 20px; border:1px dashed rgba(173,216,195,.22); color:#8ca39a; text-align:center; }
.detail-cover { overflow:hidden; border-radius:12px; background:#122821; }
.detail-cover img { display:block; width:100%; max-height:530px; object-fit:cover; }
.detail-heading { padding:28px 30px 30px; }.detail-heading p { margin:0 0 8px; color:#8be0b9; font-size:13px; }.detail-heading h1 { margin:0; font-size:42px; line-height:1.2; }
.route-carousel { position:relative; background:#0b1b17; }.carousel-stage { position:relative; aspect-ratio:2.05 / 1; min-height:280px; overflow:hidden; }.carousel-image { position:absolute; inset:0; width:100% !important; height:100%; max-height:none !important; object-fit:cover; opacity:0; transition:opacity .25s ease; }.carousel-image.is-active { opacity:1; }.carousel-button { position:absolute; top:50%; z-index:2; width:42px; height:42px; border:1px solid rgba(255,255,255,.32); border-radius:50%; background:rgba(4,18,14,.58); color:#fff; font-size:30px; line-height:1; transform:translateY(-50%); cursor:pointer; }.carousel-prev { left:16px; }.carousel-next { right:16px; }.carousel-dots { position:absolute; z-index:3; right:0; bottom:14px; left:0; display:flex; justify-content:center; gap:7px; }.carousel-dot { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; }.carousel-dot.is-active { width:24px; border-radius:8px; background:#d9f36a; }
.detail-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:24px 0; }.metric { padding:16px; border:1px solid rgba(173,216,195,.16); border-radius:8px; background:#17342d; }.metric span,.metric strong { display:block; }.metric span { color:#9bb1a8; font-size:12px; }.metric strong { margin-top:7px; color:#f2fbf5; font-size:20px; }
.detail-copy { color:#a8bdb4; line-height:1.9; }.detail-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px; }.detail-gallery img { width:100%; aspect-ratio:1.5; border-radius:8px; object-fit:cover; }
.route-bullets { margin:12px 0 20px; padding-left:22px; color:#a8bdb4; line-height:1.9; }.route-bullets li { margin:5px 0; padding-left:5px; }.route-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:22px 0 30px; }.route-facts div { padding:13px 15px; border-left:2px solid #5ed3a4; background:#0f211d; }.route-facts dt { color:#7f9a8e; font-size:12px; }.route-facts dd { margin:5px 0 0; color:#e9f5ef; font-weight:700; }.route-weather { margin:28px 0 34px; padding:20px; border:1px solid rgba(94,211,164,.24); border-radius:10px; background:linear-gradient(135deg,#102b24,#0c1b18); }.weather-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }.weather-heading h2 { margin:0; font-size:23px; }.weather-source { color:#8ca39a; font-size:12px; text-align:right; }.weather-content { margin-top:15px; color:#a8bdb4; }.weather-place { display:flex; align-items:baseline; gap:10px; }.weather-place strong { color:#f2fbf5; font-size:20px; }.weather-place span { color:#8ca39a; font-size:12px; }.weather-days { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }.weather-day { display:grid; gap:6px; padding:12px; border-radius:7px; background:rgba(255,255,255,.05); }.weather-day span,.weather-day small { color:#8ca39a; font-size:12px; }.weather-day strong { color:#eaf8ef; font-size:14px; }.weather-warning { margin-top:12px; padding:10px 12px; border-left:3px solid #e3a65c; background:rgba(227,166,92,.1); color:#f4d1a2; }.weather-warning p { margin:5px 0 0; color:#d9c6ac; line-height:1.6; }.recommend-section { margin-top:38px; }.recommend-section h2 { margin:0 0 16px; font-size:25px; }.gear-recommend-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px; align-items:start; }.gear-recommend-rail { display:grid; gap:10px; }.recommend-card { display:flex; overflow:hidden; border:1px solid rgba(173,216,195,.16); border-radius:8px; background:#10231f; cursor:pointer; color:inherit; text-decoration:none; }.recommend-card img { width:76px; height:76px; flex:0 0 76px; object-fit:cover; }.recommend-card div { min-width:0; padding:10px; }.recommend-card h3 { margin:0 0 7px; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.recommend-card strong { color:#d9f36a; font-size:13px; }.gear-recommend-note { min-height:180px; padding:28px; border:1px dashed rgba(173,216,195,.22); border-radius:8px; background:#0d1d19; }.gear-recommend-note h3 { margin:5px 0 8px; font-size:22px; }
.route-content-layout { display:grid; grid-template-columns:minmax(210px,250px) minmax(0,1fr); gap:28px; align-items:start; margin-top:8px; }.route-equipment-sidebar { position:sticky; top:86px; min-width:0; }.route-equipment-sidebar .recommend-section { margin-top:0; }.route-equipment-sidebar .recommend-section > h2 { font-size:20px; }.route-equipment-sidebar .gear-recommend-layout { display:block; }.route-equipment-sidebar .gear-recommend-note { display:none; }.route-main-content { min-width:0; }.route-main-content > h2:first-child { margin-top:0; }
.product-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:30px; align-items:start; }.product-image { width:100%; aspect-ratio:1.1; border-radius:12px; object-fit:cover; background:#122821; }.product-info h1 { margin:8px 0 10px; font-size:40px; }.product-subtitle { color:#9bb1a8; line-height:1.7; }.product-price { margin:22px 0; color:#d9f36a; font-size:32px; font-weight:900; }.product-stock { color:#8ca39a; font-size:13px; }.product-specs { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }.product-specs span { padding:7px 10px; border-radius:5px; background:#17342d; color:#b8d9c9; font-size:12px; }.product-actions { display:flex; gap:10px; margin-top:26px; }.product-actions button { min-height:48px; flex:1; border-radius:7px; font-weight:800; }.cart-button { border:1px solid #5ed3a4; background:transparent; color:#8be0b9; }.buy-button { background:#5ed3a4; color:#071210; }.product-message { min-height:22px; margin-top:15px; color:#8be0b9; font-size:13px; }
.product-gallery .route-carousel { border-radius:12px; overflow:hidden; }.product-rating { display:flex; gap:12px; align-items:center; color:#d9f36a; }.product-rating span { color:#8ca39a; font-size:13px; }.product-option { margin:18px 0 0; padding:0; border:0; }.product-option legend { margin-bottom:8px; color:#a8bdb4; font-size:13px; }.option-list { display:flex; flex-wrap:wrap; gap:8px; }.option-button { min-width:56px; padding:9px 13px; border:1px solid rgba(173,216,195,.2); border-radius:6px; background:#10231f; color:#b8d9c9; cursor:pointer; }.option-button.is-selected { border-color:#5ed3a4; background:#1a473a; color:#f2fbf5; }.product-review-section { margin-top:42px; padding-top:28px; border-top:1px solid rgba(173,216,195,.15); }.review-section-head { display:flex; align-items:baseline; justify-content:space-between; }.review-section-head h2 { margin:0; }.review-section-head span { color:#8ca39a; font-size:13px; }.review-list { display:grid; gap:10px; margin-top:15px; }.product-review { padding:15px; border:1px solid rgba(173,216,195,.13); border-radius:8px; background:#0f211d; }.review-head { display:flex; align-items:center; gap:12px; }.review-head span { color:#d9f36a; letter-spacing:1px; }.review-head time { margin-left:auto; color:#718a80; font-size:12px; }.product-review p { margin:10px 0 0; color:#b7c9c1; line-height:1.7; }.review-form { margin-top:20px; padding:18px; border:1px dashed rgba(173,216,195,.2); border-radius:8px; }.review-form h3 { margin:0 0 12px; }.review-form-row { display:grid; grid-template-columns:110px 1fr; gap:10px; }.review-form select,.review-form textarea { width:100%; box-sizing:border-box; border:1px solid rgba(173,216,195,.2); border-radius:6px; background:#0b1b17; color:#eaf8ef; padding:10px; }.review-form textarea { min-height:80px; resize:vertical; }
@media (max-width:780px) { .detail-shell { padding-top:25px; }.product-layout { grid-template-columns:1fr; }.detail-heading { padding:22px 20px; }.detail-heading h1,.product-info h1 { font-size:30px; }.detail-metrics { grid-template-columns:repeat(2,1fr); }.detail-gallery { grid-template-columns:repeat(2,1fr); }.carousel-stage { aspect-ratio:1.35 / 1; min-height:220px; }.carousel-button { width:36px; height:36px; font-size:25px; }.route-facts { grid-template-columns:repeat(2,1fr); }.weather-days { grid-template-columns:1fr; }.route-content-layout { grid-template-columns:1fr; gap:18px; }.route-equipment-sidebar { position:static; }.gear-recommend-layout { grid-template-columns:1fr; }.gear-recommend-rail { display:flex; overflow-x:auto; padding-bottom:5px; }.gear-recommend-rail .recommend-card { min-width:220px; } }