/* cms2 surfboard models list */
.cms2-modellist { padding: clamp(32px, 5vw, 64px) 20px; background: #fff; }
/* The site's own content width, not a literal 1280. This section sat on a
   different grid from the header, the footer and every other section: site 2 is
   set to 1600, so at 1920 the header started at x=160 and this at x=320.
   No +40 here -- the 20px gutter is on the PARENT, so the inner IS the content
   width. (An inner carrying its own gutter needs calc(... + 40px); mixing the
   two patterns is what costs you 20px.) */
.cms2-modellist-in { max-width: var(--cms2-max-width, 1280px); margin: 0 auto; }
.cms2-ml-brand { margin-bottom: 48px; }
.cms2-ml-brand-head { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.cms2-ml-brand-logo { flex: none; max-height: 64px; max-width: 160px; object-fit: contain; }
.cms2-ml-brand-name {
    margin: 0;
    /* min-width: 0 is load-bearing next to the logo: a flex item will not shrink
       below its own content, so at 320px "CHANNEL ISLANDS" pushed the row 6px
       past the viewport instead of wrapping. */
    min-width: 0;
    /* Floor lowered from 30 to 24 -- at 320px a 30px heading beside a 160px logo
       has nowhere to go. Only sizes under a ~750px viewport change; the vw term
       and the 48px cap are untouched. */
    font-size: clamp(24px, 4vw, 48px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.cms2-ml-cat { margin: 34px 0; }
.cms2-ml-cat-name {
    margin: 0 0 18px;
    font-size: clamp(20px, 2.6vw, 30px);
    font-weight: 700;
    text-transform: uppercase;
    /* The site's accent, defaulting to ink. --cms2-accent is the variable the
       menu module already uses; a site that has never set it keeps the black
       rule it had, so sites 3 and 4 are untouched. */
    border-bottom: 2px solid var(--cms2-accent, #111);
    display: inline-block;
    padding-bottom: 4px;
}
.cms2-ml-cat-img { margin: 0 0 18px; }
.cms2-ml-cat-img img { max-height: 90px; object-fit: contain; }
.cms2-ml-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 22px;
}
.cms2-ml-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.cms2-ml-card-img {
    display: block;
    aspect-ratio: 3/4;
    background: #f7f7f6;
    border-radius: 8px;
    overflow: hidden;
}
.cms2-ml-card-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s; }
a.cms2-ml-card:hover .cms2-ml-card-img img { transform: scale(1.05); }
/* `flex: 1` so the panel reaches the bottom of its card.
   The CARDS were already equal — the grid stretches them, measured 566px each —
   but the body is sized by its own text, so a model carrying a subtitle made its
   grey block 20px taller than the one beside it and the two panels ended at
   different heights. Filling the leftover is what squares them off; the text
   stays at the top of the panel either way. */
.cms2-ml-card-body {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1;
    padding: 18px 2px; text-align: center; background-color: #f4f4f4;
}
.cms2-ml-card-brand {
    font-size: 12px; font-weight: 500; letter-spacing: .04em;
    color: #8a8a8a;
}
.cms2-ml-card-name { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cms2-ml-card-sub { font-size: 12px; color: #777; }
.cms2-ml-card-price { font-size: 13px; font-weight: 600; color: #444; }
@media (max-width: 760px) {
    .cms2-ml-grid { grid-template-columns: repeat(var(--cols-m, 2), 1fr); }
}
@media (max-width: 640px) {
    /* Stacked: side by side, the logo takes half a phone's width and leaves the
       brand name a column too narrow to read. */
    .cms2-ml-brand-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cms2-ml-brand-logo { max-height: 48px; max-width: 140px; }
}