/* categories-shop.css — styles for the catalog selling features (categories.html). Began as the categories2.html beta, promoted 2026-10-16.
   Reuses the page's tokens (--primary, --primary-dark, --primary-light, --border-light,
   --text-primary, --text-secondary) and mirrors the .v2-goals-bar / .v2-goal-card look. */

/* ---- Beta marker (in the header nav, next to "Catalog") ---- */
.c2b-beta-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-family: 'Mulish', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 2px;
    line-height: 1.5;
    color: var(--primary-dark, #003d01);
    background: rgba(0, 184, 61, 0.14);
    border: 1px solid rgba(0, 184, 61, 0.35);
}
.dark-mode .c2b-beta-badge {
    color: var(--primary-light, #70ffa0);
    background: rgba(0, 184, 61, 0.15);
    border-color: rgba(112, 255, 160, 0.3);
}

/* ---- Compact plant card (modal alternatives) ---- */
.c2b-card {
    flex: 0 0 auto;
    width: 150px;
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: left;
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid var(--border-light, #e2e5ea);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    font-family: 'Mulish', sans-serif;
    color: var(--text-primary, #1a1e25);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.c2b-card:hover,
.c2b-card:focus-visible {
    border-color: var(--primary, #00b83d);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 61, 1, 0.08), 0 0 0 1px rgba(0, 184, 61, 0.15);
    outline: none;
}
.c2b-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: rgba(0, 61, 1, 0.05);
    overflow: hidden;
}
.c2b-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c2b-card-img img.c2b-img-fallback {
    object-fit: contain;
    padding: 18%;
    opacity: 0.5;
}
.c2b-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 10px;
    min-width: 0;
}
.c2b-card-common {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary, #1a1e25);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.c2b-card-botanical {
    font-size: 0.72rem;
    font-style: italic;
    color: var(--text-secondary, #5a6272);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.c2b-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 4px;
    font-size: 0.72rem;
}
.c2b-card-meta:empty { display: none; }
.c2b-card-stock {
    font-weight: 700;
    color: #007a29;
}
.c2b-card-price {
    color: var(--text-secondary, #5a6272);
}
.c2b-card-price[hidden] { display: none; }
.c2b-card-reason {
    margin-top: 4px;
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--text-secondary, #5a6272);
}

.dark-mode .c2b-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fafafa;
}
.dark-mode .c2b-card:hover,
.dark-mode .c2b-card:focus-visible {
    border-color: var(--primary, #00b83d);
    background: rgba(255, 255, 255, 0.12);
}
.dark-mode .c2b-card-img { background: rgba(255, 255, 255, 0.04); }
.dark-mode .c2b-card-common { color: #fafafa; }
.dark-mode .c2b-card-botanical,
.dark-mode .c2b-card-price,
.dark-mode .c2b-card-reason { color: rgba(255, 255, 255, 0.6); }
.dark-mode .c2b-card-stock { color: var(--primary-light, #70ffa0); }

/* ---- Spelling-correction banner ---- */
.c2b-correction {
    grid-column: 1 / -1;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0, 184, 61, 0.25);
    background: rgba(0, 184, 61, 0.08);
    font-family: 'Mulish', sans-serif;
    font-size: 0.9rem;
    color: var(--text-primary, #1a1e25);
}
.c2b-correction strong { color: var(--primary-dark, #003d01); }
.c2b-correction-alt { color: var(--text-secondary, #5a6272); }
.c2b-correction-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #007a29;
    text-decoration: underline;
    cursor: pointer;
    min-height: 24px;
}
.dark-mode .c2b-correction {
    background: rgba(0, 184, 61, 0.1);
    border-color: rgba(0, 184, 61, 0.2);
    color: #fafafa;
}
.dark-mode .c2b-correction strong,
.dark-mode .c2b-correction-link { color: var(--primary-light, #70ffa0); }
.dark-mode .c2b-correction-alt { color: rgba(255, 255, 255, 0.6); }

/* ---- Modal: in-stock alternatives ---- */
.c2b-alts {
    margin: 18px 0 6px;
}
.c2b-alts[hidden] { display: none; }
.c2b-alts-title {
    margin: 0 0 10px;
}
.c2b-alts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.c2b-alts-grid .c2b-card { width: auto; }

/* ---- "Browse by function" track: collections | divider | function tiles ---- */
.c2b-goals-track {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.c2b-goals-track::-webkit-scrollbar { display: none; }
/* The function tiles no longer scroll on their own — the track does. */
.c2b-goals-track > .v2-goals-scroll {
    flex: 0 0 auto;
    overflow: visible;
    padding-bottom: 0;
}
/* "See all" wraps everything */
.c2b-goals-track:has(> .v2-goals-scroll.wrapped) {
    flex-wrap: wrap;
    overflow-x: visible;
}
.c2b-goals-track:has(> .v2-goals-scroll.wrapped) > .v2-goals-scroll { flex: 1 1 100%; }

.c2b-collections {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}
.c2b-collections[hidden],
.c2b-goals-divider[hidden] { display: none; }

.c2b-goals-divider {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 10px 2px;
    background: var(--border-light, #e2e5ea);
}
.dark-mode .c2b-goals-divider { background: rgba(255, 255, 255, 0.15); }

/* Collection tile = goal tile + green outline, light tint, a count line */
.c2b-coll-card {
    font: inherit;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-color: rgba(0, 184, 61, 0.55);
    /* same opaque base as the function tiles, plus a light green tint */
    background: linear-gradient(rgba(0, 184, 61, 0.09), rgba(0, 184, 61, 0.09)), rgba(255, 255, 255, 0.94);
}
.c2b-coll-card:focus-visible {
    outline: 2px solid var(--primary, #00b83d);
    outline-offset: 2px;
}
.c2b-coll-icon {
    width: 1.6rem;
    height: 1.6rem;
    color: #007a29;
}
.c2b-coll-icon svg { width: 100%; height: 100%; display: block; }
.c2b-coll-count {
    display: block;
    margin-top: 3px;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-secondary, #5a6272);
}
.dark-mode .c2b-coll-card {
    border-color: rgba(0, 184, 61, 0.5);
    background: rgba(0, 184, 61, 0.1);
}
.c2b-coll-card.selected {
    border-color: var(--primary, #00b83d);
    background: linear-gradient(rgba(0, 184, 61, 0.22), rgba(0, 184, 61, 0.22)), rgba(255, 255, 255, 0.94);
}
.dark-mode .c2b-coll-card.selected {
    border-color: var(--primary, #00b83d);
    background: rgba(0, 184, 61, 0.22);
}
.dark-mode .c2b-coll-icon { color: var(--primary-light, #70ffa0); }
.dark-mode .c2b-coll-count { color: rgba(255, 255, 255, 0.6); }

/* ---- Collection badge on grid cards (one per card) ---- */
.plant-card .c2b-badge {
    position: absolute;
    top: 14px;
    left: 54px;              /* clears the 36px heart button at left:10px */
    z-index: 2;
    max-width: calc(100% - 150px);
    padding: 3px 9px;
    border-radius: 999px;
    font-family: 'Mulish', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
/* Light tints with dark text read the same on both themes (they sit on a photo). */
/* !important on color is LOAD-BEARING: simplified-styles.css:280
   `body.dark-mode main#app .plant-card * { color: inherit }` (specificity 1,2,2) otherwise wins
   and, at desktop widths, paints #fafafa on these pale tints (~1.1:1). Measured 7.3:1+ with it. */
.plant-card .c2b-badge--season   { background: #ffe3c7; color: #7a3400 !important; }
.plant-card .c2b-badge--new      { background: #d3f5df; color: #0b4d22 !important; }
.plant-card .c2b-badge--trending { background: #e9ddff; color: #4a2190 !important; }
.plant-card .c2b-badge--bulk     { background: #d6e8ff; color: #0d3d7a !important; }

/* ---- Online-nursery notes ---- */
.c2b-online-note {
    font-family: 'Mulish', sans-serif;
    font-size: 0.75rem;
    color: var(--text-secondary, #5a6272);
    white-space: nowrap;
}
.dark-mode .c2b-online-note { color: rgba(255, 255, 255, 0.55); }
.c2b-modal-note {
    margin: 14px 0 -4px;
    font-family: 'Mulish', sans-serif;
    font-size: 0.82rem;
    color: var(--text-secondary, #5a6272);
}
.dark-mode .c2b-modal-note { color: rgba(255, 255, 255, 0.6); }

/* ---- Phone widths ---- */
@media (max-width: 768px) {
    .c2b-alts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* The whole browse row becomes one scrolling row of 44px pills. */
    .c2b-goals-track { gap: 8px; scroll-snap-type: x proximity; }
    .c2b-collections,
    .c2b-goals-track > .v2-goals-scroll { gap: 8px; }
    .c2b-goals-track .v2-goal-card {
        width: auto;
        min-height: 44px;
        padding: 0 14px 0 10px;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        border-radius: 999px;
        white-space: nowrap;
        text-align: left;
    }
    .c2b-goals-track .v2-goal-card:hover { transform: none; }
    .c2b-goals-track .v2-goal-card-icon {
        font-size: 1.05rem;
        margin: 0;
        display: inline-flex;
    }
    .c2b-goals-track .c2b-coll-icon { width: 1.1rem; height: 1.1rem; }
    .c2b-goals-track .v2-goal-card-name { font-size: 0.78rem; line-height: 1.1; }
    .c2b-goals-track .c2b-coll-count { margin: 0; font-size: 0.68rem; }
    .c2b-goals-track .v2-goal-card.selected::after { position: static; flex: 0 0 16px; }
    .c2b-goals-divider { margin: 8px 0; }

    .c2b-online-note { white-space: normal; }
    .plant-card .c2b-badge { left: 52px; top: 12px; max-width: calc(100% - 140px); }
}

/* ---- Card proportions (2026-10-27) ----
   Match the plant guide (plants.progressiveplants.com): the photo is sized from the card's width
   (10:9, a little wider than tall) instead of a fixed 250px strip, cards stay 230-300px wide on
   large screens, and phones show two cards per row instead of one wide card. Cards size to their
   content; while the size list is open, categories.html holds the card at its height (replacing the
   old fixed 460px), so the list slides up over the plant details instead of resizing the row. */
.v2-layout .plant-card,
.v2-layout .plant-card.expanded { height: auto; }
.v2-layout .plant-card .plant-image { height: auto; aspect-ratio: 10 / 9; flex-shrink: 0; }
/* The open list keeps its full height: the details above shrink, and a long list hangs below the card */
.v2-layout .plant-card .quick-add-inline { flex-shrink: 0; }
.v2-layout .plant-card.expanded .quick-add-trigger { border-bottom: 0; }

@media (min-width: 769px) {
    /* As many 230px+ columns as fit, so big screens get more cards rather than wider ones.
       !important: ui-performance.js sets an inline 3/4/5-column grid by width. */
    .v2-layout .plant-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; }
}

@media (max-width: 768px) {
    /* !important: ui-performance.js sets an inline one-column grid under 480px */
    .v2-layout .plant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
    .v2-layout .plant-card { min-height: 0; }
    .v2-layout .plant-card .plant-image { height: auto; }
    /* Narrow cards: badge moves to the photo's bottom-left so it isn't hidden by the heart */
    .v2-layout .plant-card .c2b-badge { top: auto; bottom: 8px; left: 8px; max-width: calc(100% - 16px); }
}

@media (max-width: 480px) {
    /* Give the two phone columns the width the grid wrapper's side padding was taking */
    .v2-layout .app-layout { padding-left: 4px; padding-right: 4px; }
}