/* Category Sizes grid — CSS custom properties are set by the widget
   (inline on the wrapper for icon dims, via Elementor selectors for grid),
   with defaults here so the stylesheet renders correctly if a property is
   unset. */

.pps-sizes__title {
    margin: 0 0 24px;
    font-weight: 600;
    text-align: center;
}

.pps-sizes {
    --pps-cols: 5;
    --pps-row-gap: 56px;
    --pps-col-gap: 24px;
    --pps-icon-max: 110px;
    --pps-icon-area: 110px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centers an incomplete last row */
    row-gap: var(--pps-row-gap);
    column-gap: var(--pps-col-gap);
    text-align: center;
}

.pps-sizes__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 calc((100% - (var(--pps-cols) - 1) * var(--pps-col-gap)) / var(--pps-cols));
    max-width: calc((100% - (var(--pps-cols) - 1) * var(--pps-col-gap)) / var(--pps-cols));
}

/* Fixed icon area so labels align across rows; olives sit on a shared baseline. */
.pps-sizes__icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: var(--pps-icon-area);
    margin-bottom: 16px;
}

.pps-sizes__icon img {
    height: auto;
    max-width: 100%;
}

.pps-sizes__name {
    font-weight: 600;
}

.pps-sizes__range {
    color: #6d6d6d;
}