/* Explain: CSS styles for the Produce & Farm Shop page. */
/* ===== Produce & Farm Shop ===== */
.division-block:not(:has(.product-card)) {
    display: none;
}

.order-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    overflow-y: auto;
    background: rgba(31, 46, 35, 0.42);
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.order-modal.is-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.order-modal-panel {
    position: relative;
    width: min(100%, 38rem);
    margin: auto;
    border: 1px solid var(--glass-border);
    border-radius: 2rem;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    background: var(--background-color);
    box-shadow: 0 30px 90px rgba(31, 46, 35, 0.28);
}

.order-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--sage-dark);
    font-size: 1rem;
    transition: background 300ms ease, color 300ms ease;
}

.order-modal-close:hover {
    background: var(--sage-soft);
    color: var(--sage-dark);
}