html, body {
  margin:0; padding:0;
  font: 13px/1.4 Verdana, Tahoma, Arial, sans-serif;
  background:#d7dce3 linear-gradient(#eef1f5,#d7dce3);
  color:#222;
}
/* Prevent page width jump when vertical scrollbar appears/disappears (tab switches) */
html { scrollbar-gutter: stable both-edges; }
body { overflow-y: scroll; }
/* Sticky footer layout */
.page { flex-direction:column; min-height:100vh; }
.page main { flex:1 0 auto; }
.page footer { margin-top:auto; }
body a { color:#074c9e; text-decoration:none; }
body a:hover { text-decoration:underline; }

header.site-header {
  background: #4f6d8d linear-gradient(#6f8fb1,#466682);
  color:#fff;
  border-bottom:1px solid #2d4a63;
  padding: 1em;
  box-shadow:0 0 4px rgba(0,0,0,.25) inset;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header.site-header a { color:#fff; }
header.site-header h1 { font-size:16px; margin:0; font-weight:600; text-shadow:0 1px 0 rgba(0,0,0,.35); }

main { max-width: 1040px; margin: 18px auto 40px; padding:0 18px 10px; }

/* Search & filter toolbar */
.gear-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 14px; margin-bottom:14px; background:linear-gradient(#ffffff,#f1f1f1); }
.gear-search { flex:1 1 200px; min-width:0; padding:6px 10px; font-size:13px; border:1px solid #a0adb8; font-family:inherit; outline:none; }
.gear-search:focus { border-color:#6aa1d3; box-shadow:0 0 3px rgba(106,161,211,.45); }
.gear-categories { display:flex; flex-wrap:wrap; gap:5px; }
.cat-btn { padding:5px 12px; font-size:11px; font-family:inherit; text-transform:uppercase; letter-spacing:.4px; cursor:pointer; border:1px solid #a0adb8; background:linear-gradient(#f7fafd,#e3eaf1); color:#234; }
.cat-btn:hover { background:linear-gradient(#e3f1fb,#c5e0f5); border-color:#6aa1d3; }
.cat-btn.active { background:linear-gradient(#6ebafc,#1c4366); color:#fff; border-color:#1a3d5c; font-weight:600; }
.gear-no-results { text-align:center; padding:24px 0; color:#555; font-style:italic; }

/* Card grid */
#gear-grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); }
.gear-item { position:relative; padding:10px 10px 12px; }
.gear-item.ui-widget-content { background:#fafafa; background:linear-gradient(#ffffff,#f1f1f1); }
.gear-item.ui-widget-content:hover { border-color:#6aa1d3; }
.gear-item img, .gear-item picture img { max-width:100%; height:auto; border:1px solid #bbb; background:#fff; padding:2px; box-shadow:0 0 3px rgba(0,0,0,.15); display:block; margin:0 auto 6px; }
.gear-item strong { display:block; margin-top:4px; font-size:14px; color:#123955; }
.gear-item small { color:#555; }
.gear-item .tag { position:absolute; top:6px; right:6px; background:#6f8fb1; color:#fff; padding:2px 6px; font-size:10px; letter-spacing:.5px; border-radius:3px; text-transform:uppercase; }
.gear-item p { margin:6px 0 0; }

/* Tabs adjustments */
.ui-tabs .ui-tabs-nav { font-size:12px; }
.ui-tabs .ui-tabs-nav li a { padding:6px 12px; }

/* Detail article */
.gear-detail { max-width:880px; width:100%; margin:0 auto; display:block; box-sizing:border-box; }
.gear-detail h2 { font-size:20px; margin:0 0 10px; color:#123955; }
.gear-detail { background:linear-gradient(#ffffff,#f5f5f5); padding:20px 24px 26px; }
.gear-detail img, .gear-detail picture img { background:#fff; padding:4px; box-shadow:0 0 4px rgba(0,0,0,.18); }
.gear-detail .detail-image, .gear-detail picture { max-width:420px; width:100%; display:block; margin:0 0 16px; }
.gear-detail picture img { width:100%; height:auto; }

/* Gallery (re-added) */
.gallery-grid { display:grid; gap:10px; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); margin-top:8px; }
.gallery-thumb { display:flex; align-items:center; justify-content:center; padding:4px; background:#fff; text-align:center; position:relative; overflow:hidden; border:1px solid #b5bcc2; aspect-ratio:4/3; }
.gallery-thumb img { width:100%; height:100%; border-radius: 8px; object-fit:cover; display:block; }

/* If you want perfectly uniform thumbnail frames, uncomment below:
.gallery-thumb { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; }
*/
.gallery-thumb:hover { box-shadow:0 0 4px rgba(0,0,0,.35); border-color:#6aa1d3; }

/* Footer */
footer { text-align:center; padding:30px 0 50px; font-size:11px; color:#4a5866; }

/* Utility */
.ui-widget { font-family:inherit; }
.ui-widget-header { background:linear-gradient(#6f8fb1,#4e6d8a); color:#fff; border:1px solid #3f5c74; }
.ui-widget-content { border:1px solid #b5bcc2; border-radius:6px; }

/* Responsive image fixes */
picture { display: block; }
picture img { width: 100%; height: auto; max-width: 100%; }

/* Hover / active states */
.ui-state-hover, .ui-widget-content .ui-state-hover { background:linear-gradient(#e3f1fb,#c5e0f5); border-color:#6aa1d3; }
.ui-state-active, .ui-tabs-active a { background:linear-gradient(#6ebafc,#1c4366)!important; }

/* Header controls (theme toggle + lang switch) */
.header-right { display:flex; align-items:center; gap:12px; }
.header-nav { display:flex; align-items:center; gap:8px; }
.header-nav a { padding:6px 12px; font-size:13px; border:1px solid rgba(255,255,255,.35); border-radius:6px; }
.header-nav a:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.5); }
.lang-switch { font-size:12px; }

/* Hamburger - hidden on desktop */
.hamburger { display:none; background:none; border:none; padding:8px; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; }
.menu-backdrop { display:none; }
.hamburger-bar { display:block; width:22px; height:2px; background:#fff; border-radius:1px; transition:transform .2s, opacity .2s; }
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity:0; }
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .hamburger { display:flex; }
  .menu-backdrop {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.4);
    z-index:998; cursor:pointer;
  }
  .site-header.menu-open .menu-backdrop { display:block; }
  .header-right {
    position:fixed; top:0; right:0; bottom:0; width:min(280px,85vw);
    background:#4f6d8d; background:linear-gradient(#5a7a9a,#3d5a75);
    flex-direction:column; align-items:stretch; gap:0; padding:60px 16px 24px;
    box-shadow:-4px 0 12px rgba(0,0,0,.3); z-index:999;
    transform:translateX(100%); visibility:hidden; transition:transform .25s, visibility .25s;
  }
  .site-header.menu-open .header-right { transform:translateX(0); visibility:visible; }
  .site-header.menu-open .hamburger { position:relative; z-index:1000; }
  .header-nav { flex-direction:column; align-items:stretch; }
  .header-nav a { display:block; padding:12px 14px; border-radius:6px; }
  .header-right .theme-toggle { align-self:flex-start; margin:8px 0; }
  .header-right .lang-switch { margin-top:8px; padding-top:12px; border-top:1px solid rgba(255,255,255,.2); }
}
@media (min-width: 769px) {
  .header-right { display:flex !important; }
}

/* Theme toggle button */
.theme-toggle { background:none; border:1px solid rgba(255,255,255,.35); border-radius:6px; color:#fff; cursor:pointer; padding:4px 8px; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; width:32px; height:28px; }
.theme-toggle:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.5); }
.theme-icon-dark { display:none; }
html.dark .theme-icon-light { display:none; }
html.dark .theme-icon-dark { display:inline; }

/* Lightbox modal */
.lightbox.hidden { display:none; }
#lightbox { position:fixed; inset:0; z-index:1000; }
#lightbox .lightbox-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:saturate(140%) blur(2px); }
#lightbox .lightbox-content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:85vw; max-width:1500px; height:75vh; max-height:1600px; padding:14px 18px 16px; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.45); display:flex; flex-direction:column; }
#lightbox-img { display:block; width:100%; height:calc(100% - 40px); object-fit:contain; margin:0 0 10px; }
#lightbox-caption { margin:0; font-size:12px; color:#234; word-break:break-word; flex-shrink:0; max-height:30px; overflow:hidden; }
.lightbox-close { position:absolute; top:4px; right:6px; border:1px solid #999; background:#eee; width:26px; height:26px; font-size:18px; line-height:22px; cursor:pointer; }
.lightbox-close:hover { background:#fff; }
.gallery-grid .gallery-thumb { cursor:pointer; }
.lightbox-actions { display:flex; gap:8px; margin:0 0 6px; flex-shrink:0; }
.lightbox-original { font-size:12px; padding:4px 8px; text-decoration:none; border:1px solid #9db2c4; background:linear-gradient(#f7fafd,#dfe9f2); color:#123955; }
.lightbox-original:hover { background:#fff; }

/* Lightbox navigation - positioned relative to viewport, not content */
.lightbox-nav { position:fixed; top:50%; left:0; right:0; display:flex; justify-content:space-between; padding:0 20px; pointer-events:none; transform:translateY(-50%); z-index:1001; }
.lightbox-nav button { pointer-events:auto; background:rgba(255,255,255,.85); border:1px solid #7a8da0; width:50px; height:70px; font-size:32px; line-height:66px; cursor:pointer; border-radius:8px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.lightbox-nav button:hover { background:#fff; }
.lightbox-nav button:active { transform:scale(.95); }

/* Fix: jQuery UI .ui-helper-clearfix adds :before/:after that become grid items. Hide them on gear grid. */
#gear-grid.ui-helper-clearfix:before,
#gear-grid.ui-helper-clearfix:after { content:none !important; display:none !important; }
.gear-meta { margin:10px 0 0; font-size:1rem; font-weight: 600; color:#234; border-top:1px solid #d2d7dc; padding-top:6px; }

/* Stabilize tab container width so switching tabs doesn't shrink card */
.gear-detail .ui-tabs { width:100%; }
.gear-detail .ui-tabs-nav { flex-wrap:nowrap; }

/* Galleries page sections */
.galleries-section { padding:16px 20px 20px; margin-bottom:20px; }
.galleries-section .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:14px; }
.galleries-section h3 { margin:0 0 12px; font-size:16px; }
.galleries-section h3 a { color:inherit; }
.galleries-section h3 a:hover { text-decoration:underline; }

/* YouTube video grid */
.video-grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-top:8px; }
.video-entry { background:#fff; border:1px solid #b5bcc2; border-radius:6px; overflow:hidden; }
.video-responsive { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }
.video-responsive iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.video-title { margin:0; padding:8px 10px; font-size:12px; color:#234; font-weight:600; border-top:1px solid #e0e4e8; }

/* ===== Dark mode ===== */
html.dark body {
  background:#1a1d23 linear-gradient(#1e2128,#1a1d23);
  color:#d0d4da;
}
html.dark body a { color:#6ab0e8; }
html.dark body a:hover { color:#8dc8f8; }

/* Header */
html.dark header.site-header {
  background:#1c2433 linear-gradient(#253244,#1c2433);
  border-bottom-color:#0f1720;
}
@media (max-width: 768px) {
  html.dark .header-right {
    background:#1c2433; background:linear-gradient(#253244,#1c2433);
  }
}

/* Cards */
html.dark .gear-item.ui-widget-content { background:#24282f; background:linear-gradient(#282c34,#22252c); }
html.dark .gear-item.ui-widget-content:hover { border-color:#4a8ec2; }
html.dark .gear-item img, html.dark .gear-item picture img { border-color:#3a4050; background:#1e2128; box-shadow:0 0 3px rgba(0,0,0,.4); }
html.dark .gear-item strong { color:#8cc4f0; }
html.dark .gear-item small { color:#8895a5; }
html.dark .gear-item .tag { background:#3a5575; }
html.dark .gear-item p { color:#c0c6ce; }

/* Search & filter toolbar */
html.dark .gear-toolbar { background:linear-gradient(#282c34,#22252c); }
html.dark .gear-search { background:#1e2128; border-color:#3a4050; color:#d0d4da; }
html.dark .gear-search:focus { border-color:#4a8ec2; box-shadow:0 0 3px rgba(74,142,194,.45); }
html.dark .cat-btn { background:linear-gradient(#2a2f38,#23272e); border-color:#3a4050; color:#b0b8c4; }
html.dark .cat-btn:hover { background:linear-gradient(#2e3a48,#253040); border-color:#4a8ec2; }
html.dark .cat-btn.active { background:linear-gradient(#2060a0,#143860); color:#fff; border-color:#1a4a7a; }
html.dark .gear-no-results { color:#8895a5; }

/* UI widgets */
html.dark .ui-widget-content { border-color:#3a4050; background:#24282f; }
html.dark .ui-widget-header { background:linear-gradient(#2e4460,#1e3248); border-color:#1a2a3e; }
html.dark .ui-state-hover, html.dark .ui-widget-content .ui-state-hover { background:linear-gradient(#2e3a48,#253040); border-color:#4a8ec2; }
html.dark .ui-state-active, html.dark .ui-tabs-active a { background:linear-gradient(#2060a0,#143860)!important; }
html.dark .ui-state-default { background:linear-gradient(#2a2f38,#23272e); border-color:#3a4050; color:#b0b8c4; }

/* Detail page */
html.dark .gear-detail { background:linear-gradient(#24282f,#1e2128); color:#d0d4da; }
html.dark .gear-detail h2 { color:#8cc4f0; }
html.dark .gear-detail img, html.dark .gear-detail picture img { background:#1a1d23; box-shadow:0 0 4px rgba(0,0,0,.5); }
html.dark .gear-detail #tab-desc, html.dark .gear-detail #tab-specs { color:#d0d4da; }
html.dark .gear-detail #tab-specs ul { color:#d0d4da; }
html.dark .gear-meta { color:#b0b8c4; border-top-color:#3a4050; }

/* Galleries page */
html.dark .galleries-section { background:linear-gradient(#24282f,#1e2128); }
html.dark .galleries-section h3 a { color:#8cc4f0; }

/* Gallery */
html.dark .gallery-thumb { background:#1e2128; border-color:#3a4050; }
html.dark .gallery-thumb:hover { border-color:#4a8ec2; box-shadow:0 0 4px rgba(74,142,194,.4); }

/* Lightbox */
html.dark #lightbox .lightbox-backdrop { background:rgba(0,0,0,.8); }
html.dark #lightbox .lightbox-content { background:#24282f; }
html.dark #lightbox-caption { color:#b0b8c4; }
html.dark .lightbox-close { background:#2a2f38; border-color:#4a5568; color:#d0d4da; }
html.dark .lightbox-close:hover { background:#353b46; }
html.dark .lightbox-nav button { background:rgba(36,40,47,.9); border-color:#4a5568; color:#d0d4da; }
html.dark .lightbox-nav button:hover { background:rgba(50,56,66,.95); }
html.dark .lightbox-original { background:linear-gradient(#2a2f38,#23272e); border-color:#3a4050; color:#8cc4f0; }
html.dark .lightbox-original:hover { background:#353b46; }

/* Video entries */
html.dark .video-entry { background:#1e2128; border-color:#3a4050; }
html.dark .video-title { color:#b0b8c4; border-top-color:#3a4050; }

/* Footer */
html.dark footer { color:#6a7585; }

/* Tabs text */
html.dark .ui-tabs .ui-tabs-nav li a { color:#b0b8c4; }
html.dark .ui-tabs-active a { color:#fff !important; }