:root {
    --color-primary:      #007ec0;
    --color-text-muted:   #636363;
    --color-border:       #ccc;
    --color-bg-light:     #fff;
    --tile-img-height:    180px;
    --tile-img-height-md: 150px;
    --tile-arrow-size:    10px;
    --details-indent:    20px;
    --details-indent-md: 15px;
}

/* ── Page wrap ──────────────────────────────────────────────── */
.catalog-page {
    padding: 20px 0 60px;
    overflow: hidden;
}

/* ── Production tile ────────────────────────────────────────── */
.catalog-tile {
    position: relative;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.catalog-tile:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: var(--tile-arrow-size) solid transparent;
    border-left-color: var(--color-text-muted);
    left: 90%;
    top: 85%;
}
.catalog-tile:hover {
    border: 1px solid var(--color-primary);
    box-shadow: 0 3px 12px rgba(0,126,192,.15);
    cursor: pointer;
}

/* ── Product image ──────────────────────────────────────────── */
.catalog-tile__image {
    text-align: center;
    padding-top: 20px;
    height: var(--tile-img-height);
}
.catalog-tile__label {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-muted);
    padding-left: 40px;
}

/* ── Category panel ─────────────────────────────────────────── */
.catalog-tile__details {
    height: auto;
    display: none;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #f4f9fc;
    border-top: 3px solid var(--color-primary);
    border-radius: 0 0 6px 6px;
}
.catalog-tile__details--visible { display: flex; }
.catalog-tile__details--open  { display: block; }
.catalog-tile__details > div { padding-left: var(--details-indent); }

/* ── Active / inactive tile state ───────────────────────────── */
.catalog-tile.catalog-tile--active {
    border-color: var(--color-primary);
    box-shadow: 0 3px 12px rgba(0,126,192,.2);
}
.catalog-tile.catalog-tile--active:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: var(--tile-arrow-size) solid transparent;
    border-top-color: var(--color-primary);
    left: 90%;
    top: 90%;
}
.catalog-tile--dimmed {
    opacity: 0.4;
    transition: opacity 0.25s ease;
}

.details__heading {
    font-weight: bold;
    color: var(--color-primary);
    padding-bottom: 8px;
    padding-top: 20px;
    border-bottom: 1px solid #d0e8f5;
    margin-bottom: 8px;
}
.details__brands > img {
    padding-left: 10px;
    padding-right: 20px;
}
.details__list { padding-left: 5px; padding-bottom: 15px; }
.details__list > li {
    list-style-type: none;
    max-width: 300px;
    padding-bottom: 20px;
}
.details__list > p { padding-bottom: 20px; }
.details__list li:before { content: '-'; padding-right: 5px; }

.catalog-tile__details--full { width: 100%; }

/* ── Production row order (desktop) ─────────────────────────── */
@media (min-width: 768px) {
    .catalog-row > .catalog-tile         { order: 1; }
    .catalog-row > .catalog-tile__panel-wrapper { order: 2; }
}

/* ── Responsive: ≤ 1200px ───────────────────────────────────── */
@media (max-width: 1200px) {
    .catalog-tile__image { margin-bottom: 20px; }
    .catalog-tile__label { font-size: 15px; }
}

/* ── Responsive: ≤ 991px ────────────────────────────────────── */
@media (max-width: 991px) {
    .catalog-tile__image {
        text-align: center;
        padding-top: 20px;
        height: var(--tile-img-height-md);
        line-height: var(--tile-img-height-md);
    }
    .catalog-tile__image img { max-height: 100%; }
    .catalog-tile__label { padding-left: 0; padding-right: 15px; font-size: 13px; }
    .catalog-tile__panel-wrapper { padding: 0 15px; }
    .catalog-tile__details { padding-top: 0; }
    .catalog-tile__details > div { padding-left: var(--details-indent-md); }
    .catalog-tile__details > div:nth-child(2n+1) { clear: left; }
    .details__brands { padding-top: 10px; }
    .details__brands span {
        background: var(--color-bg-light);
        padding: 15px;
        display: inline-block;
        margin-right: 15px;
        line-height: 30px;
        margin-bottom: 10px;
    }
    .details__list { padding-bottom: 0; }
    .details__list > li { padding-bottom: 5px; }
    .details__list > p { padding-bottom: 10px; }
}

/* ── Responsive: ≤ 767px ────────────────────────────────────── */
@media (max-width: 767px) {
    .catalog-page { padding-top: 10px; }
    .catalog-tile {
        display: block;
        margin-bottom: 16px;
        border: 1px solid #dde6ed !important;
        border-radius: 6px;
        padding-bottom: 10px;
        overflow: hidden;
    }
    .catalog-tile a { display: block; }
    .catalog-tile__image {
        width: 100%;
        height: var(--tile-img-height-md);
        padding-top: 20px;
        margin-bottom: 0;
        text-align: center;
    }
    .catalog-tile__image img { max-height: 100%; }
    .catalog-tile__label {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        font-size: 14px;
        text-align: center;
    }
    .catalog-tile:after { display: none; }
}