/* TE Garage finishing layer: solid surfaces, static product-photo lighting.
   Route styles retain control of grids, navigation and editor geometry. */
:root {
  --te-garage-nav: #0b0d10;
  --te-garage-nav-glass: rgba(11, 13, 16, .82);
  --te-garage-card: #12161f;
  --te-garage-discovery: #161c25;
  --te-garage-hover: #252c38;
  --te-garage-reading: #12161f;
  --te-garage-border: rgba(255, 255, 255, .12);
  --te-garage-shadow: none;
}
html, html body {background: #121212!important}
html body:is(.gear-page, .community-home):not(.te-studio) {background: #121212!important}
html body > .te-garage-ambient {display: none}
html body .site-header, html body > footer:not([hidden]) {
  background: var(--te-garage-nav)!important;
  border-color: var(--te-border);
}
html body .site-header {backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px)}
html body .te-sidebar {
  background: var(--te-garage-nav)!important;
  border-color: var(--te-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html body .te-sidebar a:hover {background: var(--te-hover)}
html body .te-sidebar a[aria-current=page] {background: var(--te-selected); box-shadow: inset 3px 0 #3b82f6}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  html body .site-header {background: var(--te-garage-nav-glass)!important}
}

/* A single focus boundary surrounds search without covering its label. */
html body .te-shell-search {border-radius: 999px}
html body .te-shell-search:focus-within {
  outline: 2px solid var(--te-accent, var(--te-blue));
  outline-offset: 1px;
  background: var(--te-selected);
}
html body .site-header .te-shell-search:focus-within :is(input, button) {background: var(--te-selected); border-color: var(--te-accent, var(--te-blue))}
html body .site-header .te-shell-search input:focus,
html body .site-header .te-shell-search input:focus-visible,
html body .site-header .te-shell-search button:focus-visible {outline: none; box-shadow: none}
html body .site-header .te-shell-search button:focus-visible {box-shadow: inset 0 0 0 2px var(--te-accent, var(--te-blue))}

html body:is(.gear-page, .community-home):not(.te-studio)
  :is(#gear-main, .gear-intro, .gear-browse, .community-hub, .community-intro) {background: transparent!important}
html body.community-home:not(.te-studio) [data-community] {background: transparent}
html body.gear-page #gear-main :is(.gear-card, .gear-empty),
html body.community-home :is(.community-post.topic-row, .community-empty, .feed-card),
html body.te-studio :is(.gear-owner-panel, .video-library, .video-tool-card, .studio-stat) {
  background: var(--te-garage-card);
  border: 1px solid rgba(255, 255, 255, .04);
  border-top-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}
html body.gear-page #gear-main :is(.gear-collection-tile, .gear-category-tile, .gear-context-brand, .gear-brand-shops) {
  background: var(--te-garage-discovery);
  border-color: var(--te-garage-border);
  box-shadow: none;
}
html body.gear-page #gear-main :is(.gear-collection-tile, .gear-category-tile, .gear-context-brand):hover {background: var(--te-garage-hover); border-color: #8a9fb7}
html body.gear-page #gear-main .gear-context-brand[aria-pressed=true] {background: var(--te-selected); border-color: var(--te-blue)}
html body.community-home :is(.topic-content, .community-post.reply) {background: var(--te-garage-reading)}
html body.community-home .community-topic>summary:hover {background: var(--te-garage-hover)}

/* Only the photo background is lit; source image pixels stay unmodified. */
html body.gear-page .gear-card:not([data-brand-logo]) > .gear-image,
html body.gear-page .gear-card:not([data-brand-logo]) > .gear-gallery .gear-gallery-stage {
  background: radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, .075), rgba(255, 255, 255, 0) 72%), var(--te-garage-card);
}
html body.gear-page .gear-card {position: relative; border-radius: 12px}
html body .gear-card .gear-card-bookmark {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: #0b0d10;
  color: var(--te-text);
  text-decoration: none;
}
html body .gear-card-bookmark svg {width: 22px; height: 22px}
html body .gear-card .gear-card-bookmark:hover {background: var(--te-hover)}
html body .gear-card .gear-card-bookmark[aria-pressed=true] {color: var(--te-action-saved); border-color: var(--te-action-saved)}
html body .gear-card .gear-video-badge {display: inline-flex; align-self: flex-start; color: var(--te-blue); font-size: 12px; margin: 0 0 10px}
html body .gear-card .gear-button:not(.secondary) {background: var(--te-primary); border-color: var(--te-primary); color: #fff}
html body .gear-coupon {background: transparent; border: 0; color: var(--te-text); padding: 0}
html body .gear-coupon-discount {color: var(--te-muted)}
html body .gear-copy-coupon {border-color: var(--te-border); color: var(--te-text); background: var(--te-elevated)}
html body :is(.gear-product-identifier, .gear-coupon strong, .gear-coupon-discount, .gear-count, .gear-gallery-position, .gear-pair-status) {font-family: var(--te-font-mono); font-variant-numeric: tabular-nums}
html body .studio-placement-choices small {display: block; color: var(--te-muted); font-weight: 400; line-height: 1.4; margin-top: 3px}
html body.te-studio :is(.studio-status-draft, .gear-review-flags) {color: var(--te-warning)}
html body.te-studio .studio-status-archived {color: var(--te-muted)}

/* Consistent logo footprints preserve official artwork and its proportions. */
html body .gear-brand-mark {border-radius: 6px; background: #0b0d10; padding: 5px}
html body .gear-brand-mark img {object-fit: contain}
html body .gear-brand-mark-empty {color: var(--te-muted); background: transparent}
html body .gear-brand-mark-empty svg {width: 26px; height: 26px}
html body .gear-brand-mark[data-brand-mark="Tool Craft Organizers"] {background: #000; padding: 0}

/* Native scrolling remains available through swipe, keyboard and row arrows. */
.gear-context-brand-list, .gear-collection-grid, .video-filter-row {scrollbar-width: none}
.gear-context-brand-list::-webkit-scrollbar, .gear-collection-grid::-webkit-scrollbar, .video-filter-row::-webkit-scrollbar {display: none}
html body.te-home .video-filter-row {scrollbar-width: none}

@media (prefers-reduced-transparency: reduce) {
  html body .site-header, html body > footer:not([hidden]), html body .te-sidebar {background: var(--te-garage-nav)!important; backdrop-filter: none; -webkit-backdrop-filter: none}
}
@media (forced-colors: active) {
  html, html body, html body:is(.gear-page, .community-home):not(.te-studio) {background: Canvas!important; color: CanvasText}
  html body .site-header, html body > footer:not([hidden]), html body .te-sidebar {background: Canvas!important; color: CanvasText; border-color: CanvasText; backdrop-filter: none; -webkit-backdrop-filter: none}
  html body .te-sidebar a, html body .te-sidebar a:hover {background: Canvas; color: CanvasText}
  html body .te-sidebar a[aria-current=page] {background: Highlight; color: HighlightText; box-shadow: none; border-left: 3px solid HighlightText}
  html body:is(.gear-page, .community-home):not(.te-studio) :is(#gear-main, .gear-intro, .gear-browse, .community-hub, .community-intro) {background: Canvas!important; box-shadow: none; border-color: CanvasText}
  html body.gear-page #gear-main :is(.gear-card, .gear-empty, .gear-collection-tile, .gear-category-tile, .gear-context-brand, .gear-brand-shops, .gear-coupon),
  html body.gear-page .gear-card:not([data-brand-logo]) > .gear-image,
  html body.gear-page .gear-card:not([data-brand-logo]) > .gear-gallery .gear-gallery-stage,
  html body.community-home :is(.community-post.topic-row, .community-empty, .feed-card, .topic-content, .community-post.reply) {background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none}
  html body .te-shell-search:focus-within {outline-color: Highlight; background: Field}
  html body .site-header .te-shell-search:focus-within :is(input, button) {background: Field; color: FieldText; border-color: Highlight}
  html body.gear-page #gear-main :is(.gear-collection-tile, .gear-category-tile, .gear-context-brand):hover,
  html body.community-home .community-topic>summary:hover {background: Canvas; color: CanvasText; border-color: CanvasText}
  html body.gear-page #gear-main .gear-context-brand[aria-pressed=true] {background: Highlight; color: HighlightText; border-color: HighlightText}
  html body .gear-card .gear-card-bookmark {background: ButtonFace; color: ButtonText; border-color: ButtonText}
}