/* =====================================================================
   Products Block — Clickable horizontal card layout
   ===================================================================== */

.products-block .block-inner {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xl);
}

.products-block .heading {
    margin-bottom: 0;
    text-align: center;
}

/* Single-column list — each horizontal card spans full width */
.products-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gutter);
	margin: 0 auto;
	max-width: 520px;
}

/* Card — rendered as an <a> element */
.main-content .products-block .product-card,
.product-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	overflow: hidden;
	margin: 0;
	padding: 0;
	box-shadow: 0 1px 4px rgba(18, 34, 56, 0.06);
    transform: translateY(0);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid rgba(0,0,0,0.08);
  background: transparent;
	border-radius: var(--border-radius);
	text-decoration: none;
	color: inherit;
}

.main-content .products-block .product-card:hover,
.main-content .products-block .product-card:focus-within,
.product-card:hover,
.product-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(18, 34, 56, 0.1);
    transition-delay: 0s !important;
}

.main-content .products-block .product-card:focus-visible,
.product-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Image column — fixed width, square crop */
.product-card__media {
    position: relative;
    display: block;
    flex: 0 0 90px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, #d9e6ef 0%, #f5efe8 100%);
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.product-card__image--placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.product-card:hover .product-card__image,
.product-card:focus-within .product-card__image {
    transform: scale(1.05);
}

/* Content column — vertically centred */
.product-card__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	padding: var(--gutter);
}

/* Label — premium serif typography */
.product-card__label {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.products-empty {
    margin: 0;
    text-align: center;
}

/* ---- Responsive ---- */

@media (max-width: 640px) {
    .product-card {
        flex-direction: column;
    }

    .product-card__media {
        flex: none;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .product-card__content {
        padding: var(--gutter-l);
    }

    .product-card__label {
        font-size: 1.75rem;
    }
}