/* =========================================================
   TD Framework: Icons
   Handles flavor icons, texture icons, and utility indicators.
========================================================= */

/* Flavor + Texture Icons */
.tdfw-flavor-icon-grid,
.tdfw-texture-icon-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.tdfw-flavor-icon-item,
.tdfw-texture-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tdfw-flavor-icon,
.tdfw-texture-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 0.3rem;

  /* Approximate Copper #A14F45 for black SVG icons */
  filter: brightness(0) saturate(100%) invert(38%) sepia(25%) saturate(1116%) hue-rotate(321deg) brightness(89%) contrast(88%);
}

.tdfw-flavor-label,
.tdfw-texture-label {
  font-size: 0.85rem;
  line-height: 1.2;
  color: #A14F45;
  text-align: center;
}

/* Freezer Friendly Indicator */
.tdfw-freezer-friendly {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.tdfw-freezer-friendly img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.tdfw-freezer-friendly.yes img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(81%) saturate(420%) hue-rotate(88deg) brightness(92%) contrast(88%);
}

.tdfw-freezer-friendly.no img {
  filter: brightness(0) saturate(100%) invert(24%) sepia(84%) saturate(2729%) hue-rotate(343deg) brightness(88%) contrast(91%);
}