/* SOHO ProLab 2.0 — Refinement layer v0.8
 * Loaded after the approved Reference v2.1 CSS.
 * No framework, no icon font, no external webfont.
 */

/* ---------- Global navigation ---------- */
.main-nav .container.nav-shell{
  min-height:46px;
  overflow:visible;
  gap:0;
}
.primary-nav-panel{
  width:100%;
  display:flex;
  align-items:center;
  gap:26px;
}
.primary-nav-panel>a,
.catalog-toggle{
  color:#e5edf0;
  font:inherit;
  font-size:13px;
  line-height:1;
  font-weight:750;
  text-decoration:none;
  white-space:nowrap;
}
.primary-nav-panel>a:hover,
.primary-nav-panel>a:focus-visible,
.catalog-toggle:hover,
.catalog-toggle:focus-visible{
  color:#fff;
}
.catalog-disclosure{position:relative;flex:0 0 auto}
.catalog-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.nav-caret{
  width:7px;
  height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .14s ease;
}
.catalog-toggle[aria-expanded="true"] .nav-caret{
  transform:rotate(225deg) translate(-1px,-1px);
}
.catalog-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:160;
  width:min(420px,calc(100vw - 32px));
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 18px 44px rgba(16,24,28,.16);
  overflow:hidden;
}
.catalog-dropdown[hidden]{display:none}
.catalog-dropdown__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 15px;
  background:#f5f8f8;
  border-bottom:1px solid var(--line);
}
.catalog-dropdown__head strong{display:block;font-size:13px;color:var(--ink)}
.catalog-dropdown__head span{display:block;margin-top:2px;font-size:10px;color:var(--muted)}
.catalog-dropdown__head a{font-size:11px!important;color:var(--steel)!important;font-weight:850!important}
.catalog-dropdown__list{
  list-style:none;
  margin:0;
  padding:5px;
  max-height:min(62vh,520px);
  overflow:auto;
  overscroll-behavior:contain;
}
.catalog-dropdown__list li{margin:0;padding:0}
.catalog-dropdown__list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:39px;
  padding:8px 10px;
  border-radius:6px;
  color:var(--ink)!important;
  font-size:12px!important;
  font-weight:760!important;
  text-decoration:none;
}
.catalog-dropdown__list a:hover,
.catalog-dropdown__list a:focus-visible{
  background:var(--steel2);
  color:var(--navy)!important;
}
.catalog-dropdown__list small{
  flex:0 0 auto;
  color:var(--muted);
  font-size:9.5px;
  font-weight:700;
}
.mobile-nav-toggle{display:none}

/* Assistant is intentionally typographic — no AI badge/icon. */
.ai-link{gap:0}
.ai-panel .btn{gap:0}
.ai-float{gap:0}

/* ---------- Category browsing ---------- */

.catalog-filter-disclosure>summary{display:none}
@media(min-width:821px){.catalog-filter-disclosure:not([open])>.catalog-filterbar{display:flex!important}}
.catalog-filterbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 0 16px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.catalog-filterbar__main{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.catalog-filter{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:160px;
}
.catalog-filter>span{
  font-size:9.5px;
  color:var(--muted);
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.catalog-filter select{
  height:38px;
  min-width:0;
  border:1px solid var(--line2);
  border-radius:6px;
  background:#fff;
  padding:0 32px 0 10px;
  color:var(--ink);
  font-size:12px;
}
.catalog-filter--sort{min-width:145px}
.catalog-filterbar__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.catalog-filterbar__actions .btn{min-height:38px;padding:7px 12px;font-size:11px}
.filter-clear{font-size:11px;font-weight:800;color:var(--steel)}
.catalog-result-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 9px;
  font-size:12px;
  color:var(--muted);
}
.catalog-result-summary b{color:var(--ink)}

.catalog-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.catalog-product-card{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:13px;
  min-height:132px;
  padding:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
}
.catalog-product-card__image{
  display:grid;
  place-items:center;
  min-height:104px;
  background:#fafbfb;
  border:1px solid #e4e8e8;
  border-radius:6px;
  overflow:hidden;
}
.catalog-product-card__image img{
  width:100%;
  height:104px;
  object-fit:contain;
  padding:5px;
}
.catalog-product-card__body{min-width:0;display:flex;flex-direction:column}
.catalog-product-card__eyebrow{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:5px;
  color:var(--muted);
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-weight:850;
}
.catalog-product-card h2{font-size:16px;margin:0 0 4px}
.catalog-product-card h2 a{color:var(--steel);text-decoration:none}
.catalog-product-card h2 a:hover{text-decoration:underline}
.catalog-product-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}
.catalog-product-card__meta{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 0}
.catalog-product-card__actions{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.catalog-product-card__actions .btn{min-height:34px;padding:6px 11px;font-size:11px}
.lifecycle-tag{font-size:9.5px;font-weight:850;color:#7d541d;background:#fff7ea;border:1px solid #edd9be;border-radius:999px;padding:4px 7px}

/* Collapsed category context: useful content remains semantic and accessible without pushing products down. */
.category-context{
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  overflow:hidden;
}
.category-context summary{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 15px;
  cursor:pointer;
  list-style:none;
  font-weight:850;
}
.category-context summary::-webkit-details-marker{display:none}
.category-context summary small{
  display:block;
  margin-bottom:2px;
  font-size:9px;
  color:var(--steel);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.category-context__hint{
  flex:0 0 auto;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}
.category-context__hint::after{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-left:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.category-context[open] .category-context__hint::after{transform:rotate(225deg)}
.category-context__body{
  max-width:900px;
  padding:0 15px 17px;
  color:var(--ink2);
  font-size:13px;
  line-height:1.7;
}
.category-context__body h2,.category-context__body h3{margin-top:20px}
.category-context__body>*:last-child{margin-bottom:0}

/* ---------- Blog index ---------- */
.blog-topics{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 16px;
  padding:9px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
}
.blog-topics__label{font-size:10px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 4px}
.blog-topic{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink2);
  font-size:11px;
  font-weight:760;
  text-decoration:none;
}
.blog-topic:hover,.blog-topic:focus-visible{border-color:#b7c9d1;background:var(--steel2);color:var(--navy)}
.blog-topics-more{position:relative}
.blog-topics-more summary{
  min-height:32px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  list-style:none;
  font-size:11px;
  font-weight:760;
  color:var(--ink2);
}
.blog-topics-more summary::-webkit-details-marker{display:none}
.blog-topics-more[open] summary{background:var(--steel2);border-color:#b7c9d1}
.blog-topics-more__panel{
  position:absolute;
  left:0;
  top:39px;
  z-index:30;
  width:240px;
  max-height:320px;
  overflow:auto;
  padding:6px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow);
}
.blog-topics-more__panel a{display:block;padding:8px 9px;border-radius:5px;font-size:11px;text-decoration:none}
.blog-topics-more__panel a:hover{background:var(--steel2)}
.blog-feature--wide{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(310px,.92fr);
  gap:0;
  padding:0;
  overflow:hidden;
}
.blog-feature--wide .cover{border-radius:0;min-height:310px}
.blog-feature--wide .cover img{width:100%;height:100%;object-fit:cover}
.blog-feature__copy{padding:24px}
.blog-feature__copy h2{font-size:29px;line-height:1.12;margin:7px 0 9px}
.blog-feature__copy p{font-size:13px;line-height:1.6}

/* ---------- Blog article ---------- */
.article-layout{grid-template-columns:minmax(0,1fr) 260px;gap:26px;align-items:start}
.article-body{padding:0;overflow:hidden}
.article-hero-image{margin:0;background:#f3f5f5;border-bottom:1px solid var(--line)}
.article-hero-image img{display:block;width:100%;max-height:460px;object-fit:cover}
.article-body__inner{padding:30px 34px 38px}
.article-prose{max-width:760px;margin:0 auto}
.article-prose p,
.article-prose li{
  color:#344750;
  font-size:16px;
  line-height:1.78;
}
.article-prose p{margin:0 0 1.15em}
.article-prose h2{
  margin:2em 0 .7em;
  font-size:28px;
  line-height:1.2;
  letter-spacing:-.018em;
}
.article-prose h3{
  margin:1.6em 0 .6em;
  font-size:21px;
  line-height:1.28;
}
.article-prose ul,.article-prose ol{padding-left:1.35em;margin:0 0 1.2em}
.article-prose blockquote{
  margin:1.5em 0;
  padding:14px 18px;
  border-left:3px solid var(--steel);
  background:#f4f8f9;
  color:var(--ink2);
}
.article-prose img{max-width:100%;height:auto;border-radius:7px}
.article-prose a{text-decoration-thickness:1px;text-underline-offset:2px}
.article-prose table{font-size:13px}
.article-author-row{
  max-width:760px;
  margin:0 auto 20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.toc{top:18px}
.toc>b{display:block;margin-bottom:5px}

/* ---------- Mobile ---------- */
@media(max-width:1050px){
  .primary-nav-panel{gap:18px}
  .catalog-card-grid{grid-template-columns:1fr 1fr}
  .blog-feature--wide{grid-template-columns:1fr 1fr}
}

@media(max-width:820px){
  body.mobile-nav-open{overflow:hidden}

  .catalog-filter-disclosure{margin-bottom:12px}
  .catalog-filter-disclosure>summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:44px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    cursor:pointer;
    list-style:none;
    font-size:12px;
    font-weight:850;
  }
  .catalog-filter-disclosure>summary::-webkit-details-marker{display:none}
  .catalog-filter-disclosure>summary small{font-size:10px;color:var(--muted);font-weight:700}
  .catalog-filter-disclosure[open]>summary{border-radius:8px 8px 0 0;background:#f6f8f8}
  .catalog-filter-disclosure .catalog-filterbar{margin:0;border-top:0;border-radius:0 0 8px 8px}
  .main-nav .container.nav-shell{display:block;min-height:48px;padding:0}
  .mobile-nav-toggle{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 10px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:13px;
    font-weight:850;
    cursor:pointer;
  }
  .mobile-nav-bars,
  .mobile-nav-bars::before,
  .mobile-nav-bars::after{
    width:18px;
    height:1.5px;
    background:currentColor;
    display:block;
    content:"";
  }
  .mobile-nav-bars{position:relative}
  .mobile-nav-bars::before{position:absolute;top:-6px;left:0}
  .mobile-nav-bars::after{position:absolute;top:6px;left:0}
  .primary-nav-panel{
    display:none;
    position:absolute;
    z-index:155;
    left:10px;
    right:10px;
    top:52px;
    max-height:calc(100vh - 76px);
    overflow:auto;
    padding:8px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    box-shadow:0 18px 46px rgba(16,24,28,.2);
  }
  .primary-nav-panel.is-open{display:block}
  .primary-nav-panel>a,
  .catalog-toggle{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 10px;
    border-radius:6px;
    color:var(--ink)!important;
    font-size:13px;
    text-align:left;
  }
  .primary-nav-panel>a:hover,
  .primary-nav-panel>a:focus-visible,
  .catalog-toggle:hover,
  .catalog-toggle:focus-visible{background:var(--steel2);color:var(--navy)!important}
  .catalog-disclosure{width:100%}
  .catalog-dropdown{
    position:static;
    width:100%;
    margin:0 0 5px;
    border:0;
    border-radius:6px;
    box-shadow:none;
    background:#f6f8f8;
  }
  .catalog-dropdown__head{padding:10px;background:transparent}
  .catalog-dropdown__list{max-height:none;padding:3px 6px 7px}
  .catalog-dropdown__list a{min-height:39px;background:#fff;margin-top:3px}

  .catalog-filterbar{display:block;padding:10px}
  .catalog-filterbar__main{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .catalog-filter{min-width:0}
  .catalog-filterbar__actions{margin-top:9px;justify-content:flex-end}
  .catalog-card-grid{grid-template-columns:1fr}
  .blog-topics{flex-wrap:nowrap;overflow-x:auto;padding:8px;scrollbar-width:none}
  .blog-topics::-webkit-scrollbar{display:none}
  .blog-topics__label{flex:0 0 auto}
  .blog-topic,.blog-topics-more{flex:0 0 auto}
  .blog-topics-more__panel{position:fixed;left:10px;right:10px;top:160px;width:auto;max-height:55vh}
  .blog-feature--wide{grid-template-columns:1fr}
  .blog-feature--wide .cover{min-height:220px}
  .article-body__inner{padding:24px 20px 30px}
  .article-prose p,.article-prose li{font-size:15.5px;line-height:1.72}
}

@media(max-width:560px){
  .catalog-filterbar__main{grid-template-columns:1fr}
  .catalog-product-card{grid-template-columns:94px minmax(0,1fr)}
  .catalog-product-card__image{min-height:86px}
  .catalog-product-card__image img{height:86px}
  .catalog-product-card__actions{align-items:flex-end}
  .article-prose h2{font-size:24px}
  .article-prose h3{font-size:19px}
}

@media(prefers-reduced-motion:reduce){
  .nav-caret{transition:none}
}

/* Table wrapper keeps product photos visible without widening the page. */
.product-table-wrap{width:100%;overflow-x:auto;border-radius:8px}
.product-table-wrap .product-table{min-width:760px}
.product-table .mini-img{display:grid;place-items:center;overflow:hidden;text-decoration:none}
.product-table .mini-img img{width:100%;height:100%;object-fit:contain;padding:3px}

/* ---------- Compact subcategory navigation for visual catalog families ---------- */
.subcategory-strip{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 12px;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.subcategory-strip__label{
  margin-right:2px;
  color:var(--muted);
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.subcategory-strip>a,
.subcategory-strip__more>summary{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink2);
  font-size:10.5px;
  font-weight:780;
  line-height:1.2;
  text-decoration:none;
}
.subcategory-strip>a:hover,
.subcategory-strip>a:focus-visible,
.subcategory-strip__more>summary:hover,
.subcategory-strip__more>summary:focus-visible{
  border-color:#b7c9d1;
  background:var(--steel2);
  color:var(--navy);
}
.subcategory-strip__more{position:relative}
.subcategory-strip__more>summary{cursor:pointer;list-style:none}
.subcategory-strip__more>summary::-webkit-details-marker{display:none}
.subcategory-strip__panel{
  position:absolute;
  top:36px;
  right:0;
  z-index:35;
  width:min(280px,calc(100vw - 32px));
  max-height:300px;
  overflow:auto;
  padding:6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:var(--shadow);
}
.subcategory-strip__panel a{
  display:block;
  padding:8px 9px;
  border-radius:5px;
  color:var(--ink2);
  font-size:11px;
  font-weight:730;
  text-decoration:none;
}
.subcategory-strip__panel a:hover,
.subcategory-strip__panel a:focus-visible{background:var(--steel2);color:var(--navy)}

@media(max-width:820px){
  .subcategory-strip{
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  .subcategory-strip::-webkit-scrollbar{display:none}
  .subcategory-strip__label,
  .subcategory-strip>a,
  .subcategory-strip__more{flex:0 0 auto}
  .subcategory-strip__panel{
    position:fixed;
    left:10px;
    right:10px;
    top:150px;
    width:auto;
    max-height:55vh;
  }
}

/* ---------- Large catalog: native pagination, no full structured-index scan ---------- */
.catalog-filterbar--large .catalog-filter--search{min-width:240px}
.catalog-filterbar--large .catalog-filter--search input[type="search"]{
  height:38px;
  width:100%;
  min-width:0;
  border:1px solid var(--line2);
  border-radius:6px;
  background:#fff;
  padding:0 10px;
  color:var(--ink);
  font:inherit;
  font-size:12px;
}
.catalog-filterbar--large .catalog-filter--search input[type="search"]:focus{
  outline:2px solid color-mix(in srgb,var(--navy) 22%,transparent);
  outline-offset:1px;
  border-color:var(--navy);
}
@media(max-width:820px){
  .catalog-filterbar--large .catalog-filter--search{grid-column:1/-1;min-width:0}
}