/*
  Plugin default ribbon styling.

  Every rule is scoped to the ".bss-ribbon-plugin-css" marker that ONLY the plugin's default view puts on
  the ribbon container. Themes that ship their own copy of the ribbon view (NopPharma, NopGadget, ...)
  style the same tag classes in their own stylesheet and do not carry the marker, so these rules can never
  leak into them even if this file happens to be loaded on such a theme (e.g. when the theme's footer
  override that suppresses it is missing from a deployment). ":where()" keeps the specificity of each rule
  exactly as it was, so themes that use the default view together with their own ribbon CSS still win
  by source order as before.
*/

/*********** PRODUCT BOX LEFT EXTRA CONTAINER **********/
.product-left-extra:where(.bss-ribbon-plugin-css) {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  min-width: 64px;
  z-index: 1;
}

/*********** PRODUCT BOX NEW TAG (If the product is new) **********/
:where(.bss-ribbon-plugin-css) .product-new-tag {
  width: 100%;
  padding: 6px 18px;
}

:where(.bss-ribbon-plugin-css) .product-new-tag p {
  font-size: 10px;
  text-align: center;
}

/*********** PRODUCT BOX OUT OF STOCK TAG (shares the "new" tag shape; colors come from settings) **********/
/* The container is a flex column whose width grows to its widest child. With a second text tag in
   the column, a 100%-wide "New" tag would stretch to the width of "Out of Stock"; size each text
   tag by its own text instead, and keep a small gap below the out-of-stock tag when others follow. */
.product-left-extra:where(.bss-ribbon-plugin-css),
.product-details-page-left-extra:where(.bss-ribbon-plugin-css) {
  align-items: flex-start;
}

.product-left-extra:where(.bss-ribbon-plugin-css) .product-new-tag,
.product-details-page-left-extra:where(.bss-ribbon-plugin-css) .product-new-tag {
  width: auto;
  min-width: 64px;
}

:where(.bss-ribbon-plugin-css) .product-out-of-stock-tag p {
  white-space: nowrap;
}

:where(.bss-ribbon-plugin-css) .product-out-of-stock-tag:not(:last-child) {
  margin-bottom: 6px;
}

/*********** PRODUCT BOX DISCOUNT TAG (If the product has discount) **********/
:where(.bss-ribbon-plugin-css) .product-discount-tag {
  width: 42px;
  height: 42px;
  border-radius: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  margin-inline-start: 12px;
}

:where(.bss-ribbon-plugin-css) .product-discount-tag p {
  font-size: 10px;
}

/*********** PRODUCT BOX BEST SALE TAG (If the product is a best selling product) **********/
:where(.bss-ribbon-plugin-css) .product-best-sale-tag {
  width: 42px;
  height: 42px;
  border-radius: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  margin-inline-start: 12px;
}

:where(.bss-ribbon-plugin-css) .product-best-sale-tag p {
  font-size: 10px;
  text-align: center;
}


/*********** PRODUCT DETAILS PAGE LEFT EXTRA CONTAINER **********/
.product-details-page-left-extra:where(.bss-ribbon-plugin-css) {
  position: absolute;
  display: flex;
  inset-inline-start: 0;
  flex-direction: column;
  min-width: 64px;
  z-index: 1;
}


/*================ X-Large devices (large desktops, 1200px and up) ================*/
@media only screen and (min-width: 1200px) {
  /*************** PRODUCT BOX DEFAULT ****************/
  :where(.bss-ribbon-plugin-css) .product-new-tag p {
    font-size: 12px;
  }

  :where(.bss-ribbon-plugin-css) .product-discount-tag {
    width: 50px;
    height: 50px;
  }

  :where(.bss-ribbon-plugin-css) .product-discount-tag p {
    font-size: 12px;
  }

  :where(.bss-ribbon-plugin-css) .product-best-sale-tag {
    width: 50px;
    height: 50px;
  }

  :where(.bss-ribbon-plugin-css) .product-best-sale-tag p {
    font-size: 12px;
  }
}