/* ============================================
   LIVING CATEGORY PAGE — small header + 4-up grid
   Uses only existing site design tokens.
   ============================================ */

.living-page {
    background-color: var(--ivory);
    color: var(--chestnut);
}

/* ── small text header (no big hero) ── */
.living-header {
    max-width: var(--width-site);
    margin: 0 auto;
    padding: calc(160px) var(--edge) var(--space-lg);
    text-align: center;
}

.living-overline {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--seasonal-four);
}

/* Match the "Pamusha Interiors" heading style exactly (matisse-block-inline-header). */
.living-heading {
    font-family: var(--font-header);
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    line-height: 1.1;
    margin: 0;
    color: var(--chestnut);
}

/* ── Shop Living landing page: one section per range ── */
.living-range {
    margin-top: var(--space-xl);
}

.living-range-header {
    max-width: var(--width-site);
    margin: 0 auto;
    padding: 0 var(--edge);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
}

.living-range-heading {
    font-family: var(--font-header);
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    line-height: 1.1;
    margin: 0;
    color: var(--chestnut);
}

.living-range-link {
    font-size: var(--text-sm);
    letter-spacing: var(--letters-wide);
    text-transform: uppercase;
    color: var(--seasonal-four);
    text-decoration: none;
    white-space: nowrap;
}

.living-range-link:hover {
    text-decoration: underline;
}

/* The grid sits directly under each range header on the landing page. */
.living-range .living-grid-wrap {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xxl);
}

/* ── 4-up grid (matches Interiors --quad style) ── */
.living-grid-wrap {
    max-width: var(--width-site);
    margin: 0 auto;
    padding: 0 var(--edge) var(--space-xxxxl);
}

.living-grid {
    /* Flex layout so when there are fewer products than columns_count, the
       remaining tiles centre on the page (with the gap landing in the middle)
       instead of stacking flush-left as a grid would. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    --cols: 4;
    --gap: 32px;
    gap: var(--gap);
}

.living-tile {
    /* Each tile takes exactly (1/cols) of the row minus its share of gap, so a
       full row of tiles fills the width while a partial row centres. */
    flex: 0 1 auto;
    width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}

.living-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease;
    /* width is set above by the cols/gap calc */
}

a.living-tile:hover {
    transform: translateY(-3px);
}

.living-tile-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: #f5f2ec;
    position: relative;
}

.living-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover swap (all Living pages): both images fill the tile; the image marked
   "hover" in the admin fades in over the primary when the tile is hovered. */
.living-tile-image .product-card-main,
.living-tile-image .product-card-alt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.8s var(--ease-out);
}

.living-tile-image .product-card-main { z-index: 2; opacity: 1; }
.living-tile-image .product-card-alt  { z-index: 1; opacity: 0; }

.living-tile:hover .product-card-main { opacity: 0; }
.living-tile:hover .product-card-alt  { opacity: 1; }

/* Drape only: show the full, uncropped image at its natural height in the
   listing (portrait photos), instead of the fixed 3/4 crop used elsewhere. */
.living-page--drape .living-tile-image {
    aspect-ratio: auto;
}

.living-page--drape .living-tile-image img {
    height: auto;
}

.living-page--drape .living-tile-image .product-card-main {
    position: relative;
    inset: auto;
    height: auto;
    object-fit: fill;
}

.living-page--drape .living-tile-image .product-card-alt {
    position: absolute;
    inset: auto;       /* reset the shared inset:0 first … */
    top: 0;            /* … then pin to the top-left so height:auto can size it */
    left: 0;
    width: 100%;
    height: auto;
    object-fit: fill;
}

.living-tile-meta {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    text-align: left;
}

.living-tile-name {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-sm);
    letter-spacing: var(--letters-xwide);
    text-transform: uppercase;
    color: var(--chestnut);
}

.living-tile-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--letters-wide);
    color: var(--seasonal-four);
}

.living-tile-price {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--letters-wide);
    color: var(--chestnut);
    margin-top: var(--space-xxs);
}

.living-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--seasonal-four);
    font-family: var(--font-header);
    font-style: italic;
    padding: var(--space-xxl) 0;
}

/* ── responsive ── */
@media (max-width: 1024px) {
    .living-grid {
        --cols: 2 !important;
        --gap: 24px !important;
    }
}

@media (max-width: 560px) {
    .living-grid {
        --cols: 1 !important;
        --gap: 22px !important;
    }
    .living-header {
        padding-top: 110px;
    }
}