:root{--yx-primary:#f07d00;--yx-surface:#fff;--yx-bg-alt:#f8f9fa;--yx-border:#e9ecef;--yx-text-main:#212529;--yx-text-muted:#6c757d}.page-product-detail{color:var(--yx-text-main);background-color:var(--yx-surface)}.hero-container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;padding:4rem 0}@media (max-width:1024px){.hero-container{grid-template-columns:1fr;gap:2rem}}.hero-gallery{position:sticky;top:120px}.hero-main-image{background:#fff;border:1px solid var(--yx-border);padding:3rem;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}.hero-thumbnails{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:1.5rem}.thumb-btn{border:1px solid var(--yx-border);padding:.5rem;background:#fff;transition:all .2s}.thumb-btn.active{border-color:var(--yx-primary);box-shadow:0 0 0 2px rgba(240,125,0,.1)}.sticky-subnav{position:sticky;top:64px;z-index:30;background:hsla(0,0%,100%,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--yx-border);height:56px;overflow:hidden}.subnav-link{height:56px;display:flex;align-items:center;padding:0 1.5rem;font-size:.875rem;font-weight:600;color:var(--yx-text-muted);border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap}.subnav-link.active,.subnav-link:hover{color:var(--yx-primary)}.subnav-link.active{border-bottom-color:var(--yx-primary)}.yx-spec-section{padding:60px 0;border-bottom:1px solid var(--yx-border)}.yx-spec-table{width:100%;border-collapse:collapse;font-size:.875rem;table-layout:fixed}.yx-spec-group-header{background:var(--yx-bg-alt);color:var(--yx-text-main);font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:left}.yx-spec-group-header,.yx-spec-row td{padding:1rem 1.5rem;border:1px solid var(--yx-border)}.yx-spec-row td{vertical-align:top}.yx-spec-label{width:250px;background:#fbfbfc;font-weight:600;color:var(--yx-text-muted)}.yx-spec-value{color:var(--yx-text-main);line-height:1.6}.advantage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}.advantage-card{padding:2.5rem;background:var(--yx-bg-alt);border:1px solid transparent;transition:all .3s}.advantage-card:hover{background:#fff;border-color:var(--yx-border);box-shadow:0 1rem 3rem rgba(0,0,0,.05);transform:translateY(-5px)}.yx-tag{display:inline-flex;padding:.25rem .75rem;background:rgba(240,125,0,.1);color:var(--yx-primary);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.yx-tag,.yx-title{margin-bottom:1.5rem}.yx-title{font-size:3rem;font-weight:800;line-height:1.1;letter-spacing:-.02em}.yx-subtitle{font-size:1.25rem;color:var(--yx-text-muted);line-height:1.5;margin-bottom:2.5rem}.yx-btn-primary{background:var(--yx-primary);color:#fff;padding:1rem 2.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;transition:all .2s}.yx-btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 10px 20px rgba(240,125,0,.2)}.yx-bento-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(160px,auto);gap:1.5rem;margin-top:3rem}.yx-bento-item{position:relative;overflow:hidden;border-radius:1rem;background:#f8f9fa;transition:all .4s cubic-bezier(.4,0,.2,1);border:1px solid var(--yx-border)}.yx-bento-item:hover{transform:translateY(-8px);box-shadow:0 30px 60px -12px rgba(0,0,0,.15);border-color:var(--yx-primary)}.yx-bento-item img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .6s ease}.yx-bento-item:hover img{transform:scale(1.1)}.yx-bento-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 50%,transparent);display:flex;flex-direction:column;justify-content:flex-end;padding:2.5rem;color:#fff;opacity:.9;transition:opacity .3s}.yx-bento-item:hover .yx-bento-overlay{opacity:1}.yx-related-section{padding:100px 0;background:#fff;border-top:1px solid var(--yx-border)}.yx-related-card{display:block;background:#fff;border:1px solid var(--yx-border);border-radius:.75rem;padding:1.5rem;transition:all .3s ease;height:100%}.yx-related-card:hover{border-color:var(--yx-primary);box-shadow:0 15px 35px rgba(0,0,0,.05);transform:translateY(-5px)}.yx-related-image{width:100%;aspect-ratio:1/1;background:#fbfbfc;border-radius:.5rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;padding:2rem;overflow:hidden}.yx-related-image img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;transition:transform .3s}.yx-related-card:hover .yx-related-image img{transform:scale(1.1)}@media (max-width:767px){.hero-main-image{padding:1.25rem}.sticky-subnav{top:60px;height:48px}.subnav-link{height:48px;padding:0 .875rem;font-size:.8rem}.yx-title{font-size:clamp(2.5rem,13vw,3.25rem);margin-bottom:1rem}.yx-subtitle{font-size:1rem;margin-bottom:1.75rem}.yx-spec-section{padding:48px 0}.yx-spec-table,.yx-spec-table tbody,.yx-spec-table td,.yx-spec-table th,.yx-spec-table thead,.yx-spec-table tr{display:block;width:100%}.yx-spec-group-header{padding:.875rem 1rem;font-size:.75rem}.yx-spec-row td{border-left:0;border-right:0;padding:.75rem 1rem}.yx-spec-label{width:auto;padding-bottom:.35rem}.yx-spec-value{padding-top:0;font-size:.95rem}.yx-bento-grid{grid-auto-rows:minmax(140px,auto);gap:1rem;margin-top:2rem}.yx-bento-overlay{padding:1.25rem}.yx-related-section{padding:72px 0 96px}.yx-related-card{padding:1.25rem}}