/**
 * Ofiescola Pack Hint v1.1.16
 *
 * El layout de la targeta el controla el perfil Leo (profile2580249904.css).
 * Aquí NOMÉS: contenir l'amplada de les pills i l'avís dins del requadre.
 * No tocar overflow/flex/height de l'article: genera scroll i amaga el footer.
 */

/* Amplada del llistat: la columna mana, no les pills */
#js-product-list .products,
#js-product-list .product-list,
#js-product-list .product_list,
#js-product-list .leo-product-ajax,
#js-product-list [class*="product-list"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.of-packhint {
  max-width: 100%;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.of-packhint-short-desc {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.35;
  margin-bottom: 0.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.of-packhint .of-variants-matrix,
.of-packhint .of-variants-group {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/*
 * El hook viu DINS .p-name (plist Leo). El perfil fa .p-name{height:100%}
 * i això talla preu/botons. L'alçada ha de ser la del contingut.
 */
.product-miniature .p-name:has(.of-packhint) {
  height: auto;
}

/* Viewport: només limita l'amplada; no retalla en vertical */
.of-packhint .of-variants-viewport {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  contain: inline-size;
}

.of-packhint .of-variants-viewport::-webkit-scrollbar {
  height: 4px;
}

.of-packhint .of-variants-viewport::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* Avís dins del requadre (.of-variants-group), només si n'hi ha */
.of-packhint .of-attr-warning {
  margin: 0 8px 8px;
  padding: 6px 8px;
  background: #fff6e5;
  border: 1px solid #f0b429;
  border-left: 3px solid #e67e22;
  border-radius: 4px;
  color: #7a4b00;
  font-size: 0.75rem;
  line-height: 1.3;
  box-sizing: border-box;
}