/**
 * @file
 * Catalogue and search results styles — category grid, product list table,
 * view header, sidebar filters, pager.
 *
 * Both the product_list view (catalogue) and product_search view (search
 * results) output a table with shared column classes:
 *   .product-image   — thumbnail
 *   .product-title   — product name link
 *   .product-price   — formatted price
 */


/* ==========================================================================
   View header — taxonomy term title + description (catalogue)
   ========================================================================== */

.view-menu-children .view-header .taxonomy-term h2 {
  background-color: var(--td-color-primary);
  color: var(--td-color-white);
  padding: var(--td-space-md) var(--td-space-lg);
  border-radius: var(--td-radius-md);
  box-shadow: var(--td-shadow-sm);
  margin: 0 0 var(--td-space-md);
  font-size: var(--td-font-size-h2);
  line-height: 1.3;
}

.view-menu-children .view-header .taxonomy-term h2 a {
  color: var(--td-color-white);
  text-decoration: none;
}

.view-menu-children .view-header .taxonomy-term .field--name-description {
  color: var(--td-color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--td-space-lg);
}


/* ==========================================================================
   View header — search page title (matches catalogue header style)
   ========================================================================== */

.view-product-search .search-page-title {
  background-color: var(--td-color-primary);
  color: var(--td-color-white);
  padding: var(--td-space-md) var(--td-space-lg);
  border-radius: var(--td-radius-md);
  box-shadow: var(--td-shadow-sm);
  margin: 0 0 var(--td-space-md);
  font-size: var(--td-font-size-h2);
  line-height: 1.3;
}


/* ==========================================================================
   View header — search results
   ========================================================================== */

.view-product-search > .view-header {
  color: var(--td-color-text-muted);
  margin-bottom: var(--td-space-md);
}

.view-product-search > .view-header a {
  color: var(--td-color-primary);
}


/* ==========================================================================
   Category box grid
   ========================================================================== */

.view-menu-children .views-view-responsive-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--td-space-lg);
  border-top: 3px solid var(--td-color-primary);
  padding-top: var(--td-space-lg);
  margin-bottom: var(--td-space-xl);
}

.view-menu-children .views-view-responsive-grid__item {
  flex: 0 0 200px;
  max-width: 200px;
}

.view-menu-children .catalogue-box-link {
  display: block;
  background-color: var(--td-color-bg);
  border: 1px solid var(--td-color-primary);
  border-radius: var(--td-radius-md);
  box-shadow: var(--td-shadow-sm);
  text-align: center;
  text-decoration: none;
  color: var(--td-color-text);
  transition: var(--td-transition);
  overflow: hidden;
}

.view-menu-children .catalogue-box-link:hover {
  box-shadow: var(--td-shadow-md);
  transform: translateY(-2px);
}

.view-menu-children .views-field-field-category-image img {
  display: block;
  width: 150px;
  height: 150px;
  padding: var(--td-space-md);
  margin: 0 auto;
  object-fit: contain;
}

.view-menu-children .views-field-name {
  font-weight: var(--td-font-weight-bold);
  background-color: var(--td-color-primary);
  color: var(--td-color-white);
  padding: var(--td-space-sm);
  transition: background-color var(--td-transition-duration) var(--td-transition-easing);
}

.view-menu-children .catalogue-box-link:hover .views-field-name {
  background-color: var(--td-color-primary-light);
}

.view-menu-children .catalogue-box-link:visited .views-field-name {
  color: var(--td-color-white);
}


/* ==========================================================================
   Product table — shared column classes used by both catalogue and search
   ========================================================================== */

.view-product-list .view-content,
.view-manufacturer-product-list .view-content,
.view-product-search > .view-content {
  margin-top: var(--td-space-sm);
}

.views-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--td-font-size-base);
}

.views-table td {
  padding: var(--td-space-xs) var(--td-space-sm);
  border-bottom: 1px solid var(--td-color-border-light);
  vertical-align: middle;
}

.views-table tr:hover {
  background-color: var(--td-color-primary-lightest);
}

.views-table tr:nth-child(even) {
  background-color: var(--td-color-bg-muted);
}

.views-table tr:nth-child(even):hover {
  background-color: var(--td-color-primary-lightest);
}

/* Thumbnail column */
td.product-image {
  width: 80px;
  text-align: center;
}

td.product-image img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: var(--td-radius-sm);
  background-color: var(--td-color-white);
}

/* Product name link */
td.product-title a {
  color: var(--td-color-primary);
  font-size: var(--td-font-size-lg);
  text-decoration: none;
  transition: color var(--td-transition-duration) var(--td-transition-easing);
}

td.product-title a:hover {
  color: var(--td-color-primary-light);
  text-decoration: underline;
}

/* SKU — sits on its own line between sale-type badge and title */
.product-sku {
  display: block;
  font-family: var(--td-font-family-monospace, monospace);
  font-size: var(--td-font-size-xs);
  font-weight: var(--td-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--td-color-text-muted);
  margin-bottom: 2px;
}

.product-sku:empty {
  display: none;
}

/* Badge row — block container so badges sit above the title */
.product-badges {
  display: flex;
  gap: var(--td-space-xs);
  margin-bottom: 2px;
}

.product-badges:empty,
.product-badges:not(:has(.genuine-badge:not(:empty), .sale-type-badge:not(:empty))) {
  display: none;
}

/* Genuine part badge */
.genuine-badge {
  display: inline-block;
  width: fit-content;
  font-size: var(--td-font-size-xs);
  font-weight: var(--td-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px var(--td-space-xs);
  border-radius: var(--td-radius-sm);
  background-color: var(--td-color-success);
  color: var(--td-color-white);
}

.genuine-badge:empty {
  display: none;
}

/* Sale type badge */
.sale-type-badge {
  display: inline-block;
  width: fit-content;
  font-size: var(--td-font-size-xs);
  font-weight: var(--td-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px var(--td-space-xs);
  border-radius: var(--td-radius-sm);
  background-color: var(--td-color-sale);
  color: var(--td-color-white);
}

.sale-type-badge:empty {
  display: none;
}

/* Price column */
td.product-price {
  font-size: var(--td-font-size-xl);
  font-weight: var(--td-font-weight-bold);
  color: var(--td-color-success);
  white-space: nowrap;
  text-align: right;
  width: 7em;
}

td.product-price .original-price {
  font-size: var(--td-font-size-sm);
  color: var(--td-color-text-muted);
  text-decoration: line-through;
  font-weight: normal;
  display: block;
}

td.product-price:has(.original-price) {
  color: var(--td-color-sale);
}


/* ==========================================================================
   Pager
   ========================================================================== */

.view-product-list .pager,
.view-manufacturer-product-list .pager,
.view-product-search .pager {
  margin-top: var(--td-space-lg);
  margin-bottom: var(--td-space-md);
}

.view-product-list .pager__items,
.view-manufacturer-product-list .pager__items,
.view-product-search .pager__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--td-space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.view-product-list .pager__item a,
.view-product-list .pager__item.is-active a,
.view-manufacturer-product-list .pager__item a,
.view-manufacturer-product-list .pager__item.is-active a,
.view-product-search .pager__item a,
.view-product-search .pager__item.is-active a {
  display: inline-block;
  padding: var(--td-space-xs) var(--td-space-sm);
  min-width: 2em;
  text-align: center;
  border: 1px solid var(--td-color-border-light);
  border-radius: var(--td-radius-sm);
  text-decoration: none;
  color: var(--td-color-primary);
  font-size: var(--td-font-size-sm);
  transition: var(--td-transition);
}

.view-product-list .pager__item a:hover,
.view-manufacturer-product-list .pager__item a:hover,
.view-product-search .pager__item a:hover {
  background-color: var(--td-color-primary-lightest);
  border-color: var(--td-color-primary-light);
}

.view-product-list .pager__item.is-active a,
.view-manufacturer-product-list .pager__item.is-active a,
.view-product-search .pager__item.is-active a {
  background-color: var(--td-color-primary);
  color: var(--td-color-white);
  border-color: var(--td-color-primary);
  font-weight: var(--td-font-weight-bold);
}


/* ==========================================================================
   Sidebar filters — BEF <details> widgets used by both the catalogue
   (.product-list-sidebar) and search (.layout-sidebar).
   ========================================================================== */

.layout-sidebar,
.product-list-sidebar {
  padding: var(--td-space-md);
}

.layout-sidebar details,
.product-list-sidebar details {
  border: 1px solid var(--td-color-border-light);
  border-radius: var(--td-radius-md);
  overflow: hidden;
  margin-bottom: var(--td-space-md);
}

.layout-sidebar details summary,
.product-list-sidebar details summary {
  background-color: var(--td-color-primary);
  color: var(--td-color-white);
  padding: var(--td-space-sm) var(--td-space-md);
  font-weight: var(--td-font-weight-bold);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.layout-sidebar details summary::after,
.product-list-sidebar details summary::after {
  content: "\25B6";
  font-size: 0.65em;
  transition: transform var(--td-transition-duration) var(--td-transition-easing);
}

.layout-sidebar details[open] summary::after,
.product-list-sidebar details[open] summary::after {
  transform: rotate(90deg);
}

.layout-sidebar details summary::-webkit-details-marker,
.product-list-sidebar details summary::-webkit-details-marker {
  display: none;
}

.layout-sidebar details[open] summary,
.product-list-sidebar details[open] summary {
  border-bottom: 1px solid var(--td-color-border-light);
}

.layout-sidebar .details-wrapper,
.product-list-sidebar .details-wrapper {
  padding: var(--td-space-sm) var(--td-space-md);
  max-height: 400px;
  overflow-y: scroll;
}

.layout-sidebar .form-type-checkbox,
.layout-sidebar .form-type-radio,
.product-list-sidebar .form-type-checkbox,
.product-list-sidebar .form-type-radio {
  padding: var(--td-space-xs) 0;
}

.layout-sidebar .form-type-checkbox label,
.layout-sidebar .form-type-radio label,
.product-list-sidebar .form-type-checkbox label,
.product-list-sidebar .form-type-radio label {
  font-size: var(--td-font-size-sm);
  color: var(--td-color-text);
  cursor: pointer;
}

/* Hide duplicate "Show more" from nested .form-radios/.form-checkboxes wrappers */
.layout-sidebar .details-wrapper > .form-radios + .bef-soft-limit-link,
.layout-sidebar .details-wrapper > .form-checkboxes + .bef-soft-limit-link,
.product-list-sidebar .details-wrapper > .form-radios + .bef-soft-limit-link,
.product-list-sidebar .details-wrapper > .form-checkboxes + .bef-soft-limit-link {
  display: none;
}

.layout-sidebar .form-actions,
.product-list-sidebar .form-actions {
  margin-top: var(--td-space-sm);
}


/* ==========================================================================
   Product list two-column layout — sidebar filters + product table
   ========================================================================== */

.product-list-layout {
  display: flex;
  gap: var(--td-space-lg);
  align-items: flex-start;
}

.product-list-sidebar {
  flex: 0 0 var(--td-sidebar-width);
  padding: 0;
}

.product-list-sidebar .form--inline {
  display: flex;
  flex-direction: column;
}

.product-list-main {
  flex: 1;
  min-width: 0;
}


/* ==========================================================================
   Mobile adjustments
   ========================================================================== */

@media (max-width: 767px) {
  .product-list-layout {
    flex-direction: column;
  }

  .product-list-sidebar {
    flex-basis: auto;
  }
}

@media (max-width: 575px) {
  .view-menu-children .views-view-responsive-grid__item {
    flex: 0 0 150px;
    max-width: 150px;
  }

  .view-menu-children .views-field-field-category-image img {
    width: 120px;
    height: 120px;
  }

  td.product-title a {
    font-size: var(--td-font-size-base);
  }

  td.product-price {
    font-size: var(--td-font-size-lg);
  }
}