/* =========================================================
   Real catalogue layer — loaded after styles.css
   ========================================================= */

/* ---------- Hero / search refit ---------- */
.hero-copy h1 { font-size: clamp(43px, 4.7vw, 66px); }
.search-fields-simple { grid-template-columns: 1fr 1fr; }
.search-fields-simple .field { grid-column: auto; }
.search-fields-simple .search-submit { grid-column: 1 / -1; }
.hero-lede { max-width: 610px; }

/* ---------- Catalogue filters ---------- */
.letter-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.letter-filters .category-chip {
  min-height: 31px;
  padding: 0 8px;
  border: 1px solid #e2ded6;
  background: rgba(255, 255, 255, .36);
  font-size: 11px;
}
.letter-filters .category-chip b { font-size: 8.5px; }
.letter-filters .category-chip:first-child { grid-column: 1 / -1; }
.letter-filters .category-chip.is-active {
  border-color: var(--red);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.filter-toggle {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #ddd9d0;
  background: rgba(255, 255, 255, .36);
  color: #6e736f;
  font-size: 10.5px;
  text-align: left;
  transition: all .2s;
}
.filter-toggle .toggle-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #a9a59b;
  background: transparent;
  transition: all .2s;
}
.filter-toggle b { margin-left: auto; font-family: var(--font-display); font-size: 8.5px; font-weight: 500; color: #aaa69c; }
.filter-toggle:hover { border-color: #aaa69d; color: var(--ink); }
.filter-toggle.is-active { border-color: var(--red); background: #fff; color: var(--ink); }
.filter-toggle.is-active .toggle-dot { border-color: var(--red); background: var(--red); box-shadow: 0 0 0 3px rgba(228,0,27,.08); }
.filter-toggle.is-active b { color: var(--red); }

.data-card {
  border-top: 1px solid var(--line-dark);
  padding-top: 14px;
}
.data-card > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.data-card > div strong { font-family: var(--font-display); font-size: 10px; color: #575c58; }
.data-card p { margin: 6px 0 10px; font-size: 9.5px; line-height: 1.6; color: #9a9d96; word-break: break-all; }
.data-card a { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--red); font-weight: 600; }
.data-card a .icon { width: 12px; height: 12px; }
.data-card a:hover { text-decoration: underline; }

/* ---------- Model cards ---------- */
.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.product-card-visual {
  height: 248px;
  background:
    linear-gradient(rgba(20,22,24,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,24,.035) 1px, transparent 1px),
    radial-gradient(circle at 55% 45%, #faf9f5, #eae7df);
  background-size: 24px 24px, 24px 24px, auto;
}
.product-card-visual.has-sheet::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c5c1b7, transparent);
}
.product-card-visual::after { display: none; }
.product-art { inset: 26px 20px 18px; }
.product-sheet {
  display: block;
  max-width: 86%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: #fff;
  border: 1px solid #d6d2c8;
  padding: 4px;
  box-shadow: 0 12px 20px rgba(28,31,32,.16);
  transform: rotate(-1.2deg);
  transition: transform .45s var(--ease), box-shadow .45s;
}
.product-card:hover .product-sheet { transform: translateY(-4px) rotate(-.2deg) scale(1.025); box-shadow: 0 18px 28px rgba(28,31,32,.2); }
.product-sheet-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed #cfcabf;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 8px, rgba(245,243,237,.7) 8px 16px);
  color: #aaa69c;
}
.product-sheet-placeholder .icon { width: 29px; height: 29px; stroke-width: 1.2; }
.product-sheet-placeholder span { font-size: 9.5px; letter-spacing: .08em; }
.product-watermark { font-size: 67px; bottom: 3px; opacity: .8; }
.product-card-body { padding: 18px 19px 17px; }
.product-model { font-size: 27px; }
.product-name { margin-top: 6px; margin-bottom: 14px; color: #777b76; font-size: 11px; min-height: 0; }
.product-meta { padding-top: 13px; }
.product-badge { font-size: 8.5px; }
.product-link { font-size: 10px; }
.product-index { font-size: 8.5px; }
.product-cat { font-size: 8.5px; padding: 3px 7px; }

/* ---------- Part-number result panel ---------- */
.part-match-columns {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 90px 90px;
  gap: 12px;
  padding: 8px 20px;
  background: #f4f2ec;
  border-bottom: 1px solid #e5e1d9;
  color: #9a9d95;
  font-size: 8.5px;
  letter-spacing: .04em;
}
.part-match-columns span:nth-child(3) { text-align: right; }
.part-match-columns span:nth-child(4) { text-align: right; }
.part-match-list { max-height: 342px; overflow-y: auto; overscroll-behavior: contain; }
.part-match-more { border-top: 1px solid #e8e5dd; padding: 10px 20px; display: flex; justify-content: center; }
.part-more-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--red);
  font-weight: 600;
}
.part-more-button .icon { width: 12px; height: 12px; transform: rotate(90deg); }
.part-more-button:hover { text-decoration: underline; }
.pm-price.is-pending { color: #a77b00; font-size: 10px; }
.part-match-row { grid-template-columns: 52px minmax(0, 1fr) 90px 90px; }

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 27px;
  scroll-margin-top: 105px;
}
.page-button {
  min-width: 31px;
  height: 31px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9d5cc;
  background: rgba(255,255,255,.42);
  color: #676c67;
  font-family: var(--font-display);
  font-size: 10.5px;
  transition: all .18s;
}
.page-button:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.page-button.is-current { background: var(--ink); border-color: var(--ink); color: #fff; }
.page-button[disabled] { opacity: .35; pointer-events: none; }
.page-arrow .icon { width: 12px; height: 12px; }
.page-ellipsis { padding: 0 4px; color: #aaa69c; font-size: 10px; }
.page-total { margin-left: 8px; font-size: 9.5px; color: #999c95; }

/* ---------- Detail header ---------- */
.detail-side { gap: 8px; }
.detail-count { min-width: 77px; }
.detail-title-wrap h1 em { font-size: .42em; }
.detail-notes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-top: 25px;
  border: 1px solid #ddd9d0;
  background: rgba(255,255,255,.38);
}
.detail-notes > div { display: flex; gap: 10px; padding: 15px 17px; border-left: 1px solid #e1ddd5; }
.detail-notes > div:first-child { border-left: 0; }
.detail-notes .icon { width: 16px; height: 16px; flex: none; color: var(--red); margin-top: 1px; }
.detail-notes p { margin: 0; font-size: 9.5px; line-height: 1.7; color: #8c9089; }
.detail-notes strong { display: block; margin-bottom: 2px; color: #4c514d; font-size: 10px; }
.detail-notes a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Diagram with real image ---------- */
.panel-label > div:first-child { flex-wrap: wrap; }
.panel-page {
  font-family: var(--font-display);
  font-size: 8.5px;
  color: #9c9f98;
  border-left: 1px solid #ddd9d0;
  padding-left: 8px;
  margin-left: 1px;
}
.diagram-original {
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1ded6;
  background: #fff;
  color: #626763;
  transition: all .18s;
}
.diagram-original:hover { border-color: #a9a69d; color: var(--red); }
.diagram-original .icon { width: 14px; height: 14px; }
.diagram-controls button[disabled], .diagram-original[hidden] { opacity: .25; pointer-events: none; }
.diagram-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: #fff;
  box-shadow: 0 14px 40px rgba(23,26,27,.15);
  border: 1px solid #dad6cc;
  user-select: none;
  -webkit-user-drag: none;
}
.diagram-empty {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #a3a69f;
  text-align: center;
  pointer-events: none;
}
.diagram-empty .icon { width: 34px; height: 34px; stroke-width: 1.2; color: #c1bdb3; margin-bottom: 3px; }
.diagram-empty strong { font-size: 12px; color: #6d726d; font-weight: 600; }
.diagram-empty span { font-size: 9.5px; }
.diagram-pager {
  position: absolute;
  right: 14px;
  top: 13px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: rgba(255,255,255,.9);
  border: 1px solid #dedad1;
  box-shadow: 0 5px 14px rgba(20,22,24,.06);
  backdrop-filter: blur(4px);
}
.diagram-pager .pager-label { font-size: 8px; color: #999c95; padding: 0 5px 0 3px; letter-spacing: .04em; }
.diagram-pager button {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 9px;
  color: #747973;
  border: 1px solid transparent;
}
.diagram-pager button:hover { background: #f1eee7; color: var(--ink); }
.diagram-pager button.is-active { background: var(--red); color: #fff; }
.diagram-stage .stage-hint { z-index: 2; }
.diagram-panel:fullscreen .diagram-image { max-height: calc(100vh - 160px); }

/* ---------- Table additions ---------- */
.part-price.is-pending { color: #a77b00; font-size: 9.5px; font-weight: 600; }
.add-disabled { font-size: 9px; color: #b0aca2; white-space: nowrap; }
.sel-price strong.is-pending { color: #a77b00; font-size: 14px; }
.selection-ribbon .btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Cart / checkout / order pending states ---------- */
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.cart-thumb .icon { width: 22px; height: 22px; color: #b1ada3; }
.ci-price.is-pending { color: #a77b00; font-size: 10px; }
.cart-pending-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 9px;
  padding: 7px 9px;
  background: #fff8e5;
  border: 1px solid #f0dfb0;
  color: #8c6b13;
  font-size: 9px;
  line-height: 1.5;
}
.cart-pending-tip .icon { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.checkout-pending {
  margin: -11px 0 18px;
  padding: 8px 11px;
  background: #fff8e5;
  border-left: 2px solid #d6a300;
  font-size: 9.5px;
  color: #8a6b18;
}
.checkout-discount-note {
  margin: -12px 0 18px;
  color: #8d918a;
  font-size: 9px;
  line-height: 1.6;
}
.order-table td.pending-price { color: #a77b00; font-size: 8.5px; }

/* ---------- Responsive overrides ---------- */
@media (max-width: 1220px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card-visual { height: 238px; }
}
@media (max-width: 1020px) {
  .search-fields-simple { grid-template-columns: 1fr 1fr; }
  .letter-filters { grid-template-columns: repeat(4, 1fr); }
  .letter-filters .category-chip:first-child { grid-column: auto; }
  .filter-toggle { max-width: 320px; }
  .detail-notes { grid-template-columns: 1fr; }
  .detail-notes > div { border-left: 0; border-top: 1px solid #e1ddd5; }
  .detail-notes > div:first-child { border-top: 0; }
  .hero-copy h1 { font-size: clamp(46px, 7.2vw, 62px); }
}
@media (max-width: 760px) {
  .hero-copy h1 { font-size: clamp(37px, 10.5vw, 49px); }
  .hero-stats > div:nth-child(3) { display: flex !important; }
  .panel-label { height: auto; min-height: 52px; flex-wrap: wrap; gap: 5px; padding-top: 6px; padding-bottom: 6px; }
  .panel-label .panel-index { display: none; }
  .panel-label .panel-page { display: none; }
  .panel-label strong { font-size: 12px; }
  .diagram-controls { flex-wrap: nowrap; }
  .hero-stats > div { padding: 0 12px; }
  .hero-stats strong { font-size: 20px; }
  .hero-stats span { font-size: 9px; }
  .part-match-columns { grid-template-columns: 38px minmax(0, 1fr) 75px; padding: 7px 15px; }
  .part-match-columns span:nth-child(4) { display: none; }
  .part-match-list { max-height: 310px; }
  .parts-table { min-width: 0; }
  .parts-table .col-no { width: 35px; }
  .parts-table .col-code { width: 62px; }
  .parts-table .col-qty { width: 29px; }
  .parts-table .col-price { width: 49px; }
  .parts-table .col-action { width: 56px; padding-right: 6px; }
  .parts-table th { padding: 0 4px; font-size: 7.5px; }
  .parts-table th:first-child { padding-left: 9px; }
  .parts-table td { padding: 8px 4px; }
  .parts-table td:first-child { padding-left: 9px; }
  .part-no { min-width: 21px; height: 19px; font-size: 8px; }
  .part-code { font-size: 8.5px; }
  .part-name { font-size: 9.5px; line-height: 1.35; }
  .part-note { font-size: 7.5px; }
  .part-price { font-size: 9px; }
  .part-price small { font-size: 7px; }
  .add-part { height: 25px; padding: 0 5px; font-size: 8.5px; gap: 2px; }
  .add-part .icon { width: 9px; height: 9px; }
  .qty-inline { height: 25px; }
  .qty-inline button { width: 14px; }
  .qty-inline b { min-width: 14px; font-size: 8.5px; }
  .add-disabled { font-size: 7.5px; }
  .list-foot p { display: none; }
  .letter-filters { grid-template-columns: repeat(4, 1fr); }
  .letter-filters .category-chip { min-height: 29px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card-visual { height: 255px; }
  .product-sheet { max-width: 72%; }
  .part-match-row { grid-template-columns: 38px minmax(0, 1fr) 75px; }
  .part-match-row .pm-link { display: none; }
  .pagination { gap: 3px; margin-top: 21px; }
  .page-button { min-width: 28px; height: 28px; padding: 0 7px; }
  .page-total { width: 100%; text-align: center; margin: 4px 0 0; }
  .detail-side { flex-wrap: wrap; }
  .detail-count { min-width: 70px; }
  .detail-notes { margin-top: 17px; }
  .diagram-pager { top: 10px; right: 10px; }
  .diagram-empty strong { font-size: 11px; }
  .diagram-empty span { font-size: 9px; padding: 0 30px; }
  .diagram-image { max-height: 100%; }
  .search-fields-simple { grid-template-columns: 1fr; }
}
@media (max-width: 470px) {
  .letter-filters { grid-template-columns: repeat(3, 1fr); }
  .product-card-visual { height: 230px; }
  .product-sheet { max-width: 76%; }
  .detail-count { min-width: 64px; }
  .detail-count strong { font-size: 19px; }
}