/* Variety detail — Figma variety page 1856:11452 (desktop 1440, tablet
   1023, mobile 480). Tab bar 1862:33255; content 1862:33270. */

.variety-detail {
  background-color: var(--secan-white);
}

/* Tab bar ---------------------------------------------------------------- */

.variety-detail__tabs {
  padding-top: var(--secan-space-s);
  border-bottom: 1px solid var(--secan-divider);
  background-color: var(--secan-white);
}

.variety-detail__tabs-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--secan-space-12xl);
}

.variety-detail__tabs .tabs--underline .tabs__list {
  border-bottom: 0;
}

/* Body and panels -------------------------------------------------------- */

.variety-detail__body {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--secan-space-2xl) var(--secan-space-2xl) var(--secan-space-2xl);
  box-sizing: content-box;
}

.variety-detail__panel:focus-visible {
  outline: none;
  box-shadow: var(--secan-focus-ring);
}

.variety-detail__notice {
  margin-bottom: var(--secan-space-l);
}

.variety-detail__stack {
  display: flex;
  flex-direction: column;
  gap: var(--secan-space-l);
  min-width: 0;
}

.variety-detail__overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 389px);
  gap: var(--secan-space-l);
  align-items: start;
}

/* Cards ------------------------------------------------------------------ */

.variety-detail__card {
  min-width: 0;
  padding: var(--secan-space-l);
  border: 1px solid var(--secan-chip-bg);
  border-radius: var(--secan-radius-3);
  background-color: var(--secan-white);
}

.variety-detail__card--compact {
  padding: var(--secan-space-m);
}

.variety-detail__card--flush {
  padding: 0;
  overflow: hidden;
}

.variety-detail__card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--secan-space-s);
  margin: 0 0 var(--secan-space-s);
  padding-bottom: var(--secan-space-xxs);
  border-bottom: 1px solid var(--secan-modal-bg);
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-body);
  font-weight: var(--secan-fw-medium);
  line-height: var(--secan-lh-body);
  color: var(--secan-black);
}

.variety-detail__card-heading--plain {
  margin-bottom: var(--secan-space-xs);
  padding-bottom: 0;
  border-bottom: 0;
}

.variety-detail__card-intro {
  margin: calc(var(--secan-space-xxs) * -1) 0 var(--secan-space-s);
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-label);
  line-height: var(--secan-lh-label);
  color: var(--secan-gray);
}

.variety-detail__section-title {
  margin: 0 0 var(--secan-space-s);
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-body);
  font-weight: var(--secan-fw-medium);
  line-height: var(--secan-lh-body);
  color: var(--secan-black);
}

/* Table card header — Figma 1862:38132. */
.variety-detail__table-header {
  padding: var(--secan-space-s) var(--secan-space-m);
  border-bottom: 1px solid var(--secan-chip-bg);
}

.variety-detail__table-title {
  margin: 0;
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-body);
  font-weight: var(--secan-fw-regular);
  line-height: var(--secan-lh-body);
  color: var(--secan-black);
}

.variety-detail__table-note {
  margin: 2px 0 0;
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  line-height: var(--secan-lh-small);
  color: var(--secan-gray);
}

/* Collapsible card (Technical Information) — native <details>. */
.variety-detail__collapsible > summary {
  list-style: none;
  cursor: pointer;
}

.variety-detail__collapsible > summary::-webkit-details-marker {
  display: none;
}

.variety-detail__collapsible > summary img {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.variety-detail__collapsible:not([open]) > summary {
  margin-bottom: 0;
}

.variety-detail__collapsible:not([open]) > summary img {
  transform: rotate(-90deg);
}

.variety-detail__collapsible > summary:focus-visible {
  outline: none;
  box-shadow: var(--secan-focus-ring);
}

/* Certification logos — Figma 1862:33424. */
.variety-detail__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--secan-space-l);
  margin: var(--secan-space-s) 0 0;
  padding: 0;
  list-style: none;
}

.variety-detail__logos img {
  display: block;
  width: auto;
  max-width: 102px;
  height: 45px;
  object-fit: contain;
}

/* Document links — Figma DocumentLink 1862:33439. */
.variety-detail__docs {
  display: flex;
  flex-direction: column;
  gap: var(--secan-space-xxs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.variety-detail__doc {
  display: flex;
  align-items: center;
  gap: var(--secan-space-xxs);
  padding: var(--secan-space-xxs) var(--secan-space-xs);
  border: 1px solid var(--secan-chip-bg);
  border-radius: 6px;
  background-color: var(--secan-white);
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-label);
  font-weight: var(--secan-fw-medium);
  line-height: var(--secan-lh-label);
  color: var(--secan-black);
  text-decoration: none;
}

.variety-detail__doc:hover {
  background-color: var(--secan-input-bg);
}

.variety-detail__doc:focus-visible {
  outline: none;
  box-shadow: var(--secan-focus-ring);
}

.variety-detail__doc-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.variety-detail__doc img {
  flex: 0 0 auto;
}

/* Ranked list (Top Sellers card) — Figma 1862:33374. */
.variety-detail__ranked {
  margin: 0;
  padding: 0;
  list-style: none;
}

.variety-detail__ranked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--secan-space-s);
  padding-top: var(--secan-space-xxs);
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-label);
  line-height: 20px;
}

.variety-detail__ranked-row:first-child {
  padding-top: 0;
}

.variety-detail__ranked-name {
  display: flex;
  align-items: center;
  gap: var(--secan-space-xxs);
  min-width: 0;
  color: var(--secan-black);
}

.variety-detail__ranked-rank {
  flex: 0 0 16px;
  font-size: var(--secan-fs-small);
  color: var(--secan-gray);
  text-align: right;
}

.variety-detail__ranked-value {
  flex: 0 0 auto;
  font-weight: var(--secan-fw-medium);
  color: var(--secan-gray);
}

.variety-detail__more {
  display: inline-block;
  margin-top: var(--secan-space-xs);
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  font-weight: var(--secan-fw-bold);
  line-height: var(--secan-lh-small);
  color: var(--secan-black);
  text-decoration: none;
}

.variety-detail__more:hover,
.variety-detail__more:focus-visible {
  color: var(--secan-red);
}

/* Empty state — Figma 1862:40736. */
.variety-detail__empty {
  margin: 0;
  padding: var(--secan-space-s);
  border-radius: var(--secan-radius-2);
  background-color: var(--secan-input-bg);
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-label);
  font-style: italic;
  line-height: 20px;
  color: var(--secan-gray);
}

/* Tables: data-table restyled to the variety Figma table (1862:38143).
   Inside cards the card supplies the border; inside accordions the table
   keeps a light one. */
.variety-detail .data-table__scroll {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.variety-detail__subsection .data-table__scroll {
  border: 1px solid var(--secan-chip-bg);
  border-radius: var(--secan-radius-2);
}

.variety-detail .data-table__row,
.variety-detail .data-table__row:nth-child(even) {
  border-top: 0;
  background: var(--secan-white);
}

.variety-detail th.data-table__cell {
  font-weight: var(--secan-fw-regular);
}

.variety-detail .data-table__heading {
  padding: var(--secan-space-xs) var(--secan-space-m);
  background: var(--secan-input-bg);
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  font-weight: var(--secan-fw-regular);
  line-height: var(--secan-lh-small);
  color: var(--secan-gray);
  text-transform: uppercase;
}

.variety-detail .data-table__cell {
  padding: var(--secan-space-xs) var(--secan-space-m);
  border-bottom: 1px solid var(--secan-chip-bg);
  background: var(--secan-white);
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-label);
  line-height: var(--secan-lh-label);
  color: var(--secan-gray-dark);
}

.variety-detail .data-table__row:last-child .data-table__cell {
  border-bottom: 0;
}

.variety-detail__tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--secan-space-l);
  align-items: start;
}

/* Production chart — Figma 1862:38013. The series toggle sits in the card
   header row. */
.variety-detail__chart-card {
  position: relative;
}

.variety-detail__chart-card .variety-detail__card-heading {
  max-width: 437px;
  border-bottom-color: var(--secan-chip-bg);
}

.variety-detail__chart-card .secan-chart__toggle {
  position: absolute;
  top: var(--secan-space-l);
  right: var(--secan-space-l);
}

.variety-detail__chart-card .secan-chart {
  margin-top: var(--secan-space-l);
}

/* Filters (Seed Application member number) ------------------------------ */

.variety-detail__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--secan-space-xs);
  padding: var(--secan-space-s) var(--secan-space-m);
  border-bottom: 1px solid var(--secan-chip-bg);
}

.variety-detail__filter label {
  display: flex;
  flex-direction: column;
  gap: var(--secan-space-xxxs);
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  line-height: var(--secan-lh-small);
  color: var(--secan-gray);
  text-transform: uppercase;
}

.variety-detail__filter input {
  min-width: 180px;
  padding: var(--secan-space-xxs) var(--secan-space-xs);
  border: 1px solid var(--secan-divider);
  border-radius: 6px;
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-label);
  text-transform: none;
}

.variety-detail__filter button,
.variety-detail__load-more {
  padding: var(--secan-space-xxs) var(--secan-space-s);
  border: 1px solid var(--secan-red);
  border-radius: var(--secan-radius-pill);
  background: var(--secan-white);
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-label);
  font-weight: var(--secan-fw-medium);
  color: var(--secan-red);
  cursor: pointer;
}

.variety-detail__filter button:hover,
.variety-detail__load-more:hover {
  background: var(--secan-red);
  color: var(--secan-white);
}

.variety-detail__pager {
  padding: var(--secan-space-xs) var(--secan-space-m);
}

/* Where to Buy — Figma 1862:35621. Full-width map with the search panel
   overlaid on the left. */
.variety-detail__finder {
  overflow: hidden;
  border: 1px solid var(--secan-chip-bg);
  border-radius: var(--secan-radius-2);
  background-color: var(--secan-white);
}

.variety-detail__finder-header {
  padding: var(--secan-space-m);
  border-bottom: 1px solid var(--secan-chip-bg);
}

.variety-detail__finder-header .variety-detail__card-heading {
  margin-bottom: var(--secan-space-xxs);
}

.variety-detail__finder-header p {
  margin: 0;
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-label);
  line-height: var(--secan-lh-label);
  color: var(--secan-gray-dark);
}

.variety-detail__finder-body {
  position: relative;
  min-height: 747px;
  padding: var(--secan-space-3xl) var(--secan-space-s) var(--secan-space-3xl) var(--secan-space-12xl);
  box-sizing: border-box;
  background-color: var(--secan-chip-bg);
}

.variety-detail__map {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.variety-detail__finder-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 500px;
  max-width: calc(100% - 2 * var(--secan-space-s));
  max-height: 667px;
  overflow: hidden;
  background-color: var(--secan-white);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.variety-detail__search {
  display: flex;
  align-items: center;
  gap: var(--secan-space-s);
  padding: var(--secan-space-s);
  border-bottom: 1px solid var(--secan-modal-bg);
}

.variety-detail__search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-body);
  line-height: var(--secan-lh-body);
  color: var(--secan-black);
}

.variety-detail__search input::placeholder {
  color: var(--secan-black);
  opacity: 0.7;
}

.variety-detail__search input:focus {
  outline: none;
}

.variety-detail__search:focus-within {
  box-shadow: inset var(--secan-focus-ring);
}

.variety-detail__search button {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0 0 0 var(--secan-space-s);
  border: 0;
  border-left: 1px solid var(--secan-divider);
  background: transparent;
  cursor: pointer;
}

/* Seed-class filter: toggle chips under the search box. Nothing checked
   means every class. */
.variety-detail__class-filter {
  min-width: 0;
  margin: 0;
  padding: var(--secan-space-xs) var(--secan-space-s);
  border: 0;
  border-bottom: 1px solid var(--secan-modal-bg);
}

.variety-detail__class-filter-label {
  float: left;
  margin: 0 var(--secan-space-xs) 0 0;
  padding: 0;
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  font-weight: var(--secan-fw-bold);
  line-height: 32px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--secan-gray);
}

.variety-detail__class-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--secan-space-xxs);
}

.variety-detail__class-option {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.variety-detail__class-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.variety-detail__class-option span {
  display: inline-flex;
  align-items: center;
  gap: var(--secan-space-xxxs);
  min-height: 32px;
  padding: 0 var(--secan-space-xs);
  box-sizing: border-box;
  border: 1px solid var(--secan-divider);
  border-radius: var(--secan-radius-pill);
  background-color: var(--secan-white);
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  font-weight: var(--secan-fw-bold);
  line-height: var(--secan-lh-small);
  letter-spacing: 0.02em;
  color: var(--secan-gray-dark);
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.variety-detail__class-option:hover span {
  border-color: var(--secan-blue);
  color: var(--secan-blue);
}

.variety-detail__class-option input:checked + span {
  border-color: var(--secan-blue);
  background-color: var(--secan-blue);
  color: var(--secan-white);
}

/* Check mark on selected chips. */
.variety-detail__class-option input:checked + span::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.variety-detail__class-option input:focus-visible + span {
  box-shadow: var(--secan-focus-ring);
}

.variety-detail__results {
  flex: 1 1 auto;
  overflow-y: auto;
}

.variety-detail__results[aria-busy="true"] {
  opacity: 0.5;
}

.variety-detail__results-status {
  margin: 0;
  padding: var(--secan-space-xs) var(--secan-space-s);
  border-bottom: 1px solid var(--secan-modal-bg);
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  line-height: var(--secan-lh-small);
  color: var(--secan-gray);
}

.variety-detail__results .banner {
  margin: var(--secan-space-s);
}

.variety-detail__results-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rows follow the Figma result row (1862:35646). */
.variety-detail__results .retailer-result-row {
  align-items: center;
  gap: var(--secan-space-s);
  padding: var(--secan-space-s);
  border-bottom-color: var(--secan-modal-bg);
}

.variety-detail__results .retailer-result-row__name {
  font-family: var(--secan-font-body);
  font-weight: var(--secan-fw-regular);
}

.variety-detail__results .retailer-result-row__address {
  gap: var(--secan-space-xxxs);
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  line-height: var(--secan-lh-small);
}

.variety-detail__load-more-wrap {
  padding: var(--secan-space-s);
  text-align: center;
}

.variety-detail__inventory {
  margin-top: var(--secan-space-l);
}

.variety-detail__inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--secan-space-s);
}

/* Variety Details — Figma 1862:40404. */
.variety-detail__accordions {
  display: flex;
  flex-direction: column;
  gap: var(--secan-space-xs);
}

.variety-detail__subsection {
  margin-top: var(--secan-space-l);
}

.variety-detail__subsection:first-child {
  margin-top: 0;
}

.variety-detail__subheading {
  margin: 0 0 var(--secan-space-xs);
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  font-weight: var(--secan-fw-regular);
  line-height: var(--secan-lh-small);
  color: var(--secan-gray);
  text-transform: uppercase;
}

.variety-detail__regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--secan-space-l);
}

/* Top Sellers link to the member profile. */
.variety-detail__ranked-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.variety-detail__ranked-link:focus-visible {
  outline: none;
  border-radius: 2px;
  box-shadow: var(--secan-focus-ring);
}

/* Legal text under every tab. */
.variety-detail__legal {
  margin-top: var(--secan-space-3xl);
  padding-top: var(--secan-space-l);
  border-top: 1px solid var(--secan-chip-bg);
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-small);
  line-height: var(--secan-lh-small);
  color: var(--secan-gray);
}

.variety-detail__legal h2 {
  margin: 0 0 var(--secan-space-xxs);
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  font-weight: var(--secan-fw-bold);
  text-transform: uppercase;
}

.variety-detail__legal > * + h2 {
  margin-top: var(--secan-space-s);
}

/* Tablet (Figma 1023) ---------------------------------------------------- */

@media (max-width: 1023px) {
  .variety-detail__tabs-inner {
    padding: 0 var(--secan-space-2xl);
  }

  .variety-detail__body {
    padding: var(--secan-space-l) var(--secan-space-2xl) var(--secan-space-2xl);
  }

  /* Overview regroups into one grid (Figma 1862:34286): highlights beside
     certifications + technical info, then full-width rows. */
  .variety-detail__overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "highlights certifications"
      "highlights technical"
      "profile profile"
      "sellers sellers";
  }

  .variety-detail__overview > .variety-detail__stack {
    display: contents;
  }

  .variety-detail__card--highlights { grid-area: highlights; }
  .variety-detail__card--certifications { grid-area: certifications; }
  .variety-detail__card--technical { grid-area: technical; }
  .variety-detail__card--profile { grid-area: profile; }
  .variety-detail__card--sellers { grid-area: sellers; }

  .variety-detail__card--highlights .detail-list--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .variety-detail__card--profile .detail-list--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .variety-detail__tables {
    grid-template-columns: minmax(0, 1fr);
  }

  .variety-detail__inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Map above the list: an overlaid panel would leave too little map to
     see the markers (and covers it entirely on phones). */
  .variety-detail__finder-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    background-color: var(--secan-white);
  }

  .variety-detail__map {
    position: relative;
    inset: auto;
    height: 420px;
  }

  .variety-detail__finder-panel {
    width: 100%;
    max-width: none;
    max-height: 640px;
    border-top: 1px solid var(--secan-chip-bg);
    box-shadow: none;
  }

  .variety-detail__chart-card .secan-chart__toggle {
    position: static;
    margin-bottom: var(--secan-space-s);
  }
}

/* Mobile (Figma 480) ----------------------------------------------------- */

@media (max-width: 600px) {
  .variety-detail__tabs {
    padding-top: 0;
  }

  .variety-detail__tabs-inner {
    padding: 0;
  }

  .variety-detail__body {
    padding: var(--secan-space-2xl) var(--secan-space-m) var(--secan-space-2xl);
  }

  .variety-detail__card {
    padding: var(--secan-space-s);
  }

  .variety-detail__overview {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "highlights"
      "certifications"
      "technical"
      "profile"
      "sellers";
  }

  .variety-detail__card--profile .detail-list--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .variety-detail__regions {
    grid-template-columns: minmax(0, 1fr);
  }

  .variety-detail__map {
    height: 300px;
  }

  .variety-detail__finder-panel {
    max-height: 560px;
  }

  /* Label on its own line; staying floated keeps the legend inside the
     fieldset's padding. */
  .variety-detail__class-filter-label {
    width: 100%;
    margin: 0 0 var(--secan-space-xxs);
    line-height: var(--secan-lh-small);
  }

  /* Larger touch targets. */
  .variety-detail__class-option span {
    min-height: 36px;
    padding: 0 var(--secan-space-s);
  }

  .variety-detail__logos {
    justify-content: center;
  }
}

/* Mobile: the tabs component supplies its own gutter. */
@media (max-width: 600px) {
  .variety-detail__tabs-inner {
    padding: 0;
  }
}