/*
 * Core-layer storefront assets — served by GET /assets/{name} (flat file names
 * only) with the cascade data/shops/{id}/assets -> themes/{theme}/assets ->
 * core/assets. This file is the core fallback for /assets/style.css, which the
 * storefront theme shell links. Keep it near-empty: framework styling lives in
 * the enx_ui bundle (/static/css/index.css); only the storefront-specific
 * custom classes rendered by the core templates live here.
 */

/* Card grid used by the core card_fragment templates (search + top-level grid). */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

.card-vertical,
.card-horizontal {
    display: flex;
    flex-direction: column;
}

.card-vertical .card-image img,
.card-horizontal img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.card-vertical .card-body,
.card-horizontal .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.price {
    font-weight: 600;
}

.old-price {
    margin-right: 0.5rem;
    text-decoration: line-through;
    opacity: 0.6;
}

.badge.sale {
    background-color: var(--color-error);
    color: var(--color-error-content);
}

/*
 * Facet drawer (fragments/facet_panel.liquid): fullscreen on mobile,
 * ~380px side panel on desktop. Alpine keeps the closed drawer in the DOM
 * (crawlable hrefs), so the pre-init hide + the backdrop tint live here.
 */
.facet-drawer {
    width: 100%;
}

@media (min-width: 640px) {
    .facet-drawer {
        width: 380px;
    }
}

[x-cloak] {
    display: none;
}

.facet-backdrop {
    background: rgb(0 0 0 / 0.4);
}

/* Imageless card placeholder (fragments/card_vertical.liquid): the fixed
 * area keeps the grid rows even when a product carries no image. */
.card-no-image {
    aspect-ratio: 4 / 5;
    background: var(--color-base-200, #eee);
}