/*
 * Trudian / J-BSS catalogue depth layer
 * Scope: catalog/index.html only (.catalog-page)
 * Intent: make the B2B buying path legible without changing content, facts,
 * product links or shared page components.
 */

.catalog-page {
  --catalog-paper: #f5f1eb;
  --catalog-ink: #0d1720;
  --catalog-shadow: 0 14px 32px rgba(20, 30, 38, .08), 0 2px 7px rgba(20, 30, 38, .04);
  --catalog-shadow-lift: 0 24px 52px rgba(20, 30, 38, .14), 0 5px 14px rgba(20, 30, 38, .06);
  background: var(--catalog-paper);
}

.catalog-page .section-pad {
  position: relative;
  isolation: isolate;
}
.catalog-page .section-pad > .container {
  position: relative;
  z-index: 1;
}
.catalog-page .section-title {
  letter-spacing: -.025em;
  text-wrap: balance;
}
.catalog-page .section-sub { line-height: 1.7; }
.catalog-page .label-tag {
  border: 1px solid rgba(198, 106, 50, .18);
  box-shadow: 0 3px 10px rgba(164, 80, 34, .07);
}

/* Hero: a single dark decision point, with a copper signal line. */
.catalog-page .page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 22%, rgba(198, 106, 50, .20), transparent 28%),
    radial-gradient(circle at 12% 110%, rgba(46, 117, 102, .16), transparent 34%),
    linear-gradient(118deg, #0d1720 0%, #142430 58%, #10202a 100%);
  border-bottom: 3px solid var(--copper);
  box-shadow: inset 0 -32px 48px rgba(0,0,0,.12);
}
.catalog-page .page-hero::before {
  opacity: .34;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.72), transparent 88%);
}
.catalog-page .page-hero::after {
  content: '';
  position: absolute;
  top: 18%;
  right: -170px;
  width: 540px;
  height: 540px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
}
.catalog-page .page-hero .hero-content { max-width: 1180px; }
.catalog-page .page-hero h1 {
  max-width: 930px;
  letter-spacing: -.035em;
  text-shadow: 0 2px 24px rgba(0,0,0,.18);
}
.catalog-page .page-hero .hero-sub { max-width: 700px; }
.catalog-page .page-hero .btn-primary-jbss,
.catalog-page .page-hero .btn-secondary-jbss {
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

/* The JS-injected catalogue structure brief is the evidence bridge. */
.catalog-page .b2b-visual-brief {
  position: relative;
  background: linear-gradient(112deg, #eeece7 0%, #f6f3ee 56%, #e8eeec 100%);
  border-top: 0;
  border-bottom: 1px solid #ded8d0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.catalog-page .b2b-visual-brief::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1180px, 92%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,106,50,.34), transparent);
  transform: translateX(-50%);
}
.catalog-page .b2b-visual-brief .brief-grid {
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.catalog-page .b2b-visual-brief .brief-copy { max-width: 620px; }
.catalog-page .b2b-visual-brief .visual-placeholder.visual-image {
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 12px;
  border: 1px solid #d7a585;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8f6f1, #e6eceb);
  box-shadow: var(--catalog-shadow-lift);
}
.catalog-page .b2b-visual-brief .visual-placeholder.visual-image img {
  min-height: 0;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  object-fit: cover;
}

/* Category selection: three raised entry points, with a restrained copper edge. */
.catalog-page .catalog-category-section {
  background: linear-gradient(180deg, #fff 0%, #f7f3ee 100%);
  border-bottom: 1px solid #e2dbd2;
}
.catalog-page .catalog-category-section::before,
.catalog-page #products::before,
.catalog-page .catalog-manufacturer-section::before,
.catalog-page .catalog-faq-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1180px, 92%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,106,50,.25), transparent);
  transform: translateX(-50%);
}
.catalog-page .catalog-category-section .card-jbss {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 2.1vw, 28px);
  border-color: #e0d8ce;
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--catalog-shadow);
}
.catalog-page .catalog-category-section .card-jbss::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  background: var(--copper);
  border-radius: 0 0 3px 3px;
}
.catalog-page .catalog-category-section a:hover .card-jbss,
.catalog-page .catalog-category-section a:focus-visible .card-jbss {
  border-color: #d4a487;
  box-shadow: var(--catalog-shadow-lift);
  transform: translateY(-4px);
}
.catalog-page .catalog-category-section .cat-banner {
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 10px 22px rgba(20,30,38,.11);
}
.catalog-page .catalog-category-section .icon-list { margin-bottom: 28px !important; }
.catalog-page .catalog-category-section .btn-ghost { font-weight: 700; }

/* Model selection: pale procurement surface, elevated filter and cards. */
.catalog-page #products {
  background: linear-gradient(180deg, #f2eee8 0%, #ebe6de 100%);
}
.catalog-page #products .section-head { max-width: 760px; }
.catalog-page #products .filter-bar {
  position: relative;
  margin-bottom: 32px;
  padding: 12px 16px;
  border-color: #ded5cb;
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 20px rgba(20,30,38,.06);
}
.catalog-page #products .filter-bar::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--copper);
  border-radius: 12px 0 0 12px;
}
.catalog-page #products .filter-btn {
  background: rgba(255,255,255,.92);
  border-color: #ddd3c8;
}
.catalog-page #products .filter-btn:hover,
.catalog-page #products .filter-btn.active {
  box-shadow: 0 4px 12px rgba(198,106,50,.12);
}
.catalog-page #products .product-card {
  position: relative;
  overflow: hidden;
  border-color: #dfd6cc;
  border-radius: 13px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--catalog-shadow);
}
.catalog-page #products .product-card::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  background: var(--copper);
  border-radius: 0 0 3px 3px;
}
.catalog-page #products .product-card:hover {
  border-color: #d4a487;
  box-shadow: var(--catalog-shadow-lift);
  transform: translateY(-4px);
}
.catalog-page #products .pc-img {
  position: relative;
  background: linear-gradient(145deg, #f8f6f1, #e9e5de);
}
.catalog-page #products .pc-img.pc-img--contain img {
  padding: 18px;
  background: linear-gradient(145deg, #fff, #eef1ef);
  object-fit: contain;
}
.catalog-page #products .pc-img::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(198,106,50,.14);
  border-radius: 7px;
  pointer-events: none;
}
.catalog-page #products .pc-footer { border-top-color: #e8dfd5; }

/* Manufacturer proof: pair a calm fact panel with a more prominent table. */
.catalog-page .catalog-manufacturer-section { background: #fff; }
.catalog-page .catalog-manufacturer-section .row > .col-lg-6:first-child {
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid #e0d8ce;
  border-left: 4px solid var(--copper);
  border-radius: 14px;
  background: linear-gradient(145deg, #f8f5ef, #efebe4);
  box-shadow: var(--catalog-shadow);
}
.catalog-page .catalog-manufacturer-section .row > .col-lg-6:first-child .label-tag { margin-bottom: 14px; }
.catalog-page .catalog-manufacturer-section .table-wrap {
  margin: 0;
  border-color: #d9cfc5;
  border-radius: 14px;
  box-shadow: var(--catalog-shadow-lift);
}
.catalog-page .catalog-manufacturer-section .table-jbss thead th {
  background: linear-gradient(105deg, #bd612d, #d1793c);
}

/* FAQ and CTA close the purchase path with a quieter, confident finish. */
.catalog-page .catalog-faq-section {
  background: linear-gradient(180deg, #f8f5ef 0%, #eee9e1 100%);
}
.catalog-page .catalog-faq-section .faq-list {
  border-color: #ded5ca;
  border-radius: 12px;
  background: rgba(255,255,255,.76);
  box-shadow: var(--catalog-shadow);
}
.catalog-page .catalog-cta-section {
  background: linear-gradient(110deg, #f2ede6 0%, #fff 58%, #eee9e1 100%);
}
.catalog-page .catalog-cta-section .cta-section {
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 48px rgba(20,30,38,.18), 0 2px 8px rgba(20,30,38,.08);
}

@media (max-width: 767.98px) {
  .catalog-page .page-hero::after { right: -300px; }
  .catalog-page .b2b-visual-brief .visual-placeholder.visual-image { aspect-ratio: 16 / 10; }
  .catalog-page .catalog-category-section a:hover .card-jbss,
  .catalog-page .catalog-category-section a:focus-visible .card-jbss,
  .catalog-page #products .product-card:hover { transform: none; }
  .catalog-page .catalog-manufacturer-section .row > .col-lg-6:first-child { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-page .catalog-category-section .card-jbss,
  .catalog-page #products .product-card { transition: none; }
}