.accessory-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:24px 0 32px; }
.accessory-nav a { display:flex; flex-direction:column; justify-content:space-between; gap:12px; min-width:0; padding:20px; background:#e2eee3; border:1px solid var(--line); border-radius:14px; color:var(--ink); text-decoration:none; }
.accessory-nav a[aria-current=page] { background:#194a39; color:#fff; }
.accessory-nav strong { font-size:19px; line-height:1.3; }
.accessory-nav span { font-size:13px; }
.accessory-nav a:hover { border-color:#2b674e; }
.accessory-grid .device-card { display:flex; flex-direction:column; }
.accessory-grid .device-info { flex:1; display:flex; flex-direction:column; }
.accessory-grid .text-link { margin-top:auto; padding-top:16px; }
.accessory-art { display:grid; place-items:center; width:100%; aspect-ratio:1; position:relative; overflow:hidden; border:0; padding:0; background:var(--product-photo-paper,#f5faf4); isolation:isolate; }
button.accessory-art { cursor:zoom-in; }
.accessory-subject { position:relative; display:block; width:min(78%,calc(72% * var(--subject-ratio))); aspect-ratio:var(--subject-ratio); }
.accessory-art .accessory-subject img { display:block; position:absolute; max-width:none; aspect-ratio:auto; object-fit:fill; mix-blend-mode:multiply; }
.accessory-mark { position:absolute; bottom:0; left:calc(100% + 5px); writing-mode:vertical-rl; font:9px/1.1 Arial,sans-serif; color:#60756a; }
.accessory-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:clamp(24px,5vw,70px); margin:26px 0 40px; }
.accessory-detail figure { min-width:0; margin:0; }
.accessory-detail figcaption { margin-top:10px; color:var(--muted); font-size:13px; }
.accessory-specs { margin:0; }
.accessory-specs div { display:grid; grid-template-columns:minmax(110px,1fr) minmax(0,1.3fr); gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.accessory-specs dt { color:var(--muted); }
.accessory-specs dd { margin:0; overflow-wrap:anywhere; }
.accessory-content { max-width:850px; margin:32px auto; line-height:1.75; }
.accessory-content h2 { font-size:27px; line-height:1.3; margin-top:30px; }
.accessory-links { padding:22px; border:1px solid var(--line); background:#e7f0e6; border-radius:14px; }
.accessory-links ul { padding-left:20px; }
.accessory-guides { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:24px 0 40px; }
.accessory-guide { display:flex; flex-direction:column; border:1px solid var(--line); background:#f7faf5; border-radius:14px; overflow:hidden; text-decoration:none; }
.accessory-guide img { width:100%; aspect-ratio:8/5; object-fit:contain; }
.accessory-guide strong { padding:18px; color:var(--ink); font-size:20px; }
.accessory-backlinks { margin:28px 0; padding:22px; background:#e7f0e6; border:1px solid var(--line); border-radius:14px; }
.accessory-backlinks h2 { margin:0 0 12px; font-size:23px; }
.accessory-backlinks li+li { margin-top:10px; }
.accessory-table { overflow-x:auto; max-width:100%; border:1px solid var(--line); border-radius:10px; margin:20px 0; }
.accessory-table table { width:100%; min-width:560px; text-align:left; border-collapse:collapse; }
.accessory-table :is(th,td) { padding:12px; border-bottom:1px solid var(--line); vertical-align:top; }
.accessory-table thead { background:#e2eee3; }
.accessory-table caption { padding:12px; text-align:left; }
.accessory-blog-cover { display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:contain; margin:22px 0; border-radius:14px; }
.accessory-dialog { width:min(94vw,1000px); max-height:94dvh; padding:16px; border:1px solid var(--line); border-radius:16px; background:#f5faf4; }
.accessory-dialog::backdrop { background:rgba(9,30,22,.75); }
.accessory-dialog header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.accessory-dialog button { min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; }
.accessory-dialog img { display:block; max-width:100%; max-height:75dvh; width:auto; height:auto; object-fit:contain; margin:16px auto 0; mix-blend-mode:multiply; }
@media(max-width:800px) { .accessory-nav { grid-template-columns:repeat(2,minmax(0,1fr)); } .accessory-detail { grid-template-columns:1fr; } .accessory-detail figure { width:100%; max-width:540px; margin-inline:auto; } }
@media(max-width:480px) { .accessory-nav { gap:10px; } .accessory-nav a { padding:15px; } .accessory-nav strong { font-size:17px; } .accessory-guides { grid-template-columns:1fr; } .accessory-specs div { grid-template-columns:1fr 1.2fr; gap:12px; font-size:14px; } }