/* Model detail SFH2026 — Figma node 185:87 */
.md2 { background: #fff; color: #000; }
/* max-width: 1280px; */
/* .sfh-container's own rule lives in productslider/layouts/sfh2026.css, which is
   only emitted when that module is on the page — repeat it here so a board page
   without a product slider still gets the theme grid. */
.md2 .sfh-container { max-width: var(--cms2-max-width, 1280px); margin-left: auto; margin-right: auto; }

/* hero band: right-aligned text, board laid horizontal over the bottom edge */
.md2-hero-band {
    position: relative;
    min-height: clamp(260px, 29.5vw, 424px);
    background: #101418 center/cover no-repeat;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
}
.md2-hero-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,.15), rgba(0,0,0,.3));
}
.md2-hero-text { position: relative; z-index: 2; color: #fff; padding: clamp(24px, 3.5vw, 50px); }
.md2-hero-title {
    margin: 0 0 10px;
    font-size: clamp(42px, 6.3vw, 90px);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
}
.md2-hero-sub { margin: 0 0 0 auto; font-size: clamp(15px, 1.6vw, 20px); line-height: 1.5; max-width: 560px; }
.md2-hero-board {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    margin-top: clamp(-138px, -9.6vw, -75px);
    padding: 0 20px;
}
.md2-hero-board img {
    max-width: min(927px, 92vw);
    max-height: clamp(220px, 30vw, 430px);
    width: auto;
    object-fit: contain;
}
/* Turned 90° because the feed only ships a portrait cover (see the layout).
   A rotation does not change the layout box, so the image is taken out of flow
   and its own max-width/max-height are SWAPPED: the image's height becomes the
   visual width and its width becomes the visual height.
   max-height leads (927px = the Figma board width) and max-width is loose enough
   not to bind first — a board photo is mostly empty canvas around a narrow board
   (the SFH cover is 750x1000 with the board only 24% of the width), so capping
   the visual height is what used to make the board render small. */
.md2-hero-board.is-rotated {
    position: relative;
    /* strip reserved below the band; the negative pull is exactly half of it, so
       the board's centre lands on the band's bottom edge like the Figma frame */
    height: clamp(120px, 14vw, 200px);
    margin-top: clamp(-100px, -7vw, -60px);
    padding: 0;
}
.md2-hero-board.is-rotated img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    max-height: min(927px, 92vw);
    max-width: min(700px, 46vw);
    transform: translate(-50%, -50%) rotate(-90deg);
}

/* product split: grey gallery panel with overlaid thumbs | info */
.md2 .md2-product {
    display: flex;
    gap: clamp(28px, 4.6vw, 60px);
    /* without this the flex default (stretch) makes the grey panel as tall as the
       description column — a long feed text dragged the board photo down the page */
    align-items: flex-start;
    padding: 0 20px;
    /* Was 48-80px. With the photo no longer boxed in white the panel reads as a
       block of its own, and that much air separated it from the hero band above. */
    margin: clamp(24px, 2.6vw, 36px) auto clamp(48px, 6vw, 80px);
}
.md2-gallery {
    position: relative;
    flex: 0 1 46%;
    /* background: #f4f4f4; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 24px 0px 120px;
    min-height: clamp(420px, 40vw, 560px);
}

.md2-title-row-2 {
    display: flex; flex-direction: column; gap: 10px;
}
/* A model with one photo has no thumb column, so the 120px reserved for it is
   just an offset: the board sat ~48px right of the panel's centre. Symmetric
   padding puts it back in the middle. Bounded to the desktop layout on purpose —
   below 900px the panel resets to an even 16px, and a bare class rule here would
   outrank that media query and leave the photo 8px off-centre. */
@media (min-width: 901px) {
    .md2-gallery.is-single { padding-left: 24px; }
}
/* many tenants upload board photos with a WHITE background baked in (SFH does;
   thebasesurf uploads true cutouts). multiply makes that white take the panel's
   colour, so the white box disappears; a real cutout is unaffected. */
/* height-led so the board fills the panel: 582 = the 662px panel minus its padding */
.md2-main-img {
    max-width: 100%;
    /* Height-led, and this cap is what decides how big the board renders. At
       560 the picture stopped well short of the width the panel had spare, so
       the board sat small in a wide grey field -- the Figma mock gets its long
       board from a portrait frame. Raised to 676: at 1440 the photo now fills
       the panel's available width (500px) and comes out 667 tall, ~22% more
       board than before.

       Only the cap moves. Raising .md2-gallery's min-height to match would look
       right at 1440 and leave 57-115px of dead space at 1000-1200px, where the
       photo is limited by width rather than height -- the panel already grows to
       fit its content, so the floor can stay where it is.

       Raised again to 910 for the crop SFH is moving to. Two formats have to
       share this rule and the cap only bites on one of them:

         1215x1620 (ratio 1.33, what the feed sends today) is limited by the
         500px of width the panel has, so it renders 667 tall and never reaches
         the cap -- raising it changes nothing for these.

         700x1600 (ratio 2.29, the Figma asset and what polensurfboards.com
         already serves) would run to 1143 in that same width, so the cap is
         what sizes it. At 910 the photo comes out 397x907 and the board inside
         it ~835 -- the height the SFH Figma specifies, and within 20px of
         Polen's own 928 frame.

       So this is set for the format that is coming and is inert for the one in
       place. 63vw is the middle term that lands on 910 at 1440. */
    max-height: clamp(400px, 63vw, 910px);
    object-fit: contain;
}
/* The column is absolutely positioned so the main board stays centred in the
   gallery whatever the thumb count -- but that also takes it out of flow, so its
   height was contributing nothing and it simply grew past everything below.
   Sharp Eye's Radar ships 10 photos: measured 1570px of thumbs inside a 703px
   gallery, 887px of overflow, painting straight over the Tail/Fin options.

   `bottom` is what binds it to the gallery, and the overflow then scrolls rather
   than escaping. A board with three or four photos never reaches the limit and
   looks exactly as before. */
.md2-thumbs {
    position: absolute;
    left: 20px;
    top: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    /* Reaching the end of the strip must not start scrolling the page with it. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
/* Flex items shrink by default, and in a height-limited column that would squash
   ten thumbs into slivers instead of scrolling them. */
.md2-thumbs .md2-thumb { flex: 0 0 auto; }
.md2-thumb {
    width: 96px;
    height: 148px;
    /* #fff matches the white the feed bakes into the photos, so the tile and its
       picture read as one block. Turn this transparent only if
       `mix-blend-mode: multiply` is ever put back on .md2-main-img and
       .md2-thumb img together -- with the photos blended, a white tile would be
       the only white box left on the panel. */
    background: #fff;
    border: 1px solid transparent;
    padding: 8px;
    cursor: pointer;
}
.md2-thumb.on, .md2-thumb:hover { border-color: #be202e; }
.md2-thumb img { width: 100%; height: 100%; object-fit: contain; }

.md2-info { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 1.9vw, 25px); }
.md2-brand { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 3%; text-transform: uppercase; color: #be202e; line-height: 1.5; }
.md2-title-row { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 25px; 
    padding-right: 150px; 
}
.md2-title { margin: 0; font-size: clamp(36px, 4.6vw, 42px); font-weight: 800; text-transform: uppercase; line-height: 1; }
/* absolute so the tall transparent canvas of a brand PNG cannot inflate the title
   row; sized generously because the visible mark occupies only ~1/3 of that canvas */
.md2-model-logo { position: absolute; top: 0; right: 0; max-width: 130px; max-height: 170px; object-fit: contain; object-position: right top; }
.md2-price-wrap { margin: 5px 0px; display: flex; flex-direction: column; gap: 8px; }
.md2-price-label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(0,0,0,.5); line-height: 1; display: flex; flex-direction: column; gap: 4px; }
.md2-price { font-size: 26px; font-weight: 700; line-height: 1; }
/* "Built For" belongs to the description under it, not to the buttons above,
   but .md2-info is a flex column with one gap for every child -- so the label
   sat as far from its own text as the price does from the CTA row.
   The pair is pulled together with a negative top margin on the description
   rather than by shrinking the column gap, which would have tightened the
   title, the price and the actions along with it.
   line-height too: at `normal` a 20px label occupies a 30px box, and the ~5px
   below the baseline is dead space on a line that has no descenders. */
.md2-builtfor { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; }
/* The pull-up is a FRACTION of the column gap, not a fixed -10px. The gap is
   itself a clamp (16px on a phone, 25px on a desktop), so a constant took 40%
   of it at one end and 62% at the other -- measured 6px left on mobile against
   15px on desktop. Restating the same clamp keeps the proportion, and there is
   no second breakpoint to keep in sync with the parent. */
.md2-desc {
    margin-top: calc(clamp(16px, 1.9vw, 25px) * -0.4);
    font-size: 16px; line-height: 1.5; color: rgba(0,0,0,.7);
}
.md2-desc p { margin: 0 0 12px; }
.md2-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.md2-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 25px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 7%;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    line-height: 1.5;
    transition: background .15s;
}
.md2-btn-buy { background: #be202e; color: #fff; }
.md2-btn-buy:hover { background: #9d1a26; }
.md2-btn-arrow { display: inline-flex; align-items: center; }
.md2-btn-arrow svg { width: 28px; height: 9px; display: block; }
.md2-btn-custom { background: #000; color: #fff; }
.md2-btn-custom:hover { background: #2a2a2a; }

/* big centered band headings (video + stock dimensions) */
.md2-section-heading {
    margin: 0 0 clamp(28px, 3.9vw, 50px);
    font-size: clamp(32px, 4.6vw, 60px);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
}

/* video: full-bleed grey band */
/* In the info column now, not a full-width band: the grey backdrop and the
   80px of band padding belonged to a section that spanned the page. */
.md2-video { margin-top: clamp(24px, 2.6vw, 36px); }
.md2-video .md2-section-heading { font-size: clamp(18px, 1.6vw, 22px); margin: 0 0 14px; text-align: left; }
.md2-video-wrap { aspect-ratio: 16/9; overflow: hidden; }
.md2-video-wrap iframe { width: 100%; height: 100%; display: block; border: 0; }

/* one video per view, swipeable, dots below (rendered only for 2+ videos).
   The base .cms2-carousel-track rules live in productslider/module.css, which is
   not necessarily on this page — restate what this carousel needs. */
.md2-video-carousel .cms2-carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.md2-video-carousel .cms2-carousel-track::-webkit-scrollbar { display: none; }
.md2-video-carousel .cms2-carousel-item { flex: 0 0 100%; scroll-snap-align: start; }
.cms2-carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.cms2-carousel-dot {
    width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(0,0,0,.25); cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}
.cms2-carousel-dot.active { width: 28px; border-radius: 999px; background: #be202e; }

/* specs: open centered rows on white */
.md2-specs { padding: clamp(48px, 6vw, 80px) 20px; border-top: 1px solid #DADADA }
/* Equal columns so the block headings sit on one line at even spacing (Figma).
   As a flex row the blocks were sized by their content — the two-column Technology
   list is far wider than the Wave Size icon — so the three never lined up.
   auto-flow column + auto-columns 1fr keeps that true for a row of 2 blocks too
   (the tail/fin/rail row above has a variable count). */
.md2-specs-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-items: center;
    align-items: start;
    gap: clamp(40px, 7.5vw, 100px);
}
@media (max-width: 760px) {
    .md2-specs-row { grid-auto-flow: row; grid-auto-columns: auto; gap: 44px; }
}
.md2-specs-row + .md2-specs-row { margin-top: clamp(44px, 5.5vw, 70px); }
.md2-spec-block { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.md2-spec-block h3 { margin: 0; font-size: 26px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.md2-spec-options { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.md2-spec-item { margin: 0; text-align: center; }
.md2-spec-item img { width: 123px; height: 95px; object-fit: contain; display: block; margin: 0 auto 6px; }
.md2-spec-item figcaption { font-size: 16px; font-weight: 600; }
.md2-spec-note { margin: 0; font-size: 17px; font-weight: 600; }
.md2-tech-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px 40px;
    text-align: left;
}
.md2-tech-list li { display: flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 600; }
.md2-check { width: 22px; height: 22px; flex: 0 0 auto; }
.md2-wave-icon { width: 166px; height: 83px; }
.md2-level-icon { width: 75px; height: 117px; }

/* stock dimensions: full-bleed grey band, white collapsible header */
.md2-dims { background: #f4f4f4; padding: clamp(48px, 6vw, 80px) 20px; }
.md2-dims-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: clamp(18px, 2.1vw, 28px) 25px;
    background: #fff;
    /* `border: none` further down used to follow a `border: solid #dadada;
       border-width: 1px 0`, so the hairlines that pair was written for never
       rendered — the shorthand reset them both. The dead declarations are gone
       rather than the reset: removing them is provably no visual change, while
       removing `border: none` would restore a border nobody has seen on this
       design. Put the hairlines back deliberately if they were wanted. */
    border: none;
    font-size: clamp(18px, 2.1vw, 24px);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
}
.md2-dims-chevron {
    width: 12px; height: 12px;
    border-left: 3px solid #000;
    border-top: 3px solid #000;
    transform: rotate(45deg) translate(2px, 2px);
    transition: transform .2s;
}
.md2-dims-panel.closed .md2-dims-chevron { transform: rotate(225deg) translate(2px, 2px); }
.md2-dims-panel.closed .md2-dims-body { display: none; }
.md2-dims-scroll { overflow-x: auto; }
/* fixed layout so the four data columns are exactly equal (Figma), instead of the
   browser sizing them by content — "2 5/16"" is far wider than "5'3"".
   min-width keeps the .md2-dims-scroll wrapper meaningful on narrow screens. */
.md2-dims-table { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; }
.md2-dims-table th, .md2-dims-table td { width: 21%; }
.md2-dims-table th:last-child, .md2-dims-table td.md2-dims-action { width: 16%; }
.md2-dims-table th {
    text-align: left;
    padding: clamp(18px, 2.2vw, 30px) 25px;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    color: #000;
    border-bottom: 1px solid #dadada;
}
.md2-dims-table td {
    padding: 15px 25px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
    border-bottom: 1px solid #dadada;
}
.md2-dims-action { text-align: right; }
td.md2-dims-action { padding-top: 9px; padding-bottom: 9px; }
.md2-dims-btn {
    display: inline-block;
    min-width: 145px;
    padding: 9px 16px;
    background: #000;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border-radius: 999px;
    transition: background .15s;
}
.md2-dims-btn:hover { background: #be202e; }
.md2-dims-btn.custom { background: #8e8e93; }
.md2-dims-btn.custom:hover { background: #6f6f74; }

@media (max-width: 900px) {
    .md2-product { flex-direction: column; }
    /* No horizontal padding: on a phone the panel is only as wide as the page
       gutter leaves it (350 at 390), and 16px a side cost the photo 32 of that.
       The tall crop needs the full width to reach the height Figma asks for --
       350 wide x 2.29 lands the frame on exactly 800. */
    .md2-gallery { flex: none; flex-direction: column; gap: 16px; min-height: 0; padding: 16px 0; }
    /* A row here, so the desktop column's vertical scroll and its `bottom` anchor
       are both released; ten thumbs scroll sideways instead of being squeezed to
       slivers by flex-shrink. */
    /* min-width: 0 on the GALLERY, not on the strip -- that took a measurement to
       get right. .md2-gallery is a flex item of .md2-product and will not shrink
       below its own content, so ten 96px thumbs stretched it to 1050px inside a
       390px phone; an ancestor clipped the result and thumbs 5-10 were simply
       unreachable. Holding the gallery to its parent is what lets the strip below
       become 390px and scroll. Same flex auto-minimum that bit the hero slide and
       the brand heading.

       align-self: stretch is the other half, and min-width alone did nothing
       without it: .md2-product is a COLUMN here and carries align-items:
       flex-start, so its children are sized by their own content rather than
       stretched to the parent -- the gallery measured 1050px because that is what
       ten thumbs come to. */
    .md2-gallery { min-width: 0; align-self: stretch; }
    .md2-thumbs {
        position: static; flex-direction: row;
        /* Centred when the thumbs do not fill the row -- a board with two
           photos left a strip hugging the left edge under a centred image.
         *
         * `safe` is the whole point of the second line. This row also
         * scrolls (overflow-x below), and plain `center` on an overflowing
         * flex row pushes the FIRST items out past the scroll origin, where
         * nothing can reach them -- a model with ten photos would lose the
         * ones at the start. `safe center` falls back to flex-start exactly
         * when that would happen. The plain declaration stays underneath it
         * for engines that do not know the keyword: they drop the line they
         * cannot parse and keep the one they can. */
        justify-content: center;
        justify-content: safe center;
        width: 100%; bottom: auto;
        min-width: 0; max-width: 100%;
        overflow-x: auto; overflow-y: visible;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .md2-thumbs .md2-thumb { flex: 0 0 auto; width: 96px; max-width: 140px; height: 150px; scroll-snap-align: start; }
    /* Figma's mobile board is ~800 tall. Same story as the desktop cap: it only
       governs the tall crop, and even then the photo is usually limited first by
       the width of a phone -- 727 at 390px. */
    .md2-main-img { max-height: 800px; }
    .md2-title-row { padding-right: 100px; }
    .md2-model-logo { max-width: 90px; max-height: 120px; }
}

/* mobile (Figma node 205:1594): no hero band, thumbs under the main image,
   full-width stacked CTAs, rose/red dimension buttons */
@media (max-width: 760px) {
    .md2-hero { display: none; }
    .md2-product { margin-top: 30px; }
    .md2-actions { flex-direction: column; }
    .md2-btn { width: 100%; box-sizing: border-box; justify-content: center; }
    .md2-dims-toggle { padding-left: 15px; padding-right: 15px; }

    /* The whole row fits the screen — no sideways scrolling.
     *
     * The table carried `min-width: 640px`, so on a 390px phone the wrapper
     * (350px) scrolled a 640px table and the Buy Now / Custom Order button was
     * off-screen until the visitor dragged the row sideways. Figma shows all
     * five columns at once, which is also the only way that button is
     * discoverable.
     *
     * Fitting them means re-cutting the widths rather than just dropping the
     * floor: the desktop split is 4x21% + 16%, and 16% of 350px cannot hold
     * "CUSTOM ORDER". The action column takes 29% here and the data columns
     * give it up, with THICKNESS kept widest of the four because its HEADER is
     * the longest string in the table — the numbers under it are not. */
    .md2-dims-table { min-width: 0; }
    .md2-dims-table th, .md2-dims-table td { padding: 11px 3px; font-size: 12px; }
    /* Centred, the way the design has it -- and it is what buys the breathing
       room, not padding. At 3px of horizontal padding the first value sat
       exactly ON the panel edge (measured: 0px clear) because the cells were
       left-aligned; centring insets every column by whatever its cell has
       spare, without spending width the five columns cannot afford at 350px.
       The action cell keeps a real padding instead: its button is width:100%,
       so nothing else would hold it off the right edge. */
    .md2-dims-table th, .md2-dims-table td { text-align: center; }
    .md2-dims-table th:last-child, .md2-dims-table td.md2-dims-action { padding-right: 10px; }

    /* Below ~380px the 10px above is width the row does not have: "CUSTOM ORDER"
       overflowed its pill by 5px at 360. The inset shrinks and the action column
       takes 3% back from THICKNESS, whose numbers are short even though its
       header is the longest string in the table. */
    @media (max-width: 380px) {
        .md2-dims-table th:last-child, .md2-dims-table td.md2-dims-action {
            padding-right: 5px;
            width: 32%;
        }
        .md2-dims-table th:nth-child(3), .md2-dims-table td:nth-child(3) { width: 17%; }
    }
    .md2-dims-table th {
        font-size: 11px;
        letter-spacing: 0;
        padding-top: 13px; padding-bottom: 13px;
    }
    .md2-dims-table th:nth-child(1), .md2-dims-table td:nth-child(1),
    .md2-dims-table th:nth-child(2), .md2-dims-table td:nth-child(2),
    .md2-dims-table th:nth-child(4), .md2-dims-table td:nth-child(4) { width: 17%; }
    .md2-dims-table th:nth-child(3), .md2-dims-table td:nth-child(3) { width: 20%; }
    .md2-dims-table th:last-child, .md2-dims-table td.md2-dims-action { width: 29%; }
    td.md2-dims-action { padding-top: 8px; padding-bottom: 8px; }
    .md2-dims-btn {
        display: block;
        min-width: 0;
        width: 100%;
        padding: 8px 4px;
        font-size: 10px;
        letter-spacing: .02em;
        white-space: nowrap;
        /* Colours are NOT restated here: the mobile block used to invert the
           scheme (pale pink Buy Now, red Custom Order) while desktop is black
           Buy Now / grey Custom Order. Letting the base rules through keeps one
           meaning for each colour at every width. */
    }
}

/* Very small phones (iPhone SE and the like). At 320px the wrapper is 280px, so
   29% leaves the action cell 75px while "CUSTOM ORDER" needs about 78 — three
   pixels, but enough to push the table wide and bring the scrollbar back. The
   action column takes a larger share and the headers are allowed to wrap, which
   at this width is better than a row the visitor has to drag. */
@media (max-width: 359px) {
    /* Equal columns collide here: "THICKNESS" is one word with no break
       opportunity, so at 17% it overflowed into VOLUME and the two headers ran
       together. The share each column gets is its own widest string instead —
       THICKNESS is set by its HEADER, Width and Volume by their data
       ("19 3/4"", "33.60L"), Size by the shortest of all. */
    .md2-dims-table th, .md2-dims-table td { padding-left: 2px; padding-right: 2px; }
    .md2-dims-table th:nth-child(1), .md2-dims-table td:nth-child(1) { width: 14%; }
    .md2-dims-table th:nth-child(2), .md2-dims-table td:nth-child(2) { width: 17%; }
    .md2-dims-table th:nth-child(3), .md2-dims-table td:nth-child(3) { width: 19%; }
    .md2-dims-table th:nth-child(4), .md2-dims-table td:nth-child(4) { width: 17%; }
    .md2-dims-table th:last-child, .md2-dims-table td.md2-dims-action { width: 33%; }
    .md2-dims-table th { font-size: 9px; }
    .md2-dims-table td { font-size: 11px; }
    .md2-dims-btn { font-size: 9px; padding-left: 2px; padding-right: 2px; letter-spacing: 0; }
}