/*Important to leave it 240 so that the carousel pictures align perfectly*/
.products-results-title-details {
  color: var(--tm-text-muted, #777);
  font-weight: 400;
}

.reset-search-criteria-command {
  white-space: nowrap;
  text-decoration: none;
  font-size: 14px;
  padding: 0;
  margin: 0;
  border: none;
  line-height: 1.2;
  letter-spacing: 1px;
  display: inline-block;
  margin: 0 0 0 calc(0.5 * 10px);
  text-transform: none;
}

.reset-search-criteria-command:hover {
  text-decoration: none;
}

.dropdown-menu.for-products-sort-order {
  background: var(--tm-surface, white);
  width: 220px;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.05);
}
.dropdown-menu.for-products-sort-order .dropdown-item {
  padding-top: 10px;
  padding-bottom: 10px;
}

.sort-dropdown-toggle-command {
  padding-left: 0;
  padding-right: 0;
}

.for-sort-order .tm-icon {
  color: var(--tm-secondary, #00c893);
}

.for-sort-order .dropdown-toggle,
.for-sort-order .dropdown-menu {
  font-size: 14px;
}

.catalogue-filter-container {
  background: rgba(255, 255, 255, 0.4);
  /*background: var(--tm-surface, white);*/
  border-radius: 5px 5px 0 0;
}

.catalogue-list-container {
  background: rgba(255, 255, 255, 0.4);
  /*border-bottom: solid 2px $secondary-color;*/
  border-radius: 0 0 5px 5px;
}

.catalogue-list-container h4,
.catalogue-filter-container h4 {
  cursor: default;
  padding: 10px 0 10px 10px;
  margin: 0 0 0 0;
  font-size: 14px;
  color: var(--tm-text, #555);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.products-list-container {
  padding: 0 calc(2 * 10px) calc(1 * 10px) calc(2 * 10px);
}

.selected-filter-item {
  background: var(--tm-surface, white);
  border-radius: 2px;
  padding: calc(10px / 2) 10px;
  transition-duration: 0.2s;
  position: relative;
  cursor: default;
  margin: 0 0 calc(10px / 2) 0;
  color: var(--tm-text-muted, #777);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.selected-filter-item:hover {
  background: rgba(135, 212, 255, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.selected-filter-item .filter-item-label {
  font-size: 12px;
}

.remove-filter-item {
  transition-duration: 0.2s;
  position: absolute;
  z-index: 5;
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  top: 0;
  right: 0;
  background: rgba(255, 255, 255, 0);
  opacity: 0.25;
}

.remove-filter-item:focus {
  outline: none;
}

.remove-filter-item .tm-icon {
  color: var(--tm-text-muted, #777);
  transition-duration: 0.2s;
}

.remove-filter-item:hover {
  opacity: 1;
}

.remove-filter-item:hover .tm-icon {
  color: var(--tm-danger, #ff6500);
}

.selected-filter-criteria-values-container {
  font-size: 14px;
  padding: 0 10px 10px 10px;
}

.search-criteria-group {
  padding: calc(0.7 * 10px) calc(0.5 * 10px) calc(0.7 * 10px) 10px;
  margin: 0 10px calc(0.7 * 10px) 10px;
  background: var(--tm-surface, white);
  border-radius: 2px;
  /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);*/
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  will-change: contents;
}
.search-criteria-group .criteria-group-title {
  overflow: hidden;
}

.search-criteria-group h6 {
  transition-duration: 0.2s;
  color: var(--tm-text-muted, #777);
  font-weight: 400;
  cursor: pointer;
  padding-right: 4px;
  margin: 0;
}

.search-criteria-group h6:hover {
  color: var(--tm-primary, #0088d4);
}

.search-criteria-group h6 span {
  transition-duration: 0.2s;
}

.search-criteria-group h6 .tm-icon.criterion-icon {
  color: var(--tm-primary-light, #63bef1);
  font-size: 12px;
}

.search-criteria-group h6 .tm-icon.for-expand-collapse {
  transition-duration: 0.2s;
  height: 20px;
  width: 12px;
  font-size: 12px;
}

.search-criteria-group .search-criteria-list {
  padding: 10px 0 0 0;
  transition-duration: 0.2s;
}

.search-criteria-group.collapsed .search-criteria-list {
  opacity: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.search-criteria-group.collapsed h6 .tm-icon.for-expand-collapse {
  transform: rotate(90deg);
}

.search-criteria-group .own-checkbox-wrapper label,
.search-criteria-group .own-checkbox-wrapper input[type=checkbox] {
  font-size: 14px;
}

.search-criteria-group .own-checkbox-wrapper label {
  margin-bottom: 3px;
  color: var(--tm-text-muted, #777);
  max-width: 97%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.search-criteria-group .search-criterion .count {
  color: #bababa;
  font-weight: lighter;
}

.search-criteria-group .search-criterion .own-checkbox-wrapper [type=checkbox].filled-in ~ label:after {
  border-width: 1px;
  border-radius: 3px;
  transform: scale(0.75);
}

.search-criteria-group .search-criterion .own-checkbox-wrapper [type=checkbox].filled-in:checked ~ label {
  color: var(--tm-text, #333);
}

.search-criteria-group .search-criterion label .score {
  margin-bottom: 4px;
}

.products-filter-contents {
  display: none;
  margin-bottom: calc(3 * 10px);
}

.products-filter-container.expanded .products-filter-contents {
  display: block;
}

.expand-filter-criteria-command {
  text-decoration: none;
  padding: 0;
  margin: 0;
  color: var(--tm-text-muted, #777);
  cursor: pointer;
  transition-duration: 0.2s;
  background: none;
  border: none;
  text-align: center;
  z-index: 10;
}

.expand-filter-criteria-command:focus {
  outline: none;
}

.expand-filter-criteria-command:hover {
  text-decoration: none;
  color: var(--tm-anchor-hover, #004796);
}

.expand-filter-criteria-command .tm-icon {
  transition-duration: 0.2s;
  display: inline-block;
  margin: 0 calc(0.5 * 10px) 0 0;
}

.products-filter-container.expanded .expand-filter-criteria-command .tm-icon {
  transform: rotate(90deg);
}

.products-results-title-container .tm-icon {
  margin-right: calc(0.5 * 10px);
  color: var(--tm-secondary, #00c893);
}

.products-filter-title-container .tm-icon {
  color: var(--tm-secondary, #00c893);
}

.scroll-to-filter-criteria-command {
  text-transform: none;
  margin-left: calc(0.5 * 10px);
}

.catalogue-child-categs-container {
  margin-bottom: calc(2 * 10px);
}
.catalogue-child-categs-container h4.child-categs-title {
  font-size: 14px;
  color: var(--tm-text, #555);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.catalogue-child-categs-container h4.child-categs-title .tm-icon {
  color: var(--tm-secondary, #00c893);
}
.catalogue-child-categs-container .product-category-link {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  border: solid 1px var(--tm-secondary, #00c893);
  color: var(--tm-secondary-dark, #009970);
  border-radius: 100px;
  margin: calc(0.5 * 10px) calc(0.25 * 10px);
  padding: calc(0.5 * 10px) calc(1.5 * 10px) calc(0.5 * 10px) calc(1 * 10px);
  transition-duration: 0.2s;
  background: rgba(0, 200, 147, 0.05);
}
.catalogue-child-categs-container .product-category-link .tm-icon {
  color: var(--tm-accent, #ff6500);
  transition-duration: 0.2s;
}
.catalogue-child-categs-container .product-category-link:hover {
  background: var(--tm-secondary, #00c893);
  color: white;
}
.catalogue-child-categs-container .product-category-link:hover .tm-icon {
  color: white;
}

.product-groups {
  margin-bottom: calc(10px * 2);
}

.product-groups .search-criterion-groups {
  background: transparent;
  display: inline-block;
  padding: calc(10px / 3) calc(10px * 2);
  border: 1px solid #aaa;
  margin-top: calc(10px / 2);
  border-radius: 20px;
  transition-duration: 0.2s;
  margin-right: 10px;
  margin-bottom: 10px;
  font-weight: 500;
  color: var(--tm-text, #555);
}
.product-groups .search-criterion-groups:hover {
  border: 1px solid #87489b;
  background: rgba(255, 255, 255, 0.5);
}
.product-groups .search-criterion-groups:has(input.selected-group) {
  background: linear-gradient(90deg, #87489b 0%, #b269ca 100%);
  border: 1px solid #87489b;
  color: white;
}
.product-groups .search-criterion-groups label {
  padding: 0;
}
.product-groups .search-criterion-groups label::after {
  display: none;
}
.product-groups .search-criterion-groups label::before {
  display: none;
}

.specification-group .group-title {
  cursor: pointer;
  padding: 10px;
  font-weight: inherit;
  font-size: inherit;
}
.specification-group .group-title .specification-group-icon-container {
  transition-duration: 0.2s;
  height: 20px;
  width: 12px;
  font-size: 12px;
}
.specification-group .collapse-specification-group {
  transition: height 0.3s ease;
  display: none;
}
.specification-group .collapse-specification-group.show {
  display: block;
}

/* The category's HTML description (set in BO with TinyMCE), right under the category picture. It is operator content,
   so whatever it holds (big pictures, wide tables) has to stay inside the results column - without touching the TinyMCE
   galleries' own sizing (.tm-gallery__media).

   A LONG description is folded: only its first lines show, dissolving in a fade, with a "Vezi toata descrierea" button
   under them that unfolds it (and then reads "Ascunde descrierea detaliata"). own.os.products.catalogue.js decides it
   from the height the text really takes, and animates it. The whole text always stays in the page (search engines,
   screen readers, print); nothing is folded without JavaScript.

   Markup: .category-description-container > .category-description-viewport (the part that folds) >
   .category-description-wrapper (the operator's HTML, unchanged) + .category-description-toggle-container.
   States, set by the script on the container: is-ready (it took over), is-foldable (long enough to fold),
   is-expanded (unfolded by the visitor), is-animating (between the two) - and is-folding-disabled, its last resort
   when something went wrong: the whole text, as without JavaScript. */
@property --category-description-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.category-description-container {
  --category-description-collapsed-height: 10.5em;
  --category-description-fade-height: 3.5em;
  --category-description-toggle-row-height: 52px;
  position: relative;
  margin: 0 0 calc(2 * 10px) 0;
}

.category-description-viewport {
  display: flow-root;
}

.category-description-wrapper {
  display: flow-root;
  color: var(--tm-text, #555);
  line-height: 1.75;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.category-description-wrapper :where(p, li, dd, blockquote, figcaption) {
  text-wrap: pretty;
}
.category-description-wrapper :where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}
.category-description-wrapper img,
.category-description-wrapper video,
.category-description-wrapper iframe {
  max-width: 100%;
}
.category-description-wrapper img:not(.tm-gallery__media),
.category-description-wrapper video:not(.tm-gallery__media) {
  height: auto;
}
.category-description-wrapper table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.category-description-wrapper pre {
  max-width: 100%;
  overflow-x: auto;
}
.category-description-wrapper > :last-child {
  margin-bottom: 0;
}

html.js .category-description-container:not(.is-ready):not(.is-folding-disabled) .category-description-viewport {
  max-height: calc(var(--category-description-collapsed-height) + var(--category-description-toggle-row-height));
  overflow: hidden;
  animation: category-description-release 0s 8s forwards;
}

@keyframes category-description-release {
  to {
    max-height: none;
  }
}
.category-description-container.is-ready:not(.is-foldable) .category-description-viewport {
  max-height: calc(var(--category-description-collapsed-height) + var(--category-description-toggle-row-height) + 1px);
}

.category-description-probe {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: calc(var(--category-description-collapsed-height) + var(--category-description-toggle-row-height));
  visibility: hidden;
  pointer-events: none;
}

.category-description-container.is-foldable .category-description-viewport {
  --category-description-fade: var(--category-description-fade-height);
  max-height: var(--category-description-collapsed-height);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--category-description-fade)), rgba(0, 0, 0, 0.84) calc(100% - 0.75 * var(--category-description-fade)), rgba(0, 0, 0, 0.5) calc(100% - 0.5 * var(--category-description-fade)), rgba(0, 0, 0, 0.16) calc(100% - 0.25 * var(--category-description-fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--category-description-fade)), rgba(0, 0, 0, 0.84) calc(100% - 0.75 * var(--category-description-fade)), rgba(0, 0, 0, 0.5) calc(100% - 0.5 * var(--category-description-fade)), rgba(0, 0, 0, 0.16) calc(100% - 0.25 * var(--category-description-fade)), transparent 100%);
  transition: max-height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), --category-description-fade 0.5s ease;
}
.category-description-container.is-foldable.is-expanded .category-description-viewport {
  --category-description-fade: 0px;
  max-height: none;
}
.category-description-container.is-foldable.is-expanded:not(.is-animating) .category-description-viewport {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.category-description-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.5 * 10px);
  box-sizing: border-box;
  min-height: var(--category-description-toggle-row-height);
  padding: calc(1.2 * 10px) 0 0 0;
}
.category-description-toggle-container[hidden] {
  display: none;
}
.category-description-toggle-container::before, .category-description-toggle-container::after {
  content: "";
  flex: 1 1 0;
  min-width: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(3, 102, 214, 0.22));
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--tm-anchor, #0366d6) 22%, transparent));
}
.category-description-toggle-container::after {
  background: linear-gradient(to left, transparent, rgba(3, 102, 214, 0.22));
  background: linear-gradient(to left, transparent, color-mix(in srgb, var(--tm-anchor, #0366d6) 22%, transparent));
}

.category-description-toggle {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: calc(0.8 * 10px);
  box-sizing: border-box;
  max-width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 9px calc(2 * 10px);
  border: 1px solid rgba(3, 102, 214, 0.3);
  border-color: color-mix(in srgb, var(--tm-anchor, #0366d6) 30%, transparent);
  border-radius: 100px;
  background: var(--tm-surface, white);
  color: var(--tm-anchor, #0366d6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2px;
  text-align: center;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.category-description-toggle:focus {
  outline: none;
}
.category-description-toggle:focus-visible {
  outline: 2px solid var(--tm-anchor, #0366d6);
  outline-offset: 3px;
}
.category-description-toggle:active {
  transform: scale(0.98);
}

.category-description-toggle-label {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
  text-wrap: balance;
}

.category-description-toggle-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 12px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.category-description-container:not(.is-expanded) .category-description-toggle-label.for-collapse,
.category-description-container.is-expanded .category-description-toggle-label.for-expand {
  display: none;
}

.category-description-container.is-expanded .category-description-toggle-icon {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .category-description-toggle:hover {
    border-color: var(--tm-anchor-hover, #004796);
    background: #f0f6fd;
    background: color-mix(in srgb, var(--tm-anchor, #0366d6) 6%, var(--tm-surface, white));
    color: var(--tm-anchor-hover, #004796);
    box-shadow: 0 6px 16px -6px rgba(3, 102, 214, 0.35);
  }
}
@media (pointer: coarse) {
  .category-description-container {
    --category-description-toggle-row-height: 56px;
  }
  .category-description-toggle {
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .category-description-container.is-foldable .category-description-viewport,
  .category-description-toggle,
  .category-description-toggle-icon {
    transition: none;
  }
}
@media print {
  .category-description-container .category-description-viewport {
    max-height: none !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    animation: none !important;
  }
  .category-description-toggle-container {
    display: none !important;
  }
}
/* Small devices (landscape phones, 576px and up) */
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .category-description-container {
    --category-description-collapsed-height: 8.75em;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .products-filter-contents {
    display: block;
  }
  .search-criteria-group {
    margin: 0 0 calc(0.7 * 10px) 10px;
  }
  .selected-filter-criteria-values-container {
    padding: 0 0 10px 10px;
  }
  .catalogue-list-container h4 {
    margin: 0 0 calc(1 * 10px) 10px;
  }
  .catalogue-filter-container h4 {
    margin: 0 0 calc(1 * 10px) 0;
  }
  .catalogue-filter-container {
    border-radius: 5px 0 0 5px;
  }
  .catalogue-list-container {
    border-radius: 0 5px 5px 0;
  }
  .products-filter-contents {
    margin-bottom: 0;
  }
}
/* Extra large devices (large desktops, 1200px and up) */

/* #region Category picture as the page background (BO -> category -> "Foloseste imaginea ca fundal al paginii categoriei") */
/* A zero-height anchor right above #main-page-contents: the layer hangs from it over the whole browser width (no 100vw,
   so no horizontal scrollbar) and fades into the theme's own background - the mask reveals whatever the page shows
   behind it (plain colour, gradient, decorative shapes), so it follows any FO theme. */
.category-page-background {
  position: relative;
  height: 0;
  z-index: 0;
}
.category-page-background-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(320px, 82vh, 960px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.18) 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.18) 80%, transparent 100%);
}
.category-page-background-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  animation: tm-category-page-background-in 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* a soft veil in the theme's background colour keeps a busy picture from fighting with the contents */
.category-page-background-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--tm-body-bg, #fff) 8%, transparent) 0%, color-mix(in srgb, var(--tm-body-bg, #fff) 30%, transparent) 60%, color-mix(in srgb, var(--tm-body-bg, #fff) 55%, transparent) 100%);
}
@keyframes tm-category-page-background-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
body.has-page-background #main-page-contents {
  position: relative;
  z-index: 1;
}
/* the filter and the results stand out of the picture as frosted panels */
body.has-page-background .catalogue-filter-container,
body.has-page-background .catalogue-list-container {
  background: color-mix(in srgb, var(--tm-body-bg, #fff) 78%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 10px 40px -18px rgba(0, 0, 0, 0.35);
}
body.has-page-background .page-main-title,
body.has-page-background .page-breadcrumb-container {
  position: relative;
  z-index: 1;
}
@media (max-width: 767.98px) {
  .category-page-background-layer {
    height: clamp(240px, 60vh, 560px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .category-page-background-layer img {
    animation: none;
  }
}
/* lite UI effects (no GPU): no frosted glass, an opaque-enough surface instead */
html.ui-effects-lite body.has-page-background .catalogue-filter-container,
html.ui-effects-lite body.has-page-background .catalogue-list-container {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: color-mix(in srgb, var(--tm-body-bg, #fff) 92%, transparent);
}
/* #endregion Category picture as the page background */

/* #region "Rafinare cautare" pinned / unpinned (Web Studio -> Layout -> "Catalogul de produse") */
/* Rendered only when the shop allows unpinning (the markup is .catalogue-filter-column > dock bar + panel); pinned it
   looks exactly like the plain panel. Unpinned (desktop): like a docked pane in Visual Studio - a vertical bar along
   the left edge of the products, top to bottom, no border, the corners of the products list, the label written
   vertically at its top; a click on the bar expands the panel IN PLACE (the column grows back to its width, animated,
   the products make room), its "<<" folds it back, its pin docks it for good. Phones: unchanged. */
.catalogue-filter-column {
  display: flex;
  flex-direction: column;
}
.catalogue-filter-column > .catalogue-filter-container {
  flex: 1 1 auto;
}
/* the pin / collapse buttons in the panel's title (desktop only - phones keep the expand / collapse) */
.catalogue-filter-pin-command,
.catalogue-filter-collapse-command {
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  color: var(--tm-primary, currentColor);
  vertical-align: middle;
  transition: transform 0.25s ease, background-color 0.2s ease;
}
.catalogue-filter-pin-command:hover,
.catalogue-filter-pin-command:focus-visible,
.catalogue-filter-collapse-command:hover,
.catalogue-filter-collapse-command:focus-visible {
  background: color-mix(in srgb, var(--tm-primary, #6c757d) 12%, transparent);
}
.is-filter-unpinned .catalogue-filter-pin-command {
  transform: rotate(45deg);
}
/* "<<" only while the unpinned panel is expanded (d-lg-inline-flex would show it otherwise) */
.catalogue-row:not(.is-filter-open) .catalogue-filter-collapse-command,
.catalogue-row:not(.is-filter-unpinned) .catalogue-filter-collapse-command {
  display: none !important;
}
.catalogue-filter-dock-bar {
  display: none;
}
@keyframes tm-filter-panel-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tm-filter-bar-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (min-width: 992px) {
  /* the column's width is what animates: 25% pinned / expanded, the bar's width folded */
  .catalogue-row.has-unpinnable-filter > .catalogue-filter-column {
    flex: 0 0 auto;
    transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1), margin-right 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .catalogue-row.has-unpinnable-filter > .catalogue-list-container {
    transition: border-radius 0.38s ease;
  }
  .catalogue-row.is-filter-unpinned > .catalogue-filter-column {
    width: 46px;
    max-width: none;
    margin-right: 10px;
  }
  .catalogue-row.is-filter-unpinned.is-filter-open > .catalogue-filter-column {
    width: 25%;
    margin-right: 0;
  }
  /* the products take whatever the column leaves; folded, the list stands alone: all four corners rounded */
  .catalogue-row.is-filter-unpinned > .catalogue-list-container {
    flex: 1 1 0;
    max-width: none;
    width: auto;
    border-radius: 5px;
  }
  .catalogue-row.is-filter-unpinned.is-filter-open > .catalogue-list-container {
    border-radius: 0 5px 5px 0;
  }
  /* while the width moves, the panel keeps its final width (set by the script) and the column clips it: the
     criteria are revealed, never squeezed and re-wrapped */
  .catalogue-row.is-filter-animating > .catalogue-filter-column {
    overflow: hidden;
  }
  .catalogue-row.is-filter-unpinned.is-filter-open .catalogue-filter-column > .catalogue-filter-container {
    width: var(--tm-filter-panel-width, 100%);
    animation: tm-filter-panel-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
  }
  .catalogue-row.is-filter-unpinned:not(.is-filter-open) .catalogue-filter-column > .catalogue-filter-container {
    display: none;
  }
  /* the bar: the whole height of the products column, the surface and the corners of the products list, no border */
  .catalogue-row.is-filter-unpinned:not(.is-filter-open) .catalogue-filter-dock-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex: 1 1 auto;
    width: 100%;
    min-height: 220px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.4);
    color: var(--tm-text, inherit);
    cursor: pointer;
    animation: tm-filter-bar-in 0.25s ease both;
    transition: background-color 0.2s ease;
  }
  .catalogue-row.is-filter-unpinned .catalogue-filter-dock-bar:hover,
  .catalogue-row.is-filter-unpinned .catalogue-filter-dock-bar:focus-visible {
    background: color-mix(in srgb, var(--tm-primary, #6c757d) 12%, rgba(255, 255, 255, 0.55));
  }
  .catalogue-row.is-filter-unpinned .catalogue-filter-dock-bar:focus-visible {
    outline: 2px solid var(--tm-primary, currentColor);
    outline-offset: -2px;
  }
  body.has-page-background .catalogue-row.is-filter-unpinned .catalogue-filter-dock-bar {
    background: color-mix(in srgb, var(--tm-body-bg, #fff) 78%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
    box-shadow: 0 10px 40px -18px rgba(0, 0, 0, 0.35);
  }
  body.has-page-background .catalogue-row.is-filter-unpinned .catalogue-filter-dock-bar:hover,
  body.has-page-background .catalogue-row.is-filter-unpinned .catalogue-filter-dock-bar:focus-visible {
    background: color-mix(in srgb, var(--tm-primary, #6c757d) 12%, color-mix(in srgb, var(--tm-body-bg, #fff) 85%, transparent));
  }
  html.ui-effects-lite body.has-page-background .catalogue-row.is-filter-unpinned .catalogue-filter-dock-bar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: color-mix(in srgb, var(--tm-body-bg, #fff) 92%, transparent);
  }
  /* the icon + vertical label sit at the TOP of the bar and stay in view while the products scroll */
  .catalogue-filter-dock-bar-contents {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
  }
  .catalogue-filter-dock-bar-contents .tm-icon {
    color: var(--tm-primary, currentColor);
  }
  .catalogue-filter-dock-bar-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .catalogue-filter-active-count {
    min-width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    background: var(--tm-primary, #343a40);
    color: #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .catalogue-row.has-unpinnable-filter > .catalogue-filter-column,
  .catalogue-row.has-unpinnable-filter > .catalogue-list-container,
  .catalogue-filter-pin-command,
  .catalogue-filter-collapse-command {
    transition: none !important;
  }
  .catalogue-row.is-filter-unpinned .catalogue-filter-column > .catalogue-filter-container,
  .catalogue-row.is-filter-unpinned .catalogue-filter-dock-bar {
    animation: none !important;
  }
}
/* #endregion "Rafinare cautare" pinned / unpinned */

/* #region Readability over the category picture (page background on) */
/* the page title and the breadcrumb stay plain text, exactly as without a picture; the operator can give them a
   colour and / or a shadow suited to their picture (BO -> category -> "Aspectul titlului peste imagine"; body classes
   from CategoryPageTitleStyle.GetCssClasses - none = the theme's look, unchanged). The colour goes to EVERY element
   inside them: the category name is an inner span with its own muted colour (.products-results-title-details), and
   the breadcrumb's last item is a span of its own too - colouring the parents only left them gray. */
body.has-page-background.page-bg-title-white .page-main-title,
body.has-page-background.page-bg-title-white .page-main-title *,
body.has-page-background.page-bg-title-white .page-breadcrumb-container,
body.has-page-background.page-bg-title-white .page-breadcrumb-container * {
  color: #fff;
}
body.has-page-background.page-bg-title-dark .page-main-title,
body.has-page-background.page-bg-title-dark .page-main-title *,
body.has-page-background.page-bg-title-dark .page-breadcrumb-container,
body.has-page-background.page-bg-title-dark .page-breadcrumb-container * {
  color: #1f2328;
}
body.has-page-background.page-bg-title-white .page-breadcrumb-container a:hover,
body.has-page-background.page-bg-title-dark .page-breadcrumb-container a:hover {
  text-decoration: underline;
}
/* the same shadows as the preview in the BO category dialog (own.marketplace.details.css) */
body.has-page-background.page-bg-title-shadow-white .page-main-title-text,
body.has-page-background.page-bg-title-shadow-white .page-breadcrumb-container {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.8);
}
body.has-page-background.page-bg-title-shadow-black .page-main-title-text,
body.has-page-background.page-bg-title-shadow-black .page-breadcrumb-container {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 2px 14px rgba(0, 0, 0, 0.5);
}
/* the subcategories: a collapsible panel (closed by default) instead of loose chips over the picture */
.catalogue-child-categs-container.is-over-page-background {
  position: relative;
  z-index: 1;
}
.catalogue-child-categs-panel {
  border: 1px solid color-mix(in srgb, var(--tm-border, #ccc) 70%, transparent);
  /* exactly the corners of the "Rafinare cautare" / products list panes under it ($default-border-radius) */
  border-radius: 5px;
  background: color-mix(in srgb, var(--tm-body-bg, #fff) 84%, transparent);
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.catalogue-child-categs-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tm-text, inherit);
  user-select: none;
}
.catalogue-child-categs-summary::-webkit-details-marker {
  display: none;
}
.catalogue-child-categs-summary:focus-visible {
  outline: 2px solid var(--tm-primary, currentColor);
  outline-offset: -2px;
}
.catalogue-child-categs-summary .tm-icon {
  color: var(--tm-secondary, var(--tm-primary, currentColor));
}
.catalogue-child-categs-count {
  min-width: 1.7em;
  height: 1.7em;
  line-height: 1.7em;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.75rem;
  text-align: center;
  letter-spacing: 0;
  background: var(--tm-primary, #343a40);
  color: #fff;
}
.catalogue-child-categs-chevron {
  margin-left: auto;
  transition: transform 0.25s ease;
}
.catalogue-child-categs-panel[open] .catalogue-child-categs-chevron {
  transform: rotate(180deg);
}
.catalogue-child-categs-panel-contents {
  padding: 4px 12px 12px;
  border-top: 1px solid color-mix(in srgb, var(--tm-border, #ccc) 60%, transparent);
}
/* opaque chips: readable whatever the picture behind */
.catalogue-child-categs-panel .product-category-link {
  background: var(--tm-body-bg, #fff);
}
/* the theme's glass effect (html.glass): frosted surfaces */
html.glass .catalogue-child-categs-panel {
  background: var(--tm-glass-bg, rgba(255, 255, 255, 0.62));
  border-color: var(--tm-glass-border, rgba(255, 255, 255, 0.55));
  -webkit-backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
  backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
}
html.ui-effects-lite .catalogue-child-categs-panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: color-mix(in srgb, var(--tm-body-bg, #fff) 92%, transparent);
}
@media (max-width: 767.98px) {
  .catalogue-child-categs-panel-contents .product-category-link {
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  .catalogue-child-categs-chevron {
    transition: none;
  }
}
/* #endregion Readability over the category picture */
/* #region Category FAQ (BO -> category -> SEO) - under the products, first page of the category only */
.category-faq-container {
  margin: calc(3 * 10px) 0 calc(2 * 10px) 0;
}

.category-faq-title {
  font-size: 1.35rem;
  margin: 0 0 10px 0;
  color: var(--tm-text);
}

.category-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-faq-item {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: 8px;
  padding: 0 calc(1.5 * 10px);
}
.category-faq-item[open] .category-faq-chevron {
  transform: rotate(180deg);
}

.category-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(1.2 * 10px) 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--tm-text);
  list-style: none;
}
.category-faq-question::-webkit-details-marker {
  display: none;
}

.category-faq-chevron {
  flex: 0 0 auto;
  color: var(--tm-text-muted);
  transition: transform 0.2s ease;
}

.category-faq-answer {
  padding: 0 0 calc(1.2 * 10px) 0;
  color: var(--tm-text);
}
.category-faq-answer p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .category-faq-chevron {
    transition: none;
  }
}
/* #endregion Category FAQ */

/*Important to leave it 240 so that the carousel pictures align perfectly*/
.list-view-pagination-container {
  padding: 10px 0;
  text-align: left;
  font-size: 0;
}

.list-view-pagination-container > a.page-link {
  display: inline-block;
  min-width: 30px;
  width: auto;
  height: 30px;
  text-align: center;
  line-height: 28px;
  border: solid 1px var(--tm-border, #e5e5e5);
  font-size: 14px;
  color: var(--tm-text-muted, #aaa);
  text-decoration: none;
  background: none;
  padding: 0 calc(10px / 2);
  margin: 0 calc(10px / 6);
  border-radius: 15px;
  transition-duration: 0.2s;
}

.list-view-pagination-container > a.page-link.last-page,
.list-view-pagination-container > a.page-link.first-page {
  width: auto;
  padding: 0 10px;
  margin: 0 calc(10px / 6);
  border-radius: 15px;
  border: solid 1px var(--tm-border, #e5e5e5);
}

.list-view-pagination-container > a.page-link.first-page {
  margin-left: 0;
}

.list-view-pagination-container > a.page-link.last-page {
  margin-right: 0;
}

.list-view-pagination-container > a.page-link:hover {
  color: white;
  background: var(--tm-primary, #0088d4);
  border: solid 1px var(--tm-primary, #0088d4);
}

.list-view-pagination-container > a.page-link:focus,
.list-view-pagination-container > a.page-link:active {
  outline: none;
  border: solid 1px var(--tm-primary, #0088d4);
}

.list-view-pagination-container > a.page-link.selected {
  color: white;
  background: var(--tm-primary, #0088d4);
  border: solid 1px var(--tm-primary, #0088d4);
}

.list-view-pagination-container .total-items-count {
  height: 30px;
  line-height: 30px;
  font-style: italic;
  float: right;
  font-size: 14px;
  color: var(--tm-text-muted, #bababa);
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
:root {
  --shake-frequency: 300;
}

/*Product card modifs -----------*/
.add-to-cart-container .product-link .picture-wrapper {
  height: 200px;
}

.add-to-cart-container .product-link .picture-wrapper .product-picture {
  max-height: calc(7 * 200px / 8);
}

.add-to-cart-container .product-link .product-name {
  font-size: 18px;
}

.add-to-cart-container .product-link .rating-container {
  display: none;
}

.own-popup-container .product-card-wrapper {
  display: none;
}

/*--------------------------------*/
.add-to-cart-value-details-container {
  border-radius: 10px;
  overflow: hidden;
}

.add-to-cart-quantity-container {
  text-align: center;
  background: rgba(135, 212, 255, 0.15);
  padding: calc(2 * 10px);
}

.add-to-cart-value-container {
  text-align: center;
  background: rgba(135, 212, 255, 0.25);
  padding: calc(2 * 10px);
}

.own-popup-container .add-to-cart-quantity-container,
.own-popup-container .add-to-cart-value-container {
  background: none;
}

.own-popup-container .finalize-add-to-cart-command {
  display: none;
}

.add-to-cart-value-container .add-to-cart-value {
  margin: 0 auto;
  width: auto;
}

.add-to-cart-value-container .add-to-cart-value span.value {
  font-weight: 600;
  font-size: 50px;
  color: var(--tm-text-muted, #777);
}

.add-to-cart-value-container .add-to-cart-value span.currency {
  font-size: 24px;
}

.add-to-cart-quantity-wrapper {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.add-to-cart-quantity-input-wrapper {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.add-to-cart-quantity-input-wrapper .quantity-command {
  flex-grow: 0;
  background: var(--tm-success, #85c177);
  color: white;
  border: none;
  padding: 10px calc(2 * 10px);
  cursor: pointer;
  font-size: 26px;
  display: inline-block;
  vertical-align: middle;
  width: auto;
}

.add-to-cart-quantity-input-wrapper .quantity-command:focus,
.add-to-cart-quantity-input-wrapper .quantity-command:active {
  outline: none;
}

.add-to-cart-quantity-input-wrapper .quantity-command.decrement {
  border-radius: 10px 0 0 10px;
}

.add-to-cart-quantity-input-wrapper .quantity-command.increment {
  border-radius: 0 10px 10px 0;
}

.add-to-cart-quantity-input-wrapper .quantity-value {
  flex-grow: 1;
  font-size: 26px;
  text-align: center;
  border: solid 1px var(--tm-success, #85c177);
  padding: 10px;
  display: inline-block;
  vertical-align: middle;
  min-width: 0;
}

.commands-container:has(.product-card-reserve-action) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.commands-container:has(.product-card-reserve-action) .product-card-reserve-action-container {
  width: 100%;
}
.commands-container:has(.product-card-reserve-action) .product-card-reserve-action-container .product-card-reserve-action {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #87489b 0%, #b269ca 100%);
  color: white;
  border-radius: 5px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.commands-container:has(.product-card-reserve-action) .product-card-reserve-action-container .product-card-reserve-action::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #b269ca 0%, #87489b 100%);
  transition: left 0.4s ease-out;
  z-index: 0;
  pointer-events: none;
}
.commands-container:has(.product-card-reserve-action) .product-card-reserve-action-container .product-card-reserve-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}
.commands-container:has(.product-card-reserve-action) .product-card-reserve-action-container .product-card-reserve-action:hover::before {
  left: 0;
}
.commands-container:has(.product-card-reserve-action) .product-card-reserve-action-container .product-card-reserve-action .tm-icon {
  position: relative;
  z-index: 1;
}
.commands-container:has(.product-card-reserve-action) .product-card-reserve-action-container .product-card-reserve-action-text {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  padding-left: 17px;
  white-space: nowrap;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  /*5%
  {
  	transform: translateX(-5px);
  }*/
  10% {
    transform: translateX(-5px);
  }
  /*15%
  {
  	transform: translateX(-5px);
  }*/
  20% {
    transform: translateX(5px);
  }
  /*25%
  {
  	transform: translateX(-5px);
  }*/
  30% {
    transform: translateX(-5px);
  }
  /*35%
  {
  	transform: translateX(-5px);
  }*/
  40% {
    transform: translateX(5px);
  }
  /*45%
  {
  	transform: translateX(-5px);
  }*/
  50% {
    transform: translateX(-5px);
  }
  /*55%
  {
  	transform: translateX(-5px);
  }*/
  60% {
    transform: translateX(5px);
  }
  /*65%
  {
  	transform: translateX(-5px);
  }*/
  70% {
    transform: translateX(-5px);
  }
  /*75%
  {
  	transform: translateX(-5px);
  }*/
  80% {
    transform: translateX(5px);
  }
  /*85%
  	{
  		transform: translateX(-5px);
  	}
  */
  90% {
    transform: translateX(-5px);
  }
  /*
  95%
  {
  	transform: translateX(-5px);
  }*/
}
/*@keyframes shake
{
	0%, 100%
	{
		transform: translateX(0);
	}

	5%
	{
		transform: translateX(-5px);
	}

	10%
	{
		transform: translateX(5px);
	}

	15%
	{
		transform: translateX(-5px);
	}

	20%
	{
		transform: translateX(5px);
	}

	25%
	{
		transform: translateX(-5px);
	}

	30%
	{
		transform: translateX(5px);
	}

	35%
	{
		transform: translateX(-5px);
	}

	40%
	{
		transform: translateX(5px);
	}

	45%
	{
		transform: translateX(-5px);
	}

	50%
	{
		transform: translateX(5px);
	}

	55%
	{
		transform: translateX(-5px);
	}

	60%
	{
		transform: translateX(5px);
	}

	65%
	{
		transform: translateX(-5px);
	}

	70%
	{
		transform: translateX(5px);
	}

	75%
	{
		transform: translateX(-5px);
	}

	80%
	{
		transform: translateX(5px);
	}

	85%
	{
		transform: translateX(-5px);
	}

	90%
	{
		transform: translateX(5px);
	}

	95%
	{
		transform: translateX(-5px);
	}
}*/
.shake-animation {
  animation: shake 300ms ease-in-out;
}

.flying-circle {
  position: absolute;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 128, 0, 0.5);
  background: linear-gradient(90deg, #5e945e 0%, #85c177 100%);
  color: white;
  text-align: center;
  width: 44px;
  height: 44px;
  line-height: 47px;
  border-radius: 50%;
  padding: 0;
  margin: 5px 0 0 0;
  border: none;
  cursor: pointer;
  transition-duration: 0.2s;
  opacity: 0.9;
}

/* MEDIA QUERIES --------------------------------------------------------------------------*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .commands-container:has(.product-card-reserve-action) {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }
  .commands-container:has(.product-card-reserve-action) .product-card-reserve-action-container {
    width: unset;
  }
  .commands-container:has(.product-card-reserve-action) .product-card-reserve-action-container .product-card-reserve-action {
    border-radius: 50%;
    padding: 10px;
    height: 44px;
    width: 44px;
    display: inline-block;
    background: #87489b;
    color: white;
    box-shadow: none;
    transition: background-color 0.2s, box-shadow 0.2s;
  }
  .commands-container:has(.product-card-reserve-action) .product-card-reserve-action-container .product-card-reserve-action::before {
    display: none;
  }
  .commands-container:has(.product-card-reserve-action) .product-card-reserve-action-container .product-card-reserve-action:hover {
    background: #b269ca;
    transform: none;
    box-shadow: none;
  }
  .commands-container:has(.product-card-reserve-action) .product-card-reserve-action-container .product-card-reserve-action-text {
    display: none;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .add-to-cart-quantity-input-wrapper .quantity-command {
    width: 75px;
    padding: 10px calc(3 * 10px);
  }
  .add-to-cart-quantity-wrapper {
    width: 60%;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .add-to-cart-container .product-link .product-name {
    font-size: 22px;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .add-to-cart-quantity-wrapper {
    width: 35%;
  }
}

/* =====================================================================================================
   FO products lists - the paging modes of BO -> Web Studio -> "Afisare catalog si newsletter"
   (products-per-page selector, infinite scroll) and the root-category chips of the promotions page.
   Theme-driven: only the FO theme variables (--tm-primary, --tm-text, --tm-body-bg...) with neutral fallbacks.
   ===================================================================================================== */

/* #region Products per page */
.products-page-size-selector-container {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px 0;
}
.products-page-size-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--tm-text-muted, #6c757d);
}
.products-page-size-label .tm-icon {
  color: var(--tm-primary, currentColor);
}
.products-page-size-selector {
  width: auto;
  min-width: 4.5rem;
  border-radius: 999px;
  padding-left: 14px;
}
/* #endregion */

/* #region Infinite scroll */
/* the classic pagination stays in the page for crawlers (and no-JS), the visitor uses the scroll / the button */
.is-infinite-scroll .list-view-pagination-container {
  display: none;
}
.products-infinite-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0 8px 0;
}
.products-infinite-scroll-sentinel {
  width: 100%;
  height: 1px;
}
.products-load-more-command {
  border-radius: 999px;
  padding: 10px 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.products-infinite-scroll.is-loading .products-load-more-icon {
  animation: tm-products-load-more-spin 900ms linear infinite;
}
@keyframes tm-products-load-more-spin {
  to {
    transform: rotate(360deg);
  }
}
.products-infinite-scroll-end {
  margin: 0;
  font-size: 0.875rem;
  color: var(--tm-text-muted, #6c757d);
}
@media (prefers-reduced-motion: reduce) {
  .products-infinite-scroll.is-loading .products-load-more-icon {
    animation: none;
  }
}
/* #endregion */

/* #region Promotions - root categories filter */
.promotions-root-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.promotions-root-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tm-primary, #6c757d) 35%, transparent);
  background: color-mix(in srgb, var(--tm-body-bg, #fff) 85%, transparent);
  color: var(--tm-text, inherit);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.2;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.promotions-root-category:hover,
.promotions-root-category:focus-visible {
  text-decoration: none;
  border-color: var(--tm-primary, #6c757d);
  color: var(--tm-primary, inherit);
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--tm-primary, #000) 60%, transparent);
}
.promotions-root-category.is-selected {
  background: var(--tm-primary, #343a40);
  border-color: var(--tm-primary, #343a40);
  color: #fff;
}
.promotions-root-category .tm-icon {
  font-size: 0.85em;
}
@media (max-width: 575.98px) {
  /* one scrollable row on phones instead of a tall wall of chips */
  .promotions-root-categories {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .promotions-root-category {
    flex: 0 0 auto;
  }
}
/* #endregion */