{{-- ===================================================================== CREAM intro. A single compact title + one sentence precede the rows. The former Uso/Formato selects were removed at the client's request (the page now starts directly with the collection rows), so there is no filter bar here anymore. The colour facet moved into each row as a local vertical palette on the right (see CHANGE 3 below), and the "results count" that only made sense alongside the filters was removed with them. The Livewire `use`/`color`/`family` properties stay bound to the URL for deep links, but no control renders them. ===================================================================== --}}

Catálogo de piedra natural de cantera

Piedra laja extraída de canteras peruanas, cortada a mano y clasificada por tono. Cada colección reúne formatos comerciales para fachadas, pisos, muros, escaleras y jardines, con envío a todo el Perú.

{{-- ===================================================================== ROW-BY-ROW collection index (approved layout). Each collection is a full-width row: a left name column (catalog name, commercial name and availability) beside a responsive photo grid that grows DOWNWARD (1 col mobile / 2 sm / 3 lg, 4:3, sharp corners, no shadows) and — on the RIGHT — a VERTICAL local colour palette of circular dots. Clicking a dot filters ONLY that row's photos (Alpine, per-row state, never the whole listing). The photo and the name are the entry points: each NAVIGATES to the collection's own page (route `products.show`) so the link can be shared. Photos read as clickable through a hover scrim on desktop and an always-visible caption below each photo on touch, mirroring the gallery. On mobile the name column stacks ABOVE the photos and the colour rail sits under them. ===================================================================== --}}

@forelse ($products as $product) @php $rowName = $product->collectionName(); $rowCommercial = filled($product->commercial_name) ? (string) $product->commercial_name : null; $rowPhotos = $product->media ->unique(fn ($media): string => (string) ($media->hash ?: $media->path)) ->map(function ($media) use ($rowName) { $width = (int) ($media->width ?: 1200); $url = (string) $media->url; $thumb = (string) $media->thumb_url; $srcset = null; if ($thumb !== '' && $thumb !== $url && $width > 400) { $srcset = $thumb.' '.min(400, $width).'w, '.$url.' '.$width.'w'; } return [ 'url' => $url, 'webp' => $media->webp_url, 'alt' => filled($media->alt_text) ? (string) $media->alt_text : $rowName, 'width' => $width, 'height' => (int) ($media->height ?: 900), 'srcset' => $srcset, ]; })->values()->all(); $rowColors = $product->taxonomies ->where('type', 'color') ->values(); @endphp

{{-- Left name column (~25-30% of the row). --}}

{{ $rowName }}

@if (filled($rowCommercial))

{{ $rowCommercial }}

@endif

{{ $product->availabilityLabel() }}

{{-- Photo area (flex-1 of the row): a VERTICAL grid that grows downward — 1 column on mobile, 2 on small/medium, 3 on large. `min-w-0` keeps the grid from pushing the page wide (no horizontal scroll). --}}

@if ($rowPhotos !== [])

@foreach ($rowPhotos as $photo)

@endforeach

@else

Foto próximamente

@endif

{{-- ============================================================= LOCAL colour palette — a VERTICAL rail on the RIGHT of the row. Populated from the collection's own colour taxonomy (one colour per collection in the current data), rendered as small circular dots with a >= 44px tappable area. A dot toggles ONLY this row's `activeColor` (Alpine, per-row state) — never the whole listing; the "×" resets the row back to all colours. Selected state is an accent ring, not just a fill. ============================================================= --}} @if ($rowColors->isNotEmpty())

@foreach ($rowColors as $color) @php $colorSlug = (string) $color->slug; // Data-driven hex wins (design D6); without it the // swatch falls back to the piedra-* design tokens. $colorDot = match (true) { str_contains($colorSlug, 'terracota') => 'bg-piedra-terracota', str_contains($colorSlug, 'beige') => 'bg-piedra-beige', str_contains($colorSlug, 'negro') => 'bg-piedra-negra', str_contains($colorSlug, 'verde') => 'bg-piedra-verde', default => 'bg-piedra-gris', }; @endphp @endforeach

@endif

@empty

Sin resultados

No encontramos colecciones con esos filtros

No hay colecciones que coincidan con tu búsqueda. Limpia los filtros para ver las siete colecciones de piedra natural.

@endforelse

@if ($products->hasPages())

{{ $products->links() }}

@endif