/* Hjemmelager — a few deliberate choices on top of Lumo. */

html {
    --lumo-primary-color: hsl(152, 42%, 34%);
    --lumo-primary-text-color: hsl(152, 46%, 30%);
    --lumo-primary-color-50pct: hsla(152, 42%, 34%, 0.5);
    --lumo-primary-color-10pct: hsla(152, 42%, 34%, 0.1);
    --lumo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* A plain surface: a list of rows, the counter panel, the edit form. */
.card,
.detail-form {
    background: var(--lumo-base-color);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-l);
    padding: var(--lumo-space-m);
}

/* ---------- Lager: the product cards ---------- */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: var(--lumo-space-m);
    padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-l);
    align-content: start;
}

.product-grid-empty {
    grid-column: 1 / -1;
    padding: var(--lumo-space-xl) var(--lumo-space-m);
    text-align: center;
}

/* The whole card is one link, so middle-click and keyboard both behave. */
.product-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: var(--lumo-border-radius-l);
}

.product-link:focus-visible {
    outline: 2px solid var(--lumo-primary-color);
    outline-offset: 2px;
}

.product-card {
    height: 100%;
    transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.product-link:hover .product-card {
    transform: translateY(-2px);
    box-shadow: var(--lumo-box-shadow-s);
}

.product-image {
    display: block;
    width: 100%;
    object-fit: cover;
}

.product-image-placeholder {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: var(--lumo-contrast-5pct);
}

.product-count {
    font-size: var(--lumo-font-size-xxl);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.product-count-box {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.product-footer {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* ---------- Lager: the tag filter ---------- */

/* Chips wrap onto as many rows as they need. The row is the whole filter UI, so it has to
   stay readable when a well-labelled pantry offers thirty of them. */
.tag-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lumo-space-xs);
    padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
}

.tag-chip-link {
    text-decoration: none;
    border-radius: var(--lumo-border-radius-m);
}

.tag-chip-link:focus-visible {
    outline: 2px solid var(--lumo-primary-color);
    outline-offset: 2px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--lumo-space-xs);
    padding: 0.15rem var(--lumo-space-s);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-m);
    background: var(--lumo-contrast-5pct);
    color: var(--lumo-body-text-color);
    font-size: var(--lumo-font-size-s);
    line-height: var(--lumo-line-height-s);
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

.tag-chip-link:hover .tag-chip {
    background: var(--lumo-contrast-10pct);
}

/* A picked chip is filled rather than merely outlined: at a glance the row has to say
   which of thirty labels are actually narrowing the shelf. */
.tag-chip.selected {
    background: var(--lumo-primary-color);
    border-color: var(--lumo-primary-color);
    color: var(--lumo-primary-contrast-color);
}

.tag-chip-link:hover .tag-chip.selected {
    background: var(--lumo-primary-color-50pct);
}

.tag-chip-count {
    font-size: var(--lumo-font-size-xxs);
    color: var(--lumo-secondary-text-color);
    font-variant-numeric: tabular-nums;
}

.tag-chip-remove {
    font-size: var(--lumo-font-size-s);
    line-height: 1;
    opacity: 0.8;
}

.tag-chip-clear {
    background: transparent;
    border-style: dashed;
    color: var(--lumo-secondary-text-color);
}

/* The labels on a card are read, not clicked — the card is already one link, and the chip
   row above is where filtering happens. Flatter and quieter than the real chips, so the
   two are not mistaken for each other. */
.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.product-tag {
    padding: 0 0.35rem;
    border-radius: var(--lumo-border-radius-s);
    background: var(--lumo-contrast-5pct);
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-xxs);
    line-height: 1.5;
}

/* ---------- One product, in full ---------- */

/* The way out sits on one line with the product's tags: the plain shelf first, then each
   label as the shelf narrowed to it. The chips are the filter row's, so a tag looks the
   same wherever it is clicked. */
.detail-back {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lumo-space-xs);
    padding-block-end: var(--lumo-space-xs);
}

.detail-back-link {
    margin-inline-end: var(--lumo-space-xs);
}

.detail-columns {
    display: grid;
    grid-template-columns: minmax(15rem, 21rem) 1fr;
    gap: var(--lumo-space-l);
    width: 100%;
    align-items: start;
}

@media (max-width: 800px) {
    .detail-columns {
        grid-template-columns: 1fr;
    }
}

.detail-side {
    display: flex;
    flex-direction: column;
    gap: var(--lumo-space-m);
}

.detail-side .product-image,
.detail-side .product-image-placeholder {
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-l);
}

.detail-steppers {
    gap: var(--lumo-space-xs);
}

/* The stamps stay quiet; the barcode does not. `align-items` keeps the chip the width of
   its digits rather than the width of the card. */
.detail-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    font-size: var(--lumo-font-size-xxs);
    color: var(--lumo-tertiary-text-color);
    font-variant-numeric: tabular-nums;
}

.detail-gtin {
    margin-block-end: var(--lumo-space-xs);
    padding: 0.15rem var(--lumo-space-s);
    border-radius: var(--lumo-border-radius-m);
    background: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-text-color);
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ---------- Rows in a card ---------- */

.list-row {
    padding: var(--lumo-space-xs) 0;
    border-bottom: 1px solid var(--lumo-contrast-5pct);
}

.list-row:last-child {
    border-bottom: none;
}