/* Products page - B60 OS. Tokens only (--ds-*). */

.products-page {
    padding: 0;
}

.products-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-3);
    min-height: 40px;
}

.products-toolbar .page-search {
    flex: 1 1 220px;
    min-width: 180px;
    position: relative;
}

.products-toolbar .page-search svg {
    position: absolute;
    inset-inline-start: var(--ds-space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--ds-text-tertiary);
    pointer-events: none;
}

.products-toolbar .page-search .ds-input {
    width: 100%;
    min-height: 40px;
    height: 40px;
    padding-inline-start: calc(var(--ds-space-3) + 20px);
}

.products-toolbar .ds-select,
.products-toolbar .ds-btn {
    width: auto;
    min-height: 40px;
    height: 40px;
    min-width: 140px;
    flex: 0 1 auto;
}

.products-toolbar .ds-btn {
    min-width: 0;
}

@media (max-width: 900px) {
    .products-toolbar .ds-select,
    .products-toolbar .ds-btn,
    .products-toolbar .page-search {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}

.products-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
    margin-block-end: var(--ds-space-4);
}

.products-panel-header h3 {
    margin: 0;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--ds-space-3);
}

.products-grid-card {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    cursor: pointer;
    text-align: start;
    transition: border-color var(--ds-motion-hover) var(--ds-ease-standard),
                box-shadow var(--ds-motion-hover) var(--ds-ease-standard);
}

.products-grid-card:hover {
    border-color: var(--ds-border-strong);
    box-shadow: var(--ds-shadow-card);
}

.products-grid-card.is-sold-out {
    opacity: 0.65;
}

.products-grid-card-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    background: var(--ds-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}

.products-grid-card-thumb .ds-initials,
.products-table-thumb .ds-initials {
    width: 100%;
    height: 100%;
    background: var(--ds-surface-alt);
    color: var(--ds-text-secondary);
    box-shadow: inset 0 0 0 1px var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.products-grid-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.products-grid-card-name {
    font-weight: var(--ds-fw-semibold);
    font-size: var(--ds-text-sm);
    color: var(--ds-text-primary);
    line-height: var(--ds-leading-tight);
}

.products-grid-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-2);
    font-size: var(--ds-text-xs);
}

.products-grid-card-price {
    font-family: var(--ds-font-mono);
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-primary);
}

.products-grid-card-actions {
    display: flex;
    gap: var(--ds-space-2);
    margin-block-start: var(--ds-space-1);
}

.products-table-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    background: var(--ds-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.products-table-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.products-table-product {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
}

.products-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
}

.products-table-wrap .ds-table {
    width: 100%;
    margin: 0;
}

.products-table-wrap .ds-table .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.products-table-actions {
    display: flex;
    gap: var(--ds-space-2);
    justify-content: flex-end;
}

/* ─── Product editor modal ──────────────────────────────────────────────────
 *
 * Structure only; every control inside is still a plain ds-* component.
 * See the comment on Products.showProductModal for why the form is arranged
 * this way.
 */

.pm-form {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

/*
 * The one rule that makes syncKindFields() work.
 *
 * Three parts of this form hide themselves by setting `.hidden = true` from
 * JS: the price field on a raw ingredient, the happy-hour row with it, and the
 * recipe editor on anything that is not made to order. None of them ever
 * actually disappeared. `[hidden]` is a UA rule of `display:none`, and every
 * one of those elements carries an author rule that sets display explicitly --
 * .ds-field is display:flex, .products-form-row is display:grid -- which wins
 * at equal specificity simply for being in an author stylesheet.
 *
 * So a raw ingredient asked for a sale price it does not have, and every single
 * product showed an ingredients editor whether or not it was made to order.
 * That is a good part of what made this form feel like it was showing
 * everything at once: it was.
 */
.pm-form [hidden] {
    display: none !important;
}

.pm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--ds-space-4);
    align-items: start;
}

.pm-col {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    min-width: 0;
}

.pm-section {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    padding: var(--ds-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    min-width: 0;
}

.pm-section-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pm-section-title {
    margin: 0;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-primary);
    letter-spacing: 0.01em;
}

.pm-section-hint {
    margin: 0;
    font-size: var(--ds-text-xs);
    line-height: 1.45;
    color: var(--ds-text-tertiary);
}

/*
 * Title-row affordance: a section whose content is a list you add rows to.
 * The section title already names the list, so a lone button sits at the end;
 * a row that carries its own sub-label (bundle contents) spreads instead.
 */
.pm-section-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-space-2);
}

.pm-section-action:has(.ds-label) {
    justify-content: space-between;
}

/* Inside the editor the three kind cards share the main column, not the full
   dialog, so they run tighter than the 88px standalone version. */
.pm-form .products-kind-grid {
    margin-block-start: 0;
    gap: var(--ds-space-2);
}

.pm-form .products-kind-card {
    min-height: 0;
    gap: var(--ds-space-1);
    padding: var(--ds-space-3) var(--ds-space-2);
}

/* In the side column the three kinds stack: a third of that column is too
   narrow for a title and its one-line hint. */
.pm-col-side .products-kind-grid {
    grid-template-columns: 1fr;
}

.pm-col-side .products-kind-card {
    padding: var(--ds-space-2) var(--ds-space-3);
}

.pm-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3) var(--ds-space-4);
}

.pm-req {
    color: var(--ds-danger);
    font-weight: var(--ds-fw-semibold);
}

.pm-legend {
    margin: 0;
    font-size: var(--ds-text-xs);
    color: var(--ds-text-tertiary);
}

/* The side column is narrow; its pickers need to be too. */
.pm-col-side .products-image-drop {
    padding: var(--ds-space-4) var(--ds-space-3);
}

.pm-col-side .products-image-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * One column below 860px. The dialog itself is capped at 920px and the overlay
 * keeps 16px each side, so this is the point at which two columns stop having
 * room for a label and its input on one line.
 */
@media (max-width: 860px) {
    .pm-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pm-col-side .products-image-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Modal / editor sub-panels */
.products-image-drop {
    border: 2px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-6) var(--ds-space-4);
    text-align: center;
    cursor: pointer;
    color: var(--ds-text-secondary);
    background: var(--ds-bg-inset);
    transition: border-color var(--ds-motion-hover) var(--ds-ease-standard),
                background-color var(--ds-motion-hover) var(--ds-ease-standard);
}

.products-image-drop.is-dragover {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
}

.products-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ds-space-2);
}

.products-image-option {
    cursor: pointer;
    border: 2px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    aspect-ratio: 1;
    transition: border-color var(--ds-motion-hover) var(--ds-ease-standard);
}

.products-image-option.is-selected {
    border-color: var(--ds-primary);
}

.products-editor-panel {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-3);
    margin-block-end: var(--ds-space-3);
    background: var(--ds-bg-inset);
}

.products-editor-row {
    display: flex;
    gap: var(--ds-space-2);
    align-items: center;
    margin-block-end: var(--ds-space-2);
}

.products-combo-cost-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-space-2) var(--ds-space-3);
    background: var(--ds-bg-inset);
    border-radius: var(--ds-radius-md);
    font-size: var(--ds-text-xs);
    margin-block-start: var(--ds-space-2);
}

.products-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-3);
}

@media (max-width: 640px) {
    .products-form-row {
        grid-template-columns: 1fr;
    }
}

.products-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ds-border);
    border-top-color: var(--ds-primary);
    border-radius: 50%;
    animation: products-spin 1s linear infinite;
    margin-inline: auto;
}

@keyframes products-spin {
    to { transform: rotate(360deg); }
}

/* Item-type hint under a form field (next-up.md #40). Explains why the
   stock input is absent for a Made-to-Order product. */
.products-field-hint {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-tertiary);
    margin-block-start: var(--ds-space-1);
    line-height: 1.4;
}

.products-kind-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-space-3);
    margin-block-start: var(--ds-space-2);
}

@media (max-width: 720px) {
    .products-kind-grid {
        grid-template-columns: 1fr;
    }
}

.products-kind-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-2);
    text-align: start;
    padding: var(--ds-space-3);
    min-height: 88px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-bg-inset);
    color: var(--ds-text-primary);
    cursor: pointer;
    transition: border-color var(--ds-motion-hover) var(--ds-ease-standard),
                background-color var(--ds-motion-hover) var(--ds-ease-standard);
}

.products-kind-card.is-selected {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint);
}

.products-kind-card-title {
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-semibold);
}

.products-kind-card-hint {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
    line-height: 1.35;
}

.products-missing-recipe-banner {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1);
    padding: var(--ds-space-3) var(--ds-space-4);
    margin-block-end: var(--ds-space-3);
    border: 1px solid var(--ds-warning);
    border-radius: var(--ds-radius-lg);
    background: rgba(245, 158, 11, 0.12);
    color: var(--ds-text-primary);
    font-size: var(--ds-text-sm);
}

.products-missing-recipe-banner #showMissingRecipesBtn {
    align-self: flex-start;
    margin-block-start: var(--ds-space-1);
}

/* Editor sections that disclose on demand (photo, POS display, happy hour,
   bundle, modifiers). Closed, they are one title row; the chevron says so. */
.pm-disclosure > summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-inline-end: 28px;
    min-height: 24px;
}

.pm-disclosure > summary::-webkit-details-marker {
    display: none;
}

.pm-disclosure > summary::after {
    content: '';
    position: absolute;
    inset-inline-end: 6px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ds-text-secondary);
    border-bottom: 2px solid var(--ds-text-secondary);
    transform: rotate(45deg);
    transition: transform var(--ds-duration-fast, 120ms) var(--ds-ease-standard);
}

.pm-disclosure[open] > summary::after {
    top: 8px;
    transform: rotate(-135deg);
}

.pm-disclosure > summary:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 4px;
    border-radius: var(--ds-radius-sm);
}

/* Wave 4 T-N: repeated inline styles lifted from products.js (styles only) */
.products-flex-1 { flex: 1; }
.products-text-xs-m0 {
    font-size: var(--ds-text-xs);
    margin: 0;
}
.products-text-xs { font-size: var(--ds-text-xs); }
.products-text-sm { font-size: var(--ds-text-sm); }
.products-mh-40 { min-height: 40px; }
.products-empty-hidden {
    display: none;
    text-align: center;
    padding: var(--ds-space-6);
}
.products-mb-3 { margin-block-end: var(--ds-space-3); }
.products-w-100 { width: 100px; }
.products-w-88 { width: 88px; }
.products-muted { color: var(--ds-text-tertiary); }
.products-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}