/* Keep each icon inside its own grid column at every supported width. */
#compare-content .hd-bars,
#detail-content .accord-bars,
#detail-content .mobile-bar-chart[data-source="fragrantica"] {
  --chart-icon-size: 48px;
  --chart-image-size: 44px;
  --chart-label-size: 96px;
  --chart-column-gap: 10px;
}

#compare-content .hd-bar-row,
#detail-content .accord-bars .accord-row,
#detail-content .mobile-bar-chart[data-source="fragrantica"] .mobile-bar-row {
  grid-template-columns: var(--chart-icon-size) minmax(0, var(--chart-label-size)) minmax(0, 1fr) 32px !important;
  column-gap: var(--chart-column-gap) !important;
  align-items: center !important;
  min-height: calc(var(--chart-icon-size) + 4px) !important;
  min-width: 0 !important;
}

#compare-content .hd-bar-icon,
#detail-content .accord-bars .accord-row-icon,
#detail-content .mobile-bar-chart[data-source="fragrantica"] .mobile-bar-icon {
  box-sizing: border-box !important;
  width: var(--chart-icon-size) !important;
  min-width: var(--chart-icon-size) !important;
  max-width: var(--chart-icon-size) !important;
  height: var(--chart-icon-size) !important;
  border-radius: 12px !important;
}

#compare-content .hd-bar-icon .chart-icon-glyph,
#detail-content .accord-bars .accord-row-icon .chart-icon-glyph,
#detail-content .mobile-bar-chart[data-source="fragrantica"] .mobile-bar-icon .chart-icon-glyph {
  width: var(--chart-image-size) !important;
  height: var(--chart-image-size) !important;
  object-fit: contain !important;
}

#compare-content .hd-bar-label,
#detail-content .accord-bars .accord-row-name,
#detail-content .mobile-bar-chart[data-source="fragrantica"] .mobile-bar-name {
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
}

#compare-content .hd-bar-pair,
#detail-content .accord-bars .accord-track,
#detail-content .mobile-bar-chart[data-source="fragrantica"] .mobile-bar-track {
  min-width: 0 !important;
}

/* The same card classes give inspirations and similar perfumes matching photos. */
#detail-content .inspiration-row {
  margin-inline: -18px;
}
#detail-content .inspiration-row .sim-tile-img img {
  object-fit: contain;
}
#detail-content .inspiration-tile.act .sim-tile-img {
  border-color: var(--gold-lt);
  box-shadow: 0 0 12px rgba(244, 200, 106, .22);
}
#detail-content .inspiration-price {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

@media (max-width: 430px) {
  #compare-content .hd-bars,
  #detail-content .accord-bars,
  #detail-content .mobile-bar-chart[data-source="fragrantica"] {
    --chart-icon-size: 44px;
    --chart-image-size: 40px;
    --chart-label-size: 84px;
    --chart-column-gap: 9px;
  }
}

@media (max-width: 360px) {
  #compare-content .hd-bars,
  #detail-content .accord-bars,
  #detail-content .mobile-bar-chart[data-source="fragrantica"] {
    --chart-icon-size: 40px;
    --chart-image-size: 36px;
    --chart-label-size: 76px;
    --chart-column-gap: 8px;
  }
  #compare-content .hd-bar-label,
  #detail-content .accord-bars .accord-row-name,
  #detail-content .mobile-bar-chart[data-source="fragrantica"] .mobile-bar-name {
    font-size: 10.5px !important;
  }
}