/* shop-tiles.css — ShopTiles catalogue page (Phase 6): page chrome, filter panel, product grid,
   active-filter chips, pagination. Product *card* styling lives in components.css (.c-product-card*);
   here we add only the grid-specific card extras (badge / meta / price). */

.c-shop {
    width: 100%;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding: var(--space-5) var(--space-4) var(--space-6);
    /* Plain white page (owner request 2026-06-19) — no off-white tint behind the catalogue. */
    background: #fff;
}

/* Favourites empty state (the /favourites page reuses .c-shop as its container). */
.c-favourites__empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-6) 0; text-align: center; color: var(--color-muted); }
.c-favourites__empty p { margin: 0; max-width: 36rem; }
/* Count on the left, "Clear all" link on the right (same subtle style as the cart's clear links). */
.c-favourites__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.c-favourites__clear { flex: 0 0 auto; border: 0; background: none; padding: 0; color: var(--color-muted); text-decoration: underline; font-size: var(--text-sm); cursor: pointer; }
    .c-favourites__clear:hover:not(:disabled) { color: var(--color-error); }
    .c-favourites__clear:disabled { opacity: 0.6; cursor: default; }

/* --- Header --- */
/* Container so the title + intro scale fluidly with width (cqi), same as the CMS template/overlay text. */
.c-shop__head { margin-bottom: var(--space-2); container-type: inline-size; }
.c-shop__title { margin: 0 0 var(--space-2); font-size: var(--title-lg); line-height: 1.1; }
.c-shop__intro { color: var(--color-text); max-width: 60rem; font-size: clamp(0.82rem, 1.8cqi, 1rem); }
.c-shop__intro p { margin: 0; }

/* --- Toolbar (count + sort) --- */
.c-shop__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-block: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-underline);
}
.c-shop__count { margin: 0; color: var(--color-text); font-size: clamp(0.82rem, 1.8cqi, 1rem); }
.c-shop__sort { display: flex; align-items: center; gap: var(--space-2); }
/* Label + control scale fluidly with width, same as the count / template text (floor 0.82rem). */
.c-shop__sort-label { color: var(--color-text); font-size: clamp(0.82rem, 1.8cqi, 1rem); }
.c-shop__sort-select {
    padding: clamp(0.3rem, 1cqi, 0.5rem) clamp(0.6rem, 2cqi, 1rem);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-button);
    background: var(--color-page-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: clamp(0.82rem, 1.8cqi, 1rem);
    cursor: pointer;
}

/* --- Active-filter chips --- */
.c-shop__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-3); }
.c-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-button);
    border-radius: 999px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background-color 0.15s ease;
}
    .c-chip:hover { background: var(--color-neutral-10); text-decoration: none; }
    .c-chip__x { font-size: 1.1em; line-height: 1; }
.c-chip--search { font-style: italic; cursor: default; }
.c-shop__clear { margin-left: var(--space-2); color: var(--color-text); font-size: 0.85rem; }

/* --- Two-column body --- */
.c-shop__body { display: grid; grid-template-columns: 16rem 1fr; gap: var(--space-5); align-items: start; margin-top: var(--space-4); }
/* Light-grey panel behind the cards ONLY (header + filter stay on white) so the white cards + shadow
   read as in the original. */
.c-shop__results { background: var(--color-neutral-5); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); }

/* Desktop: the filter is a STICKY sidebar so it stays visible while the results scroll, and scrolls
   internally if it's taller than the viewport (filter + cards scroll separately). */
.c-shop__filters {
    position: sticky;
    top: var(--space-4);
    align-self: start;
    max-height: calc(100vh - var(--space-5));
    overflow-y: auto;
    /* Right gutter so the (subtle) scrollbar sits to the right of the content, not over it. */
    padding-right: var(--space-3);
}
/* Drawer chrome is desktop-hidden (the checkbox stays functional but invisible). */
.c-shop__filters-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.c-shop__filters-btn,
.c-shop__filters-backdrop,
.c-shop__filters-head { display: none; }

/* Mobile: hamburger button + off-canvas drawer (same pattern as the nav drawer). */
@media (max-width: 900px) {
    .c-shop__body { grid-template-columns: 1fr; }

    .c-shop__filters-btn {
        display: inline-flex; align-items: center; gap: var(--space-2);
        position: sticky; top: var(--space-2); z-index: 30; align-self: start; width: fit-content;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-border-button); border-radius: var(--radius-button);
        background: #fff; color: var(--color-text); cursor: pointer; font: inherit;
    }

    .c-shop__filters {
        position: fixed; inset: 0 auto 0 0; z-index: 60;
        width: min(20rem, 85vw); height: 100%; max-height: none;
        margin: 0; padding: var(--space-4);
        background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        transform: translateX(-100%); transition: transform 0.25s ease;
        overflow-y: auto;
    }
    .c-shop__filters-toggle:checked ~ .c-shop__filters { transform: translateX(0); }

    .c-shop__filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); font-weight: 600; }
    .c-shop__filters-close { cursor: pointer; font-size: 1.6rem; line-height: 1; padding: 0 var(--space-1); }

    .c-shop__filters-backdrop {
        display: block; position: fixed; inset: 0; z-index: 55;
        background: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.25s ease;
    }
    .c-shop__filters-toggle:checked ~ .c-shop__filters-backdrop { opacity: 1; visibility: visible; }
}

/* --- Filter panel --- */
.c-filter-panel__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-2); }
.c-filter-panel__title { margin: 0; font-size: clamp(1rem, 2cqi, 1.2rem); }
.c-filter-panel__clear { font-size: 0.82rem; color: var(--color-text); }
.c-filter-group { border-top: 1px solid var(--color-underline); }
    .c-filter-group:last-of-type { border-bottom: 1px solid var(--color-underline); }
.c-filter-group__summary {
    display: flex; align-items: center; gap: var(--space-1);
    padding: var(--space-3) 0; cursor: pointer; list-style: none; font-weight: 600;
}
    .c-filter-group__summary::-webkit-details-marker { display: none; }
    /* +/- indicator pushed to the right; the count stays next to the label. */
    .c-filter-group__summary::after { content: "+"; margin-left: auto; color: var(--color-muted); font-weight: 400; }
    .c-filter-group[open] .c-filter-group__summary::after { content: "–"; }
.c-filter-group__count { color: var(--color-muted); font-weight: 400; }
.c-filter-group__options { list-style: none; margin: 0; padding: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.c-filter-option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; color: var(--color-text); text-decoration: none; font-size: clamp(0.82rem, 1.8cqi, 0.95rem); }
    .c-filter-option:hover { text-decoration: none; color: var(--color-text); }
.c-filter-option__box { flex: 0 0 auto; width: 1rem; height: 1rem; border: 1px solid var(--color-border-button); border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; }
.c-filter-option.is-selected .c-filter-option__box { background: var(--color-text); border-color: var(--color-text); }
    .c-filter-option.is-selected .c-filter-option__box::after { content: "✓"; color: var(--color-page-bg); font-size: 0.7rem; line-height: 1; }
.c-filter-option.is-selected .c-filter-option__label { font-weight: 600; }
/* Facet greying: an option that returns no products for the current selection — dimmed, non-interactive. */
.c-filter-option.is-disabled { color: var(--color-muted); opacity: 0.5; cursor: default; pointer-events: none; }

/* --- Grid card box (original look: white card, rounded, subtle shadow, lifts on hover). Scoped to the
   grid so the carousel ProductCard stays flat. --- */
.c-product-grid .c-product-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    gap: 0; /* image flush to top; the info padding handles spacing */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
    .c-product-grid .c-product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }
/* While an Add-to-Cart modal is open, suppress the card lift. A card with `transform` becomes the
   containing block for the modal's position:fixed overlay, which would re-anchor/shrink it onto the
   hovered card. Keeping cards untransformed lets the overlay stay anchored to the viewport. */
.c-product-grid:has(.c-modal) .c-product-card:hover {
    transform: none;
    transition: none; /* snap the un-lift; an animated transform stays a containing block mid-tween → modal rides the card */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Image fills the card's top edge-to-edge (card's own radius rounds the top corners). */
.c-product-grid .c-product-card__media { border-radius: 0; }
/* Inset the name/price/buttons from the card edges. */
.c-product-grid .c-product-card__info { padding: var(--space-3); gap: var(--space-2); }

/* --- Product grid --- */
/* Max 5 columns, reducing earlier with width (owner request 2026-06-19) so cards don't get cramped.
   Anchored on the same breakpoints the CMS widgets use (CarouselScroll/GridGallery: 1200 → fewer,
   768 → fewest). minmax(0,1fr) stops overflow. */
.c-product-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
@media (max-width: 1700px) { .c-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1400px) { .c-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .c-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .c-product-grid { grid-template-columns: 1fr; } }
/* Grid-card name + price. The name reserves a fixed 2 lines so 1-line and 2-line names take the same
   height — that keeps the price and the action buttons aligned across a row (owner request 2026-06-19). */
.c-product-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.6em; /* 2 lines × 1.3 — the "blank line" when a name is short */
}
.c-product-card__price { display: block; margin-top: var(--space-1); }
.c-product-card__badge {
    position: absolute; left: 0; bottom: 0; z-index: 2;
    padding: 2px var(--space-2); background: rgba(255, 255, 255, 0.9);
    color: var(--color-text); font-size: var(--text-2xs); border-top-right-radius: var(--radius-button);
}

/* --- Empty state --- */
.c-shop__empty { padding: var(--space-6) 0; text-align: center; }
.c-shop__empty h2 { margin: 0 0 var(--space-2); }
.c-shop__empty p { color: var(--color-muted); margin: 0 0 var(--space-4); }

/* --- Load More (replaces the pager — owner request) --- */
.c-shop__more { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-6); }
.c-shop__more-status { margin: 0; color: var(--color-muted); font-size: 0.9rem; }

/* --- Pagination (currently unused — kept for reference) --- */
.c-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-6); }
.c-pagination__link {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem;
    padding: 0 var(--space-2); border: 1px solid var(--color-underline); border-radius: var(--radius-button);
    color: var(--color-text); text-decoration: none; background: var(--color-page-bg);
}
    .c-pagination__link:hover { background: var(--color-neutral-10); text-decoration: none; }
    .c-pagination__link.is-current { background: var(--color-text); color: var(--color-page-bg); border-color: var(--color-text); }
    .c-pagination__link.is-disabled { color: var(--color-disabled-text); background: transparent; cursor: default; }
.c-pagination__gap { color: var(--color-muted); padding: 0 var(--space-1); }

/* Tile Finder wizard — launch button + full-screen single-select overlay (interactive island, TileFinder.razor). */
.c-finder__prompt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.c-finder__lead { color: var(--color-muted); font-size: var(--text-base); }
.c-finder__launch {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4); border: 1.5px solid var(--color-accent);
    border-radius: var(--radius-button); background: transparent; color: var(--color-accent);
    cursor: pointer; font-size: var(--text-sm); font-weight: 600;
}
    .c-finder__launch:hover { background: var(--color-accent); color: var(--color-white); }

.c-finder__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 1200; }
.c-finder {
    position: fixed; z-index: 1201; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto;
    background: var(--color-page-bg); border-radius: var(--radius-image); padding: var(--space-5);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.c-finder__head { display: flex; align-items: center; justify-content: space-between; }
.c-finder__progress { color: var(--color-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.c-finder__close { border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--color-muted); cursor: pointer; }
    .c-finder__close:hover { color: var(--color-text); }
.c-finder__title { margin: var(--space-2) 0 var(--space-3); font-size: var(--title-md); }
.c-finder__crumbs { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-4); color: var(--color-muted); font-size: var(--text-sm); }
    .c-finder__crumb:not(:first-child) { position: relative; padding-left: var(--space-3); }
    .c-finder__crumb:not(:first-child)::before { content: "·"; position: absolute; left: calc(var(--space-3) / -2); }
    .c-finder__crumb strong { color: var(--color-text); font-weight: 600; }
.c-finder__loading { color: var(--color-muted); }
.c-finder__options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); }
.c-finder__option {
    width: 100%; text-align: left; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-underline);
    border-radius: var(--radius-image); background: var(--color-page-bg); color: var(--color-text);
    cursor: pointer; font-size: var(--text-base);
}
    .c-finder__option:hover { border-color: var(--color-accent); background: var(--color-neutral-5); }
/* Thumbnail option: full-bleed square image with the label centred below. */
.c-finder__option--thumb { padding: 0; overflow: hidden; display: flex; flex-direction: column; text-align: center; }
    /* Fixed 80px-tall landscape thumb; `contain` shows the WHOLE image (no crop) within the box. */
    .c-finder__option-img { display: block; width: 100%; height: 80px; object-fit: contain; }
    /* Colour step: a plain solid swatch (not a product thumbnail). Inset shadow keeps light swatches visible. */
    .c-finder__option-swatch { display: block; width: 100%; height: 80px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
    /* Option with no image (in an otherwise-visual step): blank neutral box so cards stay uniform. */
    .c-finder__option-noimg { display: block; width: 100%; height: 80px; background: var(--color-neutral-5); }
    .c-finder__option--thumb .c-finder__option-label { padding: var(--space-2); font-size: var(--text-sm); }
    .c-finder__option--thumb:hover { background: var(--color-page-bg); }
.c-finder__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }
.c-finder__back, .c-finder__skip { border: 0; background: none; color: var(--color-text); text-decoration: underline; cursor: pointer; font-size: var(--text-sm); }
    .c-finder__back:hover, .c-finder__skip:hover { color: var(--color-title); }
.c-finder__summary { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
    .c-finder__summary li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-underline); }
    .c-finder__summary-k { color: var(--color-muted); }
    .c-finder__summary-v { font-weight: 600; }
.c-finder__see { margin-left: auto; }

@media (max-width: 480px) { .c-finder__options { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } }