/*
 * Refurbished / used products (Shopro\Refurbished): badge on product cards (journal3/products.twig), pill above
 * the product title and the explanation box in the buy box (product/product_shopro.twig), tag in search suggestions
 * (js/shopro-search.js). Loaded on every page by journal3/event/header.php.
 */

.shp-condition {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.shp-condition .fa { font-size: 11px; }

.shp-condition-refurbished { background: #ccfbf1; color: #115e59; border-color: #5eead4; }
.shp-condition-used { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

/* product cards: bottom-left corner of the image, above the picture and below the quickview button */
.product-thumb .image .shp-condition {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

/* product page: pill between brand and title */
.pp-head .shp-condition-inline {
  margin: 4px 0 6px;
  font-size: 13px;
  padding: 4px 11px;
}

/* product page: explanation box right under the price */
#product-product #product > .pp-condition { order: 11; }

#product-product .pp-condition {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 4px 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 13px;
  line-height: 1.45;
}

#product-product .pp-condition > .fa { font-size: 18px; margin-top: 2px; }
#product-product .pp-condition b { display: block; font-size: 14px; margin-bottom: 2px; }
#product-product .pp-condition span { display: block; }
#product-product .pp-condition strong { display: block; margin-top: 4px; }

#product-product .shp-condition-box-refurbished { background: #f0fdfa; border-color: #5eead4; color: #134e4a; }
#product-product .shp-condition-box-refurbished > .fa { color: #0f766e; }
#product-product .shp-condition-box-used { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
#product-product .shp-condition-box-used > .fa { color: #b45309; }

/* search suggestions */
.ss-condition {
  display: inline-block;
  margin-right: 6px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  vertical-align: middle;
}

.ss-condition-refurbished { background: #ccfbf1; color: #115e59; }
.ss-condition-used { background: #fef3c7; color: #92400e; }