/* =========================================================
   Flavor Guide - Shared Product Subcomponents
   Shared across list cards and detail views.
   ========================================================= */

/* ---------------------------------------------------------
   Shared section title primitive
   --------------------------------------------------------- */
.fg-product-card__section-title,
.fg-product-detail__section-title {
  margin: 0 0 10px;
  text-align: center;

  font-family: var(--fg-font-title);
  font-weight: 500;
  font-size: var(--fg-size-label-section);
  line-height: var(--fg-lh-tight);

  color: var(--fg-text-primary);
}

/* ---------------------------------------------------------
   Awesome On (shared)
   --------------------------------------------------------- */
.fg-product-card__awesome {
  position: relative;
}

@media (max-width: 1079px) {
	.fg-product-card__awesome {
		max-width: 150px;
	}
}

.fg-product-card__awesome-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  justify-content: center;
  gap: 20px;
}

@media (max-width: 1079px) {
	.fg-product-card__awesome-list {
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10px;
	}
}

.fg-product-card__awesome-item {
  width: 60px;
  background: #fff;
  border-radius: 10px;
  padding: 5px;

  display: grid;
  justify-items: center;
  gap: 0;
}

.fg-product-card__awesome-icon {
  width: 56px;
  height: 38px;
  border-radius: 6px;
}

.fg-awesome-on__icon {
	display: inline-block;
	background-color: var(--fg-meta-ink, #8A8A8A);
	-webkit-mask-image: var(--fg-icon-url);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-image: var(--fg-icon-url);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.fg-product-card__awesome-label {
  font-family: var(--fg-font-meta-label);
  font-weight: 900;
  font-size: var(--fg-size-meta-sm); /*16px;*/
  line-height: var(--fg-lh-tight);

  letter-spacing: 0px;
  text-transform: uppercase;

  color: var(--fg-text-primary);
}

/* Award rosette placeholder */
.fg-product-card__award {
  /*margin-top: 14px;*/
  display: grid;
  place-items: start center;
}

.fg-product-card__award-icon {
  width: 48px;
  height: 48px;
  border-radius: 6px;

	display: inline-block;
	background-color: var(--wp--preset--color--meta-ink, #8A8A8A);
	-webkit-mask-image: url("/wp-content/plugins/flavorguide/assets/images/award_icon.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-image: url("/wp-content/plugins/flavorguide/assets/images/award_icon.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

/* ---------------------------------------------------------
   Flavor Graph (shared)
   --------------------------------------------------------- */
.fg-flavor-graph__title {
  margin-bottom: 12px;
}

.fg-flavor-graph__rows {
  display: grid;
  gap: 9px;

  max-width: 520px;
  margin: 0 auto;
}

.fg-flavor-graph__axis {
  display: grid;
  grid-template-columns: 69px 19px 225px;
  align-items: center;
  column-gap: 6px;
}

@media (max-width: 1079px) {
	.fg-flavor-graph__axis {
		grid-template-columns: 69px 19px 208px;
	}
}

.fg-flavor-graph__label {
  font-family: var(--fg-font-meta-label);
  font-weight: 900;
  font-size: var(--fg-size-meta-lg); /* 18px;*/
  line-height: var(--fg-lh-tight);

  letter-spacing: 0;
  text-transform: uppercase;
  text-align: right;

  color: var(--fg-text-primary);
}

.fg-flavor-graph__value {
  font-family: var(--fg-font-meta-number);
  font-weight: 600;
  font-size: var(--fg-size-meta-lg);
  line-height: var(--fg-lh-tight);

  color: var(--fg-number);
  text-align: left;
}

.fg-flavor-graph__ticks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.fg-flavor-graph__tick {
  height: 21px;
  background: var(--fg-system-substrate);
  opacity: 1;
}

.fg-flavor-graph__tick:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.fg-flavor-graph__tick:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.fg-flavor-graph__tick.is-on {
  background: var(--fg-data);
}