/*
 * Trial Equipment page (/trial-equipment).
 *
 * Loaded ONLY by trial-equipment.blade.php and trial-equipment-section.blade.php,
 * never from the layout, so nothing here can affect any existing page.
 * Every selector is namespaced under .trial-page / .trial-section.
 */

.trial-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding-top: 24px;
}

.trial-page__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.trial-page__jump {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trial-page__jump-label {
    margin: 0;
    white-space: nowrap;
    font-weight: 500;
}

.trial-page__jump-select {
    min-width: 200px;
}

.trial-page__intro {
    margin-bottom: 28px;
    color: #6c757d;
}

/* Offset the smooth-scroll target so a jumped-to heading isn't hidden
   behind the sticky site header. */
.trial-section {
    scroll-margin-top: 120px;
}

/* The showroom variation under a trial product's name (products.trial_variation), shown as a
   pill so it reads as a distinct property of the item rather than a second line of the name.
   The FULL text is shown — it wraps rather than clipping — because the variation is what tells
   staff which unit is actually in the showroom.

   The wrapper always occupies at least one line's worth of space (even with no variation) so
   tiles in a row line up; a two-line variation makes that one tile taller, which is why the
   text should be kept short. */
.product-card__trial-variation {
    margin-top: 4px;
    min-height: 22px;
}

.product-card__trial-variation-pill {
    display: inline-block;
    max-width: 100%;
    padding: 2px 9px;
    border: 1px solid #f0c9a0;
    border-radius: 11px;
    background: #fff6ec;
    color: #a45a10;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.trial-section__empty {
    padding: 24px 0 8px;
    color: #6c757d;
    font-size: 14px;
}

.trial-section__back {
    margin-top: 28px;
}

@media (max-width: 575px) {
    .trial-page__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .trial-page__jump {
        width: 100%;
    }

    .trial-page__jump-select {
        flex: 1 1 auto;
        min-width: 0;
    }
}