/* ================================================================
   page-commodity-select.css  –  Compliance Checker
   Commodities index (/commodity-group): the 7 EUDR commodity groups
   as photo cards (photo on top, labelled footer band), plus a lighter
   "Other tracked commodities" list below a divider. Cards reuse the
   company-select card tokens (radius / shadow / soft-lift hover) so
   they sit with the rest of the site. This sheet only loads on this
   page, so the bare [data-commodity] colour map at the bottom is safe.
   BEM throughout.
   ================================================================ */

.cc-commodities {
    max-width: min(95%, 1300px);
    margin: 0 auto;
    padding: var(--space-md) var(--space-md) var(--space-2xl);
}


/* Search — sizing only; the pill visuals come from the shared .cc-search.
   (Filters both grids by name — see the inline script in the template.) */
.cc-commodities__search { width: 100%; max-width: 460px; margin-bottom: var(--space-lg); }


/* === EUDR COMMODITY CARDS (photo + footer band) =============== */
.cc-commodity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* Surface + soft-lift hover come from the shared .cc-card. */
.cc-commodity-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* Photo fills the upper portion; the band sits below it (not full-bleed). */
.cc-commodity-card__photo {
    height: 165px;
    overflow: hidden;
}
.cc-commodity-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* White footer band under the photo. */
.cc-commodity-card__band {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 76px;
    padding: 0 18px;
    background: var(--white);
    border-top: 1px solid var(--color-input-border);
}
/* Bare glyph — no background / circle / tile behind the icon. */
.cc-commodity-card__icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
/* Colour-swatch fallback for any commodity without an icon. */
.cc-commodity-card__dot  { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; background: var(--c, var(--color-muted)); }
.cc-commodity-card__name {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    color: var(--ae-darkblue);
    line-height: 1.2;
}
/* Arrow pushed to the far right, in the commodity's own colour. */
.cc-commodity-card__arrow {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--c, var(--ae-darkblue));
    font-size: 15px;
    transition: transform var(--transition-base);
}
.cc-commodity-card:hover .cc-commodity-card__arrow { transform: translateX(3px); }


/* === OTHER (NON-EUDR) COMMODITIES ============================= */
.cc-commodities-other { margin-top: var(--space-xl); }
/* Thin rule sits ABOVE the title. */
.cc-commodities-other__rule {
    border: 0;
    border-top: 1px solid var(--color-input-border);
    margin: 0 0 var(--space-md);
}
.cc-commodities-other__title {
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    color: var(--ae-darkblue);
}
.cc-commodities-other__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
    gap: 10px;
}

/* Compact icon+name row — surface + soft-lift hover from the shared .cc-card. */
.cc-commodity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-dropdown);
}
.cc-commodity-item__icon { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.cc-commodity-item__tile { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: var(--c, var(--color-muted)); }
.cc-commodity-item__name {
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    color: var(--ae-darkblue);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-commodity-item__chevron { flex-shrink: 0; color: var(--color-muted); font-size: 15px; line-height: 1; }

/* Commodity --c colours come from components/commodity-colors.css. */