/* 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-snug);
}

.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;
}

/* 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); }
}