/* ---- Manufacturer "filter by category" tiles (product/manufacturer_info.tpl) --
   Reuses the .category-list grid/card styling from cards.css; this just
   highlights whichever tile is the current filter. ------------------------- */

.manufacturer-category-list > div.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.manufacturer-category-list > div.active .name a {
  color: var(--color-primary);
}

/* ---- Category page ----------------------------------------------------------
   One responsive product grid; everything else stays small and secondary:

     product count  ·  sort (desktop)  /  "Filter & Sortierung" button (mobile)
     filters: left sidebar (desktop)   /  one slide-in panel (mobile)

   Markup: product/category.tpl. Behaviour: javascript/profifilter.js (state,
   AJAX, load-more, scroll restore) and javascript/theme.js (open/close of the
   mobile panel). ---------------------------------------------------------- */

.category-layout [hidden] {
  display: none !important;
}

.category-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.category-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Desktop sidebar: stays in view while the grid scrolls (--richter-header-h is
   measured from the sticky header by profifilter.js). */
.category-sidebar {
  flex: 0 0 250px;
  width: 250px;
  position: sticky;
  top: calc(var(--richter-header-h, 80px) + var(--space-4));
  max-height: calc(100vh - var(--richter-header-h, 80px) - var(--space-8));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.category-layout:not(.has-filter) .category-sidebar {
  display: none;
}

.category-sidebar #profifilter_box {
  margin-bottom: 0;
}

/* panel chrome only exists on mobile */
.category-panel__header,
.category-panel__footer,
.category-panel__sort,
.richter-filter-panel__close,
.richter-filter-panel__backdrop,
.category-filter-button {
  display: none;
}

/* Category text: below the products (the products are what people came for). */
.category-info--below {
  clear: both;
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: var(--line-height-relaxed, 1.65);
}

.category-info--below > :first-child {
  margin-top: 0;
}

.category-info--below > :last-child {
  margin-bottom: 0;
}

/* ---- Search: the criteria form is one compact block above the results ------- */

.search-criteria {
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.search-criteria__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.search-criteria__label {
  flex: none;
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.search-criteria__main input[type="text"] {
  flex: 1 1 220px;
  width: auto;
  min-width: 0;
}

.search-criteria__main select {
  flex: 0 1 260px;
  width: auto;
  max-width: 100%;
}

.search-criteria__button {
  flex: none;
}

.search-criteria__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
}

.search-criteria__options label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
}

@media (max-width: 599px) {
  .search-criteria__label {
    flex-basis: 100%;
  }

  .search-criteria__main select,
  .search-criteria__button,
  .search-criteria__button .button {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ---- Toolbar: count + sort -------------------------------------------------- */

.category-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  min-height: 36px;
  margin: 0 0 var(--space-4);
}

.category-toolbar__count {
  margin: 0 auto 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.category-toolbar__compare {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.category-toolbar__compare:hover {
  color: var(--color-primary);
}

.category-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.category-sort label {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  cursor: default;
}

.category-sort select {
  height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
}

/* ---- Load more ---------------------------------------------------------------- */

.load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-8) 0 var(--space-6);
}

.load-more__progress {
  width: 200px;
  max-width: 60%;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-muted);
  overflow: hidden;
}

.load-more__progress span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  transition: width var(--transition-base);
}

.load-more__status {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.load-more__button {
  min-width: 260px;
}

.load-more__button[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.load-more__prev {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.category-empty {
  padding: var(--space-12) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.category-empty p {
  margin: 0 0 var(--space-4);
}

/* while a returning visitor's filters/scroll position are rebuilt, the
   server-rendered first page is not shown (no flash of unfiltered products) */
html.category-restoring #category-grid {
  visibility: hidden;
}

/* "2" badge on filter groups that contain an active filter */
.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

/* ---- Mobile: one "Filter & Sortierung" button + slide-in panel ----------------
   Same off-canvas pattern as the categories drawer (#menu / .richter-nav);
   open/close is handled in theme.js, the panel is only visible when .is-open. */

@media (max-width: 991px) {
  .category-layout {
    display: block;
  }

  .category-sort {
    display: none;
  }

  .category-filter-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex: 1 1 100%;
    order: 5;
    min-height: 48px;
    padding: 0 var(--space-4);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .category-filter-button.has-active {
    background: var(--color-primary);
    color: #fff;
  }

  .category-sidebar,
  .category-layout:not(.has-filter) .category-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    width: min(420px, 100%);
    max-height: none;
    overflow: hidden;
    background: var(--color-bg);
    z-index: calc(var(--z-overlay) + 1);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--transition-base), visibility 0s linear var(--transition-base);
  }

  .category-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--transition-base), visibility 0s;
  }

  .category-panel__header {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .category-panel__header h2 {
    margin: 0;
    font-size: var(--font-size-lg);
  }

  .richter-filter-panel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--color-bg-subtle);
    color: var(--color-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .category-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .category-panel__sort {
    display: block;
    margin: 0;
    padding: var(--space-4);
    border: 0;
    border-top: 1px solid var(--color-border);
  }

  /* no filter module on the page (e.g. search): the sort block is alone, the panel header already has a rule */
  .category-panel__body > .category-panel__sort:first-child {
    border-top: 0;
  }

  /* float: a plain <legend> sits on the fieldset's top border and ignores its padding */
  .category-panel__sort legend {
    float: left;
    width: 100%;
    padding: 0 0 var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .category-panel__sort legend + * {
    clear: both;
  }

  .category-panel__option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
  }

  .category-panel__option input:checked + span {
    font-weight: var(--font-weight-semibold);
  }

  .category-panel__footer {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    box-shadow: 0 -6px 16px rgba(20, 22, 26, 0.06);
  }

  .category-panel__reset {
    flex: none;
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 0;
    background: none;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    cursor: pointer;
  }

  .category-panel__footer .category-panel__apply {
    flex: 1 1 auto;
    width: auto;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  /* the panel has its own title and reset: the box heading would repeat both */
  .category-sidebar #profifilter_box {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .category-sidebar #profifilter_box .box-heading {
    display: none;
  }

  .profifilter .option_box,
  .profifilter .attribute_box {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .profifilter .option_name,
  .profifilter .attribute_group_name {
    min-height: 44px;
  }

  .richter-filter-panel__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 21, 0.55);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility 0s linear var(--transition-base);
  }

  .richter-filter-panel__backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition-base), visibility 0s;
  }
}

/* ---- Product filter toolbar --------------------------------------------- */

.product-filter {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.product-filter .display,
.product-filter .limit,
.product-filter .sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.product-filter .display { margin-right: auto; }

.product-filter .display b,
.product-filter .limit b,
.product-filter .sort b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.product-filter .display a {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.product-filter .display a:hover {
  text-decoration: underline;
}

.product-filter .limit select,
.product-filter .sort select {
  height: 34px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
}

/* ---- Product compare link ----------------------------------------------- */

.product-compare {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
}

.product-compare a {
  color: var(--color-text-muted);
}

.product-compare a:hover {
  color: var(--color-primary);
}

/* ---- Product list view (category.tpl toggles .product-list / .product-grid) --
   Grid view is handled by cards.css (.product-grid). List view uses a
   JS-reconstructed DOM with .left / .right sub-divs inside each card. */

.product-list > div {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.product-list > div:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-strong);
}

/* .left holds image + price + name + description + rating */
.product-list .left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

/* .right holds cart + wishlist + compare actions */
.product-list .right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.product-list .image {
  flex: 0 0 140px;
  width: 140px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-subtle);
}

.product-list .image img {
  width: 100%;
  height: auto;
  display: block;
  padding: 0;
  border: none;
}

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

.product-list .name a {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-2);
}

.product-list .name a:hover {
  color: var(--color-primary);
}

.product-list .description {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  margin-bottom: var(--space-3);
}

.product-list .price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.product-list .price .price-old {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-price-old);
  text-decoration: line-through;
  margin-right: var(--space-1);
}

.product-list .price .price-new {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

.product-list .price .price-tax {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-faint);
}

.product-list .rating {
  margin-bottom: var(--space-2);
}

.product-list .cart input.button {
  white-space: nowrap;
}

.product-list .wishlist a,
.product-list .compare a {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.product-list .wishlist a:hover,
.product-list .compare a:hover {
  color: var(--color-primary);
}

/* ---- Wishlist / Compare in grid view ------------------------------------
   Now round icon buttons on the product image; see "Product cards v2" at
   the end of cards.css. */

/* ---- Stock status icons -------------------------------------------------
   category.tpl and latest.tpl use <img src="image/green.svg"> etc.
   wrapped in a <div style="display:inline">. These are now clean
   12×12 dot PNGs generated during richter2026 setup (see image/).
   No CSS override needed — the images are already the right color.
   This rule just ensures the inline wrapper div doesn't add unwanted
   block-level spacing. */

.price > div[style*="display: inline"],
.price > div[style*="display:inline"] {
  vertical-align: middle;
  margin-right: var(--space-1);
}

/* ---- Profifilter attribute-filter sidebar (#profifilter_box) -----------
   This is a full custom extension (profifilter.tpl) with its own JS.
   We style only the visual layer, using its existing class contract:
   #profifilter_box > .box-heading + .box-content.profifilter >
     .option_box > .option_name(.hided) + .collapsible
   The JS handles show/hide of .collapsible elements — we don't touch
   those display rules, only color/spacing/border/typography. */

#profifilter_box {
  margin-bottom: var(--space-6);
}

#profifilter_box .box-content.profifilter {
  padding: 0;
}

/* Heading: "Filter", "· 2 aktiv" and the reset link (only while something is active) */
#profifilter_box .box-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

#profifilter_box .box-heading__active {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

#profifilter_box .box-heading .clear_filter {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-primary);
  cursor: pointer;
}

#profifilter_box .box-heading .clear_filter:hover {
  text-decoration: underline;
}

/* Each filter group */
.profifilter .option_box,
.profifilter .attribute_box {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
}

.profifilter .option_box:last-child,
.profifilter .attribute_box:last-child {
  border-bottom: none;
}

/* Collapsible section heading — acts as a toggle button */
.profifilter .option_name,
.profifilter .attribute_group_name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  cursor: pointer;
  padding: var(--space-1) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The extension uses filter-bullet-up/down PNGs for the expand arrow;
   we replace with a pure-CSS chevron so no image asset is needed,
   and the .hided class (applied by the JS) flips it. */
.profifilter .option_name::after,
.profifilter .attribute_group_name::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-faint);
  border-bottom: 2px solid var(--color-text-faint);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: auto;
  transition: transform var(--transition-fast);
}

.profifilter .option_name.hided::after,
.profifilter .attribute_group_name.hided::after {
  transform: rotate(-45deg);
}

/* Collapsible content area */
.profifilter .collapsible {
  padding-top: var(--space-2);
}

/* Checkbox / radio rows */
.profifilter table {
  width: 100%;
  border-collapse: collapse;
}

.profifilter table td {
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  vertical-align: middle;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.profifilter table td:first-child {
  width: 20px;
}

.profifilter table label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
  margin-bottom: 0;
}

.profifilter .filtered {
  accent-color: var(--color-primary);
}

/* In-stock checkbox */
.profifilter .option_box input[type="checkbox"]#instock + label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* Select dropdowns inside profifilter */
.profifilter select.filtered {
  width: 100%;
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
}

/* Price range display */
.profifilter .price_slider {
  padding: var(--space-2) 0;
}

.profifilter .price_slider label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  margin-bottom: 0;
  display: inline;
}

.profifilter .price_limit {
  width: 64px;
  text-align: center;
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
}

/* jQuery UI Slider handle — themed to match brand colors without
   overriding jQueryUI's own structural CSS (position/size/overflow) */
.profifilter #slider-range .ui-slider-range {
  background: var(--color-primary);
}

.profifilter [id^="slider-range"] .ui-slider-handle {
  border-color: var(--color-primary);
}

/* ---- Vanilla range slider structure (javascript/profifilter.js) --------
   jQuery UI's own stylesheet used to provide this structural layer
   (track height/radius, handle size/shape); since jQuery UI isn't
   loaded any more, the replacement slider needs it defined here.
   Colors are intentionally left to the two rules above so both the
   main price slider and every per-attribute slider stay themed
   consistently. */

.profifilter .richter-slider {
  position: relative;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  margin: var(--space-4) var(--space-2);
}

.profifilter .richter-slider .ui-slider-range {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-text-faint);
}

.profifilter .richter-slider .ui-slider-handle {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-text-faint);
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: none;
  box-shadow: var(--shadow-sm);
}

.profifilter .richter-slider .ui-slider-handle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 79, 145, 0.25);
}

/* ---- Loading mask (javascript/profifilter.js) ---------------------------
   Replacement for the jQuery "mask" plugin's loading overlay, shown
   on the product list and the filter sidebar while a filter request
   is in flight. */

.richter-mask {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 5;
  cursor: wait;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 991px) {
  .product-filter {
    gap: var(--space-3);
  }

  .product-list > div {
    flex-wrap: wrap;
  }

  .product-list .left {
    flex-wrap: wrap;
  }

  .product-list .image {
    flex: 0 0 100px;
    width: 100px;
  }

  .product-list .right {
    flex-direction: row;
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
  }
}

@media (max-width: 599px) {
  .product-filter {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .product-filter .display { margin-right: 0; }

  .product-list > div {
    flex-direction: column;
    gap: var(--space-3);
  }

  .product-list .image {
    flex: 0 0 auto;
    width: 100%;
  }

  .product-list .left {
    flex-direction: column;
    gap: var(--space-3);
  }
}

.compare-info input.button {
  background: var(--color-accent);
}

.compare-info input.button:hover {
  background: var(--color-accent-dark);
}

.compare-info {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--font-size-sm);
}

.compare-info td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.compare-info thead td.compare-product,
.compare-info thead td.compare-attribute {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.compare-info tbody tr > td:first-child {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  width: 1%;
}

.compare-info td.name a {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-size-base);
}

.compare-info td.name a:hover {
  text-decoration: underline;
}

.compare-info td img {
  max-width: 140px;
  height: auto;
  border-radius: var(--radius-sm);
}

.compare-info td img[src*="stars-"] {
  max-width: 90px;
  max-height: 14px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0;
}

.compare-info .price-old {
  text-decoration: line-through;
  color: var(--color-text-faint);
  font-size: var(--font-size-xs);
  margin-right: var(--space-1);
}

.compare-info .price-new {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

.compare-info td.description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

.compare-info input.button,
.compare-info a.button {
  width: 100%;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
}

/* ---- Compare table on small screens --------------------------------------
   Up to four product columns do not fit a phone, and the page clips sideways
   overflow, so only the first product could be seen. The table becomes its own
   horizontal scroller: the label column stays pinned on the left, product
   columns are narrow enough that two fit side by side (a third peeks in) and
   the rest is one swipe away. */
@media (max-width: 767px) {
  .compare-info {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .compare-info td {
    padding: var(--space-2) var(--space-3);
  }

  /* row labels: pinned while the products scroll */
  .compare-info tbody tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 11px;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
  }

  .compare-info tbody tr > td:not(:first-child) {
    width: 128px;
    min-width: 128px;
    max-width: 128px;
  }

  .compare-info td.name a {
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
  }

  .compare-info td img {
    max-width: 100%;
  }

  .compare-info td.description {
    vertical-align: top;
    font-size: var(--font-size-xs);
    line-height: 1.45;
  }

  .compare-info input.button,
  .compare-info a.button {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
    font-size: var(--font-size-xs);
  }
}