/* Wolf Auto Parts Search - Shopify theme widget styles */

/* ===== RESET / BASE ===== */
.wolf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  /* No global box-sizing reset in this codebase, so set it here: a full-width
     button (e.g. .wolf-info-page__actions .wolf-btn on mobile) must include its
     padding in width:100%, or it overflows its card and scrolls the page. */
  box-sizing: border-box;
  padding: 0.6em 1.4em;
  border: none;
  border-radius: 4px;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, opacity 0.15s ease;
  line-height: 1.4;
}

.wolf-btn:disabled,
.wolf-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.wolf-btn--primary {
  background: var(--wolf-gold);
  color: var(--wolf-text-inverse);
}

.wolf-btn--primary:hover:not(:disabled),
.wolf-btn--primary:focus-visible:not(:disabled) {
  background: var(--wolf-gold-hover);
}

.wolf-btn--secondary {
  background: var(--wolf-bg-subtle);
  color: var(--wolf-text);
  border: 1px solid var(--wolf-border-faint);
}

.wolf-btn--secondary:hover:not(:disabled),
.wolf-btn--secondary:focus-visible:not(:disabled) {
  background: var(--wolf-bg-hover);
}

.wolf-btn--ghost {
  background: transparent;
  color: var(--wolf-text);
  border: 1px solid var(--wolf-border-light);
}

.wolf-btn--ghost:hover:not(:disabled),
.wolf-btn--ghost:focus-visible:not(:disabled) {
  background: var(--wolf-bg-light);
}

/* ===== LOADING STATE ===== */
.wolf-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 2rem;
  color: var(--wolf-text-body);
  font-size: 1.5rem;
}

.wolf-loading::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid var(--wolf-border-light);
  border-top-color: var(--wolf-gold);
  border-radius: 50%;
  animation: wolf-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes wolf-spin {
  to { transform: rotate(360deg); }
}

/* ===== VEHICLE SELECTOR PANEL ===== */
.wolf-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--wolf-z-panel-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.wolf-panel-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.wolf-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: var(--wolf-z-panel);
  background: var(--wolf-bg);
  box-shadow: var(--wolf-shadow-modal);
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wolf-panel-overlay.is-open .wolf-panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.wolf-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--wolf-bg-light);
}

.wolf-panel__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--wolf-text-dark);
  margin: 0;
}

.wolf-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--wolf-text-muted);
  transition: color 0.12s;
  width: 28px;
  height: 28px;
}

.wolf-panel__close:hover {
  color: var(--wolf-text);
}

.wolf-panel__close svg {
  width: 100%;
  height: 100%;
}

.wolf-panel__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--wolf-bg-light);
  min-height: 44px;
}

.wolf-panel__crumb {
  background: var(--wolf-gold);
  color: var(--wolf-text-inverse);
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  transition: background 0.12s;
  white-space: nowrap;
  font-family: inherit;
}

.wolf-panel__crumb:hover,
.wolf-panel__crumb:focus-visible {
  background: var(--wolf-gold-hover);
}

.wolf-panel__crumb-sep {
  color: var(--wolf-border-light);
  font-size: 14px;
  user-select: none;
}

.wolf-panel__crumb-current {
  font-weight: 600;
  color: var(--wolf-text);
  font-size: 13px;
}

.wolf-panel__body {
  padding: 1rem 1.5rem 1.5rem;
}

.wolf-panel__browse-all {
  display: block;
  width: 100%;
  background: var(--wolf-gold);
  color: var(--wolf-text-inverse);
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  margin-bottom: 0.75rem;
  transition: background 0.12s;
  font-family: inherit;
}

.wolf-panel__browse-all:hover,
.wolf-panel__browse-all:focus-visible {
  background: var(--wolf-gold-hover);
}

.wolf-panel__divider {
  text-align: center;
  color: var(--wolf-text-muted);
  font-size: 12px;
  margin-bottom: 0.75rem;
}

.wolf-panel__search {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--wolf-border-faint);
  border-radius: 6px;
  font-size: 16px;
  margin-bottom: 0.75rem;
}

.wolf-panel__search:focus-visible {
  outline: none;
  border-color: var(--wolf-gold);
  box-shadow: var(--wolf-shadow-focus);
}

/* Part type instant search */
.wolf-panel__pt-search {
  position: relative;
  margin-bottom: 0.75rem;
}

.wolf-panel__pt-form {
  margin: 0;
  padding: 0;
}

.wolf-panel__pt-search .wolf-panel__search {
  margin-bottom: 0;
}

.wolf-panel__pt-results {
  border: 1px solid var(--wolf-bg-hover);
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: var(--wolf-bg);
  max-height: 280px;
  overflow-y: auto;
}

.wolf-panel__pt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 14px;
  border: none;
  border-bottom: 1px solid var(--wolf-bg-subtle);
  background: var(--wolf-bg);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--wolf-text);
  text-align: left;
  transition: background 0.1s;
}

.wolf-panel__pt-item:hover,
.wolf-panel__pt-item:focus-visible {
  background: var(--wolf-gold-light);
}

.wolf-panel__pt-item:last-child {
  border-bottom: none;
}

.wolf-panel__pt-item-name {
  font-weight: 500;
}

.wolf-panel__pt-item-count {
  color: var(--wolf-text-muted);
  font-size: 12px;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.wolf-panel__pt-empty {
  padding: 12px 14px;
  color: var(--wolf-text-muted);
  font-size: 13px;
}

.wolf-panel__pt-loading {
  padding: 14px;
  color: var(--wolf-text-muted);
  font-size: 13px;
  text-align: center;
}

.wolf-panel__pt-more {
  padding: 8px 14px;
  color: var(--wolf-text-muted);
  font-size: 12px;
  font-style: italic;
}

.wolf-panel__pt-more--link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--wolf-bg-hover);
  cursor: pointer;
  font-style: normal;
  font-weight: 500;
  color: var(--wolf-gold);
  text-align: center;
}

.wolf-panel__pt-more--link:hover,
.wolf-panel__pt-more--link:focus-visible {
  background: var(--wolf-gold-light);
}

/* Master part search results */
.wolf-panel__part-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-bottom: 1px solid var(--wolf-bg-hover);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}

.wolf-panel__part-item:hover,
.wolf-panel__part-item:focus-visible {
  background: var(--wolf-gold-light);
}

.wolf-panel__part-item:last-child {
  border-bottom: none;
}

.wolf-panel__part-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--wolf-bg-hover);
}

.wolf-panel__part-img--fallback {
  background: var(--wolf-bg-hover) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center/24px no-repeat;
}

.wolf-panel__part-info {
  flex: 1;
  min-width: 0;
}

.wolf-panel__part-title {
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wolf-panel__part-meta {
  font-size: 12px;
  color: var(--wolf-text-muted);
  margin-top: 2px;
}

.wolf-panel__part-right {
  flex-shrink: 0;
  text-align: right;
}

.wolf-panel__part-price {
  font-weight: 600;
  font-size: 13px;
}

.wolf-panel__part-avail {
  font-size: 1.2rem;
  color: var(--wolf-text-muted);
}

.wolf-panel__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
}

.wolf-panel__option {
  border: 1px solid var(--wolf-bg-hover);
  border-radius: 4px;
  background: var(--wolf-bg-panel);
  padding: 6px 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
}

.wolf-panel__option:hover,
.wolf-panel__option:focus-visible {
  background: var(--wolf-gold-light);
  border-color: var(--wolf-gold);
}

.wolf-panel__option-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--wolf-text-dark);
}

.wolf-panel__option-count {
  font-size: 1.2rem;
  color: var(--wolf-text-muted);
}

.wolf-panel__more {
  background: none;
  border: none;
  color: var(--wolf-amber);
  font-size: 12px;
  cursor: pointer;
  padding: 0.5rem 0;
  text-decoration: underline;
  grid-column: 1 / -1;
}

.wolf-panel__more:hover,
.wolf-panel__more:focus-visible {
  color: var(--wolf-gold-hover);
}

.wolf-panel-garage {
  padding: 1rem 1.5rem 1.5rem;
}

.wolf-panel__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--wolf-text-body);
  gap: 0.5rem;
}

.wolf-panel__loading::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid var(--wolf-border-light);
  border-top-color: var(--wolf-gold);
  border-radius: 50%;
  animation: wolf-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ===== PAGE TITLE ===== */
.wolf-page-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--wolf-blue);
  margin: 0 0 0.75rem 0;
}

/* ===== PARTS PAGE CONTAINER ===== */
.wolf-parts-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

/* ===== VEHICLE BAR (gold, stacked layout) ===== */
.wolf-vehicle-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.2rem 0.75rem;
  background: var(--wolf-gold-warm);
  border: 2px solid var(--wolf-gold);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 1rem;
}

.wolf-vehicle-bar__label {
  grid-column: 1 / -1;
  font-weight: 700;
  color: var(--wolf-blue);
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

.wolf-vehicle-bar__value {
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--wolf-text);
  line-height: 1.3;
}

.wolf-vehicle-bar__btn {
  align-self: center;
  background: var(--wolf-gold);
  border: none;
  color: var(--wolf-text-inverse);
  padding: 0.3em 0.9em;
  border-radius: 3px;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.wolf-vehicle-bar__btn:hover,
.wolf-vehicle-bar__btn:focus-visible {
  background: var(--wolf-gold-hover);
}

/* ===== FILTER HEADING ===== */
.wolf-filter-heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--wolf-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--wolf-blue);
}

.wolf-facets__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.wolf-facets__clear-count {
  background: var(--wolf-gold);
  color: var(--wolf-text-inverse);
  border-radius: 10px;
  padding: 0.1rem 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  min-width: 1.6rem;
  text-align: center;
}

.wolf-facets__clear:disabled,
.wolf-facets__clear.is-disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* ===== SEARCH BAR ===== */
.wolf-search-bar {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 1.25rem;
}

.wolf-search-bar input[type="text"] {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--wolf-border-light);
  border-radius: 4px;
  font-size: 1.6rem;
  color: var(--wolf-text-dark);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wolf-search-bar input[type="text"]:focus-visible {
  outline: none;
  border-color: var(--wolf-blue);
  box-shadow: var(--wolf-shadow-focus-blue);
}

.wolf-search-bar .wolf-btn {
  padding: 0.6rem 1.2rem;
  background: var(--wolf-blue);
  color: var(--wolf-text-inverse);
  border: none;
  border-radius: 4px;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.wolf-search-bar .wolf-btn:hover,
.wolf-search-bar .wolf-btn:focus-visible {
  background: var(--wolf-blue-hover);
}

/* ===== LAYOUT: SIDEBAR + RESULTS ===== */
.wolf-content {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* ===== SIDEBAR ===== */
.wolf-sidebar {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  /* Small inset so bordered facet cards aren't clipped by overflow-x: hidden
     (and the scrollbar gutter) at the right edge. */
  padding: 0 2px;
}

.wolf-sidebar::-webkit-scrollbar {
  display: none;
}

.wolf-facet-group {
  margin-bottom: 1rem;
  border: 1px solid var(--wolf-border-light);
  border-radius: 6px;
  overflow: hidden;
}

.wolf-facet-group:last-child {
  margin-bottom: 0;
}

.wolf-facet-group__label {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--wolf-blue);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
  padding: 0.85rem 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  background: var(--wolf-bg-subtle, #f7f7f8);
}

.wolf-facet-group:not(.is-collapsed) .wolf-facet-group__label {
  border-bottom: 1px solid var(--wolf-border-light);
}

.wolf-facet-group__chevron {
  color: var(--wolf-text-muted);
  flex-shrink: 0;
  transition: transform 0.15s;
}

.wolf-facet-group.is-collapsed .wolf-facet-group__chevron {
  transform: rotate(-90deg);
}

.wolf-facet-group__options {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 1.2rem 0.75rem;
}

.wolf-facet-group.is-collapsed .wolf-facet-group__options,
.wolf-facet-group.is-collapsed .wolf-facet-toggle {
  display: none;
}

.wolf-facet-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.4rem;
  color: var(--wolf-text);
  cursor: pointer;
  padding: 0.15rem 0;
}

.wolf-facet-option input[type="checkbox"] {
  accent-color: var(--wolf-gold);
  cursor: pointer;
}

.wolf-facet-option:hover,
.wolf-facet-option:focus-visible {
  color: var(--wolf-gold);
}

.wolf-facet-option__count {
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--wolf-text-faint);
}

.wolf-facet-option--link {
  text-decoration: none;
  padding-left: 1.8rem;
  position: relative;
}

.wolf-facet-option--link::before {
  content: "›";
  position: absolute;
  left: 0.4rem;
  color: var(--wolf-text-faint);
  font-size: 1.4rem;
  line-height: 1;
}

.wolf-facet-option--link:hover::before,
.wolf-facet-option--link:focus-visible::before {
  color: var(--wolf-gold);
}

.wolf-facet-search {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--wolf-border-faint);
  border-radius: 4px;
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
}

.wolf-facet-search:focus-visible {
  outline: none;
  border-color: var(--wolf-gold);
  box-shadow: var(--wolf-shadow-focus);
}

.wolf-facet-toggle {
  background: none;
  border: none;
  color: var(--wolf-amber);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.3rem 0;
  text-decoration: underline;
}

.wolf-facet-toggle:hover,
.wolf-facet-toggle:focus-visible {
  color: var(--wolf-gold-hover);
}

/* ===== CATEGORY TREE ===== */
.wolf-category-tree .wolf-facet-group__options {
  gap: 0;
}

.wolf-cat-node {
  border-bottom: 1px solid var(--wolf-bg-light);
}

.wolf-cat-node:last-child {
  border-bottom: none;
}

.wolf-cat-node__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  font-size: 1.4rem;
  color: var(--wolf-text);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}

.wolf-cat-node__row:hover {
  background: var(--wolf-gold-light);
}

.wolf-cat-node__row.is-active {
  background: var(--wolf-gold-bg);
}

.wolf-cat-node__row.is-active .wolf-cat-node__name {
  font-weight: 600;
  color: var(--wolf-amber);
}

.wolf-cat-node__toggle {
  position: relative;
  z-index: 2;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wolf-text-muted);
  transition: transform 0.2s, color 0.15s;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 3px;
}

.wolf-cat-node__toggle:hover {
  color: var(--wolf-text-body);
  background: var(--wolf-bg-light);
}

.wolf-cat-node__toggle.is-expanded {
  transform: rotate(90deg);
  color: var(--wolf-amber);
}

.wolf-cat-node__name {
  cursor: pointer;
  user-select: none;
  color: inherit;
  text-decoration: none;
  line-height: 1.3;
}

/* Stretch the category link to cover the whole row so hovering anywhere
   highlighted is clickable. Toggle button sits above via z-index. */
.wolf-cat-node__name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

.wolf-cat-node__count {
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--wolf-text-faint);
  flex-shrink: 0;
}

.wolf-cat-node__children {
  padding-left: 1.25rem;
  border-left: 2px solid var(--wolf-bg-light);
  margin-left: 0.55rem;
}

.wolf-cat-node__children.is-hidden {
  display: none;
}

.wolf-cat-node__row--child {
  font-size: 1.3rem;
  padding: 0.35rem 0.25rem;
  color: #555;
}

.wolf-cat-node__row--depth-0 { padding-left: 0; }
.wolf-cat-node__row--depth-1 { padding-left: 16px; }
.wolf-cat-node__row--depth-2 { padding-left: 32px; }
.wolf-cat-node__row--depth-3 { padding-left: 48px; }
.wolf-cat-node__row--depth-4 { padding-left: 64px; }
.wolf-cat-node__row--depth-5 { padding-left: 80px; }
.wolf-cat-node__row--depth-6 { padding-left: 96px; }
.wolf-cat-node__row--depth-7 { padding-left: 112px; }
.wolf-cat-node__row--depth-8 { padding-left: 128px; }
.wolf-cat-node__row--depth-9 { padding-left: 144px; }
.wolf-cat-node__row--depth-10 { padding-left: 160px; }

.wolf-cat-node__row--child:hover {
  background: var(--wolf-gold-light);
}

.wolf-cat-node__row--child.is-active {
  background: var(--wolf-gold-bg);
}

.wolf-cat-node__row--child.is-active .wolf-cat-node__name {
  font-weight: 600;
  color: var(--wolf-amber);
}

/* ===== RESULTS GRID ===== */
.wolf-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.wolf-results-scope {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--wolf-gold-warm, #fef8ee);
  border: 1px solid var(--wolf-gold, #f7941d);
  border-radius: 6px;
  font-size: 1.3rem;
  color: var(--wolf-blue);
}

.wolf-results-scope.is-visible {
  display: flex;
}

.wolf-results-scope__link {
  color: var(--wolf-link);
  font-size: 1.3rem;
  white-space: nowrap;
}

.wolf-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wolf-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.wolf-filter-pills:empty {
  display: none;
}

.wolf-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: var(--wolf-gold-light);
  border: 1px solid var(--wolf-gold);
  border-radius: 999px;
  font-size: 1.2rem;
  color: var(--wolf-text-dark);
  line-height: 1;
}

.wolf-filter-pill__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: none;
  color: var(--wolf-text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 50%;
}

.wolf-filter-pill__remove:hover {
  color: var(--wolf-text);
  background: rgba(0, 0, 0, 0.08);
}

.wolf-results-count {
  font-size: 1.4rem;
  color: var(--wolf-text-body);
}

.wolf-results-sort {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.4rem;
  color: var(--wolf-text);
}

.wolf-results-sort,
.wolf-results-sort select {
  padding: 0.3em 0.6em;
  border: 1px solid var(--wolf-border-light);
  border-radius: 4px;
  font-size: 1.6rem;
  background: var(--wolf-bg);
  cursor: pointer;
  color: var(--wolf-text);
}

.wolf-card__oem {
  display: block;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--wolf-text-body);
  margin-top: 0.15rem;
}

/* ===== RESULT CARD ===== */
.wolf-card {
  background: var(--wolf-bg);
  border: 1px solid var(--wolf-bg-hover);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s, transform 0.15s;
  text-decoration: none;
  color: inherit;
}

.wolf-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.wolf-card__img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wolf-bg-subtle);
  position: relative;
}

.wolf-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wolf-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wolf-border-light);
  font-size: 3rem;
}

.wolf-card__body {
  padding: 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wolf-card__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--wolf-text-dark);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wolf-card__price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--wolf-blue);
}

.wolf-card__price-prefix {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--wolf-text-body);
}

.wolf-card__fitment {
  font-size: 1.2rem;
  color: var(--wolf-text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wolf-card__color {
  font-size: 1.2rem;
  color: var(--wolf-text-body);
}

.wolf-card__color--match {
  color: var(--wolf-status-success-alt);
  font-weight: 600;
}

.wolf-card__part-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
}

.wolf-card__pn {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--wolf-status-info-dark);
  letter-spacing: 0.02em;
}

.wolf-card__pn--porsche {
  color: #6a1b9a;
}

.wolf-card__meta {
  font-size: 1.2rem;
  color: var(--wolf-text-body);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.wolf-card__badge {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wolf-card__badge--condition {
  background: var(--wolf-bg-success);
  color: var(--wolf-status-success-alt);
}

.wolf-card__badge--oem {
  background: var(--wolf-bg-info);
  color: var(--wolf-status-info-dark);
}

.wolf-card__badge--side {
  background: var(--wolf-bg-accent);
  color: var(--wolf-status-accent);
}

/* Freight exceptions only — free shipping is announced site-wide. */
.wolf-card__badge--freight {
  background: var(--wolf-bg-warning);
  color: var(--wolf-status-warning);
}

.wolf-card__sku {
  font-size: 1.2rem;
  color: var(--wolf-text-faint);
  margin-top: auto;
}

/* ===== FITMENT MISMATCH ===== */
.wolf-card--mismatch {
  border-color: var(--wolf-border-warning);
  background: var(--wolf-bg-warning);
}

.wolf-card--mismatch .wolf-card__title {
  color: var(--wolf-text-body);
}

.wolf-mismatch-banner {
  background: var(--wolf-bg-warning-soft);
  border: 1px solid var(--wolf-border-warning);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 1.3rem;
  color: var(--wolf-status-warning-dark);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.wolf-mismatch-banner::before {
  content: "⚠";
  flex-shrink: 0;
}

/* ===== PAGINATION ===== */
.wolf-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.5rem 0 0.5rem;
  flex-wrap: wrap;
}

.wolf-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  height: 3.2rem;
  padding: 0 0.5rem;
  border: 1px solid var(--wolf-border-faint);
  border-radius: 3px;
  background: var(--wolf-bg);
  font-size: 1.4rem;
  color: var(--wolf-blue);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}

.wolf-page:hover {
  background: var(--wolf-bg-info);
  border-color: var(--wolf-blue);
}

.wolf-page--current {
  background: var(--wolf-blue);
  border-color: var(--wolf-blue);
  color: var(--wolf-text-inverse);
  font-weight: 700;
  cursor: default;
}

.wolf-page--current:hover {
  background: var(--wolf-blue);
}

.wolf-page--prev,
.wolf-page--next {
  padding: 0 0.75rem;
  font-weight: 600;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wolf-page--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.wolf-page--ellipsis {
  border: none;
  background: none;
  color: var(--wolf-text-faint);
  cursor: default;
  min-width: 1.5rem;
}

.wolf-page--ellipsis:hover {
  background: none;
  border: none;
}

/* ===== SEO BROWSE LINKS ===== */
.wolf-seo-links {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wolf-border-faint);
}

.wolf-seo-links__group + .wolf-seo-links__group {
  margin-top: 1.5rem;
}

.wolf-seo-links__title {
  margin: 0 0 0.8rem;
  color: var(--wolf-blue);
  font-size: 1.8rem;
  font-weight: 700;
}

.wolf-seo-links__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.6rem;
}

.wolf-seo-links__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 3.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--wolf-border-faint);
  border-radius: 4px;
  color: var(--wolf-blue);
  text-decoration: none;
  background: var(--wolf-bg);
}

.wolf-seo-links__link:hover,
.wolf-seo-links__link:focus-visible {
  border-color: var(--wolf-blue);
  background: var(--wolf-bg-info);
}

.wolf-seo-links__link span {
  font-size: 1.4rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.wolf-seo-links__link small {
  color: var(--wolf-text-body);
  font-size: 1.2rem;
  white-space: nowrap;
}

/* ===== HOMEPAGE CTA SECTION ===== */
.wolf-cta {
  text-align: center;
  padding: 4rem 1.5rem;
  background: linear-gradient(135deg, var(--wolf-blue) 0%, #0f2340 100%);
  color: var(--wolf-text-inverse);
}

.wolf-cta__heading {
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  font-weight: 800;
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.wolf-cta__heading span {
  color: var(--wolf-gold);
}

.wolf-cta__subheading {
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  color: var(--wolf-border-emphasis);
  margin: 0 0 2rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.wolf-cta__btn {
  font-size: 1.7rem;
  padding: 0.85em 2.2em;
  background: var(--wolf-gold);
  color: var(--wolf-text-inverse);
  border: none;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  letter-spacing: 0.02em;
}

.wolf-cta__btn:hover,
.wolf-cta__btn:focus-visible {
  background: var(--wolf-gold-hover);
  transform: translateY(-1px);
}

.wolf-cta__note {
  margin: 1.2rem 0 0;
  font-size: 1.5rem;
  color: #555;
}

/* ===== HEADER NAV LINK ===== */
.wolf-header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
  font-weight: 600;
  color: inherit;
  transition: color 0.15s;
}

.wolf-header-link:hover {
  color: var(--wolf-gold);
}

.wolf-header-link__icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* ===== EMPTY STATE ===== */
.wolf-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--wolf-text-faint);
}

.wolf-empty__icon {
  font-size: 4.8rem;
  margin-bottom: 0.75rem;
}

.wolf-empty__title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--wolf-text);
  margin-bottom: 0.4rem;
}

.wolf-empty__msg {
  font-size: 1.4rem;
}

.wolf-empty__actions {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}

.wolf-empty__links {
  margin-top: 1.6rem;
  font-size: 1.3rem;
}

.wolf-empty__links a {
  margin-left: 1rem;
  text-decoration: underline;
}

/* ===== MOBILE FILTER DRAWER ===== */
.wolf-mobile-filter-controls {
  display: none;
}

.wolf-mobile-filter-btn {
  display: none;
}

.wolf-filter-drawer-backdrop {
  display: none;
}

.wolf-mobile-filter-header {
  display: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .wolf-content {
    grid-template-columns: 1fr;
  }

  .wolf-panel__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* --- Filter drawer --- */
  .wolf-sidebar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: var(--wolf-z-dropdown);
    background: var(--wolf-bg);
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.2);
    padding: 0 1rem 1.5rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    -webkit-overflow-scrolling: touch;
  }

  .wolf-sidebar.is-drawer-mounted {
    display: block;
  }

  .wolf-sidebar.is-drawer-open {
    transform: translateY(0);
  }

  .wolf-mobile-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    background: var(--wolf-bg);
    z-index: 1;
    border-bottom: 1px solid var(--wolf-border-faint, #eee);
    margin-bottom: 0.75rem;
  }

  .wolf-mobile-filter-header__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--wolf-text-dark, #111);
  }

  .wolf-mobile-filter-header__close {
    background: none;
    border: none;
    font-size: 2.4rem;
    color: var(--wolf-text-muted, #888);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
  }

  .wolf-filter-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--wolf-z-header);
    background: rgba(0,0,0,0.4);
  }

  .wolf-filter-drawer-backdrop.is-open {
    display: block;
  }

  .wolf-mobile-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.7rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--wolf-border, #ccc);
    border-radius: 6px;
    background: var(--wolf-bg);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--wolf-text, #333);
    cursor: pointer;
  }

  .wolf-mobile-filter-btn__icon {
    font-size: 1.5rem;
  }

  .wolf-mobile-filter-btn__count {
    background: var(--wolf-gold);
    color: var(--wolf-text-inverse);
    border-radius: 10px;
    padding: 0.1rem 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 1.6rem;
    text-align: center;
  }

  /* --- Show mobile filter controls --- */
  .wolf-mobile-filter-controls {
    display: block;
  }

  /* --- Hide in-page search bar on mobile --- */
  .wolf-search-bar {
    display: none;
  }

  /* --- Results header: stack --- */
  .wolf-results-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .wolf-results-sort,
  .wolf-results-sort select {
    width: 100%;
    padding: 0.5em 0.6em;
    font-size: 1.6rem;
  }

  /* --- Results grid --- */
  .wolf-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Touch targets: facets --- */
  .wolf-facet-option {
    padding: 0.5rem 0;
    min-height: 44px;
  }

  .wolf-facet-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .wolf-facet-group__label {
    min-height: 44px;
    padding: 0.85rem 1.2rem;
  }

  .wolf-cat-node__row {
    min-height: 44px;
    padding: 0.6rem 0.25rem;
  }

  /* --- Touch targets: pagination --- */
  .wolf-page {
    min-width: 4rem;
    height: 4rem;
    font-size: 1.5rem;
  }

  .wolf-page--prev,
  .wolf-page--next {
    padding: 0 1rem;
    font-size: 1.4rem;
  }

  /* --- Vehicle bar: more prominent --- */
  .wolf-vehicle-bar {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
  }

  .wolf-vehicle-bar__value {
    font-size: 1.5rem;
  }

  .wolf-vehicle-bar__btn {
    font-size: 1.4rem;
    padding: 0.4rem 1rem;
    min-height: 44px;
  }

  .wolf-cta {
    padding: 2.5rem 1rem;
  }

  /* --- Card title on very small cards --- */
  .wolf-card__title {
    font-size: 1.3rem;
  }

  .wolf-card__price {
    font-size: 1.3rem;
  }
}

@media (max-width: 768px) {
  .wolf-panel {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    top: auto;
    left: 0;
    transform: translateY(1.6rem);
    border-radius: 0;
    overflow: hidden;
  }

  .wolf-panel-overlay.is-open .wolf-panel {
    transform: translateY(0);
  }

  .wolf-panel__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0.75rem 1rem;
    background: var(--wolf-blue);
    color: var(--wolf-text-inverse);
    border-bottom: none;
  }

  .wolf-panel__scroll-area {
    position: absolute;
    top: 49px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .wolf-panel__grid {
    grid-template-columns: 1fr;
  }

  .wolf-panel__title {
    color: var(--wolf-text-inverse);
    font-size: 1.2rem;
  }

  .wolf-panel__close {
    color: rgba(255, 255, 255, 0.7);
  }

  .wolf-panel__close:hover,
  .wolf-panel__close:focus-visible {
    color: var(--wolf-text-inverse);
  }

  .wolf-panel__breadcrumb {
    padding: 0.5rem 1rem;
    background: var(--wolf-gold-light);
    border-bottom: 2px solid var(--wolf-gold);
  }

  .wolf-panel__body {
    padding: 0.75rem 1rem 1.25rem;
    background: var(--wolf-bg-subtle);
  }

  .wolf-panel__option {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--wolf-bg);
  }

  .wolf-panel__crumb-current {
    display: none;
  }
}

@media (max-width: 480px) {
  .wolf-results-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .wolf-card__body {
    padding: 0.5rem;
  }

  .wolf-page-title {
    font-size: 1.8rem;
  }

  /* Hide page numbers, keep prev/next only */
  .wolf-page:not(.wolf-page--prev, .wolf-page--next, .wolf-page--current) {
    display: none;
  }

  .wolf-page--ellipsis {
    display: none;
  }
}

/* ============================================
   My Garage
   ============================================ */

/* --- Header Nav Layout --- */
.wolf-header-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header__icons .wolf-header-nav {
  margin-right: 1rem;
}

.header__icons .wolf-header-link {
  line-height: 1;
}

/* --- Small Button Variant --- */
.wolf-btn--small {
  padding: 4px 10px;
  font-size: 12px;
}

/* --- Active Vehicle Indicator --- */
.wolf-active-vehicle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--wolf-text);
  cursor: pointer;
}

.wolf-active-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.wolf-active-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--wolf-text-muted);
  padding: 0 2px;
  line-height: 1;
}

.wolf-active-clear:hover {
  color: #c00;
}

/* --- Sold Out Product State --- */
.wolf-sold-out-notice {
  margin-top: 1.6rem;
  padding: 2.4rem 2rem;
  border: 1px solid rgba(18, 18, 18, 0.08);
  border-radius: 1.2rem;
  background: rgba(18, 18, 18, 0.03);
  text-align: center;
}

.wolf-sold-out-notice h2 {
  margin: 0 0 0.8rem;
  color: var(--wolf-text-dark);
  font-size: 2.2rem;
}

.wolf-sold-out-notice p {
  margin: 0 0 1.6rem;
  color: var(--wolf-text-body);
}

.wolf-sold-out-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* --- Popup Garage Section --- */
.wolf-garage-popup-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wolf-text-body);
  margin: 0 0 8px;
}

.wolf-garage-popup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--wolf-border);
  border-radius: 4px;
  margin-bottom: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.wolf-garage-popup-item:hover {
  background: #f7f7f7;
}

.wolf-garage-popup-label {
  flex: 1;
  min-width: 0;
}

.wolf-garage-popup-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--wolf-text-muted);
  padding: 0 2px;
  flex-shrink: 0;
}

.wolf-garage-popup-remove:hover {
  color: #c00;
}

.wolf-garage-popup-divider {
  text-align: center;
  color: var(--wolf-text-muted);
  font-size: 13px;
  padding: 12px 0;
  position: relative;
}

.wolf-garage-popup-new-btn {
  display: block;
  width: 100%;
  background: none;
  border: 2px dashed var(--wolf-border);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--wolf-gold);
  padding: 12px 16px;
  margin-top: 4px;
  transition: border-color 0.15s, background 0.15s;
}

.wolf-garage-popup-new-btn:hover {
  color: var(--wolf-gold-hover);
  border-color: var(--wolf-gold);
  background: var(--wolf-gold-light);
}

@media (max-width: 768px) {
  .wolf-garage-popup-title {
    font-size: 12px;
    margin: 0 0 2px;
    color: var(--wolf-gold-hover);
    font-weight: 700;
  }

  .wolf-garage-popup-item {
    border: 1px solid var(--wolf-border);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 500;
    gap: 10px;
  }

  .wolf-garage-popup-use {
    display: none;
  }

  .wolf-garage-popup-remove {
    font-size: 18px;
  }

  .wolf-garage-popup-new-btn {
    font-size: 16px;
    padding: 14px 16px;
    border: 2px dashed var(--wolf-border);
    border-radius: 6px;
    margin-top: 4px;
  }

  .wolf-garage-popup-new-btn:hover {
    border-color: var(--wolf-gold);
    background: var(--wolf-gold-light);
  }
}

/* --- Save Prompt --- */
.wolf-save-prompt {
  text-align: center;
  padding: 20px;
}

.wolf-save-prompt h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.wolf-save-prompt p {
  color: var(--wolf-text-body);
  margin: 0 0 20px;
}

.wolf-save-prompt-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .wolf-active-label {
    max-width: 120px;
  }
}

@media (max-width: 1024px) {
  .header__icons .wolf-header-nav {
    gap: 8px;
    margin-right: 0.4rem;
  }

  .header__icons .wolf-header-link {
    font-size: 0;
  }

  .header__icons .wolf-header-link__icon {
    width: 2rem;
    height: 2rem;
  }

  .header__icons .wolf-active-vehicle {
    display: none;
  }
}

/* ============================================
   Master Part Page — WolfAutoParts.com Style
   ============================================ */

/* --- Page Container (match theme content width) --- */
.wolf-mp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --- Two-Column Top Layout ---
   Grid with named areas so the title block (hoisted out of the info column
   in markup) can sit at the top of the right column on desktop while
   mobile reflows to title → gallery → info. Row gap is 0 so the title
   block's own bottom margin controls spacing above the SKU list, matching
   the earlier flex layout exactly. */
.wolf-mp-top {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-areas:
    "leftcol title"
    "leftcol info";
  column-gap: 40px;
  row-gap: 0;
  padding: 16px 0;
  align-items: start;
}

/* Title block — plain heading with a hairline divider (no fill). The gold
   eyebrow + mono part number carry the brand; the photo and buy box stay the
   loudest elements on the page. */
.wolf-mp-title-block {
  grid-area: title;
  padding: 0 0 1.4rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--wolf-border);
}

.wolf-mp-title-block > :last-child {
  margin-bottom: 0;
}

/* Sticky left rail: gallery + buy box stay in view while the right column's
   SKU options scroll. align-self: start lets it shrink to content so sticky
   has room to engage; reset to static on mobile. */
.wolf-mp-leftcol {
  grid-area: leftcol;
  align-self: start;
  position: sticky;
  top: 1.5rem;
}

.wolf-mp-gallery-col {
  max-width: 400px;
}

.wolf-mp-buyrail {
  margin-top: 1.6rem;
}

.wolf-mp-info-col {
  grid-area: info;
  min-width: 0;
}

/* --- Title & OEM --- */
.wolf-mp-title {
  font-size: 2.4rem;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1a2230;
}

/* The OEM/Porsche number inside the H1 — a scannable identifier, not part of
   the prose. Lighter + muted + tabular figures so it reads as a distinct
   token. `em` keeps it proportional to the title across breakpoints. */
.wolf-mp-title-oem {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--wolf-gold-hover);
  font-family: var(--wolf-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Side/position qualifier badge in the H1 (Left/Right/Front/Rear). */
.wolf-mp-title-side {
  display: inline-block;
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wolf-blue);
  background: #eaf0fb;
  border: 1px solid #cfdcf3;
  border-radius: 0.5rem;
  padding: 0.3rem 0.7rem;
  vertical-align: middle;
  white-space: nowrap;
}

.wolf-mp-subtitle {
  font-size: 15px;
  color: var(--wolf-text-muted);
  margin: 0 0 10px;
  line-height: 1.4;
}

.wolf-mp-oem {
  font-size: 1.3rem;
  color: var(--wolf-text-body);
  margin: 0 0 0.4rem;
  font-family: var(--wolf-font-mono);
  letter-spacing: 0.01em;
}

.wolf-mp-oem__raw {
  color: var(--wolf-text-muted);
  font-weight: 400;
}

.wolf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Photo Gallery --- */
.wolf-mp-gallery-main {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--wolf-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wolf-border);
  cursor: zoom-in;
}

/* "Actual photo" trust signal. The badge overlays the hero (zero layout
   cost — critical on mobile where the buy box + SKU filmstrip compete for the
   fold); solid dark fill keeps it legible over any photo. The caption does
   the explaining below the image. Both render only for in-stock parts. */
.wolf-mp-photo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  pointer-events: none;
}

.wolf-mp-photo-badge-icon {
  font-size: 1.2rem;
}

.wolf-mp-photo-caption {
  margin: 8px 0 0;
  font-size: 1.3rem;
  color: var(--wolf-text-muted);
  text-align: center;
}

.wolf-mp-gallery-main--placeholder {
  background: #f0f0f0;
}

.wolf-mp-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wolf-mp-no-image {
  color: var(--wolf-text-muted);
  font-size: 14px;
}

.wolf-mp-gallery-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
}

/* Thumbs are real <button>s (keyboard-focusable) wrapping the image. */
.wolf-mp-thumb {
  width: 64px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  background: var(--wolf-bg-subtle);
  border-radius: 4px;
  border: 2px solid var(--wolf-border);
  cursor: pointer;
  flex-shrink: 0;
}

.wolf-mp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wolf-mp-thumb--active {
  border-color: var(--wolf-text-dark);
}

/* --- Compatibility Checker --- */
/* "Fit check" strip — a standalone gold prompt above the SKU selection. The
   buy box lives in the left rail (under the gallery), not below this. */
.wolf-mp-compat {
  padding: 1.2rem 1.6rem;
  margin: 0 0 1.4rem;
  border: 1px solid #efce93;
  border-top: 3px solid var(--wolf-gold);
  border-radius: 6px;
  background: linear-gradient(135deg, var(--wolf-gold-light), var(--wolf-gold-bg));
}

.wolf-mp-compat-prompt {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  /* The whole row opens the vehicle selector, not just the button. */
  cursor: pointer;
}

.wolf-mp-compat-icon {
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #f0d3a6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wolf-gold-hover);
}

.wolf-mp-compat-icon svg {
  width: 2rem;
  height: 2rem;
}

.wolf-mp-compat-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.wolf-mp-compat-text strong {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--wolf-blue);
}

.wolf-mp-compat-text span {
  font-size: 1.2rem;
  color: var(--wolf-text-body);
}

.wolf-mp-compat-btn {
  flex: none;
  background: var(--wolf-gold);
  color: #1a1205;
  font-size: 1.35rem;
  font-weight: 800;
  padding: 0.9rem 1.5rem;
  border: none;
  border-radius: 5px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(247, 148, 29, 0.3);
  transition: background 0.15s, transform 0.08s;
}

.wolf-mp-compat-btn:hover,
.wolf-mp-compat-btn:focus-visible {
  background: var(--wolf-gold-hover);
  transform: translateY(-1px);
}

.wolf-compat-yes {
  color: var(--wolf-status-success-alt);
  font-weight: 600;
  font-size: 15px;
}

.wolf-compat-no {
  color: var(--wolf-status-warning);
  font-weight: 600;
  font-size: 15px;
}

.wolf-compat-change {
  font-size: 13px;
  font-weight: 400;
  color: var(--wolf-link);
  text-decoration: underline;
  margin-left: 8px;
  cursor: pointer;
}

.wolf-compat-change:hover,
.wolf-compat-change:focus-visible {
  color: var(--wolf-link-hover);
}

.wolf-compat-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.wolf-compat-link {
  color: var(--wolf-link);
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
}

.wolf-compat-link:hover,
.wolf-compat-link:focus-visible {
  text-decoration: underline;
}

.wolf-compat-actions {
  margin-top: 0.6rem;
}

.wolf-compat-notes {
  margin-top: 0.8rem;
}
.wolf-compat-note {
  font-size: 1.3rem;
  color: var(--wolf-text-muted, #666);
  padding: 0.3rem 0;
  line-height: 1.4;
}
.wolf-compat-note-icon {
  margin-right: 0.4rem;
}

.wolf-mp-fitment-table td:last-child {
  max-width: 28rem;
  font-size: 1.2rem;
  color: var(--wolf-text-muted, #666);
}

/* --- SKU List (rows like wolfautoparts.com) --- */
.wolf-mp-shipping {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--wolf-status-success-alt);
  background: var(--wolf-bg-success);
  border-radius: 6px;
  padding: 0.8rem 1.2rem;
  margin-bottom: 1rem;
}

.wolf-mp-shipping--freight {
  color: var(--wolf-status-warning);
  background: var(--wolf-bg-warning);
}

.wolf-mp-shipping--freight a {
  color: inherit;
  font-weight: 700;
}

/* Programming/coding-required warning — sits below the shipping banner, in
   the persistent (non-hydrated) region near the buy box. Amber, matching the
   freight banner's caution treatment. */
.wolf-mp-programming {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--wolf-status-warning);
  background: var(--wolf-bg-warning);
  border: 1px solid var(--wolf-border-warning);
  border-radius: 6px;
  padding: 0.8rem 1.2rem;
  margin-bottom: 1.2rem;
}

.wolf-mp-programming strong {
  font-weight: 700;
}

.wolf-mp-stock-label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wolf-text-muted);
  margin-bottom: 0.8rem;
}

/* Must come after the base rule — equal specificity, last one wins. */
.wolf-mp-stock-label--scarce {
  color: var(--wolf-status-warning);
}

/* Availability chip: green "N available" badge, red for the one-off scarcity
   case. Rendered by both the skeleton and the JS (and the color-filter
   rewrite) — keep the three in sync. */
.wolf-mp-stock-pill {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--wolf-bg-success);
  color: var(--wolf-status-success-alt);
}

.wolf-mp-stock-pill--scarce {
  background: var(--wolf-bg-danger);
  color: var(--wolf-status-error);
}

.wolf-mp-sold {
  border: 1px solid var(--wolf-border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
}

.wolf-mp-sold-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--wolf-text);
  margin: 0 0 8px;
}

.wolf-mp-sold-body {
  font-size: 14px;
  color: var(--wolf-text-body);
  margin: 0 0 8px;
}

.wolf-mp-sold-body:last-child {
  margin-bottom: 0;
}

.wolf-mp-sold-links {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.wolf-mp-sold-links li {
  margin: 0 0 6px;
}

.wolf-mp-sold-links a {
  font-size: 14px;
  font-weight: 600;
}

.wolf-mp-sku-list {
  margin-bottom: 12px;
}

.wolf-mp-sku-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--wolf-border);
  border-radius: 5px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--wolf-bg);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.08s;
}

/* Hover lifts the row so it reads as a pickable card, not a static line item. */
.wolf-mp-sku-row:hover,
.wolf-mp-sku-row:focus-visible {
  border-color: var(--wolf-border-emphasis);
  box-shadow: 0 4px 12px rgba(27, 58, 107, 0.12);
  transform: translateY(-1px);
}

/* Selected: navy ring + elevation so the chosen part is unmistakable. Defined
   after :hover (equal specificity) so a selected row keeps its emphasis on
   hover. */
.wolf-mp-sku-row--selected {
  border-color: var(--wolf-blue);
  background: var(--wolf-bg);
  box-shadow: inset 0 0 0 1px var(--wolf-blue), 0 8px 18px rgba(27, 58, 107, 0.18);
}

/* --- Radio Indicator ---
   The visible "pick one" affordance on each SKU row. Both renderers (Jinja
   skeleton + wolf-search-master-part.js) emit `.wolf-mp-sku-radio`, so this
   styling stays in sync across them. Navy fill + halo on selection, navy
   ring on hover. */
.wolf-mp-sku-radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--wolf-border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wolf-mp-sku-row:hover .wolf-mp-sku-radio {
  border-color: var(--wolf-blue);
}

.wolf-mp-sku-row--selected .wolf-mp-sku-radio {
  border-color: var(--wolf-blue);
  box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.16);
}

.wolf-mp-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s;
}

.wolf-mp-sku-row--selected .wolf-mp-radio-dot {
  background: var(--wolf-blue);
}

/* --- SKU Number --- */
.wolf-mp-sku-number {
  display: block;
  font-size: 1.2rem;
  font-family: var(--wolf-font-mono);
  /* text-body, not text-faint: #888 on white fails WCAG AA at 12px */
  color: var(--wolf-text-body);
  margin-top: 2px;
}

.wolf-mp-sku-donor {
  display: block;
  font-size: 1.2rem;
  color: var(--wolf-blue);
  margin-top: 2px;
}

/* Photo-count chip — an outlined pill so it reads as "more to see". */
.wolf-mp-sku-photos {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--wolf-border);
  border-radius: 999px;
  font-size: 1.1rem;
  color: var(--wolf-text-muted);
}

.wolf-mp-sku-thumb {
  width: 56px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--wolf-bg-subtle);
}

/* Picture is a layout-transparent wrapper so the inner <img> still fills
   the thumb slot the same way it did when the markup was a bare <img>. */
.wolf-mp-sku-thumb picture {
  display: contents;
}

.wolf-mp-sku-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wolf-mp-sku-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wolf-border-light);
}

.wolf-mp-sku-info {
  flex: 1;
  min-width: 0;
}

.wolf-mp-sku-desc strong {
  font-size: 14px;
  display: inline;
}

/* Condition chip beside "Genuine OEM" — green for the standard used part,
   amber for final-sale "As Is". Sits on one line with the strong above it.
   Rendered by both the skeleton and wolf-search-master-part.js. */
.wolf-mp-sku-grade {
  display: inline-block;
  margin-left: 0.6rem;
  vertical-align: middle;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 0.4rem;
  padding: 0.1rem 0.6rem;
  color: #0a7d3c;
  background: #e7f7ee;
}

.wolf-mp-sku-grade--asis {
  color: #9a6a00;
  background: #fbf0d4;
}

.wolf-mp-sku-subdesc {
  font-size: 12px;
  color: var(--wolf-text-body);
  font-style: italic;
}

.wolf-mp-sku-notes {
  font-size: 12px;
  color: var(--wolf-status-warning);
  margin-top: 2px;
}

.wolf-mp-sku-price {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--wolf-font-mono);
  white-space: nowrap;
}

.wolf-mp-sku-warranty {
  font-size: 1.2rem;
  color: var(--wolf-text-body);
  white-space: nowrap;
  text-align: right;
}

/* --- Color Selector --- */
.wolf-mp-color-selector {
  margin-bottom: 8px;
}

.wolf-mp-color-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--wolf-text);
  margin-bottom: 6px;
}

.wolf-mp-color-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wolf-mp-color-pill {
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid var(--wolf-border);
  border-radius: 20px;
  background: var(--wolf-bg);
  color: var(--wolf-text-body);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.wolf-mp-color-pill:hover,
.wolf-mp-color-pill:focus-visible {
  border-color: var(--wolf-border-emphasis);
  background: var(--wolf-bg-tag);
}

.wolf-mp-color-pill--active {
  border-color: var(--wolf-blue);
  background: #eaf0fb;
  color: var(--wolf-blue);
  font-weight: 600;
}

/* --- Hidden SKU Rows ---
   Double-class selector keeps specificity above the base `.wolf-mp-sku-row`
   and any responsive override that might later redeclare display on the
   row; without this the color filter silently stops working when a mobile
   rule sets display: flex on the row after this block. */
.wolf-mp-sku-row.wolf-mp-sku-row--hidden,
.wolf-mp-sku-row.wolf-mp-sku-row--color-hidden {
  display: none;
}

.wolf-mp-show-all {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  background: none;
  border: 1px dashed var(--wolf-border);
  border-radius: 6px;
  color: var(--wolf-link);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.wolf-mp-show-all:hover,
.wolf-mp-show-all:focus-visible {
  background: var(--wolf-bg-selection);
}

/* --- Purchase Bar (selected SKU + Add to Cart) ---
   The conversion anchor: white card with a gold accent rail along the top
   and a soft lift, so price + CTA are the brightest, most prominent block in
   the info column. */
/* Standalone buy box in the left rail: price block stacked over a full-width
   Add to Cart, gold top accent, soft lift. (Mobile overrides this to the
   fixed horizontal bottom bar.) */
.wolf-mp-purchase {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px 18px;
  margin: 0;
  background: var(--wolf-bg);
  border: 1px solid var(--wolf-border);
  border-top: 3px solid var(--wolf-gold);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, 0.04), 0 6px 16px rgba(20, 30, 50, 0.06);
}

.wolf-mp-purchase-details {
  flex: 1;
  min-width: 0;
}

.wolf-mp-purchase-price {
  display: block;
  font-size: 2.8rem;
  font-weight: 800;
  font-family: var(--wolf-font-mono);
  letter-spacing: -0.02em;
  color: var(--wolf-text-dark, #1a1a1a);
  line-height: 1.15;
}

.wolf-mp-purchase-meta {
  display: block;
  font-size: 13px;
  color: var(--wolf-text-body);
  margin-top: 0.6rem;
}

/* Side/position badge beside the price — wrong-side is a top return driver,
   so it sits at the point of decision, not only in the spec table. */
.wolf-mp-purchase-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.wolf-mp-purchase-side {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--wolf-blue);
  background: #eaf0fb;
  border: 1px solid #cfdcf3;
  border-radius: 0.5rem;
  padding: 0.2rem 0.7rem;
}

/* Selected SKU's condition / color / donor — desktop buy box only (hidden in
   the compact mobile bottom bar). */
.wolf-mp-purchase-attrs {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.wolf-mp-purchase-attr {
  display: flex;
  gap: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.35;
}

.wolf-mp-purchase-attr[hidden] {
  display: none;
}

.wolf-mp-purchase-attr-k {
  flex: none;
  width: 5rem;
  color: var(--wolf-text-muted);
  font-weight: 600;
}

.wolf-mp-purchase-attr-v {
  color: var(--wolf-text);
  font-weight: 600;
}

/* Thumbnail, pick summary, and the fitment dock are mobile-only; hidden on
   desktop, where the gallery + the full card + the in-flow fit-check cover
   the same ground. */
.wolf-mp-purchase-thumb,
.wolf-mp-purchase-pick,
.wolf-mp-purchase-warn,
.wolf-mp-dock,
.wolf-mp-dock-result {
  display: none;
}

.wolf-mp-purchase-main {
  display: flex;
  flex-direction: column;
}

/* Surfaces the selected SKU's `condition_notes` inside the sticky mobile
   purchase bar where the filmstrip tile would otherwise truncate it. */
.wolf-mp-purchase-note {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 3px;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--wolf-warning, #d4761a);
  white-space: normal;
}

.wolf-mp-purchase-note[hidden] {
  display: none;
}

.wolf-mp-purchase-note-icon {
  flex-shrink: 0;
}

.wolf-mp-btn-cart {
  background: var(--wolf-blue);
  color: var(--wolf-text-inverse);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}

.wolf-mp-btn-cart:hover,
.wolf-mp-btn-cart:focus-visible {
  background: var(--wolf-blue-hover);
}

.wolf-mp-btn-cart--added {
  background: var(--wolf-status-success-alt);
}

.wolf-mp-btn-cart--added:hover,
.wolf-mp-btn-cart--added:focus-visible {
  background: var(--wolf-status-success-dark);
}

.wolf-mp-btn-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Description --- */
.wolf-mp-description {
  padding: 24px 0;
  border-top: 1px solid var(--wolf-border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--wolf-text);
}

.wolf-mp-description p {
  margin: 0;
}

/* --- Tabs --- */
.wolf-mp-tabs {
  border-top: 1px solid var(--wolf-border);
  margin-top: 8px;
}

/* "Specifications" section heading — matches .wolf-mp-compatibility__title so
   the two top-level section headings on the page read as one tier (it
   previously had no rule and fell back to the UA-default h2). */
.wolf-mp-info-heading {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0.8rem 0 0.4rem;
  color: var(--wolf-text, #18181b);
}

.wolf-mp-tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--wolf-border);
}

.wolf-mp-tab-btn {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--wolf-text-body);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.wolf-mp-tab-btn:hover,
.wolf-mp-tab-btn:focus-visible {
  color: var(--wolf-text-dark);
}

.wolf-mp-tab-btn--active {
  color: var(--wolf-text-dark);
  font-weight: 600;
  border-bottom-color: var(--wolf-text-dark);
}

.wolf-mp-tab-panel {
  padding: 20px 0;
}

.wolf-mp-tab-panel h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px;
}

/* --- Info Table (More Information tab) --- */
.wolf-mp-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.wolf-mp-info-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--wolf-bg-light);
  vertical-align: top;
}

.wolf-mp-info-label {
  font-weight: 600;
  color: var(--wolf-text);
  width: 200px;
}

/* --- Fitment Table (Compatible Vehicles tab) --- */
.wolf-mp-fitment-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.wolf-mp-fitment-table th,
.wolf-mp-fitment-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--wolf-bg-light);
}

.wolf-mp-fitment-table th {
  font-weight: 600;
  color: var(--wolf-text-body);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  background: var(--wolf-bg-panel);
}

.wolf-mp-fitment-table tbody tr:hover,
.wolf-mp-fitment-table tbody tr:focus-within {
  background: var(--wolf-bg-tag);
}

/* --- Related Products --- */
.wolf-mp-related {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--wolf-border);
}

.wolf-mp-related h2 {
  font-size: 20px;
  margin: 0 0 16px;
}

/* --- Placeholder --- */
.wolf-mp-placeholder {
  color: var(--wolf-text-muted);
  font-style: italic;
  font-size: 14px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .wolf-mp-top {
    /* minmax(0, 1fr) (not plain 1fr) so the track can shrink below its
       content's min-content size. Without the 0 minimum, a wide gallery
       (e.g. 8 thumbnails = 554px) blows the track past the viewport and the
       thumb strip's `overflow-x: auto` never engages, causing the whole page
       to scroll horizontally on mobile. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "leftcol"
      "info";
    column-gap: 0;
    row-gap: 16px;
  }
  .wolf-mp-gallery-col {
    max-width: 100%;
  }
  /* Left rail collapses to normal flow; the buy box pins to the bottom bar,
     so the (now empty) buy rail adds no gap. */
  .wolf-mp-leftcol {
    position: static;
  }
  .wolf-mp-buyrail {
    margin-top: 0;
  }

  /* Sticky bottom buy bar. Collapsed: thumbnail + price + a one-line "pick"
     summary + Add to Cart. Tapping the thumbnail expands the full details
     sheet (SKU, returns, donor, condition note) above the row. The chat
     bubble now sits ABOVE the bar, so the bar uses the full width. */
  .wolf-mp-purchase {
    position: fixed;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)) 12px;
    gap: 10px;
    background: var(--wolf-bg);
    border: 0;
    border-top: 1px solid var(--wolf-border);
    border-radius: 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    z-index: var(--wolf-z-header);
  }
  .wolf-mp-purchase-thumb {
    display: block;
    order: 1;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    position: relative;
    border: 1px solid var(--wolf-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--wolf-bg-subtle);
    cursor: pointer;
  }
  .wolf-mp-purchase-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Chevron badge hints the thumbnail expands details. */
  .wolf-mp-purchase-thumb-chev {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 15px;
    height: 15px;
    background: rgba(15, 22, 38, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wolf-mp-purchase-thumb-chev::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: 2px;
    border-right: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-135deg);
    transition: transform 0.15s;
  }
  .wolf-mp-purchase-main {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    gap: 1px;
    /* The whole summary row is a tap target for the details sheet (see
       togglePurchase wiring in wolf-search-master-part.js). */
    cursor: pointer;
  }
  .wolf-mp-purchase-price {
    font-size: 18px;
    line-height: 1.1;
  }
  .wolf-mp-purchase-pick {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--wolf-text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Amber "Condition notes" flag — only when the selected part has notes.
     Tapping it expands the details sheet (where the full note lives). */
  .wolf-mp-purchase-warn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    align-self: flex-start;
    max-width: 100%;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 11px;
    font-weight: 700;
    color: var(--wolf-status-warning);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wolf-mp-purchase-warn[hidden] {
    display: none;
  }
  .wolf-mp-purchase-warn-icon {
    flex: none;
  }
  .wolf-mp-purchase-meta {
    font-size: 11px;
    margin-top: 1px;
  }
  /* Collapsed bar hides the long-form detail rows. */
  .wolf-mp-purchase-attrs,
  .wolf-mp-purchase-badges .wolf-mp-sku-grade {
    display: none;
  }
  .wolf-mp-btn-cart {
    order: 3;
    flex: 0 0 auto;
    padding: 12px 20px;
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
  }

  /* Fitment dock — a thin row of two ghost buttons across the top of the
     sticky buy bar (verify fit + ask an expert). On mobile it replaces the
     in-flow fit-check box and the in-flow "Ask a parts specialist" button. */
  .wolf-mp-dock {
    display: flex;
    order: -2;
    flex-basis: 100%;
    width: 100%;
    gap: 8px;
  }
  /* Fitment detail panel, directly under the dock buttons. Amber by default
     (restriction notes on a part that fits); red when the part doesn't fit. */
  .wolf-mp-dock-result[hidden] {
    display: none;
  }
  .wolf-mp-dock-result {
    display: block;
    order: -1;
    flex-basis: 100%;
    width: 100%;
    max-height: 30vh;
    overflow-y: auto;
    margin-top: -2px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.45;
    border-radius: 6px;
    background: var(--wolf-bg-warning);
    border: 1px solid var(--wolf-border-warning);
  }
  .wolf-mp-dock-result--no {
    background: var(--wolf-bg-danger);
    border-color: var(--wolf-border-danger);
  }
  .wolf-mp-dock-result .wolf-compat-no {
    display: block;
    font-weight: 700;
    color: var(--wolf-status-error);
    margin-bottom: 4px;
  }
  .wolf-mp-dock-result .wolf-compat-link {
    display: block;
    font-weight: 600;
    padding: 3px 0;
  }
  .wolf-mp-dock-result .wolf-compat-notes {
    color: var(--wolf-text);
  }
  .wolf-mp-dock-result .wolf-compat-change {
    display: inline-block;
    margin-top: 4px;
  }
  .wolf-mp-dock-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wolf-blue);
    background: var(--wolf-bg);
    border: 1px solid var(--wolf-border-strong, #d0d5dd);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
  }
  .wolf-mp-dock-ico {
    flex: none;
    width: 15px;
    height: 15px;
  }
  .wolf-mp-dock-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wolf-mp-dock-btn--yes {
    color: var(--wolf-status-success-alt);
    background: var(--wolf-bg-success);
    border-color: #b6dab8;
  }
  .wolf-mp-dock-btn--no {
    color: var(--wolf-status-warning);
    background: var(--wolf-bg-warning);
    border-color: var(--wolf-border-warning);
  }

  /* On mobile the dock + its result panel own fitment, so the in-flow box is
     hidden. The ask button needs extra specificity to beat its display:flex. */
  #wolf-mp-fitcheck-dynamic {
    display: none;
  }
  .wolf-mp-info-col .wolf-fitment-trigger {
    display: none;
  }

  /* Collapsed (the hydrated bar carries the id): hide the details sheet. */
  #wolf-mp-purchase:not(.wolf-mp-purchase--expanded) .wolf-mp-purchase-details {
    display: none;
  }
  /* Expanded: the sheet drops in above the row (full width, scrollable). */
  #wolf-mp-purchase.wolf-mp-purchase--expanded .wolf-mp-purchase-details {
    display: block;
    order: 0;
    flex-basis: 100%;
    width: 100%;
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--wolf-border);
    max-height: 46vh;
    overflow-y: auto;
  }
  #wolf-mp-purchase.wolf-mp-purchase--expanded .wolf-mp-purchase-pick {
    display: none;
  }
  /* Re-show the attrs + condition chip the collapsed bar hides. */
  #wolf-mp-purchase.wolf-mp-purchase--expanded .wolf-mp-purchase-attrs {
    display: flex;
  }
  #wolf-mp-purchase.wolf-mp-purchase--expanded .wolf-mp-purchase-badges .wolf-mp-sku-grade {
    display: inline-block;
  }
  /* Note wraps fully in the expanded sheet. */
  #wolf-mp-purchase.wolf-mp-purchase--expanded .wolf-mp-purchase-note {
    max-width: none;
    white-space: normal;
    overflow: visible;
  }
  #wolf-mp-purchase.wolf-mp-purchase--expanded .wolf-mp-purchase-thumb-chev::before {
    transform: rotate(45deg);
    margin-top: -2px;
  }

  /* Reserve space at the bottom of the page so normal flow content
     never hides behind the sticky purchase bar (dock + buy row). */
  .wolf-mp-container {
    padding-bottom: 124px;
  }

  /* Color pills become a single horizontal scroll row (was 3 wrapping rows). */
  .wolf-mp-color-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .wolf-mp-color-pill {
    flex: 0 0 auto;
  }

  /* Chat bubble sits ABOVE the sticky bar (frees the bar's full width); it
     hides while the details sheet is expanded so it doesn't cover the sheet. */
  /* Sit clear above the sticky bar's tallest collapsed state (dock + buy row +
     condition-note line ≈ 115px); the safe-area term cancels with the bar's
     own, so a constant offset clears it on every device. */
  body:has(.wolf-mp-container) .wolf-chat-bubble {
    width: 48px;
    height: 48px;
    right: 14px;
    bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.wolf-mp-container) .wolf-chat-bubble svg {
    width: 22px;
    height: 22px;
  }
  /* Hidden while the details sheet is expanded or the fit-result panel is
     shown (so the bubble doesn't cover them). Driven by a body class set in JS
     (mpSyncChatHidden) rather than `body:has(...)`: the :has() form forced a
     document-wide style recalc on every toggle, which stalled taps on iOS
     Safari. */
  body.wolf-mp-chat-hidden .wolf-chat-bubble {
    display: none;
  }

  /* SKU list turns into a horizontally-scrolling filmstrip of photo-forward
     tiles. The existing row HTML (radio, thumb, info, price, warranty) is
     restyled in place: the radio indicator is hidden because the outer row
     border already conveys selection, and warranty moves into the sticky
     purchase bar. */
  .wolf-mp-sku-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 12px;
    margin-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .wolf-mp-sku-list::-webkit-scrollbar {
    height: 6px;
  }
  .wolf-mp-sku-list::-webkit-scrollbar-thumb {
    background: var(--wolf-border);
    border-radius: 3px;
  }
  .wolf-mp-sku-row {
    flex: 0 0 150px;
    scroll-snap-align: start;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-width: 2px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
  }
  .wolf-mp-sku-row--selected {
    background: var(--wolf-bg);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
  }
  .wolf-mp-sku-radio {
    display: none;
  }
  .wolf-mp-sku-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0;
  }
  .wolf-mp-sku-info {
    padding: 8px 10px 0;
  }
  .wolf-mp-sku-desc strong {
    font-size: 1.2rem;
  }
  .wolf-mp-sku-number {
    font-size: 1.1rem;
  }
  .wolf-mp-sku-notes {
    padding: 4px 10px 0;
    font-size: 1.1rem;
  }
  .wolf-mp-sku-price {
    padding: 2px 10px 10px;
    font-size: 1.5rem;
    text-align: left;
  }
  .wolf-mp-sku-warranty {
    display: none;
  }

  .wolf-mp-tab-nav {
    overflow: hidden;
  }
  .wolf-mp-tab-btn {
    padding: 10px 0;
    font-size: 1.3rem;
    flex: 1;
    text-align: center;
  }
  .wolf-mp-info-label {
    width: 140px;
  }
}

/* --- Master Part Skeleton --- */
.wolf-mp-skeleton-box {
  background: var(--wolf-bg-light);
  border-radius: 6px;
}

.wolf-mp-skeleton-box--top {
  height: 48px;
  margin: 16px 0;
}

.wolf-mp-skeleton-box--button {
  height: 48px;
  width: 160px;
  margin-top: 12px;
}

.wolf-mp-skeleton-row {
  height: 68px;
  border-radius: 6px;
  background: var(--wolf-bg-light);
  margin-bottom: 6px;
}

.wolf-mp-skeleton-text {
  height: 16px;
  border-radius: 4px;
  background: var(--wolf-bg-light);
  margin-bottom: 8px;
}

.wolf-mp-skeleton-text--wide { width: 80%; }
.wolf-mp-skeleton-text--medium { width: 50%; }
.wolf-mp-skeleton-text--narrow { width: 30%; }

.wolf-mp-skeleton-pulse {
  animation: wolf-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes wolf-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.wolf-mp-error {
  padding: 40px 20px;
  text-align: center;
  color: var(--wolf-text-body);
}

.wolf-mp-error button {
  margin-top: 12px;
}

/* ===== HEADER SEARCH — VEHICLE CONTEXT ===== */
.wolf-search-vehicle-context {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  margin-top: 0.5em;
  background: var(--wolf-gold-warm);
  border: 1px solid var(--wolf-gold);
  border-radius: 4px;
  font-size: 1.4rem;
  color: var(--wolf-blue);
}

.wolf-search-vehicle-label {
  flex: 1;
}

.wolf-search-vehicle-clear {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: var(--wolf-text-body);
  padding: 0 0.25em;
  line-height: 1;
}

.wolf-search-vehicle-clear:hover {
  color: var(--wolf-gold-hover);
}

/* --- Lightbox --- */
.wolf-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--wolf-z-overlay);
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.wolf-lightbox[hidden] { display: none; }
.wolf-lightbox--visible { opacity: 1; }
.wolf-lightbox__control--hidden { display: none; }

.wolf-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform 120ms ease-out;
  will-change: transform;
  /* Pointer events drive swipe/pan; let JS see every move on touch. */
  touch-action: none;
}

.wolf-lightbox img.wolf-lightbox--dragging {
  transition: none;
}

/* Pan offsets are CSS custom properties set from JS via CSSOM (not the
   style attribute, so style-src-attr 'none' doesn't apply). */
.wolf-lightbox img[data-zoom="1"] { transform: translate(var(--lb-pan-x, 0px), var(--lb-pan-y, 0px)) scale(1.25); cursor: grab; }
.wolf-lightbox img[data-zoom="2"] { transform: translate(var(--lb-pan-x, 0px), var(--lb-pan-y, 0px)) scale(1.5);  cursor: grab; }
.wolf-lightbox img[data-zoom="3"] { transform: translate(var(--lb-pan-x, 0px), var(--lb-pan-y, 0px)) scale(2);    cursor: grab; }
.wolf-lightbox img[data-zoom="4"] { transform: translate(var(--lb-pan-x, 0px), var(--lb-pan-y, 0px)) scale(2.5);  cursor: grab; }
.wolf-lightbox img[data-zoom="5"] { transform: translate(var(--lb-pan-x, 0px), var(--lb-pan-y, 0px)) scale(3);    cursor: grab; }
.wolf-lightbox img[data-zoom="6"] { transform: translate(var(--lb-pan-x, 0px), var(--lb-pan-y, 0px)) scale(4);    cursor: grab; }
.wolf-lightbox img[data-zoom="7"] { transform: translate(var(--lb-pan-x, 0px), var(--lb-pan-y, 0px)) scale(5);    cursor: grab; }
.wolf-lightbox img[data-zoom="8"] { transform: translate(var(--lb-pan-x, 0px), var(--lb-pan-y, 0px)) scale(6);    cursor: grab; }

.wolf-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  color: var(--wolf-text-inverse);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  width: 44px;
  height: 44px;
  z-index: 1;
}
.wolf-lightbox-close:hover,
.wolf-lightbox-close:focus-visible { background: rgba(0, 0, 0, 0.8); }

/* Dark scrim so the controls read over white product photos. */
.wolf-lightbox-prev,
.wolf-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.55);
  border: none;
  color: var(--wolf-text-inverse);
  font-size: 28px;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  line-height: 1;
  z-index: 1;
}
.wolf-lightbox-prev { left: 16px; }
.wolf-lightbox-next { right: 16px; }
.wolf-lightbox-prev:hover,
.wolf-lightbox-prev:focus-visible,
.wolf-lightbox-next:hover,
.wolf-lightbox-next:focus-visible { background: rgba(0, 0, 0, 0.8); }

.wolf-lightbox-counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

/* Reinforces the "actual photo" promise while zoomed in — where buyers
   scrutinize a used part most closely. Sits above the photo counter. */
.wolf-lightbox-caption {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90vw;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

/* Vehicle chip context menu (Change / Clear) */
.wolf-chip-menu-anchor {
  position: relative;
}

.wolf-chip-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1002;
  min-width: 160px;
  overflow: hidden;
}

.wolf-chip-menu__item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  color: #333;
  font-family: inherit;
}

.wolf-chip-menu__item + .wolf-chip-menu__item {
  border-top: 1px solid #e5e5e5;
}

.wolf-chip-menu__item:hover {
  background: #f5f5f5;
}

.wolf-chip-menu__item--danger {
  color: #d32f2f;
}

.wolf-chip-menu__item--danger:hover {
  background: #fef2f2;
}

/* ================================================================
   BREADCRUMB NAV
   ================================================================ */
.wolf-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 1.2rem 0 0.4rem;
  font-size: 1.3rem;
  line-height: 1.6;
}

/* On the parts/category/search pages the container (.wolf-parts-page) already
   supplies 1.5rem top padding, so the breadcrumb's own top padding stacked
   into an oversized gap below the header nav. Drop it here; the master part
   page (.wolf-mp-container, no top padding) keeps the default top padding. */
.wolf-parts-page .wolf-breadcrumb {
  padding-top: 0;
}

.wolf-breadcrumb__link {
  color: var(--wolf-link);
  text-decoration: none;
  white-space: nowrap;
}

.wolf-breadcrumb__link:hover,
.wolf-breadcrumb__link:focus-visible {
  color: var(--wolf-link-hover);
  text-decoration: underline;
}

.wolf-breadcrumb__sep {
  color: var(--wolf-text-muted);
  user-select: none;
}

.wolf-breadcrumb__current {
  color: var(--wolf-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30ch;
}

/* ================================================================
   COMPATIBLE VEHICLES (server-rendered fitment summary)
   ================================================================ */
.wolf-mp-compatibility {
  margin: 3.2rem 0 2.4rem;
  padding: 2.4rem;
  background: var(--wolf-surface-soft, #f7f7f8);
  border-radius: 1rem;
}

.wolf-mp-compatibility__title {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  color: var(--wolf-text, #18181b);
}

.wolf-mp-compatibility__intro {
  font-size: 1.4rem;
  color: var(--wolf-text-muted, #666);
  margin: 0 0 1.2rem;
  line-height: 1.5;
}

.wolf-mp-compatibility__disclaimer {
  margin: 0 0 2rem;
  padding: 1.2rem 1.6rem;
  background: #fff7ed;
  border: 1px solid #fcd9a8;
  border-left: 4px solid var(--wolf-amber, #d97706);
  border-radius: 0.6rem;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--wolf-text, #18181b);
}

.wolf-mp-compatibility__disclaimer-title {
  display: inline;
  font-weight: 600;
  color: var(--wolf-amber, #d97706);
  margin-right: 0.4rem;
}

.wolf-mp-compatibility__disclaimer-link {
  color: var(--wolf-link, #2563eb);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wolf-mp-compatibility__disclaimer-link:hover {
  color: var(--wolf-link-hover, #1d4ed8);
}

.wolf-mp-compatibility__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.wolf-mp-compatibility__group {
  background: #fff;
  padding: 1.6rem 2rem;
  border-radius: 0.8rem;
  border: 1px solid var(--wolf-border, #e5e5e5);
}

.wolf-mp-compatibility__make {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--wolf-border, #e5e5e5);
  color: var(--wolf-text, #18181b);
}

.wolf-mp-compatibility__models {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wolf-mp-compatibility__model {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 0.6rem 0;
  font-size: 1.4rem;
  line-height: 1.5;
  border-bottom: 1px dashed transparent;
}

.wolf-mp-compatibility__model + .wolf-mp-compatibility__model {
  border-top: 1px dashed var(--wolf-border-faint, #f0f0f0);
}

.wolf-mp-compatibility__model-name {
  color: var(--wolf-text, #18181b);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}

.wolf-mp-compatibility__model-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem 0.6rem;
  flex: 0 0 auto;
  text-align: right;
}

.wolf-mp-compatibility__years {
  color: var(--wolf-text-muted, #666);
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  white-space: nowrap;
}

.wolf-mp-compatibility__variants {
  color: var(--wolf-text-muted, #666);
  font-size: 1.2rem;
  white-space: nowrap;
}

.wolf-mp-compatibility__notes-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--wolf-amber, #d97706);
  font-size: 1.2rem;
  font-weight: 500;
  white-space: nowrap;
}

.wolf-mp-compatibility__details {
  margin-top: 1.6rem;
  border-top: 1px solid var(--wolf-border, #e5e5e5);
  padding-top: 1.6rem;
}

.wolf-mp-compatibility__summary {
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--wolf-link, #2563eb);
  padding: 0.4rem 0;
  user-select: none;
}

.wolf-mp-compatibility__summary:hover {
  color: var(--wolf-link-hover, #1d4ed8);
}

.wolf-mp-compatibility__summary-flag {
  color: var(--wolf-amber, #d97706);
  font-weight: 500;
  margin-left: 0.4rem;
}

.wolf-mp-fitment-table__row--has-note {
  background: #fffbeb;
}

.wolf-mp-fitment-table__row--has-note:hover,
.wolf-mp-fitment-table__row--has-note:focus-within {
  background: #fef3c7;
}

.wolf-mp-fitment-table__note {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--wolf-amber, #d97706);
  font-weight: 500;
}

.wolf-mp-compatibility__table-wrap {
  margin-top: 1.6rem;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--wolf-border, #e5e5e5);
  border-radius: 0.6rem;
}

/* Mobile-only hint that the fitment table scrolls sideways — the Note
   column sits off-screen at phone widths with no other affordance. */
.wolf-mp-compatibility__scroll-hint {
  display: none;
  margin: 1.2rem 0 0;
  font-size: 1.2rem;
  color: var(--wolf-text-body);
}

@media (max-width: 640px) {
  .wolf-mp-compatibility__scroll-hint {
    display: block;
  }

  .wolf-mp-compatibility__table-wrap {
    margin-top: 0.6rem;
  }
}

.wolf-mp-compatibility__table-wrap .wolf-mp-fitment-table {
  margin: 0;
}

@media (max-width: 640px) {
  .wolf-mp-compatibility {
    padding: 1.6rem;
  }

  .wolf-mp-compatibility__groups {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}