/* Artman Vrt Pro v1.10.42 — component-sized plant cards for Guided and Manual setup. */

/* The planner library is hosted in a narrow setup column/drawer. A desktop
   viewport does not imply that this component can safely render two columns. */
.input-col #cropList.av1102-library,
#av177ManualMount #cropList.av1102-library{
  container:av11042-library / inline-size;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-rows:max-content!important;
  align-items:start!important;
  align-content:start!important;
  min-width:0;
  width:100%;
  box-sizing:border-box
}

.input-col #cropList.av1102-library .av1102-plant-card,
.input-col #cropList.av1102-library.compact .av1102-plant-card,
#av177ManualMount #cropList.av1102-library .av1102-plant-card,
#av177ManualMount #cropList.av1102-library.compact .av1102-plant-card{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  grid-template-areas:
    "visual head"
    "visual meta"
    "controls controls"
    "actions actions"!important;
  gap:8px 14px!important;
  align-items:start!important;
  width:100%;
  min-width:0;
  min-height:0;
  height:auto!important;
  padding:14px!important;
  box-sizing:border-box;
  overflow:hidden;
  transform:none!important
}

.input-col #cropList .av1102-plant-visual,
.input-col #cropList.compact .av1102-plant-visual,
#av177ManualMount #cropList .av1102-plant-visual,
#av177ManualMount #cropList.compact .av1102-plant-visual{
  grid-area:visual;
  position:relative;
  align-self:start;
  width:68px!important;
  height:68px!important;
  min-width:68px;
  padding:5px;
  box-sizing:border-box;
  border-radius:17px!important;
  overflow:visible
}

.input-col #cropList .av1102-plant-visual svg,
.input-col #cropList.compact .av1102-plant-visual svg,
#av177ManualMount #cropList .av1102-plant-visual svg,
#av177ManualMount #cropList.compact .av1102-plant-visual svg{
  width:51px!important;
  height:51px!important;
  max-width:51px!important;
  max-height:51px!important
}

/* Density stays attached to the illustration and can no longer cover the name. */
.input-col #cropList .av1102-density,
#av177ManualMount #cropList .av1102-density{
  left:50%!important;
  right:auto!important;
  bottom:-8px!important;
  transform:translateX(-50%);
  width:max-content;
  min-width:0;
  max-width:74px;
  height:22px;
  padding:0 6px;
  box-sizing:border-box;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.64rem
}

.input-col #cropList .av1102-head,
#av177ManualMount #cropList .av1102-head{
  grid-area:head;
  display:grid!important;
  grid-template-columns:22px minmax(0,1fr) 32px;
  gap:8px;
  align-items:center!important;
  width:100%;
  min-width:0;
  padding:0!important;
  box-sizing:border-box
}
.input-col #cropList .av1102-head input[type="checkbox"],
#av177ManualMount #cropList .av1102-head input[type="checkbox"]{
  width:22px!important;
  height:22px!important;
  min-width:22px;
  margin:0!important
}
.input-col #cropList .av1102-name,
#av177ManualMount #cropList .av1102-name{
  min-width:0;
  font-size:1rem!important;
  line-height:1.22!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important
}
.input-col #cropList .av1102-fav,
#av177ManualMount #cropList .av1102-fav{
  position:static!important;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  min-width:32px;
  margin:0!important;
  padding:0!important
}
.input-col #cropList .av1102-meta,
#av177ManualMount #cropList .av1102-meta{
  grid-area:meta;
  min-width:0;
  padding:1px 0 8px;
  align-self:start
}
.input-col #cropList .av1102-tag,
#av177ManualMount #cropList .av1102-tag{
  max-width:100%;
  box-sizing:border-box;
  white-space:normal
}

.input-col #cropList .av1102-controls,
.input-col #cropList.compact .av1102-controls,
#av177ManualMount #cropList .av1102-controls,
#av177ManualMount #cropList.compact .av1102-controls{
  grid-area:controls;
  display:grid!important;
  grid-template-columns:minmax(112px,160px) minmax(110px,1fr)!important;
  gap:12px!important;
  align-items:end!important;
  width:100%;
  min-width:0;
  margin-top:2px;
  padding-top:12px!important;
  border-top:1px dashed #dfe7dc!important;
  box-sizing:border-box
}
.input-col #cropList .av1102-control-label,
#av177ManualMount #cropList .av1102-control-label{
  min-width:0;
  font-size:.75rem!important
}
.input-col #cropList .av1102-control-label input,
#av177ManualMount #cropList .av1102-control-label input{
  width:100%!important;
  min-width:0!important;
  height:42px!important;
  box-sizing:border-box
}
.input-col #cropList .av1102-placed,
#av177ManualMount #cropList .av1102-placed{
  min-width:0!important;
  padding:0 0 11px!important;
  font-size:.74rem!important;
  line-height:1.3;
  text-align:right!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important
}

.input-col #cropList .av1102-actions,
.input-col #cropList.compact .av1102-actions,
#av177ManualMount #cropList .av1102-actions,
#av177ManualMount #cropList.compact .av1102-actions{
  grid-area:actions;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.28fr)!important;
  gap:8px!important;
  width:100%;
  min-width:0
}
.input-col #cropList .av1102-card-btn,
#av177ManualMount #cropList .av1102-card-btn{
  min-width:0;
  min-height:44px;
  padding:8px 10px!important;
  font-size:.76rem!important;
  line-height:1.25!important;
  white-space:normal!important
}

/* Compact is a denser version of the same safe card—not a desktop row forced
   into a 400–500 px drawer. */
.input-col #cropList.av1102-library.compact .av1102-plant-card,
#av177ManualMount #cropList.av1102-library.compact .av1102-plant-card{
  grid-template-columns:60px minmax(0,1fr)!important;
  gap:7px 11px!important;
  padding:11px!important
}
.input-col #cropList.compact .av1102-plant-visual,
#av177ManualMount #cropList.compact .av1102-plant-visual{
  width:56px!important;
  height:56px!important;
  min-width:56px
}
.input-col #cropList.compact .av1102-plant-visual svg,
#av177ManualMount #cropList.compact .av1102-plant-visual svg{
  width:41px!important;
  height:41px!important;
  max-width:41px!important;
  max-height:41px!important
}

/* The enhanced Guided cards use the same principle: one readable card per row,
   with fields below the visual header. */
#av171Root .av171-crop-list.av1103-guided-library{
  container:av11042-guided-library / inline-size;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-rows:max-content!important;
  align-items:start!important
}
#av171Root .av171-crop-list.av1103-guided-library .av171-crop,
#av171Root .av171-crop-list.av1103-guided-library.compact .av171-crop{
  grid-template-columns:72px minmax(0,1fr)!important;
  grid-template-areas:
    "visual top"
    "visual meta"
    "fields fields"
    "feedback feedback"
    "location location"
    "spread spread"
    "spacing spacing"
    "warning warning"!important;
  gap:8px 14px!important;
  align-items:start!important;
  width:100%;
  min-width:0;
  height:auto!important;
  padding:14px!important;
  box-sizing:border-box;
  overflow:hidden
}
#av171Root .av171-crop-list.av1103-guided-library .av1103-guided-visual,
#av171Root .av171-crop-list.av1103-guided-library.compact .av1103-guided-visual{
  width:68px!important;
  height:68px!important;
  border-radius:17px!important
}
#av171Root .av171-crop-list.av1103-guided-library .av1103-guided-visual svg,
#av171Root .av171-crop-list.av1103-guided-library.compact .av1103-guided-visual svg{
  width:51px!important;
  height:51px!important
}
#av171Root .av171-crop-list.av1103-guided-library .av1103-guided-density{
  left:50%!important;
  right:auto!important;
  bottom:-8px!important;
  transform:translateX(-50%);
  width:max-content;
  white-space:nowrap
}
#av171Root .av171-crop-list.av1103-guided-library .av171-crop-top{
  width:100%;
  min-width:0;
  box-sizing:border-box
}
#av171Root .av171-crop-list.av1103-guided-library .av193-crop-fields{
  grid-area:fields;
  grid-template-columns:minmax(110px,.42fr) minmax(0,1fr)!important;
  width:100%;
  min-width:0;
  box-sizing:border-box
}

@container av11042-library (max-width:430px){
  .av1102-controls{
    grid-template-columns:minmax(0,1fr)!important
  }
  .av1102-placed{
    padding:0!important;
    text-align:left!important
  }
  .av1102-actions{
    grid-template-columns:minmax(0,1fr)!important
  }
}

@container av11042-guided-library (max-width:520px){
  .av193-crop-fields{
    grid-template-columns:minmax(0,1fr)!important
  }
}

/* Fallback for engines without container queries. */
@media(max-width:520px){
  .input-col #cropList .av1102-controls,
  .input-col #cropList.compact .av1102-controls,
  #av177ManualMount #cropList .av1102-controls,
  #av177ManualMount #cropList.compact .av1102-controls,
  #av171Root .av171-crop-list.av1103-guided-library .av193-crop-fields{
    grid-template-columns:minmax(0,1fr)!important
  }
  .input-col #cropList .av1102-placed,
  #av177ManualMount #cropList .av1102-placed{
    padding:0!important;
    text-align:left!important
  }
  .input-col #cropList .av1102-actions,
  .input-col #cropList.compact .av1102-actions,
  #av177ManualMount #cropList .av1102-actions,
  #av177ManualMount #cropList.compact .av1102-actions{
    grid-template-columns:minmax(0,1fr)!important
  }
}