/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  padding:18px 0; font-size:13px; color:var(--color-text-muted);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.breadcrumbs a{color:var(--color-text-muted);}
.breadcrumbs a:hover{color:var(--color-secondary);}
.breadcrumbs .sep{color:var(--color-muted);}
.breadcrumbs .current{color:var(--color-text); font-weight:600;}

/* ---------- Catalog layout ---------- */
.catalog-layout{display:grid; grid-template-columns:280px 1fr; gap:32px; align-items:start;}
@media (max-width:900px){ .catalog-layout{grid-template-columns:1fr;} }

.catalog-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:24px; flex-wrap:wrap;}
.catalog-head .count{font-size:14px; color:var(--color-text-muted);}
.sort-field{display:flex; align-items:center; gap:8px; font-size:14px;}
.sort-field select{
  padding:9px 12px; border-radius:var(--radius-sm); border:1px solid var(--color-border);
  background:#fff; color:var(--color-text);
}

/* ---------- Filter sidebar ---------- */
.filter-panel{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:22px;
  position:sticky; top:96px;
}
.filter-panel h3{font-size:15px; margin-bottom:16px;}
.filter-group{padding:16px 0; border-top:1px solid var(--color-border);}
.filter-group:first-of-type{border-top:none; padding-top:0;}
.filter-group h4{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--color-text-muted); margin-bottom:12px;}
.filter-option{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:14px; cursor:pointer;}
.filter-option input{width:16px; height:16px; accent-color:var(--color-secondary); cursor:pointer;}
.filter-search{
  width:100%; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--color-border);
  background:var(--color-bg); font-size:14px; margin-bottom:6px;
}
.filter-panel .btn{width:100%; margin-top:6px;}
.mobile-filter-toggle{display:none;}
@media (max-width:900px){
  .filter-panel{position:static; display:none;}
  .filter-panel.open{display:block;}
  .mobile-filter-toggle{display:inline-flex; margin-bottom:16px;}
}

/* ---------- Product grid (catalog results) ---------- */
.results-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:1100px){ .results-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .results-grid{grid-template-columns:1fr;} }

.result-card{background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; transition:box-shadow .15s ease;}
.result-card:hover{box-shadow:0 12px 28px rgba(26,35,51,.08);}
.result-card .body{padding:18px;}
.result-card .tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
.result-card .tag{
  font-size:11px; font-weight:600; color:var(--color-primary); background:rgba(158,171,202,.22);
  border:1px solid rgba(158,171,202,.45); padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.02em;
}

/* ---------- Empty state ---------- */
.empty-state{
  text-align:center; padding:64px 24px; background:#fff; border:1px dashed var(--color-muted); border-radius:var(--radius-md);
}
.empty-state h3{margin-bottom:8px;}
.empty-state p{max-width:420px; margin:0 auto 20px;}

/* ---------- Pagination ---------- */
.pagination{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:40px;}
.pagination button{
  min-width:38px; height:38px; padding:0 10px; border-radius:var(--radius-sm); border:1px solid var(--color-border);
  background:#fff; color:var(--color-text); cursor:pointer; font-weight:600; font-size:14px;
}
.pagination button.active{background:var(--color-secondary); border-color:var(--color-secondary); color:#fff;}
.pagination button:disabled{opacity:.4; cursor:not-allowed;}

/* ---------- Product Detail Page ---------- */
.product-hero{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
@media (max-width:900px){ .product-hero{grid-template-columns:1fr;} }

.gallery-main{margin-bottom:12px;}
.gallery-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.gallery-thumbs .img-box{cursor:pointer; border:2px solid transparent;}
.gallery-thumbs .img-box.active{border-color:var(--color-secondary);}

.product-title .model-code{font-size:13px; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em;}
.product-title h1{font-size:clamp(26px,3vw,34px); margin:6px 0 6px;}
.product-title .series-tag{
  display:inline-block; font-size:12px; font-weight:600; color:var(--color-primary);
  background:rgba(158,171,202,.22); border:1px solid rgba(158,171,202,.45);
  padding:4px 10px; border-radius:20px; margin-bottom:18px;
}
.quick-specs{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0 24px; padding:18px; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);}
.quick-specs .qs{font-size:13px;}
.quick-specs .qs dt{color:var(--color-muted); text-transform:uppercase; font-size:11px; letter-spacing:.03em; font-weight:700; margin-bottom:2px;}
.quick-specs .qs dd{font-weight:700; font-size:16px; color:var(--color-text);}
.compat-note{
  display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius-sm);
  background:rgba(201,138,31,.1); border:1px solid rgba(201,138,31,.35); color:#8A6215; font-size:13px; margin-bottom:24px;
}

.variant-select-wrap{margin:18px 0 4px; max-width:360px;}
.variant-select-wrap label{
  display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--color-text-muted); margin-bottom:6px;
}
.variant-select-wrap select{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--color-secondary);
  background:#fff; font-family:inherit; font-size:15px; font-weight:600; color:var(--color-text); cursor:pointer;
}
.variant-select-wrap select:focus{outline:none; box-shadow:0 0 0 3px rgba(0,85,167,.15);}
.product-actions{display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- Tabs ---------- */
.tabs{margin-top:56px;}
.tab-list{display:flex; gap:4px; border-bottom:1px solid var(--color-border); margin-bottom:28px; overflow-x:auto;}
.tab-btn{
  padding:14px 20px; font-weight:600; font-size:14px; color:var(--color-text-muted); background:none; border:none;
  border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap;
}
.tab-btn.active{color:var(--color-secondary); border-bottom-color:var(--color-secondary);}

/* Without JS, every tab panel stays visible (stacked) so content is never hidden
   from crawlers or non-JS visitors. Only once JS confirms it's running (adds
   .js-tabs-enabled to <html>) do panels collapse into an actual tab interface. */
.tab-panel{margin-bottom:40px;}
html.js-tabs-enabled .tab-panel{display:none; margin-bottom:0;}
html.js-tabs-enabled .tab-panel.active{display:block;}
html:not(.js-tabs-enabled) .tab-list{display:none;}

/* Variant links (real anchor tags to sibling size variants — crawlable and bookmarkable) */
.variant-links{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 20px;}
.variant-links-label{font-size:12px; font-weight:600; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.02em; margin-right:2px;}
.variant-pill{
  display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:20px; font-size:13px; font-weight:600;
  color:var(--color-text); background:#fff; border:1px solid var(--color-border);
}
.variant-pill span{color:var(--color-text-muted); font-weight:500;}
.variant-pill:hover{border-color:var(--color-secondary); color:var(--color-secondary);}
.variant-pill.active{background:var(--color-secondary); border-color:var(--color-secondary); color:#fff;}
.variant-pill.active span{color:rgba(255,255,255,.8);}

/* Spec tables */
.spec-table{width:100%; border-collapse:collapse; margin-bottom:28px; font-size:14px;}
.spec-table caption{text-align:left; font-weight:700; margin-bottom:10px; font-size:15px; color:var(--color-text);}
.spec-table th, .spec-table td{padding:11px 14px; border:1px solid var(--color-border); text-align:left;}
.spec-table thead th{background:var(--color-bg); color:var(--color-text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
.spec-table tbody tr:nth-child(even){background:var(--color-bg);}

.detail-list{display:grid; grid-template-columns:1fr 1fr; gap:16px 32px; margin-bottom:32px;}
@media (max-width:640px){ .detail-list{grid-template-columns:1fr;} }
.detail-list dt{font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--color-muted); font-weight:700; margin-bottom:4px;}
.detail-list dd{font-size:15px; color:var(--color-text); margin-bottom:4px;}

.accessory-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;}
@media (max-width:640px){ .accessory-list{grid-template-columns:1fr;} }
.accessory-list li{font-size:14px; padding-left:20px; position:relative; color:var(--color-text);}
.accessory-list li::before{content:"✓"; position:absolute; left:0; color:var(--color-success); font-weight:700;}

/* Documents tab */
.doc-list{display:flex; flex-direction:column; gap:10px;}
.doc-item{
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border:1px solid var(--color-border); border-radius:var(--radius-sm); background:#fff;
}
.doc-item .name{font-weight:600; font-size:14px;}
.doc-item .meta{font-size:12px; color:var(--color-text-muted);}

/* Applications tab */
.app-chip-list{display:flex; gap:10px; flex-wrap:wrap;}
.app-chip{
  font-size:13px; font-weight:600; color:var(--color-primary); background:rgba(158,171,202,.22);
  border:1px solid rgba(158,171,202,.45); padding:8px 16px; border-radius:20px;
}

/* Related products */
.related-heading{margin:64px 0 24px;}