/* Portmore skin (JM-Themes publics/portmore) over the ui-v2 storefront.
 *
 * Loaded after ui-v2.css and ui-v2-laravel.css. The colour roles are the theme's fixed system
 * (docs/PORTMORE-HOME-COLOR-BRIEF.md): green for actions and the brand, red only for discounts,
 * violet only for the bonus programme, blue only for strengths. They are set above the admin
 * palette on purpose - the skin is the palette. Mobile first: designed at 375px, checked at 320,
 * desktop second; touch targets at least 44px. */

html body.jm-ui-v2 {
    --action: #0b7a43;
    --action-hover: #075c32;
    --brand: #28d17c;
    --brand-soft: #e6f8ee;
    --deal: #d6361f;
    --loyalty: #5b3fd6;
    --loyalty-hover: #4730b0;
    --loyalty-soft: #f0edff;
    --rating: #ffd60a;
    /* The home banner runs from the action colour to this one; the footer has a colour of its
       own (it used the text colour). Both are roles of Settings -> Colors. */
    --promo-end: #14a86a;
    --foot-bg: #1b2024;
    --info: #1d5fa8;
    --ink: #1b2024;
    --muted: #5f666b;
    --surface: #f5f7f6;
    --line: #dde3df;
    --white: #fff;
    --shadow: rgb(27 32 36 / .12);
    --hdr: 0px;

    --ui-brand: var(--action);
    --ui-brand-dark: var(--action-hover);
    --ui-on-brand: #fff;
    --ui-link: var(--action);
    /* ui-v2 paints selected options (aria-pressed) with the badge tint: the brand's soft green. */
    --ui-badge: var(--brand-soft);
    --ui-bg: var(--white);
    --ui-ink: var(--ink);
    --ui-muted: var(--muted);
    --ui-line: var(--line);
    --ui-usp-icon: var(--action);
    --ui-benefit-icon: var(--action);
    --primary_color: var(--action);

    background: var(--white);
    color: var(--ink);
    font: 16px/1.5 Arial, Helvetica, sans-serif;
}

.jm-ui-v2 h1, .jm-ui-v2 h2, .jm-ui-v2 h3, .jm-ui-v2 button, .jm-ui-v2 input, .jm-ui-v2 select,
.jm-ui-v2 textarea, .jm-ui-v2 summary {
    font-family: Arial, Helvetica, sans-serif;
}

.jm-ui-v2 a:focus-visible, .jm-ui-v2 button:focus-visible, .jm-ui-v2 input:focus-visible,
.jm-ui-v2 summary:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.pm-wrap {
    width: min(1240px, calc(100% - 32px));
    margin-inline: auto;
}

.pm-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---- Header: logo, search and cart, sticky at the top (no utility bar, client 09.10.2026) ---- */

.jm-ui-v2 .ui-header.pm-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: block;
    padding: 0;
    background: var(--white);
    border: 0;
    box-shadow: 0 2px 8px var(--shadow);
}

/* The phone icon in the brand green like every other footer icon, as in the theme; the number
   stays white. */
html body.jm-ui-v2 .pm-foot-phone svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pm-masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-block: 12px;
}

.jm-ui-v2 .pm-brand {
    margin-right: auto;
}

.jm-ui-v2 .pm-brand img {
    display: block;
    height: 40px;
    width: auto;
}

.pm-search {
    display: flex;
    order: 3;
    width: 100%;
}

.pm-search input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 12px;
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 0;
    background: var(--white);
    color: var(--ink);
}

.pm-search input::placeholder {
    color: var(--muted);
    opacity: 1;
}

.pm-search button {
    padding: 10px 18px;
    border: 1px solid var(--action);
    background: var(--action);
    color: var(--white);
    font-weight: bold;
    cursor: pointer;
}

/* ---- Header menu (ui-v2's, client 09.10.2026): a square button beside the cart, the popover
   hangs from it - flat, as every panel of this skin ---- */

.pm-menu {
    position: relative;
}

html body.jm-ui-v2 .pm-menu > summary {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

html body.jm-ui-v2 .pm-menu > summary:hover, html body.jm-ui-v2 .pm-menu[open] > summary {
    border-color: var(--action);
    color: var(--action);
}

html body.jm-ui-v2 .pm-menu .ui-popover {
    right: 0;
    top: calc(100% + 8px);
    z-index: 40;
    width: min(320px, calc(100vw - 32px));
    padding: 6px 16px;
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: 0 10px 28px var(--shadow);
}

html body.jm-ui-v2 .pm-menu .ui-popover li + li {
    border-top: 1px solid var(--line);
}

html body.jm-ui-v2 .pm-menu .ui-popover a {
    display: flex;
    min-height: 48px;
    color: var(--ink);
    font-weight: bold;
    text-decoration: none;
}

html body.jm-ui-v2 .pm-menu .ui-popover a:hover {
    color: var(--action);
}

/* .jm-ui-v2 in front: ui-v2 paints every link green, the theme's cart button is ink. */
.jm-ui-v2 .pm-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    color: var(--ink);
    font-weight: bold;
    text-decoration: none;
}

.pm-cart-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pm-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--deal);
    color: var(--white);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

/* ---- Buttons and actions: green, with a visible hover (brief, section 2) ---- */

.jm-ui-v2 .ui-button, .pm-search button, .pm-cart {
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}

.jm-ui-v2 .ui-button {
    border-radius: 0;
    background: var(--action);
    border-color: var(--action);
    color: var(--white);
    font-weight: bold;
}

.jm-ui-v2 .ui-button:hover, .jm-ui-v2 .ui-button:focus-visible, .pm-search button:hover,
.pm-search button:focus-visible {
    background: var(--action-hover);
    border-color: var(--action-hover);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--action) 25%, transparent);
}

.jm-ui-v2 .ui-button:active, .pm-search button:active {
    transform: none;
    box-shadow: none;
}

/* The cart button only turns green on hover, frame and text, as in the theme. */
.jm-ui-v2 .pm-cart:hover, .jm-ui-v2 .pm-cart:focus-visible {
    border-color: var(--action);
    color: var(--action);
}

/* ---- Footer ---- */

.jm-ui-v2 .ui-footer.pm-foot {
    margin-top: 40px;
    padding: 32px 0 24px;
    background: var(--foot-bg);
    color: #c9d1cc;
    border: 0;
}

html body.jm-ui-v2 .pm-foot a {
    color: var(--white);
}

html body.jm-ui-v2 .pm-foot-top {
    display: grid;
    gap: 24px;
}

html body.jm-ui-v2 .pm-foot-logo img {
    display: block;
    height: 40px;
    width: auto;
}

html body.jm-ui-v2 .pm-foot-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 12px 0 6px;
    color: var(--white);
    font-size: 17px;
    font-weight: bold;
}

/* The phone number is an image drawn in dark ink; on the dark footer it is turned white. */
html body.jm-ui-v2 .pm-foot-phone .phone-image {
    filter: brightness(0) invert(1);
}

html body.jm-ui-v2 .pm-foot-usps {
    margin: 0;
    padding: 0;
    list-style: none;
}

html body.jm-ui-v2 .pm-foot-usps li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
}

html body.jm-ui-v2 .pm-foot-usps svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: var(--brand);
    stroke-width: 2;
}

html body.jm-ui-v2 .pm-foot-cols {
    display: grid;
}

html body.jm-ui-v2 .pm-foot-col {
    border-top: 1px solid rgb(255 255 255 / .15);
}

html body.jm-ui-v2 .pm-foot-col > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    list-style: none;
    cursor: pointer;
}

html body.jm-ui-v2 .pm-foot-col > summary::-webkit-details-marker {
    display: none;
}

html body.jm-ui-v2 .pm-foot-col > summary::after {
    content: "+";
    font-size: 20px;
    color: var(--brand);
}

html body.jm-ui-v2 .pm-foot-col[open] > summary::after {
    content: "−";
}

html body.jm-ui-v2 .pm-foot-col h2 {
    margin: 0;
    color: var(--white);
    font-size: 13px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

html body.jm-ui-v2 .pm-foot-col ul {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

html body.jm-ui-v2 .pm-foot-col li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #d4dad7;
    font-size: 15px;
    text-decoration: none;
}

html body.jm-ui-v2 .pm-foot-col li a:hover {
    color: var(--brand);
}

html body.jm-ui-v2 .pm-foot-pay {
    margin-top: 24px;
    padding: 20px 0;
    border-top: 1px solid rgb(255 255 255 / .15);
}

html body.jm-ui-v2 .pm-foot-label {
    margin: 0 0 12px;
    color: #9aa39e;
    font-size: 13px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

html body.jm-ui-v2 .pm-foot-legal {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgb(255 255 255 / .15);
    color: #9aa39e;
    font-size: 14px;
}

@media (min-width: 620px) {
    .pm-search {
        order: initial;
        width: auto;
        flex: 1;
    }

    .pm-cart-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }
}

@media (min-width: 760px) {
    html body.jm-ui-v2 .pm-foot-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 40px;
    }

    html body.jm-ui-v2 .pm-foot-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    html body.jm-ui-v2 .pm-foot-col {
        border: 0;
    }

    html body.jm-ui-v2 .pm-foot-col > summary {
        pointer-events: none;
    }

    html body.jm-ui-v2 .pm-foot-col li a {
        min-height: 34px;
    }

    html body.jm-ui-v2 .pm-foot-pay {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    html body.jm-ui-v2 .pm-foot-label {
        margin: 0;
    }

    html body.jm-ui-v2 .pm-foot-col > summary::after, html body.jm-ui-v2 .pm-foot-col[open] > summary::after {
        content: none;
    }
}

@media (min-width: 1000px) {
    .pm-masthead {
        padding-block: 20px;
        gap: 24px;
    }

    .pm-search {
        margin-inline: 24px;
    }

    .jm-ui-v2 .pm-brand img {
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jm-ui-v2 .ui-button, .pm-search button, .pm-cart {
        transition: none;
        transform: none;
    }
}

/* ---- Home: categories column + catalogue ---- */

.pm-layout {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.pm-catalog {
    min-width: 0;
}

.pm-cats {
    align-self: start;
    border: 1px solid var(--line);
}

.pm-cats > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 14px;
    background: var(--surface);
    font-weight: bold;
    cursor: pointer;
}

.jm-ui-v2 .pm-cats .ui-categories {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px;
}

.jm-ui-v2 .pm-cats .ui-categories a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 8px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--white);
    box-shadow: none;
    color: var(--ink);
    font-weight: normal;
    text-decoration: none;
    transition: background .15s, box-shadow .15s;
}

.jm-ui-v2 .pm-cats .ui-categories a:hover, .jm-ui-v2 .pm-cats .ui-categories a:focus-visible {
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
}

.jm-ui-v2 .pm-cats .ui-more {
    width: calc(100% - 16px);
    margin: 0 8px 8px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--white);
    color: var(--action);
    font-weight: bold;
}

/* The banner: this page's own heading and text, white on the theme's green gradient. */
.pm-promo {
    padding: 16px 18px;
    border-radius: 12px;
    background: linear-gradient(120deg, var(--action), var(--promo-end));
    color: var(--white);
}

.jm-ui-v2 .pm-promo h1 {
    margin: 0 0 6px;
    color: var(--white);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.jm-ui-v2 .pm-promo p {
    margin: 0;
    color: var(--white);
    opacity: .9;
    font-size: 15px;
}

.jm-ui-v2 .pm-catalog .ui-usp {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}

.jm-ui-v2 .pm-catalog .ui-usp > div {
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
}

.jm-ui-v2 .pm-catalog > h2 {
    margin: 24px 0 12px;
    font-size: 26px;
}

/* ---- Product tiles (home, shop, category, search) ---- */

.jm-ui-v2 .ui-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.jm-ui-v2 .pm-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--white);
    box-shadow: none;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.jm-ui-v2 .pm-card:hover {
    border-color: var(--brand);
    box-shadow: 0 4px 12px var(--shadow);
}

.pm-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.jm-ui-v2 .pm-card h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    text-transform: none;
    overflow-wrap: anywhere;
}

.pm-discount {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--deal);
    color: var(--white);
    font-size: 13px;
    font-weight: bold;
    line-height: 1.5;
}

.pm-art {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    padding: 4px 0;
}

.jm-ui-v2 .pm-art img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: 96px;
    object-fit: contain;
    background: none;
    border-radius: 0;
}

.pm-strength {
    color: var(--info);
    font-size: 14px;
}

.pm-price {
    margin-top: auto;
    font-size: 14px;
}

.pm-price b {
    color: var(--ink);
    font-size: 17px;
}

.jm-ui-v2 .pm-card .ui-card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 4px;
    padding: 0 6px;
    border: 1px solid var(--action);
    border-radius: 0;
    background: var(--action);
    color: var(--white);
    font-size: 14px;
    font-weight: bold;
    transition: background .15s, transform .15s, box-shadow .15s;
}

.jm-ui-v2 .pm-card:hover .ui-card-action, .jm-ui-v2 .pm-card:focus-visible .ui-card-action {
    background: var(--action-hover);
    border-color: var(--action-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--action) 25%, transparent);
}

@media (min-width: 620px) {
    .pm-promo {
        padding: 22px 26px;
    }

    .jm-ui-v2 .pm-promo h1 {
        font-size: 30px;
    }

    .jm-ui-v2 .ui-products {
        gap: 16px;
    }

    .jm-ui-v2 .pm-card {
        padding: 16px;
    }

    .jm-ui-v2 .pm-card h3 {
        font-size: 17px;
        text-transform: uppercase;
    }

    .pm-art {
        height: 140px;
    }

    .jm-ui-v2 .pm-art img {
        height: 126px;
    }

    .pm-price b {
        font-size: 19px;
    }
}

@media (min-width: 1000px) {
    .pm-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 24px;
    }

    .pm-cats {
        border: 0;
    }

    .pm-cats > summary {
        padding-left: 8px;
        background: var(--white);
        pointer-events: none;
        list-style: none;
    }

    .pm-cats > summary::-webkit-details-marker {
        display: none;
    }

    .jm-ui-v2 .pm-cats .ui-categories {
        padding: 0;
    }

    .jm-ui-v2 .pm-catalog .ui-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pm-promo {
        padding: 28px 32px;
    }

    .jm-ui-v2 .pm-promo h1 {
        font-size: 36px;
    }
}

/* The content column lines up with the header, as in the theme. */
.jm-ui-v2 .ui-main {
    width: min(1240px, calc(100% - 32px));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

/* The page's own highlight inside the banner heading: yellow, the theme's rating colour, so it
   stays readable on the green. */
.jm-ui-v2 .pm-promo h1 * {
    color: var(--rating);
}

.pm-cats > summary::before {
    content: "▸";
    transition: transform .15s;
}

.pm-cats[open] > summary::before {
    transform: rotate(90deg);
}

@media (min-width: 1000px) {
    .pm-cats > summary::before {
        content: none;
    }
}

/* The classic sheet colours ".home h1 span" with !important; the banner needs its own colour. */
html body.jm-ui-v2 .pm-promo h1 span {
    color: var(--rating) !important;
}

/* Product grids: two tiles on a phone, three from 620px, four on a wide screen; beside the home
   page's category column, three. */
@media (min-width: 620px) {
    .jm-ui-v2 .ui-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .jm-ui-v2 .ui-products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .jm-ui-v2 .pm-catalog .ui-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Breadcrumbs as in the theme: underlined links, "›" between them. */
.jm-ui-v2 .ui-crumbs {
    margin: 16px 0 8px;
    color: var(--muted);
    font-size: 14px;
}

.jm-ui-v2 .ui-crumbs a {
    color: var(--ink);
    text-decoration: underline;
}

.jm-ui-v2 .ui-crumb-sep {
    font-size: 0;
}

.jm-ui-v2 .ui-crumb-sep::after {
    content: "›";
    padding: 0 4px;
    font-size: 14px;
}

.jm-ui-v2 .ui-crumbs [aria-current] {
    color: var(--muted);
    font-weight: normal;
}

.jm-ui-v2 .ui-main > h1 {
    margin: 4px 0 12px;
    font-size: 24px;
    line-height: 1.2;
}

/* The theme's page title: 24px on a phone, 30px from 620px. */
@media (min-width: 620px) {
    .jm-ui-v2 .ui-main > h1 {
        font-size: 30px;
    }
}



/* On a phone a long name beside the discount label must not break inside a word. */
@media (max-width: 619px) {
    /* A long one-word name and the discount label do not fit side by side in a phone tile:
       the label moves under the name instead of out of the tile. A word wider than the tile
       itself is still broken as a last resort. */
    .pm-card-head {
        flex-wrap: wrap;
    }

    .jm-ui-v2 .pm-card h3 {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
    }

    .pm-discount {
        padding: 1px 6px;
        font-size: 12px;
    }
}

/* ---- Product page ---- */

.jm-ui-v2 .ui-card {
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

.ui-route-single-product .ui-main > h1 {
    text-transform: uppercase;
}

/* Selected strength and pack: the brand's soft green with a green frame, as in the theme. */
.jm-ui-v2 .ui-dose, .jm-ui-v2 .ui-pack {
    border: 1px solid var(--line);
    border-radius: 0;
}

.jm-ui-v2 .ui-dose[aria-pressed="true"], .jm-ui-v2 .ui-pack[aria-pressed="true"] {
    border-color: var(--action);
    background: var(--brand-soft);
    color: var(--ink);
}

.jm-ui-v2 .ui-dose[aria-pressed="true"] {
    color: var(--action);
    font-weight: bold;
}

.jm-ui-v2 .ui-dose:hover, .jm-ui-v2 .ui-pack:hover {
    border-color: var(--action);
}

/* A radio mark in front of each pack, filled on the chosen one. */
.jm-ui-v2 .ui-pack {
    position: relative;
    padding-left: 44px;
}

body.jm-ui-v2 button.ui-pack[aria-pressed=true] {
    padding-left: 43px;
}

.jm-ui-v2 .ui-pack::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border: 1px solid var(--muted);
    border-radius: 50%;
    background: var(--white);
}

.jm-ui-v2 .ui-pack[aria-pressed="true"]::before {
    border-color: var(--action);
    box-shadow: inset 0 0 0 4px var(--white);
    background: var(--action);
}

.jm-ui-v2 .ui-pack-unit {
    color: var(--info);
}

/* Savings are a discount: the red label. */
.jm-ui-v2 .ui-pack-saving {
    display: inline-block;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--deal);
    color: var(--white);
    font-size: 12px;
    font-weight: bold;
    line-height: 1.6;
}

.jm-ui-v2 .ui-pack-badge {
    border-radius: 2px;
    background: var(--action);
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* The description's anchor row and its rows, flat as the theme. */
.jm-ui-v2 .ui-anchors a {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--action);
}

.jm-ui-v2 .ui-anchors a:hover {
    border-color: var(--action);
    background: var(--brand-soft);
}

/* ui-v2 pads the pack button with body.jm-ui-v2 button.ui-pack - the radio mark needs room. */
body.jm-ui-v2 button.ui-pack {
    padding-left: 44px;
}

body.jm-ui-v2 button.ui-pack[aria-pressed=true] {
    padding-left: 43px;
}

body.ui-route-single-product .ui-main h1 {
    text-transform: uppercase;
}

/* ---- Cart ---- */

/* The fixed pay bar of a phone is already allowed for by the body's own bottom padding (after the
   footer); ui-v2.css reserves it a second time under the content, which left 148px of blank page
   above the footer instead of the 40px of every other page. */
@media (max-width: 799px) {
    html body.jm-ui-v2.ui-route-cart .ui-main, html body.jm-ui-v2.ui-route-single-product .ui-main {
        padding-bottom: 0;
    }
}

html body.jm-ui-v2 .ui-cart-page .ui-top {
    align-items: baseline;
    margin-bottom: 14px;
}

html body.jm-ui-v2 .ui-cart-page .ui-top h1 {
    margin: 0;
    font-size: 26px;
}

html body.jm-ui-v2 .ui-cart-page .ui-top > span {
    margin-left: auto;
    color: var(--muted);
}

html body.jm-ui-v2 .ui-cart-page .ui-clear {
    min-height: 44px;
    margin-left: 0;
    padding-inline: 0;
    color: var(--muted);
}

html body.jm-ui-v2 .ui-cart-page .ui-clear:hover {
    color: var(--deal);
}

html body.jm-ui-v2 .ui-ship-free {
    border-radius: 0;
}

html body.jm-ui-v2 .pm-cart-items {
    padding: 0 16px;
}

html body.jm-ui-v2 .ui-cart-item {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas: "thumb info" "ctl ctl";
    gap: 12px 14px;
    padding: 16px 0;
}

html body.jm-ui-v2 .ui-cart-item:last-child {
    border-bottom: 0;
}

.pm-thumb {
    grid-area: thumb;
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    border: 1px solid var(--line);
    background: var(--white);
}

.pm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html body.jm-ui-v2 .ui-cart-info {
    grid-area: info;
}

html body.jm-ui-v2 .ui-cart-info h2 {
    margin: 0 0 4px;
    font-size: 17px;
}

html body.jm-ui-v2 .ui-cart-info h2 a {
    color: var(--ink);
    text-decoration: none;
}

/* Strength and pack: plain muted text in this skin, not the ui-v2 pill. */
html body.jm-ui-v2 .ui-cart-info .ui-variant {
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--muted);
    font-size: 14px;
    font-weight: normal;
}

html body.jm-ui-v2 .ui-cart-info .ui-muted {
    font-size: 14px;
}

.pm-cart-ctl {
    grid-area: ctl;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* One joined stepper with square cells, as in the theme. */
html body.jm-ui-v2 .pm-cart-ctl .ui-quantity {
    margin: 0;
    border: 1px solid var(--line);
}

html body.jm-ui-v2 .pm-cart-ctl .ui-quantity button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    background: var(--white);
    font-size: 18px;
}

html body.jm-ui-v2 .pm-cart-ctl .ui-quantity button:disabled {
    color: #b5bcb8;
}

html body.jm-ui-v2 .pm-cart-ctl .ui-quantity input {
    width: 48px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-inline: 1px solid var(--line);
    border-radius: 0;
    font-weight: bold;
    text-align: center;
    -moz-appearance: textfield;
}

html body.jm-ui-v2 .pm-cart-ctl .ui-quantity input::-webkit-inner-spin-button,
html body.jm-ui-v2 .pm-cart-ctl .ui-quantity input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

html body.jm-ui-v2 .pm-cart-ctl .ui-line-total {
    margin-left: auto;
    font-size: 18px;
}

html body.jm-ui-v2 .pm-cart-ctl .ui-remove {
    position: static;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--muted);
}

html body.jm-ui-v2 .pm-cart-ctl .ui-remove:hover {
    background: none;
    color: var(--deal);
}

html body.jm-ui-v2 .ui-cart-page .ui-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 0;
    color: var(--action);
    font-weight: bold;
    text-align: left;
    text-decoration: underline;
}

html body.jm-ui-v2 .pm-empty {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 32px 20px;
    text-align: center;
}

html body.jm-ui-v2 .pm-empty svg {
    color: var(--action);
}

html body.jm-ui-v2 .pm-empty p {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

/* Summary card: subtotal and delivery as plain rows, a large total, then the button and the
   shop's promises. */
html body.jm-ui-v2 .ui-totals {
    padding: 16px;
}

html body.jm-ui-v2 .ui-totals h2 {
    margin: 0 0 10px;
    font-size: 20px;
}

html body.jm-ui-v2 .ui-totals th, html body.jm-ui-v2 .ui-totals td {
    padding: 6px 0;
    border: 0;
    font-size: 16px;
    font-weight: normal;
    vertical-align: top;
}

html body.jm-ui-v2 .ui-totals td {
    text-align: right;
}

html body.jm-ui-v2 .ui-totals .order-total th, html body.jm-ui-v2 .ui-totals .order-total td {
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 20px;
    font-weight: bold;
}

html body.jm-ui-v2 .ui-totals .ui-ship-to {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

html body.jm-ui-v2 .ui-totals .ui-ship-methods li {
    font-size: 14px;
}

html body.jm-ui-v2 .pm-ticks {
    display: grid;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 14px;
}

.pm-ticks li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pm-ticks svg {
    width: 14px;
    height: 14px;
    flex: none;
    margin-top: 3px;
    fill: none;
    stroke: var(--action);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 620px) {
    html body.jm-ui-v2 .ui-cart-item {
        grid-template-columns: 96px minmax(0, 1fr) auto;
        grid-template-areas: "thumb info ctl";
        align-items: center;
    }

    .pm-thumb {
        width: 96px;
        height: 96px;
    }

    .pm-cart-ctl {
        gap: 20px;
    }

    html body.jm-ui-v2 .pm-cart-ctl .ui-line-total {
        min-width: 84px;
        text-align: right;
    }
}

@media (min-width: 800px) {
    html body.jm-ui-v2 .ui-cart-page .ui-top h1 {
        font-size: 30px;
    }

    html body.jm-ui-v2 .ui-cart-layout {
        grid-template-columns: minmax(0, 1fr) 380px;
    }

    /* On a wide screen the checkout button sits under the total, full width. */
    html body.jm-ui-v2 .ui-totals .ui-buybar {
        order: 0;
        margin: 16px 0 0;
        padding: 0;
        border: 0;
    }

    html body.jm-ui-v2 .ui-totals .ui-buybar > div {
        display: none;
    }

    html body.jm-ui-v2 .ui-totals .ui-buybar .ui-button {
        width: 100%;
        max-width: none;
    }
}

/* The narrowest phones: the tile action keeps to one line. */
@media (max-width: 359px) {
    .jm-ui-v2 .pm-card .ui-card-action {
        padding-inline: 6px;
        font-size: 13px;
    }
}

/* ---- Info pages: unframed, the full width of the page (client 10.10.2026) ---- */

html body.jm-ui-v2 .ui-main > article.ui-page {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

html body.jm-ui-v2 .ui-main > article.ui-page > h1 {
    margin: 8px 0 12px;
    font-size: 26px;
}

html body.jm-ui-v2 .ui-page h2 {
    font-size: 20px;
}

html body.jm-ui-v2 .ui-page h3 {
    font-size: 17px;
}

html body.jm-ui-v2 .ui-page a {
    color: var(--action);
    font-weight: bold;
    text-decoration: underline;
}

.pm-help {
    margin: 32px 0 0;
    padding: 18px;
    border: 1px solid var(--line);
    background: var(--surface);
}

html body.jm-ui-v2 .pm-help h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

html body.jm-ui-v2 .pm-help p {
    margin: 0 0 14px;
}

.pm-help-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.pm-help-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    background: var(--white);
}

.pm-help-phone svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--action);
    stroke-width: 1.6;
}

@media (min-width: 800px) {
    html body.jm-ui-v2 .ui-main > article.ui-page > h1 {
        font-size: 30px;
    }
}

/* FAQ: dark questions with a plus on the right, a rule above the first one. */
html body.jm-ui-v2 .ui-faq {
    padding: 0;
}

html body.jm-ui-v2 .ui-page h1 + .ui-faq, html body.jm-ui-v2 .ui-page > .ui-faq:first-of-type {
    border-top: 1px solid var(--line);
}

html body.jm-ui-v2 .ui-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 12px 0;
    color: var(--ink);
    list-style: none;
}

html body.jm-ui-v2 .ui-faq summary::-webkit-details-marker {
    display: none;
}

html body.jm-ui-v2 .ui-faq summary::after {
    content: "+";
    flex: none;
    color: var(--muted);
    font-size: 22px;
    font-weight: normal;
    line-height: 1;
}

html body.jm-ui-v2 .ui-faq[open] summary::after {
    content: "−";
}

html body.jm-ui-v2 .ui-faq summary:hover {
    color: var(--action);
}

html body.jm-ui-v2 .ui-faq > div {
    margin: 0 0 14px;
    color: var(--muted);
}

/* ---- Forms (contact, order status): square fields, bold labels, a framed form ---- */

html body.jm-ui-v2 input:not([type=radio]):not([type=checkbox]), html body.jm-ui-v2 select,
html body.jm-ui-v2 textarea {
    border-color: #c4cbc7;
    border-radius: 0;
}

html body.jm-ui-v2 input:not([type=radio]):not([type=checkbox]):focus, html body.jm-ui-v2 select:focus,
html body.jm-ui-v2 textarea:focus {
    border-color: var(--action);
    outline: 2px solid var(--action);
    outline-offset: -1px;
}

html body.jm-ui-v2 .ui-cform {
    display: grid;
    gap: 0 14px;
    padding: 16px;
    border: 1px solid var(--line);
}

html body.jm-ui-v2 .ui-cform > * {
    grid-column: 1 / -1;
}

html body.jm-ui-v2 .ui-cform label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
}

html body.jm-ui-v2 .ui-cform p input, html body.jm-ui-v2 .ui-cform p textarea {
    width: 100%;
    padding: 10px 12px;
    line-height: 1.4;
}

html body.jm-ui-v2 .ui-captcha {
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
}

html body.jm-ui-v2 .ui-captcha input {
    border-radius: 0;
}

html body.jm-ui-v2 .ui-cform-submit {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 0;
    background: var(--action);
    font-weight: bold;
}

html body.jm-ui-v2 .ui-cform-submit:hover:not(:disabled) {
    background: var(--action-hover);
}

html body.jm-ui-v2 .ui-cform-alert {
    border-radius: 0;
}

/* Contact form (client 10.10.2026) and the order status form (re-check the same day): on a wide
   screen about a third of the page, never narrower than 420px, the fields one under another; on a
   phone the full width. */
@media (min-width: 800px) {
    html body.jm-ui-v2 .ui-contact .ui-cform, html body.jm-ui-v2 .ui-order-status .ui-cform {
        width: max(420px, 33.333%);
    }
}

/* ---- 404: an unframed column like the info pages, the code as a large muted number ---- */

html body.ui-route-404 .ui-main > .ui-card {
    max-width: 780px;
    margin: 0;
    padding: 24px 0 0;
    border: 0;
}

html body.ui-route-404 .ui-main > .ui-card > p:first-child {
    margin: 0;
    color: var(--muted);
    font-size: 56px;
    font-weight: bold;
    line-height: 1;
}

html body.ui-route-404 .ui-search {
    display: flex;
    margin: 18px 0 8px;
}

html body.ui-route-404 .ui-search input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
}

html body.ui-route-404 .ui-search .ui-button {
    min-height: 48px;
    margin: 0;
}

html body.ui-route-404 .ui-back {
    display: inline-flex;
    align-items: center;
    padding: 12px 0;
    text-align: left;
    text-decoration: underline;
}

/* Author photo: square, as every picture frame in this skin. */
html body.jm-ui-v2 .ui-author-photo {
    border-radius: 0;
}


/* "Naar de winkelwagen →" (jm-ui-v2 3.1.0) is longer than "In winkelwagen": on a phone it keeps
   to one line instead of leaving the arrow alone on a second one. */
html body.jm-ui-v2 .ui-buybar .ui-go-cart {
    max-width: none;
    padding-inline: 16px;
    white-space: nowrap;
}

@media (max-width: 359px) {
    html body.jm-ui-v2 .ui-buybar .ui-go-cart {
        padding-inline: 12px;
        font-size: 15px;
    }
}

/* ---- Catalogue toolbar (category, shop, search): the theme's - the count on the left, "Sorteren"
   as a select on the right, a rule under it (client 09.10.2026) ---- */

html body.jm-ui-v2 .ui-sortbar.pm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 12px 0 14px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
}

html body.jm-ui-v2 .pm-count {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

html body.jm-ui-v2 .pm-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

html body.jm-ui-v2 .pm-sort select {
    min-height: 40px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 0;
    background-color: var(--white);
    color: var(--ink);
    font-size: 14px;
}

html body.jm-ui-v2 .pm-sort-go {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--action);
    background: var(--action);
    color: var(--white);
    font-weight: bold;
}

/* ---- Other categories under the grid: chips, the current one on the soft green ---- */

.pm-othercats {
    margin-top: 28px;
}

html body.jm-ui-v2 .pm-othercats h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.pm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html body.jm-ui-v2 .pm-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

html body.jm-ui-v2 .pm-chip:hover {
    border-color: var(--brand);
}

html body.jm-ui-v2 .pm-chip[aria-current] {
    border-color: var(--action);
    background: var(--brand-soft);
    color: var(--action);
    font-weight: bold;
}

html body.jm-ui-v2 .pm-allcats {
    display: inline-flex;
    gap: 6px;
    margin-top: 16px;
    color: var(--action);
    font-weight: bold;
    text-decoration: underline;
}


/* ---- Catalogue: the theme's intro, "show more" and price per tablet (client 09.10.2026) ---- */

.pm-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

html body.jm-ui-v2 .pm-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border: 1px solid var(--action);
    background: var(--white);
    color: var(--action);
    font-weight: bold;
    text-decoration: none;
    transition: background .15s, color .15s;
}

html body.jm-ui-v2 .pm-more-btn:hover, html body.jm-ui-v2 .pm-more-btn:focus-visible {
    background: var(--action);
    color: var(--white);
}

html body.jm-ui-v2 .pm-more-btn[aria-busy=true] {
    opacity: .6;
    cursor: progress;
}

html body.jm-ui-v2 .pm-more-count {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

/* The page numbers stay for a visit without scripting; the script hides them. */
html body.jm-ui-v2 .pm-pages[hidden] {
    display: none !important;
}

html body.jm-ui-v2 .pm-price > span:not(.ui-muted) {
    color: var(--ink);
    font-size: 13px;
}

/* ---- Category text under the title (client 09.10.2026): three lines with a fade, "Lees meer"
   opens it all ---- */

.pm-desc {
    margin: -4px 0 8px;
    color: var(--muted);
}

.pm-desc-text {
    position: relative;
}

html body.jm-ui-v2 .pm-desc-text > :first-child {
    margin-top: 0;
}

html body.jm-ui-v2 .pm-desc-text h2, html body.jm-ui-v2 .pm-desc-text h3 {
    margin: 14px 0 6px;
    color: var(--ink);
    font-size: 17px;
}

html body.jm-ui-v2 .pm-desc-text p {
    margin: 0 0 10px;
}

.pm-desc.is-folded .pm-desc-text {
    max-height: 5.4em;
    overflow: hidden;
}

.pm-desc.is-folded .pm-desc-text::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2em;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--white));
}

html body.jm-ui-v2 .pm-desc-more {
    min-height: 44px;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--action);
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

/* ---- Active-substance filter and the substance under a tile's title (client 09.10.2026) ---- */

.pm-card-name {
    min-width: 0;
}

html body.jm-ui-v2 .pm-substance {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: normal;
    line-height: 1.35;
}

/* The chips belong to the toolbar: its rule moves under them (the toolbar's script sits between). */
html body.jm-ui-v2 .ui-sortbar.pm-toolbar:has(~ .pm-substances) {
    margin-bottom: 0;
    border-bottom: 0;
}

html body.jm-ui-v2 .pm-substances {
    flex-wrap: nowrap;
    margin: 0 -16px 14px;
    padding: 0 16px 10px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}

html body.jm-ui-v2 .pm-substances::-webkit-scrollbar {
    display: none;
}

html body.jm-ui-v2 .pm-substances .pm-chip {
    flex: none;
}

@media (min-width: 620px) {
    html body.jm-ui-v2 .pm-substance {
        font-size: 14px;
    }

    html body.jm-ui-v2 .pm-substances {
        flex-wrap: wrap;
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }
}

/* ---- Product page: the purchase block and "similar to", as the theme's (client 09.10.2026) ---- */

/* Small capital labels over the strengths and the packs. */
html body.jm-ui-v2 .ui-purchase .ui-attribute {
    margin: 0 0 12px;
}

html body.jm-ui-v2 .ui-purchase .ui-attribute legend {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Strengths: three to a row. */
html body.jm-ui-v2 .ui-purchase .ui-attribute[data-pack="0"] .ui-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

html body.jm-ui-v2 .ui-purchase button.ui-dose {
    min-width: 0;
}

/* Pack rows: the radio mark, the count with the best-value mark beside it and the price per
   tablet under them; the saving above the price on the right. */
html body.jm-ui-v2 .ui-purchase .ui-attribute[data-pack="1"] .ui-options {
    gap: 8px;
}

html body.jm-ui-v2 .ui-purchase button.ui-pack {
    align-items: center;
    min-height: 56px;
    padding: 10px 12px 10px 44px;
}

html body.jm-ui-v2 .ui-purchase button.ui-pack[aria-pressed="true"] {
    padding: 9px 11px 9px 43px;
}

html body.jm-ui-v2 .ui-purchase .ui-pack-left {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    align-self: center;
    gap: 2px 8px;
}

html body.jm-ui-v2 .ui-purchase .ui-pack-unit {
    flex-basis: 100%;
    color: var(--info);
    font-size: 14px;
}

html body.jm-ui-v2 .ui-purchase .ui-pack-badge {
    position: static;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.7;
}

html body.jm-ui-v2 .ui-purchase .ui-pack-right {
    align-self: center;
    gap: 2px;
}

html body.jm-ui-v2 .ui-purchase .ui-pack-price {
    font-size: 18px;
    line-height: 1.25;
}

html body.jm-ui-v2 .ui-purchase .ui-pack-saving {
    padding: 0 6px;
    color: var(--white);
    font-size: 11px;
    line-height: 1.5;
}

html body.jm-ui-v2 .ui-purchase .ui-pack-base {
    font-size: 12px;
}

/* The ticked note under the packs. */
html body.jm-ui-v2 .pm-assure {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 14px;
}

html body.jm-ui-v2 .pm-assure li {
    display: flex;
    align-items: center;
    gap: 8px;
}

html body.jm-ui-v2 .pm-assure li::before {
    content: "";
    flex: 0 0 16px;
    height: 16px;
    background: var(--action);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The bar: the choice over the price. */
html body.jm-ui-v2 .pm-buy-sel {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: normal;
    line-height: 1.3;
}

/* Phone: the block is framed, as the theme's; the bar stays fixed at the foot of the screen. */
@media (max-width: 799px) {
    html body.jm-ui-v2 .ui-col-buy {
        display: block;
        margin: 16px 0;
        padding: 16px;
        border: 1px solid var(--line);
        background: var(--white);
    }
}

/* Wide screen: a 420px column beside the page, square, the bar at the bottom of the block. */
@media (min-width: 800px) {
    html body.jm-ui-v2 .ui-product {
        grid-template-columns: minmax(0, 1fr) 420px;
        column-gap: 40px;
    }

    html body.jm-ui-v2 .ui-product > .ui-col-buy {
        padding: 16px;
        border-radius: 0;
    }

    html body.jm-ui-v2 .ui-col-buy .ui-buybar {
        order: 0;
        margin: 12px 0 0;
        padding: 12px 0 0;
        border-top: 1px solid var(--line);
        border-bottom: 0;
    }

    html body.jm-ui-v2 .ui-purchase button.ui-pack {
        min-height: 48px;
        padding-block: 6px;
    }

    html body.jm-ui-v2 .ui-purchase button.ui-pack[aria-pressed="true"] {
        padding-block: 5px;
    }

    html body.jm-ui-v2 .ui-purchase .ui-attribute[data-pack="1"] .ui-options {
        gap: 6px;
    }

    html body.jm-ui-v2 .ui-purchase .ui-pack-price {
        font-size: 17px;
    }
}

/* "Similar to": across the page, a scrolling row on a phone, 3 and then 6 to a row. */
.pm-similar {
    margin-top: 32px;
}

html body.jm-ui-v2 .pm-similar h2 {
    margin: 0 0 12px;
    font-size: 20px;
}

html body.jm-ui-v2 .pm-rels {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 46%);
    gap: 10px;
    margin: 0 -16px;
    padding: 0 16px 8px;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
}

html body.jm-ui-v2 .pm-rels > li {
    display: flex;
    min-width: 0;
    scroll-snap-align: start;
}

html body.jm-ui-v2 .pm-rels .pm-rel {
    width: 100%;
    gap: 4px;
    padding: 12px;
}

html body.jm-ui-v2 .pm-rel h3 {
    font-size: 14px;
    text-transform: uppercase;
}

/* The discount stays beside the name, as the theme's; the catalogue lets it drop under on a phone. */
html body.jm-ui-v2 .pm-rel .pm-card-head {
    flex-wrap: nowrap;
}

html body.jm-ui-v2 .pm-rel .pm-discount {
    padding: 1px 7px;
    font-size: 12px;
}

html body.jm-ui-v2 .pm-rel .pm-substance {
    font-size: 13px;
}

html body.jm-ui-v2 .pm-rel .pm-art {
    height: 108px;
    padding: 6px 0;
}

html body.jm-ui-v2 .pm-rel .pm-art img {
    height: 96px;
}

html body.jm-ui-v2 .pm-rel .pm-strength {
    font-size: 13px;
}

html body.jm-ui-v2 .pm-rel .pm-price b {
    font-size: 17px;
}

html body.jm-ui-v2 .pm-rel .pm-price {
    font-size: 13px;
}

@media (min-width: 620px) {
    html body.jm-ui-v2 .pm-rels {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }
}

@media (min-width: 1000px) {
    html body.jm-ui-v2 .pm-rels {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* ---- Product page: the theme's summary at the top (client 10.10.2026) ---- */

html body.jm-ui-v2 .pm-summary {
    display: grid;
    gap: 16px;
    margin: 0;
}

html body.jm-ui-v2 .pm-sum-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

html body.jm-ui-v2 .pm-summary h1 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    text-transform: uppercase;
}

html body.jm-ui-v2 .pm-summary p {
    margin: 0;
}

html body.jm-ui-v2 .pm-sum-ingredient {
    color: var(--muted);
}

html body.jm-ui-v2 .pm-summary .pm-discount {
    padding: 2px 10px;
    font-size: 14px;
}

html body.jm-ui-v2 .pm-sum-media {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

html body.jm-ui-v2 .pm-sum-media img {
    width: 160px;
    height: 160px;
    object-fit: contain;
}

html body.jm-ui-v2 .pm-sum-facts {
    display: grid;
    gap: 10px;
}

/* "In stock" with a brand dot, as the theme's. */
html body.jm-ui-v2 .pm-stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--action);
    font-weight: bold;
}

html body.jm-ui-v2 .pm-stock::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
}

html body.jm-ui-v2 .pm-lead {
    color: var(--ink);
}

/* The purchase column starts on the first row, beside the summary: the name is inside it now. */
@media (min-width: 800px) {
    html body.jm-ui-v2 .ui-product > .ui-col-buy {
        grid-row: 1 / span 50;
    }
}

@media (min-width: 1000px) {
    html body.jm-ui-v2 .pm-summary {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 8px 28px;
        align-content: start;
    }

    html body.jm-ui-v2 .pm-sum-head {
        grid-column: 1 / -1;
    }

    html body.jm-ui-v2 .pm-sum-media {
        grid-row: span 2;
        align-items: flex-start;
    }

    html body.jm-ui-v2 .pm-sum-media img {
        width: 220px;
        height: 220px;
    }

    html body.jm-ui-v2 .pm-summary h1 {
        font-size: 32px;
    }
}

/* ---- Product page: "In het kort" and the description unframed, as the theme's .info
   (client 10.10.2026) ---- */

html body.jm-ui-v2 .pm-brief {
    margin: 32px 0 0;
}

html body.jm-ui-v2 .pm-brief h2, html body.jm-ui-v2 .pm-info-title {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.5;
}

html body.jm-ui-v2 .pm-info-title {
    margin-top: 32px;
}

html body.jm-ui-v2 .pm-brief li, html body.jm-ui-v2 .pm-info p, html body.jm-ui-v2 .pm-info li {
    max-width: 70ch;
}

html body.jm-ui-v2 .pm-info {
    margin: 0;
    padding: 0;
}

/* Every section a row with a rule above it, the last one closed by a rule below. */
html body.jm-ui-v2 .pm-info details {
    border-top: 1px solid var(--line);
}

html body.jm-ui-v2 .ui-desc-root.pm-info > details:first-child {
    border-top: 1px solid var(--line);
}

html body.jm-ui-v2 .pm-info > details:last-of-type {
    border-bottom: 1px solid var(--line);
}

html body.jm-ui-v2 .pm-info summary {
    min-height: 52px;
    padding: 12px 0;
    font-size: 16px;
}

html body.jm-ui-v2 .pm-info summary:hover {
    color: var(--action);
}

/* A plus that turns to a minus, instead of ui-v2's chevron. */
html body.jm-ui-v2 .pm-info summary::after {
    content: "+";
    flex: none;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    color: var(--muted);
    font-size: 22px;
    font-weight: normal;
    line-height: 1;
    transform: none;
}

html body.jm-ui-v2 .pm-info details[open] > summary::after {
    content: "−";
    transform: none;
}