/* ==========================================================================
   MediPunkt (medipuk) — storefront stylesheet
   --------------------------------------------------------------------------
   Hand-written for this theme. With css/type.css (self-hosted @font-face) it
   is the only stylesheet the storefront loads: no vendor framework, no icon
   font. Every mark on the page is a CSS shape or an inline <svg>, which keeps
   this theme's served HTML/CSS unrelated to any other theme in the fleet.

   Two contracts this file must keep — the dashboard's apply_shop_identity()
   rewrites them by regex, so do not rename:
     * the `--t-*` custom properties below, values written as 6-digit hex;
     * `.hd__logo .logo-icon` / `.ft__logo .logo-icon`, which apply_identity
       appends a sizing rule for.
   Everything else is namespaced `mp-`.
   ========================================================================== */

:root {
    /* Colors - Primary palette (apply_identity rewrites these three + shades) */
    --t-primary: #175e6b;
    --t-primary-light: #417b86;
    --t-secondary: #0f424c;
    --t-secondary-hover: #0d3a43;
    --t-accent: #1f6b3a;
    --t-accent-hover: #1b5e33;

    /* Neutrals */
    --t-bg-main: #f5f7f7;
    --t-bg-surface: #ffffff;
    --t-bg-secondary: #e8eff0;
    --t-text-main: #42504f;
    --t-text-muted: #5a6b6d;
    --t-text-inverse: #ffffff;

    /* Functional */
    /* Success/positive semantics. Deliberately NOT tied to the brand
       accent: the accent is whatever the brand generator picks, and
       'In stock' in a warm brown on a mint chip reads as an error. */
    --t-success: #1f7a4d;
    --t-success-bg: #e6f3ea;
    /* A dark shade of whatever the brand primary is. The theme needs a
       dark brand colour for text on pale panels and for hover states;
       `--t-secondary` cannot be it, because the brand generator uses
       'secondary' for a LIGHT complementary tint. */
    --t-primary-dark: #114650;
    --t-primary-dark: color-mix(in srgb, var(--t-primary) 78%, #000);
    --t-error: #b3261e;
    --t-warning: #d9b95c;
    --t-border: #dfe5e5;
    --t-border-light: #eef1f1;

    /* Typography */
    --t-font-heading: 'Montserrat', sans-serif;
    --t-font-body: 'Source Sans 3', sans-serif;

    /* --- medipuk-only tokens ------------------------------------------- */
    --mp-ink: #1c2326;              /* headings, strongest text            */
    --mp-ink-2: #2c3a3d;            /* long-form body copy                 */
    --mp-faint: #8a9a9b;            /* counts, de-emphasised meta          */
    --mp-line-strong: #c8d2d2;      /* input + control borders             */
    --mp-hatch-a: #eef1f1;          /* placeholder hatch, light band       */
    --mp-hatch-b: #e3e8e8;          /* placeholder hatch, dark band        */
    --mp-note-bg: #fff8e6;          /* "supply this" regulatory note       */
    --mp-note-line: #d9b95c;
    --mp-note-ink: #6b4f00;
    --mp-r: 4px;                    /* the theme's single radius           */
    --mp-r-sm: 3px;
    --mp-w: 1240px;                 /* content measure                     */
    --mp-pad: 24px;
    --mp-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --mp-shadow: 0 16px 32px -12px rgba(28, 35, 38, .18);
    --mp-shadow-sm: 0 2px 6px -2px rgba(28, 35, 38, .12);
}

/* ==========================================================================
   1. Reset + base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--t-bg-main);
    color: var(--mp-ink);
    font-family: var(--t-font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img, picture, video, svg { max-width: 100%; }
img { height: auto; display: block; border: 0; }

a { color: var(--t-primary); text-decoration: none; }
a:hover { color: var(--t-primary-dark); text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.2; color: var(--mp-ink); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
hr { border: 0; border-top: 1px solid var(--t-border); margin: 28px 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--t-bg-secondary); color: var(--mp-ink); }

:focus-visible {
    outline: 2px solid var(--t-primary);
    outline-offset: 2px;
    border-radius: var(--mp-r-sm);
}

.mp-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* Serif display face — this theme's strongest visual signature. */
.mp-display {
    font-family: var(--t-font-heading);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.12;
    text-wrap: pretty;
}

.mp-mono { font-family: var(--mp-mono); font-size: 10.5px; line-height: 1.5; }

.mp-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-text-muted);
}
.mp-eyebrow--brand { color: var(--t-primary); }

/* ==========================================================================
   2. Layout primitives
   ========================================================================== */

.mp-wrap {
    width: 100%;
    max-width: var(--mp-w);
    margin: 0 auto;
    padding-left: var(--mp-pad);
    padding-right: var(--mp-pad);
}

.mp-main { flex: 1 0 auto; padding: 24px 0 64px; }

.mp-stack    { display: flex; flex-direction: column; gap: 56px; }
.mp-stack--s { display: flex; flex-direction: column; gap: 28px; }

.mp-section { display: flex; flex-direction: column; gap: 20px; }

.mp-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mp-section__title {
    font-family: var(--t-font-heading);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: -.01em;
    margin: 0;
}

.mp-section__link { font-weight: 600; font-size: 14px; white-space: nowrap; }

.mp-card {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
}
.mp-card--pad { padding: 20px; }

.mp-note {
    background: var(--t-bg-secondary);
    border-radius: var(--mp-r);
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--t-primary-dark);
}

/* "The licence holder supplies this" placeholder. Never pre-filled: regulatory
   marks are supplied by the operator, never fabricated by the generator. */
.mp-supply {
    background: var(--mp-note-bg);
    border: 1px dashed var(--mp-note-line);
    border-radius: var(--mp-r-sm);
    padding: 8px 10px;
    font-family: var(--mp-mono);
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--mp-note-ink);
}

.mp-grid { display: grid; gap: 16px; }
.mp-grid--auto180 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.mp-grid--auto220 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mp-grid--auto280 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.mp-grid--fit240  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.mp-grid--fit280  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }

/* ==========================================================================
   3. Buttons + form controls
   ========================================================================== */

.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--mp-r);
    padding: 12px 22px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mp-btn:hover { text-decoration: none; }

.mp-btn--primary { background: var(--t-primary); color: #fff; }
.mp-btn--primary:hover { background: var(--t-primary-dark); color: #fff; }

.mp-btn--ghost { background: var(--t-bg-surface); color: var(--t-primary); border-color: var(--t-primary); }
.mp-btn--ghost:hover { background: var(--t-bg-secondary); color: var(--t-primary-dark); }

.mp-btn--quiet { background: transparent; color: var(--mp-ink); border-color: var(--mp-line-strong); }
.mp-btn--quiet:hover { border-color: var(--t-primary); color: var(--t-primary); }

.mp-btn--sm { padding: 9px 16px; font-size: 13.5px; }
.mp-btn--block { width: 100%; }

.mp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.mp-field > label, .mp-label { font-size: 12.5px; font-weight: 700; color: var(--t-text-muted); }

.mp-input,
.mp-field input[type="text"],
.mp-field input[type="email"],
.mp-field input[type="tel"],
.mp-field input[type="password"],
.mp-field input[type="number"],
.mp-field select,
.mp-field textarea {
    width: 100%;
    background: var(--t-bg-surface);
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-r);
    padding: 11px 13px;
    font-size: 14.5px;
    color: var(--mp-ink);
    transition: border-color .15s ease;
}
.mp-input:focus,
.mp-field input:focus,
.mp-field select:focus,
.mp-field textarea:focus { border-color: var(--t-primary); outline: none; }
.mp-field textarea { min-height: 140px; resize: vertical; }

.mp-error, .errorMessage, .error-message { color: var(--t-error); font-size: 12.5px; font-weight: 600; }
input.error, select.error, textarea.error { border-color: var(--t-error) !important; }

.mp-alert {
    border-radius: var(--mp-r);
    padding: 13px 16px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid transparent;
    margin-bottom: 18px;
}
.mp-alert--ok   { background: #edf7f0; border-color: #bfdfc9; color: #14532c; }
.mp-alert--warn { background: var(--mp-note-bg); border-color: var(--mp-note-line); color: var(--mp-note-ink); }
.mp-alert--bad  { background: #fdf0ef; border-color: #efc4c1; color: var(--t-error); }

.mp-qty { display: inline-flex; border: 1px solid var(--mp-line-strong); border-radius: var(--mp-r); overflow: hidden; background: var(--t-bg-surface); }
.mp-qty button { border: 0; background: transparent; width: 40px; font-size: 18px; line-height: 1; color: var(--mp-ink); }
.mp-qty button:hover { background: var(--t-bg-secondary); }
.mp-qty input {
    width: 52px; border: 0;
    border-left: 1px solid var(--mp-line-strong);
    border-right: 1px solid var(--mp-line-strong);
    text-align: center; font-weight: 700; padding: 9px 0;
    -moz-appearance: textfield;
}
.mp-qty input::-webkit-outer-spin-button,
.mp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   4. Placeholder art
   Hatched boxes stand in for photography the pharmacy supplies itself. They
   render only where a real image is absent, so a finished site shows none.
   ========================================================================== */

.mp-ph {
    background: repeating-linear-gradient(135deg,
        var(--mp-hatch-a) 0 10px, var(--mp-hatch-b) 10px 20px);
    border: 1px dashed #b4c0c0;
    border-radius: var(--mp-r);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 10px;
    font-family: var(--mp-mono);
    font-size: 10px;
    line-height: 1.4;
    color: #4a5859;
}
.mp-ph--sq { aspect-ratio: 1; }
.mp-ph--wide { aspect-ratio: 16 / 9; }
.mp-ph--card { aspect-ratio: 16 / 10; }
.mp-ph--hero { aspect-ratio: 5 / 4; font-size: 11px; padding: 16px; }

/* ==========================================================================
   5. Utility strip + header
   The header carries the engine's behaviour hooks (`hd__search*`, `j-sr-*`,
   `hd__cart*`) so js/template.js + js/app.min.js keep working unchanged; all
   presentation is on the `mp-` classes beside them.
   ========================================================================== */

.mp-strip {
    background: var(--t-primary);
    color: #e8f2f3;
    font-size: 12.5px;
    font-weight: 500;
}
.mp-strip__in {
    display: flex;
    align-items: center;
    gap: 10px 24px;
    flex-wrap: wrap;
    padding-top: 7px;
    padding-bottom: 7px;
}
.mp-strip__claims { display: flex; gap: 24px; flex-wrap: wrap; }
.mp-strip__claim { display: flex; align-items: center; gap: 7px; }
.mp-strip__dot {
    width: 6px; height: 6px; border-radius: 50%;
    /* The one place the brand's LIGHT secondary belongs: a small mark on the
       dark strip. Hardcoded mint here was template-default on every shop. */
    background: var(--t-secondary); display: inline-block; flex: none;
}
.mp-strip__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mp-strip__tools .ui-select select {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--mp-r);
    padding: 3px 8px;
    font-size: 12px;
}

.mp-head {
    background: var(--t-bg-surface);
    border-bottom: 1px solid var(--t-border);
    position: relative;
    z-index: 40;
}
.mp-head__bar {
    display: flex;
    align-items: center;
    gap: 16px 28px;
    flex-wrap: wrap;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Logo. `.hd__logo` + `.logo-icon` are the apply_identity contract. */
.hd__logo, .ft__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--mp-ink);
    flex: none;
}
.hd__logo:hover, .ft__logo:hover { text-decoration: none; color: var(--mp-ink); }
.hd__logo .logo-icon, .ft__logo .logo-icon { width: 34px; height: 34px; flex: none; }
.ft__logo { color: var(--mp-ink); }

.mp-logo__text { display: flex; flex-direction: column; line-height: 1; }
.mp-logo__name { font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.mp-logo__tag {
    font-size: 10.5px;
    color: var(--t-text-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 3px;
}

/* Search — `hd__search` / `j-sr-inp` / `hd__search-list` are behaviour hooks. */
.hd__search.mp-search {
    flex: 1 1 320px;
    min-width: 0;
    position: relative;
    display: block;
}
.mp-search__form {
    display: flex;
    width: 100%;
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-r);
    overflow: hidden;
    background: var(--t-bg-surface);
}
.mp-search__input {
    flex: 1;
    border: 0;
    padding: 11px 14px;
    font-size: 14px;
    outline: none;
    min-width: 0;
    background: transparent;
}
.mp-search__go {
    background: var(--t-primary);
    color: #fff;
    border: 0;
    padding: 0 18px;
    font-weight: 600;
    font-size: 14px;
}
.mp-search__go:hover { background: var(--t-primary-dark); }

/* Quick results. app.min.js toggles `is-search-results` on <html> once the query
   is 3+ characters and template.js fills `.hd__search-list`. The panel that gets
   revealed is `.hd__search-dropdown` — it has to be the absolutely-positioned box,
   because as a flex child of the search row it would otherwise collapse to zero
   width and the results would render in a sliver. */
.hd__search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    box-shadow: var(--mp-shadow);
    max-height: min(60vh, 420px);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
}
html.is-search-results .hd__search-dropdown { opacity: 1; visibility: visible; pointer-events: auto; }
/* Stay interactive while the pointer is inside the panel: the engine clears
   `is-search-results` on blur, which otherwise pulls the list out from under a
   click that has already begun. */
.hd__search-dropdown:hover { opacity: 1; visibility: visible; pointer-events: auto; }
.hd__search-list { margin: 0; padding: 0; list-style: none; }
.hd__search-list > li + li,
.hd__search-list > a + a { border-top: 1px solid var(--t-border-light); }
.hd__search-list a {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    color: var(--mp-ink);
}
.hd__search-list a:hover { background: var(--t-bg-secondary); text-decoration: none; }
.hd__search-item-title { font-weight: 700; font-size: 14px; }
.hd__search-item-text { font-size: 12.5px; color: var(--t-text-muted); }
.hd__search-item-price { margin-left: auto; font-weight: 800; white-space: nowrap; }

.mp-head__links {
    display: flex;
    gap: 20px;
    font-size: 13.5px;
    font-weight: 600;
    align-items: center;
}
.mp-head__links a { color: var(--mp-ink-2); }
.mp-head__cart { display: flex; align-items: center; gap: 6px; }
.mp-head__count {
    background: var(--t-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    padding: 1px 7px;
    line-height: 1.5;
}

/* Primary nav + category flyout */
.mp-nav {
    display: flex;
    gap: 24px;
    font-size: 14px;
    font-weight: 600;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}
.mp-nav::-webkit-scrollbar { display: none; }
.mp-nav__link { color: var(--mp-ink); padding: 13px 0; white-space: nowrap; }
.mp-nav__link:hover { color: var(--t-primary); text-decoration: none; }
.mp-nav__link--end { margin-left: auto; }

.mp-nav__cats {
    background: transparent;
    color: var(--mp-ink);
    border: 0;
    border-radius: var(--mp-r) var(--mp-r) 0 0;
    padding: 13px 18px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    white-space: nowrap;
    margin-left: calc(var(--mp-pad) * -1 + 6px);
}
.mp-nav__cats[aria-expanded="true"] { background: var(--t-primary); color: #fff; }
.mp-burger { display: flex; flex-direction: column; gap: 3px; }
.mp-burger span { width: 16px; height: 2px; background: currentColor; display: block; }

.mp-mega {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--t-bg-surface);
    border-bottom: 1px solid var(--t-border);
    box-shadow: var(--mp-shadow);
    display: none;
}
.mp-mega.is-open { display: block; }
.mp-mega__in {
    display: grid;
    grid-template-columns: 230px minmax(0, 3fr) minmax(0, 4fr);
    gap: 32px;
    padding-top: 20px;
    padding-bottom: 28px;
}
.mp-mega__rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-right: 1px solid var(--t-border);
    padding-right: 16px;
    max-height: 420px;
    overflow-y: auto;
}
.mp-mega__rail a {
    padding: 9px 12px;
    border-radius: var(--mp-r);
    font-size: 14px;
    font-weight: 600;
    color: var(--mp-ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.mp-mega__rail a:hover,
.mp-mega__rail a.is-active { background: var(--t-bg-secondary); color: var(--t-primary); text-decoration: none; }
.mp-mega__count { font-size: 11px; color: var(--mp-faint); font-weight: 500; }

.mp-mega__panel { display: none; flex-direction: column; gap: 20px; padding-top: 8px; }
.mp-mega__panel.is-active { display: flex; }
.mp-mega__panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--t-border);
    padding-bottom: 12px;
}
.mp-mega__panel-title { font-family: var(--t-font-heading); font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.mp-mega__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 24px; }
.mp-mega__col { display: flex; flex-direction: column; gap: 8px; }
.mp-mega__col a { font-size: 14px; font-weight: 500; color: var(--mp-ink); line-height: 1.4; }
.mp-mega__aside { display: none; flex-direction: column; gap: 12px; }
.mp-mega__aside.is-active { display: flex; }
.mp-mega__picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mp-mega__pick {
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f9fbfb;
    color: var(--mp-ink);
}
.mp-mega__pick:hover { border-color: var(--t-primary); background: var(--t-bg-surface); text-decoration: none; }
.mp-mega__pick img { border-radius: var(--mp-r); }
.mp-mega__pick-name { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.mp-mega__pick-price { font-weight: 800; font-size: 15px; margin-top: auto; }

/* Mobile drawer — its own implementation in js/medipuk.js, not app.min.js. */
.mp-drawer-btn { display: none; }
.mp-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(88vw, 340px);
    background: var(--t-bg-surface);
    border-right: 1px solid var(--t-border);
    box-shadow: var(--mp-shadow);
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 90;
    overflow-y: auto;
    padding: 18px var(--mp-pad) 32px;
}
.mp-drawer.is-open { transform: none; }
.mp-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mp-drawer__close { background: transparent; border: 0; font-size: 26px; line-height: 1; color: var(--t-text-muted); }
.mp-drawer__group { border-top: 1px solid var(--t-border); padding: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.mp-drawer__group a { color: var(--mp-ink); font-size: 15px; font-weight: 600; }
.mp-drawer__group--quiet a { font-weight: 500; font-size: 14px; color: var(--t-text-main); }
.mp-scrim {
    position: fixed;
    inset: 0;
    background: rgba(28, 35, 38, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 80;
}
.mp-scrim.is-open { opacity: 1; visibility: visible; }
body.mp-locked { overflow: hidden; }

/* ==========================================================================
   6. Breadcrumbs
   ========================================================================== */

.mp-crumbs { padding-top: 16px; }
.mp-crumbs ul { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--t-text-muted); }
.mp-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--mp-faint); }
.mp-crumbs a { color: var(--t-text-muted); }
.mp-crumbs a:hover { color: var(--t-primary); }
.mp-crumbs .is-active { color: var(--mp-ink); font-weight: 600; }

/* ==========================================================================
   7. Footer
   ========================================================================== */

.mp-foot {
    background: var(--t-bg-surface);
    border-top: 1px solid var(--t-border);
    margin-top: auto;
}
.mp-foot__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 24px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--t-text-main);
}
.mp-foot__col { display: flex; flex-direction: column; gap: 4px; }
.mp-foot__col--brand { gap: 10px; }
.mp-foot__title { font-weight: 700; color: var(--mp-ink); margin-bottom: 4px; }
.mp-foot__col a { color: var(--t-text-main); }
.mp-foot__col a:hover { color: var(--t-primary); }
.mp-foot__legal {
    border-top: 1px solid var(--t-border);
    padding-top: 18px;
    padding-bottom: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    font-size: 12.5px;
    color: var(--t-text-muted);
}
.mp-foot__legal a { color: var(--t-text-muted); }
.mp-foot__pay { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mp-foot__pay img { height: 22px; width: auto; opacity: .85; }
.mp-foot__disclaimer {
    border-top: 1px solid var(--t-border);
    padding: 18px 0 28px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--t-text-muted);
    max-width: 90ch;
}

.mp-totop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 42px; height: 42px;
    border-radius: var(--mp-r);
    background: var(--t-primary);
    color: #fff;
    border: 0;
    display: none;
    place-items: center;
    box-shadow: var(--mp-shadow-sm);
    z-index: 70;
}
.mp-totop.is-on { display: grid; }

/* ==========================================================================
   8. Home
   ========================================================================== */

.mp-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    align-items: center;
}
.mp-hero__body { display: flex; flex-direction: column; gap: 20px; }
.mp-hero__kicker {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--t-primary);
}
.mp-hero__title { font-size: clamp(34px, 4vw, 52px); margin: 0; }
.mp-hero__sub { font-size: 17px; line-height: 1.55; color: var(--t-text-main); margin: 0; max-width: 52ch; text-wrap: pretty; }
.mp-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.mp-hero__art img { border-radius: var(--mp-r); width: 100%; }

/* Regulatory band — every tile is operator-supplied, never generated. */
.mp-reg {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 22px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    align-items: stretch;
}
.mp-reg .mp-supply { min-height: 110px; padding: 12px; }

/* Category tiles */
.mp-cat-tile {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--mp-ink);
}
.mp-cat-tile:hover { border-color: var(--t-primary); text-decoration: none; color: var(--mp-ink); }
.mp-cat-tile__art { aspect-ratio: 4 / 3; border-radius: var(--mp-r); overflow: hidden; background: var(--t-bg-main); }
.mp-cat-tile__art img { width: 100%; height: 100%; object-fit: cover; }
.mp-cat-tile__name { font-weight: 700; font-size: 15px; }
.mp-cat-tile__count { font-size: 12.5px; color: var(--t-text-muted); }

/* How it works */
.mp-steps {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.mp-steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.mp-step { display: flex; gap: 14px; }
.mp-step__n {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--t-bg-secondary);
    color: var(--t-primary);
    font-weight: 800;
    display: grid;
    place-items: center;
    font-size: 14px;
}
.mp-step__t { font-weight: 700; margin-bottom: 4px; }
.mp-step__d { font-size: 14px; color: var(--t-text-main); line-height: 1.5; }

/* Discreet-delivery band */
.mp-band {
    background: var(--t-primary);
    color: #fff;
    border-radius: var(--mp-r);
    padding: 32px 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: center;
}
.mp-band h2 { color: #fff; font-family: var(--t-font-heading); font-weight: 500; font-size: 30px; letter-spacing: -.01em; margin: 0 0 10px; }
.mp-band p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #dbe9ea; text-wrap: pretty; }
.mp-band .mp-ph {
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 10px, rgba(255,255,255,.04) 10px 20px);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}
.mp-band img { border-radius: var(--mp-r); }

/* Pharmacy team */
.mp-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.mp-team__card {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mp-team__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.mp-team__name { font-weight: 700; font-size: 16px; }
.mp-team__title { font-size: 12.5px; color: var(--t-primary); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mp-team__bio { font-size: 14px; line-height: 1.55; color: var(--t-text-main); margin: 0; }

/* Reviewed-by strip (product + article) */
.mp-reviewed {
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    background: var(--t-bg-surface);
    padding: 14px 16px;
}
.mp-reviewed__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.mp-reviewed__label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--t-text-muted); display: block; }
.mp-reviewed__name { font-weight: 700; }
.mp-reviewed__title { font-size: 12.5px; color: var(--t-text-muted); }

/* ==========================================================================
   9. Product cards + grids
   ========================================================================== */

.mp-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.mp-products--wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.mp-prod {
    position: relative;
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--mp-ink);
    height: 100%;
}
.mp-prod:hover { border-color: var(--t-primary); text-decoration: none; color: var(--mp-ink); }
.mp-prod__art { aspect-ratio: 1; border-radius: var(--mp-r); overflow: hidden; background: var(--t-bg-main); }
.mp-prod__art img { width: 100%; height: 100%; object-fit: contain; }
.mp-prod__sub { font-size: 12.5px; color: var(--t-text-muted); }
.mp-prod__name { font-weight: 700; font-size: 15px; line-height: 1.3; margin: 0; }
.mp-prod__foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.mp-prod__price { display: flex; align-items: baseline; gap: 6px; }
.mp-prod__price b { font-weight: 800; font-size: 18px; }
.mp-prod__vat { font-size: 11.5px; color: var(--t-text-muted); }
.mp-prod__cta {
    background: var(--t-primary);
    color: #fff;
    border: 0;
    border-radius: var(--mp-r);
    padding: 10px;
    font-weight: 700;
    font-size: 13.5px;
    text-align: center;
    display: block;
}
.mp-prod:hover .mp-prod__cta { background: var(--t-primary-dark); }

/* Badges — `sku__badges` / `ui-badge` come from //drugs/badges, which is
   rendered both into a card (where they float over the pack shot) and into the
   product panel (where they sit inline above the title). */
.sku__badges { display: flex; gap: 4px; flex-wrap: wrap; }
.mp-prod .sku__badges { position: absolute; top: 10px; left: 10px; flex-direction: column; z-index: 2; }
.ui-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--mp-r-sm);
    background: var(--t-bg-secondary);
    color: var(--t-primary-dark);
}
.ui-badge--orange { background: var(--mp-note-bg); color: var(--mp-note-ink); }
.ui-badge--green  { background: var(--t-success-bg); color: var(--t-success); }
.ui-badge--red    { background: #fdf0ef; color: var(--t-error); }

.mp-stock { font-size: 13.5px; color: var(--t-success); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.mp-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ==========================================================================
   10. Category page
   ========================================================================== */

.mp-cat__intro { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.mp-cat__intro h1 { font-size: 40px; margin: 0; }
.mp-cat__intro p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--t-text-main); text-wrap: pretty; }
.mp-cat__meta { font-size: 12.5px; color: var(--t-text-muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.mp-cat__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
.mp-aside { display: flex; flex-direction: column; gap: 22px; font-size: 14px; }
.mp-aside__group { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--t-border); padding-top: 14px; }
.mp-aside__group:first-of-type { border-top: 0; padding-top: 0; }
.mp-aside__title { font-weight: 700; }
.mp-aside__link { color: var(--t-text-main); padding: 4px 0; }
.mp-aside__link.st-on, .mp-aside__link.is-active { color: var(--t-primary); font-weight: 700; }

.mp-cat__toolbar { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--t-text-muted); }

/* ==========================================================================
   11. Product (sku) page
   `sku__*`, `#prodCount`, `#selectedPils` are the js/template.js contract.
   ========================================================================== */

.mp-sku { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.mp-sku__gallery { display: flex; flex-direction: column; gap: 12px; }
.mp-sku__shot {
    aspect-ratio: 1;
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    background: var(--t-bg-surface);
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 16px;
}
.mp-sku__shot img { max-height: 100%; width: auto; object-fit: contain; }

.mp-sku__panel { display: flex; flex-direction: column; gap: 18px; }
.mp-sku__title { font-size: 36px; margin: 0; }
.mp-sku__facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 14px; }
.mp-sku__facts dt { color: var(--t-text-muted); }
.mp-sku__facts dd { margin: 0; font-weight: 600; }

.sku__group { display: flex; flex-direction: column; gap: 8px; }
.mp-sku__price { display: flex; align-items: baseline; gap: 8px; }
.sku__price ins { text-decoration: none; font-weight: 800; font-size: 30px; color: var(--mp-ink); }
.sku__price del { color: var(--t-text-muted); font-size: 17px; }

/* Dose tabs — one <select> per tab, kept for template.js. */
.sku__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.sku__tabs button, .mp-tab {
    border: 1px solid var(--mp-line-strong);
    background: var(--t-bg-surface);
    color: var(--mp-ink);
    border-radius: var(--mp-r);
    padding: 9px 16px;
    font-weight: 700;
    font-size: 14px;
    min-width: 72px;
}
.sku__tabs button.st-on, .mp-tab.st-on {
    border-color: var(--t-primary);
    background: var(--t-bg-secondary);
    color: var(--t-primary-dark);
}
.sku__tabs-content { display: none; }
.sku__tabs-content.st-on { display: block; }

.mp-sku__buy { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.mp-sku__buy .mp-btn { flex: 1 1 200px; }

.mp-sku__trust { border: 1px solid var(--t-border); border-radius: var(--mp-r); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; background: var(--t-bg-surface); }
.mp-sku__trust b { font-size: 14px; }
.mp-sku__trust span { font-size: 13.5px; line-height: 1.55; color: var(--t-text-main); }
.mp-sku__legal { font-size: 12.5px; line-height: 1.5; color: var(--t-text-muted); border-top: 1px solid var(--t-border); padding-top: 14px; }

.mp-sku__body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 40px; align-items: start; }
.mp-sku__doc { display: flex; flex-direction: column; gap: 28px; font-size: 15.5px; line-height: 1.65; color: var(--mp-ink-2); }
.mp-sku__doc h2 { font-family: var(--t-font-heading); font-weight: 500; font-size: 26px; margin: 0 0 10px; letter-spacing: -.01em; }
.mp-sku__rail { display: flex; flex-direction: column; gap: 16px; }
.mp-sku__rail .mp-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; }

/* Pack-option cards (testpacks) */
.mp-pack { display: flex; flex-direction: column; gap: 10px; }
.mp-pack__opt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 14px;
    cursor: pointer;
    background: var(--t-bg-surface);
}
.mp-pack__opt:hover { border-color: var(--mp-line-strong); }
.mp-pack__opt.is-picked { border-color: var(--t-primary); background: var(--t-bg-secondary); }
.mp-pack__opt input { margin-top: 3px; accent-color: var(--t-primary); }
.mp-pack__name { font-weight: 700; }
.mp-pack__items { font-size: 13px; color: var(--t-text-muted); line-height: 1.5; }
.mp-pack__price { margin-left: auto; text-align: right; font-weight: 800; white-space: nowrap; }
.mp-pack__price del { display: block; font-weight: 500; font-size: 12.5px; color: var(--t-text-muted); }
.mp-pack__badge {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--t-success);
    background: var(--t-success-bg);
    border-radius: var(--mp-r-sm);
    padding: 2px 7px;
}

/* FAQ / accordion — `js-accordion` is bound in app.min.js. */
.mp-faq { display: flex; flex-direction: column; border-top: 1px solid var(--t-border); }
.mp-faq dt {
    border-bottom: 1px solid var(--t-border);
    padding: 14px 0;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.mp-faq dt::after { content: "+"; color: var(--t-primary); font-weight: 700; }
.mp-faq dt.st-on::after { content: "\2212"; }
.mp-faq dd { margin: 0; padding: 0 0 16px; font-size: 14.5px; color: var(--t-text-main); border-bottom: 1px solid var(--t-border); display: none; }

/* Reviews */
.mp-reviews { display: flex; flex-direction: column; gap: 16px; }
.mp-review { border: 1px solid var(--t-border); border-radius: var(--mp-r); background: var(--t-bg-surface); padding: 16px; display: flex; gap: 14px; }
.reviews__item-letters {
    width: 40px; height: 40px; flex: none;
    border-radius: 50%;
    background: var(--t-bg-secondary);
    color: var(--t-primary-dark);
    display: grid; place-items: center;
    font-weight: 800; font-size: 14px;
}
.reviews__item-name { font-weight: 700; }
.reviews__item-date, .reviews__item-time { font-size: 12.5px; color: var(--t-text-muted); }
.reviews__item-text { font-size: 14.5px; line-height: 1.6; color: var(--t-text-main); }
.mp-stars { display: inline-flex; gap: 2px; color: var(--mp-note-line); font-size: 14px; letter-spacing: 1px; }

/* ==========================================================================
   12. Blog + article
   ========================================================================== */

.mp-blog__head { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.mp-blog__head h1 { font-size: 44px; margin: 0; }
.mp-blog__head p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--t-text-main); text-wrap: pretty; }

.mp-lead {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 24px;
    color: var(--mp-ink);
    align-items: center;
}
.mp-lead:hover { border-color: var(--t-primary); text-decoration: none; color: var(--mp-ink); }
.mp-lead__art { aspect-ratio: 16 / 10; border-radius: var(--mp-r); overflow: hidden; }
.mp-lead__art img { width: 100%; height: 100%; object-fit: cover; }
.mp-lead__body { display: flex; flex-direction: column; gap: 12px; }
.mp-lead__title { font-family: var(--t-font-heading); font-size: 32px; line-height: 1.15; font-weight: 500; letter-spacing: -.01em; }
.mp-lead__excerpt { font-size: 15px; line-height: 1.55; color: var(--t-text-main); }

.mp-post {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--mp-ink);
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 16px;
    height: 100%;
}
.mp-post:hover { border-color: var(--t-primary); text-decoration: none; color: var(--mp-ink); }
.mp-post__art { aspect-ratio: 16 / 10; border-radius: var(--mp-r); overflow: hidden; }
.mp-post__art img { width: 100%; height: 100%; object-fit: cover; }
.mp-post__title { font-family: var(--t-font-heading); font-size: 21px; line-height: 1.25; font-weight: 500; margin: 0; }
.mp-post__meta { font-size: 12.5px; color: var(--t-text-muted); margin-top: auto; }

.mp-article__head { max-width: 780px; display: flex; flex-direction: column; gap: 16px; }
.mp-article__head h1 { font-size: clamp(32px, 4vw, 48px); margin: 0; }
.mp-article__standfirst { margin: 0; font-size: 18px; line-height: 1.5; color: var(--t-text-main); text-wrap: pretty; }
.mp-article__byline {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid var(--t-border);
    border-bottom: 1px solid var(--t-border);
    padding: 14px 0;
    font-size: 13.5px;
    color: var(--t-text-main);
}
.mp-article__byline .mp-eyebrow { font-size: 11px; display: block; }
.mp-article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.mp-article__rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }
.mp-article__rail .mp-card { padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.mp-toc a { display: block; color: var(--t-primary); line-height: 1.4; }

/* ==========================================================================
   13. Long-form prose (CMS output: pages, articles, category copy)
   ========================================================================== */

.ui-wysiwyg, .mp-prose {
    max-width: 78ch;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--mp-ink-2);
}
.mp-prose--wide { max-width: none; }
.ui-wysiwyg h1, .mp-prose h1 { font-family: var(--t-font-heading); font-weight: 500; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.015em; margin: 0 0 18px; }
.ui-wysiwyg h2, .mp-prose h2 { font-family: var(--t-font-heading); font-weight: 500; font-size: 28px; letter-spacing: -.01em; margin: 32px 0 12px; }
.ui-wysiwyg h3, .mp-prose h3 { font-size: 19px; font-weight: 700; margin: 26px 0 10px; }
.ui-wysiwyg h4, .mp-prose h4 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
.ui-wysiwyg p, .mp-prose p { margin: 0 0 1.1em; }
.ui-wysiwyg ul, .ui-wysiwyg ol, .mp-prose ul, .mp-prose ol { margin: 0 0 1.1em; padding-left: 22px; }
.ui-wysiwyg li, .mp-prose li { list-style: disc; margin-bottom: .5em; }
.ui-wysiwyg ol li, .mp-prose ol li { list-style: decimal; }
.ui-wysiwyg img, .mp-prose img { border-radius: var(--mp-r); margin: 22px 0; }
.ui-wysiwyg blockquote, .mp-prose blockquote {
    margin: 22px 0;
    padding: 16px 20px;
    background: var(--t-bg-secondary);
    border-radius: var(--mp-r);
    color: var(--t-primary-dark);
    font-size: 15.5px;
}
.ui-wysiwyg table, .mp-prose table { margin: 22px 0; font-size: 14.5px; }
.ui-wysiwyg th, .ui-wysiwyg td, .mp-prose th, .mp-prose td {
    border: 1px solid var(--t-border);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
.ui-wysiwyg th, .mp-prose th { background: var(--t-bg-secondary); font-weight: 700; color: var(--mp-ink); }
.ui-wysiwyg a, .mp-prose a { text-decoration: underline; text-underline-offset: 2px; }

/* The content generator emits these two around FAQ blocks. */
.faq-question { font-size: 18px; font-weight: 700; margin: 24px 0 8px; color: var(--mp-ink); }
.faq-answer { margin-bottom: 12px; }

.mp-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: start; }

/* ==========================================================================
   14. Contacts
   ========================================================================== */

.mp-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; align-items: start; }
.mp-contact__facts {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--t-text-main);
}
.mp-contact__fact b { display: block; color: var(--mp-ink); margin-bottom: 4px; }

/* ==========================================================================
   15. Pagination
   ========================================================================== */

.mp-pager { display: flex; justify-content: center; padding-top: 32px; }
.pagination__menu { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination__menu li { list-style: none; }
.pagination__menu a, .pagination__link a {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    background: var(--t-bg-surface);
    color: var(--mp-ink);
    font-weight: 600;
    font-size: 14px;
}
.pagination__menu a:hover { border-color: var(--t-primary); color: var(--t-primary); text-decoration: none; }
.pagination__menu .is-active a { background: var(--t-primary); border-color: var(--t-primary); color: #fff; }
.pagination__menu .hidden { display: none; }

/* ==========================================================================
   16. Cart + checkout
   These views keep the engine's own class vocabulary (`cart__*`,
   `checkout__*`, `ui-*`, `selectric-*`) because js/app.min.js, template.js
   and checkout.js bind to it. Only the skin below is medipuk's.
   ========================================================================== */

.mp-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }

.cart__table { background: var(--t-bg-surface); border: 1px solid var(--t-border); border-radius: var(--mp-r); overflow: hidden; }
.cart__table table { width: 100%; }
.cart__table th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-text-muted);
    padding: 12px 14px;
    border-bottom: 1px solid var(--t-border);
    background: var(--t-bg-main);
}
.cart__table td { padding: 14px; border-bottom: 1px solid var(--t-border-light); vertical-align: middle; font-size: 14px; }
.cart__table tr:last-child td { border-bottom: 0; }
.cart__table-title { font-weight: 700; color: var(--mp-ink); }
.cart__table-price { font-weight: 800; white-space: nowrap; }
.cart__table-price.summ { font-size: 16px; }
.cart__table-shipping-method, .cart__table-discount { font-size: 14px; }

.mp-summary {
    position: sticky;
    top: 20px;
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mp-summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--t-text-main); }
.mp-summary__row--total {
    border-top: 1px solid var(--t-border);
    padding-top: 12px;
    font-size: 18px;
    font-weight: 800;
    color: var(--mp-ink);
}

.checkout__section { margin-bottom: 32px; }
.checkout__title {
    font-family: var(--t-font-heading);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -.01em;
    margin: 0 0 16px;
}
.checkout__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }

/* The engine wraps every field in `.ui-placeholder`; `.ui-select` wraps a
   <select> that selectric may upgrade. Style both, plus selectric's output. */
.ui-placeholder { position: relative; margin-bottom: 16px; }
.ui-placeholder label, .ui-placeholder__label { font-size: 12.5px; font-weight: 700; color: var(--t-text-muted); display: block; margin-bottom: 6px; }
.ui-placeholder__required::after, .ui-placeholder__required_tmp::after { content: " *"; color: var(--t-error); }
.ui-placeholder input, .ui-placeholder select, .ui-placeholder textarea,
.ui-select select {
    width: 100%;
    background: var(--t-bg-surface);
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-r);
    padding: 11px 13px;
    font-size: 14.5px;
    color: var(--mp-ink);
}
.ui-placeholder input:focus, .ui-placeholder select:focus, .ui-placeholder textarea:focus { border-color: var(--t-primary); outline: none; }
.ui-placeholder.is-error input, .ui-placeholder.is-error select, .ui-select.is-error .selectric { border-color: var(--t-error); }
.ui-validate { color: var(--t-error); font-size: 12.5px; font-weight: 600; display: block; margin-top: 4px; }
.ui-placeholder__help { font-size: 12.5px; color: var(--t-text-muted); }

.selectric-wrapper { position: relative; }
.selectric {
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-r);
    background: var(--t-bg-surface);
    display: flex;
    align-items: center;
}
.selectric .label { flex: 1; padding: 11px 13px; font-size: 14.5px; color: var(--mp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selectric .button, .selectric .arrow { width: 40px; display: grid; place-items: center; color: var(--t-primary); }
.selectric-open .selectric { border-color: var(--t-primary); }
/* Selectric ships NO stylesheet of its own — the theme owns the whole widget,
   including whether the dropdown is visible. Without the display:none below, every
   <select> the plugin upgrades paints its option list open on the page. */
.selectric-items {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 100%;
    width: auto !important;
    margin-top: 4px;
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    box-shadow: var(--mp-shadow);
    z-index: 500;
    overflow: hidden;
}
.selectric-open .selectric-items { display: block; }
.selectric-items .selectric-scroll { max-height: 280px; overflow-x: hidden; overflow-y: auto; }
.selectric-items ul { margin: 0; padding: 4px 0; list-style: none; }
.selectric-items li {
    display: block;
    padding: 8px 13px;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--t-text-main);
}
.selectric-items li:hover, .selectric-items li.highlighted { background: var(--t-bg-secondary); }
.selectric-items li.selected { color: var(--mp-ink); font-weight: 700; }
.selectric-items li:empty { display: none; }
.selectric-open .selectric .arrow { transform: rotate(180deg); }

/* The original <select> is moved into this wrapper and must stay out of flow.
   `nativeOnMobile` re-exposes it as a transparent overlay on touch devices, which
   is the `selectric-is-native` case. */
/* Selectric's keyboard-search field. It is a real, full-width <input>; with no
   rule for it the plugin paints an empty box under every <select> it upgrades. */
.selectric-input {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 1px !important; height: 1px !important;
    margin: 0 !important; padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: none !important;
    outline: none !important;
    background: none !important;
}

.selectric-hide-select { position: relative; overflow: hidden; width: 0; height: 0; }
.selectric-hide-select select { position: absolute; left: -100%; }
.selectric-hide-select.selectric-is-native { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; }
.selectric-hide-select.selectric-is-native select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; opacity: 0; z-index: 1; box-sizing: border-box;
}

/* The header strip's two switchers sit on the teal bar and are narrow. */
.mp-strip__tools .selectric-wrapper { min-width: 108px; }
.mp-strip__tools .selectric {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.mp-strip__tools .selectric .label { color: #fff; padding: 4px 8px; font-size: 12.5px; }
.mp-strip__tools .selectric .button, .mp-strip__tools .selectric .arrow { width: 26px; color: #fff; }
.mp-strip__tools .selectric-items { left: auto; right: 0; text-align: left; }

/* Shipping / payment choice rows */
.ui-check { display: block; }
.ui-check label, .mp-choice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 14px;
    background: var(--t-bg-surface);
    cursor: pointer;
    margin-bottom: 10px;
}
.ui-check input, .mp-choice input { margin-top: 3px; accent-color: var(--t-primary); }
.ui-check input:checked ~ *, .mp-choice input:checked ~ * { color: var(--mp-ink); }
.ui-check__title { font-weight: 700; }
.ui-check__text { font-size: 13px; color: var(--t-text-muted); }
.ui-check__price { margin-left: auto; font-weight: 800; white-space: nowrap; }

.ui-discount { display: flex; gap: 8px; }
.ui-discount__input { flex: 1; }
.ui-discount.is-error .ui-discount__input input { border-color: var(--t-error); }
.ui-discount.is-success .ui-discount__input input { border-color: var(--t-success); }

.ui-payment__check-input { accent-color: var(--t-primary); }
.ui-warning { background: var(--mp-note-bg); border: 1px solid var(--mp-note-line); color: var(--mp-note-ink); border-radius: var(--mp-r); padding: 12px 14px; font-size: 13.5px; }

.js-modal { display: none; }
.js-modal.is-open {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    background: rgba(28, 35, 38, .5);
    z-index: 100;
    padding: 20px;
}
.js-modal .mp-modal__box { background: var(--t-bg-surface); border-radius: var(--mp-r); padding: 24px; max-width: 460px; width: 100%; }

.mp-thanks { max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 16px; }

/* Legacy engine helpers a few shared partials still emit. The grid itself is
   defined once in section 20, beside the rest of the engine vocabulary. */
.text-center { text-align: center; }
.hidden { display: none !important; }
.ui-link { font-weight: 600; }
.ui-alert { border-radius: var(--mp-r); padding: 13px 16px; font-size: 14px; margin-bottom: 18px; border: 1px solid transparent; }
.ui-alert--green { background: #edf7f0; border-color: #bfdfc9; color: #14532c; }
.ui-alert--red { background: #fdf0ef; border-color: #efc4c1; color: var(--t-error); }
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mp-r);
    padding: 11px 20px;
    font-weight: 700;
    font-size: 14.5px;
    background: var(--t-primary);
    color: #fff;
    border: 1px solid transparent;
}
.ui-btn:hover { background: var(--t-primary-dark); color: #fff; text-decoration: none; }
.ui-btn--blue { background: var(--t-primary); color: #fff; }

/* ==========================================================================
   17. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
    .mp-mega__in { grid-template-columns: 200px minmax(0, 1fr); }
    .mp-mega__aside { display: none; }
    .mp-article__layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
}

@media (max-width: 900px) {
    .mp-cat__layout { grid-template-columns: minmax(0, 1fr); }
    .mp-cat__layout .mp-aside { display: none; }
    .mp-sku__body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .mp-article__layout { grid-template-columns: minmax(0, 1fr); }
    .mp-article__rail { position: static; }
    .mp-page__layout { grid-template-columns: minmax(0, 1fr); }
    .mp-checkout { grid-template-columns: minmax(0, 1fr); }
    .mp-summary { position: static; }
}

@media (max-width: 760px) {
    :root { --mp-pad: 16px; }
    body { font-size: 14.5px; }
    /* The strip is one compact scrollable line, not three stacked rows. */
    .mp-strip { font-size: 12px; }
    .mp-strip__in {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 14px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .mp-strip__in::-webkit-scrollbar { display: none; }
    .mp-strip__claims { flex-wrap: nowrap; gap: 14px; }
    .mp-strip__claim { white-space: nowrap; }
    .mp-strip__claim + .mp-strip__claim { display: none; }
    .mp-strip__tools { flex: none; }

    /* The nav row STAYS -- it is the design's layout at every width. It scrolls
       sideways, led by the teal All-categories button; the separate grey "Menu"
       box is gone. */
    .mp-nav { display: flex; gap: 16px; }
    .mp-nav::-webkit-scrollbar { display: none; }
    .mp-nav__link--end { margin-left: 0; }
    .mp-drawer-btn { display: none !important; }

    .mp-head__bar { gap: 10px 14px; }
    .mp-head__bar .hd__logo { order: 1; margin-right: auto; }
    .mp-head__links { order: 2; margin-left: auto; gap: 14px; font-size: 13px; }
    .hd__search.mp-search { order: 3; flex: 1 1 100%; }
    .mp-logo__tag { display: block; font-size: 9.5px; }
    .mp-hero__title { font-size: 32px; }
    .mp-cat__intro h1, .mp-blog__head h1 { font-size: 30px; }
    .mp-sku__title { font-size: 28px; }
    .mp-section__title, .mp-band h2 { font-size: 24px; }
    .mp-stack { gap: 40px; }
    .mp-lead__title { font-size: 26px; }
    /* The flyout has no room here; the button opens the drawer instead
       (see initDrawer in js/medipuk.js). */
    .mp-mega { display: none !important; }
    .cart__table thead { display: none; }
    .cart__table td { display: block; border: 0; padding: 6px 14px; }
    .cart__table tr { display: block; border-bottom: 1px solid var(--t-border); padding: 10px 0; }
    .mp-foot__pay { margin-left: 0; }
}

@media (max-width: 520px) {
    .mp-mega__picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .mp-prod { padding: 12px; }
    .mp-reg { padding: 16px; }
}

@media print {
    .mp-strip, .mp-head, .mp-foot, .mp-totop, .mp-drawer, .mp-scrim { display: none !important; }
    body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   18. Sticky buy bar (product page)
   Appears once the buy panel scrolls out of view; `sku__sticky-item-title
   small` is the hook js/template.js writes the selected dose into.
   ========================================================================== */

.mp-sku__stickybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--t-bg-surface);
    border-top: 1px solid var(--t-border);
    box-shadow: 0 -8px 24px -14px rgba(28, 35, 38, .3);
    transform: translateY(100%);
    transition: transform .2s ease;
    z-index: 75;
}
.mp-sku__stickybar.is-on { transform: none; }
.mp-sku__stickybar .mp-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.mp-sku__stickybar img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.sku__sticky-item-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.sku__sticky-item-title small { display: block; font-weight: 500; font-size: 12.5px; color: var(--t-text-muted); }
.mp-sku__stickybar .mp-sku__price { margin-left: auto; }
.mp-sku__stickybar .sku__price ins { font-size: 20px; }

@media (max-width: 760px) {
    .mp-sku__stickybar img, .mp-sku__stickybar .sku__sticky-item-title small { display: none; }
    .mp-sku__stickybar .mp-btn { padding: 11px 16px; font-size: 14px; }
}

/* ==========================================================================
   19. Cookie notice
   ========================================================================== */

.mp-cookiebar {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 85;
    padding: 16px 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: var(--mp-shadow);
}
.mp-cookiebar__text { flex: 1 1 320px; font-size: 13.5px; line-height: 1.55; color: var(--t-text-main); }
.mp-cookiebar__text strong { display: block; color: var(--mp-ink); }

/* ==========================================================================
   20. Engine component vocabulary
   --------------------------------------------------------------------------
   The cart, checkout, review and contact views are the ML-shop engine's own
   templates, ported as-is because js/app.min.js, js/template.js and
   js/checkout.js bind to their class names and the checkout is the one flow
   that must not break. medipuk ships no vendor framework, so the grid and the
   `ui-*` components those views assume are defined here — in medipuk's own
   idiom, not the framework's.
   ========================================================================== */

/* --- 12-column flex grid (only the tracks the ported views actually use) --- */
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; gap: 0; }
.row > [class*="col"] { padding: 0 8px; min-width: 0; }
.col      { flex: 1 1 0; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-6    { flex: 0 0 50%; max-width: 50%; }
.col-12   { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
    .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-md-6  { flex: 0 0 50%; max-width: 50%; }
    .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 767.98px) {
    .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
    .col-lg      { flex: 1 1 0; }
    /* col-lg-3 was missing entirely, so the checkout's four payment columns had
       no width at all and each shrank to its own logos -- 77px to 190px. */
    .col-lg-3    { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4    { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-lg-6    { flex: 0 0 50%; max-width: 50%; }
    .col-lg-12   { flex: 0 0 100%; max-width: 100%; }
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .is-lg-hidden { display: none !important; }
}
@media (max-width: 991.98px) {
    .col-lg, .col-lg-3, .col-lg-4, .col-lg-6, .col-lg-12, .col-lg-auto {
        flex: 0 0 100%; max-width: 100%;
    }
    .is-lg-visible { display: none !important; }
}
@media (min-width: 1200px) {
    .col-xl      { flex: 1 1 0; }
    .col-xl-auto { flex: 0 0 auto; width: auto; }
}

.spacer-08 { height: 8px; }
.spacer-16 { height: 16px; }
.spacer-24 { height: 24px; }
.is-hidden { display: none !important; }
.align-items-center { align-items: center; }
.text-grey { color: var(--t-text-muted); }
.mp-glyph { display: inline-block; line-height: 1; }

/* --- Buttons: the engine's size/colour modifiers map onto .mp-btn ---------- */
.ui-btn--32 { padding: 6px 12px; font-size: 13px; }
.ui-btn--40 { padding: 9px 16px; font-size: 14px; }
.ui-btn--48 { padding: 12px 20px; }
.ui-btn--56 { padding: 15px 24px; font-size: 15.5px; }
.ui-btn--fullwidth { width: 100%; }
.ui-btn--light {
    background: var(--t-bg-surface);
    color: var(--t-primary);
    border-color: var(--mp-line-strong);
}
.ui-btn--light:hover { background: var(--t-bg-secondary); color: var(--t-primary-dark); }
.ui-link--blue { color: var(--t-primary); }
.ui-link--dark { color: var(--mp-ink); }

/* --- Field wrapper -------------------------------------------------------- */
/* The engine emits <input> BEFORE its <label>, then a required marker. Grid
   placement puts them in reading order without touching the templates. */
.ui-placeholder {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 6px;
    margin-bottom: 16px;
}
.ui-placeholder__label { grid-row: 1; grid-column: 1; margin: 0 0 6px; }
.ui-placeholder__required, .ui-placeholder__required_tmp { grid-row: 1; grid-column: 2; margin-bottom: 6px; }
.ui-placeholder__required::after, .ui-placeholder__required_tmp::after { content: "*"; color: var(--t-error); font-weight: 700; }
.ui-placeholder > input,
.ui-placeholder > textarea,
.ui-placeholder > select,
.ui-placeholder > .ui-select,
.ui-placeholder > .ui-placeholder__select,
.ui-placeholder > .selectric-wrapper,
.ui-placeholder__code { grid-row: 2; grid-column: 1 / -1; }
.ui-validate, .errow { grid-row: 3; grid-column: 1 / -1; }
/* The helper trigger belongs beside its LABEL (row 1), not under the
   input in the error row -- that is what put the CVV '?' below the box. */
.ui-placeholder__help { grid-row: 1; grid-column: 2; justify-self: end;
    align-self: center; margin-bottom: 6px; }
.ui-placeholder textarea { min-height: 150px; resize: vertical; }
.ui-placeholder__code img { border-radius: var(--mp-r); border: 1px solid var(--t-border); }
.ui-placeholder__tooltip { font-size: 12.5px; color: var(--t-text-muted); }
.ui-label { font-size: 12.5px; font-weight: 700; color: var(--t-text-muted); display: block; margin-bottom: 6px; }

/* --- Number stepper (cart rows, test packs) ------------------------------- */
.ui-number {
    display: inline-flex;
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-r);
    overflow: hidden;
    background: var(--t-bg-surface);
}
.ui-number__minus, .ui-number__plus {
    border: 0;
    background: transparent;
    width: 38px;
    font-size: 17px;
    line-height: 1;
    color: var(--mp-ink);
}
.ui-number__minus:hover, .ui-number__plus:hover { background: var(--t-bg-secondary); }
.ui-number__input {
    width: 50px;
    border: 0;
    border-left: 1px solid var(--mp-line-strong);
    border-right: 1px solid var(--mp-line-strong);
    text-align: center;
    font-weight: 700;
    padding: 8px 0;
}
.ui-number--30 .ui-number__minus, .ui-number--30 .ui-number__plus { width: 28px; }
.ui-number--30 .ui-number__input { width: 40px; padding: 4px 0; }
.ui-number--56 .ui-number__minus, .ui-number--56 .ui-number__plus { width: 46px; }
.ui-number--56 .ui-number__input { padding: 14px 0; }

/* --- Discount code -------------------------------------------------------- */
.ui-discount { display: flex; gap: 8px; align-items: stretch; }
.ui-discount__input { flex: 1 1 auto; }
.ui-discount__input input { width: 100%; }
.ui-discount__icon { display: none; }

/* --- Star rating ---------------------------------------------------------- */
.ui-rating { display: inline-flex; gap: 2px; color: var(--t-border); font-size: 15px; }
.ui-rating[data-rating="1"] .mp-glyph:nth-child(-n+1),
.ui-rating[data-rating="2"] .mp-glyph:nth-child(-n+2),
.ui-rating[data-rating="3"] .mp-glyph:nth-child(-n+3),
.ui-rating[data-rating="4"] .mp-glyph:nth-child(-n+4),
.ui-rating[data-rating="5"] .mp-glyph:nth-child(-n+5) { color: var(--mp-note-line); }

/* --- Reviews -------------------------------------------------------------- */
.reviews__title, .request__title, .statistic-aside__head { font-family: var(--t-font-heading); font-weight: 500; font-size: 24px; letter-spacing: -.01em; margin-bottom: 16px; }
.reviews__list { display: flex; flex-direction: column; gap: 16px; }
.reviews__list > li { list-style: none; }
.reviews__item {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 16px;
}
.reviews__item-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.reviews__item-verified { font-size: 12.5px; color: var(--t-success); font-weight: 600; }
.reviews__item-body { font-size: 14.5px; line-height: 1.6; color: var(--t-text-main); }
.reviews__item-foot { margin-top: 10px; }
.reviews__item-helpful { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--t-text-muted); }
.reviews__item-helpful a { cursor: pointer; }
.statistic-aside {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 18px;
}
.statistic-aside__number { font-size: 34px; font-weight: 800; line-height: 1; }
.statistic-aside__counter { font-size: 13px; color: var(--t-text-muted); }
.statistic-aside__table { width: 100%; font-size: 13px; margin-top: 12px; }
.ui-progress { background: var(--t-border-light); border-radius: 999px; height: 7px; overflow: hidden; }
.ui-progress__bar { background: var(--mp-note-line); height: 100%; }
.ui-vote { display: flex; gap: 4px; }
.ui-vote__input { position: absolute; opacity: 0; }
.ui-vote__star { font-size: 22px; line-height: 1; color: var(--t-border); cursor: pointer; }
.ui-vote__input:checked ~ .ui-vote__star,
.ui-vote__group:hover .ui-vote__star { color: var(--t-warning); }
.ui-vote__input:focus-visible ~ .ui-vote__star { outline: 2px solid var(--t-primary); outline-offset: 2px; }
/* The engine marks each rating category with <mark>, which browsers paint
   highlighter-yellow by default. It is a field label, not a highlight. */
.ui-vote__mark {
    display: block;
    margin-top: 4px;
    background: none;
    color: var(--t-text-muted);
    font-size: 13px;
    line-height: 1.3;
    cursor: default;
}
.ui-vote__group { margin-bottom: 14px; }
.ui-vote { display: block; }
.request { margin-top: 32px; }
.request__form { background: var(--t-bg-surface); border: 1px solid var(--t-border); border-radius: var(--mp-r); padding: 20px; }

/* --- Cart ----------------------------------------------------------------- */
.cart { padding-bottom: 8px; }
.cart__title { font-family: var(--t-font-heading); font-weight: 500; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.015em; margin: 0 0 24px; }
.cart__wrapper { display: flex; flex-direction: column; gap: 20px; }
.cart__action { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.cart__table-item { display: flex; gap: 12px; align-items: center; }
.cart__table-item-image img { width: 56px; height: 56px; object-fit: contain; }
.cart__table-item-title { font-weight: 700; color: var(--mp-ink); }
.cart__table-text { font-size: 12.5px; color: var(--t-text-muted); }
.cart__table-delete button, .cart__table-delete a { background: transparent; border: 0; color: var(--t-text-muted); font-size: 18px; line-height: 1; }
.cart__table-delete button:hover { color: var(--t-error); }
.cart__table-total { font-size: 18px; font-weight: 800; }
.cart__table-shipping, .cart__table-discount { padding: 14px; border-top: 1px solid var(--t-border); }

/* --- Checkout ------------------------------------------------------------- */
.checkout { display: flex; flex-direction: column; gap: 8px; }
.checkout__section { margin-bottom: 28px; }
/* Pay button + terms. The label here IS the .ui-check element, so the theme's
   `.ui-check label` box rule never applied and the row had no alignment at all. */
.checkout__complete {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--t-border);
}
.checkout__complete > .ui-btn { min-width: 220px; }
.checkout__complete label.ui-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.checkout__complete label.ui-check .ui-check__checkbox { margin-top: 2px; }
.checkout__complete label.ui-check .ui-check__text {
    font-size: 13px; line-height: 1.55; color: var(--t-text-muted);
}
.checkout__complete label.ui-check a { color: inherit; text-decoration: underline; }
.checkout__complete label.ui-check a:hover { color: var(--t-primary); }
.checkout__card, .checkout__delivery, .checkout__payment, .checkout__shipping { margin-bottom: 8px; }

/* A checkbox and its label are a ROW. As a column the bullet sat orphaned
   above the text on the insurance, alternate-address and terms lines. */
.ui-check__group { display: flex; align-items: flex-start; gap: 10px; }
.ui-check__group .ui-check__text { font-size: 13.5px; line-height: 1.5; }
.ui-check__group .ui-check__checkbox { margin-top: 2px; }
.ui-check__input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-check__shipping, .ui-check__method {
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 14px;
    background: var(--t-bg-surface);
    cursor: pointer;
}
.ui-check__input:checked + .ui-check__shipping,
.ui-check__input:checked + .ui-check__method { border-color: var(--t-primary); background: var(--t-bg-secondary); }
.ui-check__input:focus-visible + .ui-check__shipping,
.ui-check__input:focus-visible + .ui-check__method { outline: 2px solid var(--t-primary); outline-offset: 2px; }
.checkout__shipping .row { align-items: stretch; }
.checkout__shipping [class*="col-lg-4"] { display: flex; margin-bottom: 12px; }
.checkout__shipping .ui-check,
.checkout__shipping label.ui-check { width: 100%; }
.checkout__shipping .ui-check__shipping { width: 100%; min-height: 64px; }
.ui-check__checkbox {
    width: 18px; height: 18px; flex: none;
    border: 1px solid var(--mp-line-strong);
    border-radius: 50%;
    display: inline-block;
    position: relative;
}
/* The span is sometimes the input's own sibling and sometimes nested inside one;
   cover both, or the tick silently never renders. */
/* The engine gives radios and checkboxes the same proxy class, so every
   checkbox was drawn as a round radio. Square the actual checkboxes. */
.ui-check__input[type="checkbox"] + .ui-check__checkbox,
.ui-check__input[type="checkbox"] ~ * .ui-check__checkbox { border-radius: 4px; }
.ui-check__input[type="checkbox"]:checked + .ui-check__checkbox::after,
.ui-check__input[type="checkbox"]:checked ~ * .ui-check__checkbox::after { border-radius: 2px; }

.ui-check__input:checked + .ui-check__checkbox::after,
.ui-check__input:checked ~ .ui-check__checkbox::after,
.ui-check__input:checked + * .ui-check__checkbox::after,
.ui-check__input:checked ~ * .ui-check__checkbox::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--t-primary);
}
.ui-check__method-list {
    display: flex; gap: 10px; align-items: center; justify-content: center;
    flex-wrap: wrap; margin: 0; padding: 0; list-style: none;
}
/* One height for every mark, whatever its intrinsic size: the card SVGs are
   86x48, the bank-transfer image 89x20, so untouched they made tiles of wildly
   different heights sitting in equal columns. */
.ui-check__method-list > li { display: flex; align-items: center; }
.ui-check__method-list img,
.ui-check__method-list svg { height: 36px; width: auto; max-width: 100%; display: block; }
/* The bank-transfer mark carries baked-in text; slightly smaller keeps it in
   proportion, and the "unselected" grey artwork is lifted so it no longer reads
   as disabled. */
.ui-check__method-list img[id="wire_icon"] { height: 30px; opacity: .85; }
.ui-check__input:checked + .ui-check__method .ui-check__method-list img[id="wire_icon"] { opacity: 1; }

/* The tile fills its column so all four payment options are the same size. */
.checkout__payment .row { align-items: stretch; }
.checkout__payment [class*="col"] { display: flex; margin-bottom: 12px; }
.checkout__payment .ui-check { display: flex; width: 100%; }
.checkout__payment .ui-check > label,
.checkout__payment label.ui-check { width: 100%; }
.checkout__payment .ui-check__method {
    width: 100%;
    min-height: 112px;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 18px 16px 16px;
    position: relative;
}
/* The option's name, under its marks. */
.ui-check__method-label {
    font-size: 14px; font-weight: 700; line-height: 1.2;
    color: var(--mp-ink); text-align: center;
}
/* A radio you can see: a customer should not have to infer "this is a choice"
   from a tint. */
.checkout__payment .ui-check__method::before {
    content: ""; position: absolute; top: 10px; left: 10px;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--mp-line-strong); background: #fff;
}
.checkout__payment .ui-check__input:checked + .ui-check__method {
    border-color: var(--t-primary);
    box-shadow: inset 0 0 0 1px var(--t-primary);
}
.checkout__payment .ui-check__input:checked + .ui-check__method::before {
    border-color: var(--t-primary); background: var(--t-primary);
    box-shadow: inset 0 0 0 3px #fff;
}
.checkout__payment .ui-check__method:hover { border-color: var(--t-primary); }

/* Card block. `.ui-card__back` is an EMPTY decorative div in the engine's
   markup — markeu painted a card graphic into it. Laying the two out side by
   side hands half the width to nothing and squeezes the real form into the
   remainder, so the back is simply not drawn here. */
.ui-card { display: block; }
.ui-card__back { display: none; }
.ui-card__front { width: 100%; }

.ui-expiration { display: flex; flex-direction: column; gap: 6px; }
.ui-expiration__label { font-size: 12.5px; font-weight: 700; color: var(--t-text-muted); }
.ui-expiration__group .row { margin: 0 -4px; }
.ui-expiration__group .row > [class*="col"] { padding: 0 4px; }
.ui-expiration__group .ui-select select { padding-left: 10px; padding-right: 6px; }

/* Card brands read as a row of chips, not a stack of full-width bars. */
.ui-payment { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ui-payment__check { display: block; position: relative; margin: 0; }
.ui-payment__check-input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-payment__check-btn {
    display: grid;
    place-items: center;
    min-width: 92px;
    min-height: 52px;
    padding: 8px 14px;
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    background: var(--t-bg-surface);
    cursor: pointer;
}
.ui-payment__check-btn svg, .ui-payment__check-btn img { max-width: 100%; height: auto; }
.ui-payment__check:hover .ui-payment__check-btn { border-color: var(--mp-line-strong); }
.ui-payment__check-input:checked + .ui-payment__check-btn,
.ui-payment__check-input:checked ~ .ui-payment__check-btn {
    border-color: var(--t-primary);
    background: var(--t-bg-secondary);
    box-shadow: inset 0 0 0 1px var(--t-primary);
}
.ui-payment__check-input:focus-visible + .ui-payment__check-btn { outline: 2px solid var(--t-primary); outline-offset: 2px; }

/* The CVV helper is a popover, not an inline illustration. app.min.js toggles
   `is-open` on the trigger; without a rule the whole card diagram renders in the
   middle of the form. */
.ui-placeholder__help { position: relative; display: inline-flex; align-items: center; cursor: pointer; color: var(--t-text-muted); }
.ui-placeholder__help svg { width: 18px; height: 18px; }
.ui-placeholder__tooltip {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: 260px;
    max-width: 70vw;
    padding: 8px;
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    box-shadow: var(--mp-shadow);
    z-index: 80;
}
.ui-placeholder__help.is-open .ui-placeholder__tooltip { display: block; }
.ui-placeholder__tooltip img { width: 100%; height: auto; }
.bankdetails, .invoice { font-size: 14px; line-height: 1.6; }

/* Modal used by the checkout warnings */
.ui-modal { background: var(--t-bg-surface); border-radius: var(--mp-r); padding: 24px; max-width: 460px; width: 100%; }
.ui-modal__text { font-size: 14.5px; line-height: 1.6; color: var(--t-text-main); }
.ui-modal__action { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* Thank-you / order-status pages */
.orderpage-levels { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; font-size: 13.5px; }
.orderpage-levels .active { color: var(--t-primary); font-weight: 700; }
.page, .page__wrapper { display: block; }
.page__title { font-family: var(--t-font-heading); font-weight: 500; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.015em; margin: 0 0 20px; }
.page__wrapper { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: start; }
.page__back { margin-top: 24px; }
@media (max-width: 900px) { .page__wrapper { grid-template-columns: minmax(0, 1fr); } }

.pagination__status { text-align: center; font-size: 13px; color: var(--t-text-muted); margin-top: 10px; }

/* ==========================================================================
   21. Remaining engine containers
   Everything the ported views emit that sections 16-20 did not already cover:
   the header's search dropdown, the reviews page, and the leftover cart and
   checkout parts. Without these the pages render, unstyled — which is easy to
   miss until a shop is live.
   ========================================================================== */

/* Header search autocomplete rows (the panel itself is in section 5) */
.hd__search-input { width: 100%; }
.hd__search-item { display: flex; gap: 12px; align-items: center; width: 100%; }
.hd__search-item-image img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.hd__search-item-desc { display: flex; flex-direction: column; min-width: 0; }

/* Product page: the block holding the dose panes */
.sku__tabs-wrapper { display: flex; flex-direction: column; gap: 16px; }

/* Reviews page (drugsTestimonials) */
.page__content { min-width: 0; }
.page__sidebar { min-width: 0; }
.reviews__wrapper { display: flex; flex-direction: column; gap: 16px; }
.reviews__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.reviews__head .reviews__title { margin: 0; }
.reviews__action { font-size: 14px; font-weight: 600; }
.reviews__body { display: flex; flex-direction: column; gap: 16px; }
.reviews__item-rating { margin-left: auto; }
.statistic-aside__body { display: flex; flex-direction: column; gap: 12px; }
.statistic-aside__rating { display: flex; align-items: center; gap: 8px; }
.ui-vote__rating { display: flex; gap: 4px; }
.vote-yes, .vote-no { cursor: pointer; }
.request__wrapper { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.pagination { padding-top: 24px; }

/* Cart + checkout leftovers */
.cart__table-qty { width: 1%; white-space: nowrap; }
.cart__table-shipping-price { font-weight: 700; white-space: nowrap; }
.ui-discount__btn { flex: none; }
.ui-expiration { display: flex; flex-direction: column; gap: 6px; }
.ui-modal__content { display: flex; flex-direction: column; gap: 10px; }
/* The billing-address block is revealed by app.min.js when "different address"
   is ticked; it must start hidden or checkout shows two address forms at once. */
/* Visibility here belongs to the engine, which toggles `is-hidden` only
   (app.min.js: $('.is-another-address').removeClass('is-hidden')). An extra
   display:none keyed to an `is-open` class the engine never sets kept the
   alternate-address fields hidden no matter what the customer clicked. */
.is-another-address { display: block; }

/* Back-office pages (affiliate signup, article-category admin). Not public, but
   an operator still has to be able to read them. */
.article_info { font-size: 12.5px; color: var(--t-text-muted); margin-bottom: 8px; }
.read_more { font-weight: 600; }
.search-form { margin-bottom: 16px; }
.search-form .row { gap: 8px; }
.page_name { font-weight: 700; }
.note { font-size: 13px; color: var(--t-text-muted); margin-bottom: 12px; }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.required { color: var(--t-error); }
.clear { clear: both; }
.wide input, .wide textarea, .wide select { width: 100%; }
.view { border-bottom: 1px solid var(--t-border); padding: 12px 0; }
.form label { display: block; font-size: 12.5px; font-weight: 700; color: var(--t-text-muted); margin-bottom: 4px; }
.form input, .form textarea, .form select {
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-r);
    padding: 9px 12px;
    background: var(--t-bg-surface);
}

/* ==========================================================================
   22. Hero top seller
   The hero's right-hand column leads with the shop's best-selling product
   instead of a stock photograph: it is the one thing on the page that is both
   specific to this pharmacy and immediately shoppable.
   ========================================================================== */

.mp-topseller {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    position: relative;
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 20px;
    color: var(--mp-ink);
    box-shadow: var(--mp-shadow-sm);
}
.mp-topseller:hover { border-color: var(--t-primary); text-decoration: none; color: var(--mp-ink); }
.mp-topseller__flag {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--t-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: var(--mp-r-sm);
}
.mp-topseller__art { display: block; aspect-ratio: 4 / 3; }
.mp-topseller__art img { width: 100%; height: 100%; object-fit: contain; }
.mp-topseller__body { display: flex; flex-direction: column; gap: 4px; }
.mp-topseller__name { font-family: var(--t-font-heading); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.mp-topseller__price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.mp-topseller__price b { font-weight: 800; font-size: 24px; }
.mp-topseller__cta {
    margin-top: 10px;
    background: var(--t-primary);
    color: #fff;
    border-radius: var(--mp-r);
    padding: 11px 18px;
    font-weight: 700;
    font-size: 14.5px;
    text-align: center;
}
.mp-topseller:hover .mp-topseller__cta { background: var(--t-primary-dark); }

/* ==========================================================================
   23. Mega-menu product previews
   A wall of bare text links tells you nothing about a medicine. The flyout
   shows the same products as small cards with their pack shot.
   ========================================================================== */

.mp-mega__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
}
.mp-mega__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: var(--mp-r);
    color: var(--mp-ink);
    font-size: 13px;
    line-height: 1.3;
}
.mp-mega__item:hover { border-color: var(--t-border); background: #f9fbfb; text-decoration: none; color: var(--t-primary); }
.mp-mega__item-art {
    aspect-ratio: 1;
    border-radius: var(--mp-r-sm);
    background: var(--t-bg-main);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.mp-mega__item-art img { width: 100%; height: 100%; object-fit: contain; }
.mp-mega__item-name { font-weight: 600; }
.mp-mega__panel-scroll { max-height: 420px; overflow-y: auto; padding-right: 4px; }

/* ==========================================================================
   24. Compact pack picker
   A pharmacy product can carry a dozen pack sizes. As full-width rows that is
   a screenful of scrolling before the buy button; as a grid of small cards the
   whole range is visible at once.
   ========================================================================== */

.mp-pack {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 8px;
}
.mp-pack__opt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    position: relative;
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 10px 12px;
    cursor: pointer;
    background: var(--t-bg-surface);
    line-height: 1.3;
}
.mp-pack__opt:hover { border-color: var(--mp-line-strong); }
.mp-pack__opt.is-picked { border-color: var(--t-primary); background: var(--t-bg-secondary); }
/* The radio stays in the DOM for the JS and for keyboard use, but the card
   itself is the visible control. */
.mp-pack__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.mp-pack__opt:focus-within { outline: 2px solid var(--t-primary); outline-offset: 2px; }
.mp-pack__name { font-weight: 700; font-size: 14px; }
.mp-pack__items { font-size: 11.5px; color: var(--t-text-muted); }
.mp-pack__price { margin-left: 0; text-align: left; font-weight: 800; font-size: 15px; white-space: nowrap; }
.mp-pack__price del { display: inline; margin-left: 5px; font-weight: 500; font-size: 12px; color: var(--t-text-muted); }
/* In flow, not pinned to a corner: "Best value" is a translated string and in
   several languages it is far longer than the card is wide (Dutch renders it as
   "Beste prijs-kwaliteitverhouding"). Absolutely positioned it spilled over the
   neighbouring card; as the card's first line it just wraps. */
.mp-pack__badge {
    order: -1;
    align-self: stretch;
    margin-bottom: 2px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--t-success);
}
.mp-pack--rows .mp-pack__badge {
    order: 0;
    align-self: center;
    margin-bottom: 0;
    color: #fff;
    background: var(--t-success);
    border-radius: 999px;
    padding: 2px 8px;
}

/* Test packs keep the roomier row layout: they list their contents, so they
   need the width. */
.mp-pack--rows { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mp-pack--rows .mp-pack__opt { flex-direction: row; align-items: center; gap: 12px; padding: 14px; }
.mp-pack--rows .mp-pack__price { margin-left: auto; text-align: right; }
.mp-pack--rows .mp-pack__badge { position: static; align-self: center; }

@media (max-width: 520px) {
    .mp-pack { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .mp-topseller__name { font-size: 21px; }
    .mp-mega__items { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ==========================================================================
   25. Related-products carousel
   A scroll-snap rail rather than a slider library: no extra JS, works with a
   trackpad, a touch swipe and the keyboard, and degrades to a plain row.
   ========================================================================== */

.mp-rail { position: relative; }
.mp-rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    gap: 16px;
    overflow-x: auto;
    /* Without this the rail also scrolls vertically: CSS computes a visible
       overflow-y as `auto` the moment overflow-x is not visible, so any card
       a pixel taller than the track raised a second scrollbar. */
    overflow-y: hidden;
    align-items: stretch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.mp-rail__track > * { scroll-snap-align: start; }
.mp-rail__track::-webkit-scrollbar { height: 8px; }
.mp-rail__track::-webkit-scrollbar-thumb { background: var(--t-border); border-radius: 999px; }
.mp-rail__track::-webkit-scrollbar-track { background: transparent; }
.mp-rail__nav { display: flex; gap: 6px; }
.mp-rail__btn {
    width: 34px; height: 34px;
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-r);
    background: var(--t-bg-surface);
    color: var(--mp-ink);
    display: grid;
    place-items: center;
    font-size: 15px;
    line-height: 1;
}
.mp-rail__btn:hover { border-color: var(--t-primary); color: var(--t-primary); }
.mp-rail__btn[disabled] { opacity: .35; cursor: default; }
.mp-rail__btn[disabled]:hover { border-color: var(--mp-line-strong); color: var(--mp-ink); }

@media (min-width: 761px) {
    .mp-rail__track { grid-auto-columns: minmax(210px, 1fr); }
}

/* ==========================================================================
   26. Long-word safety
   CMS copy and generated product names routinely contain a token no space can
   break — a domain, an INN, a pack code. On a 390px screen one of those pushes
   the whole document sideways, which is why the English homepage scrolled 4px.
   Breaking them is always better than a page that pans.
   ========================================================================== */

.ui-wysiwyg, .mp-prose, .mp-display, .mp-hero__sub, .mp-hero__title,
.mp-topseller__name, .mp-post__title, .mp-lead__title, .mp-lead__excerpt,
.mp-prod__name, .mp-sku__title, .mp-section__title, .mp-cat__intro p,
.mp-supply, .mp-mono, .mp-mega__item-name, .hd__search-item-title,
.cart__table-item-title, .mp-crumbs { overflow-wrap: break-word; }

.ui-wysiwyg a, .mp-prose a { word-break: break-word; }

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content — the usual reason a "responsive" grid still overflows. */
.mp-stack > *, .mp-stack--s > *, .mp-section > *, .mp-grid > *,
.mp-hero > *, .mp-sku > *, .mp-sku__body > *, .mp-article__layout > *,
.mp-page__layout > *, .mp-cat__layout > *, .mp-checkout > *,
.mp-contact > *, .mp-reg > *, .mp-foot__cols > * { min-width: 0; }

/* A product with no pack shot yet gets a quiet tile, not a dashed instruction —
   the hatched `.mp-ph` boxes are build-time hints and are gated behind the
   Config flag `rd.show_placeholders`. */
.mp-prod__art--empty {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--mp-r);
    background: var(--t-bg-main);
}

/* A team member with no portrait yet gets their initials rather than a gap. */
.mp-team__photo--initials {
    display: grid;
    place-items: center;
    background: var(--t-bg-secondary);
    color: var(--t-primary-dark);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: .02em;
}
.mp-reviewed__photo.mp-team__photo--initials { font-size: 14px; }

/* ==========================================================================
   27. Trust row + third-party marks
   --------------------------------------------------------------------------
   The claims the pharmacy makes about ITSELF are drawn here, in the theme's own
   type and colour: an icon, a line of text, no card and no border. The supplied
   trust-*.svg artwork is self-contained clip art — its own white box, its own
   9pt type — which reads as pasted on at any size and turns to mush below ~50px.
   That artwork is now used only for marks that must be reproduced exactly (the
   EU common logo, a regulator's mark, a review platform).
   ========================================================================== */

.mp-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px 40px;
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--mp-r);
    padding: 32px 36px;
}
.mp-trust__item { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.mp-trust__icon { width: 32px; height: 32px; flex: none; color: var(--t-primary); margin-top: 1px; }
.mp-trust__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mp-trust__title { font-weight: 700; font-size: 15.5px; color: var(--mp-ink); line-height: 1.3; }
.mp-trust__note { font-size: 13.5px; color: var(--t-text-muted); line-height: 1.45; }

/* Third-party marks: reproduced artwork, never redrawn. */
.mp-badge-def { display: none !important; }
.mp-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 26px; }
.mp-badge-link { display: inline-flex; align-items: center; text-decoration: none; }
.mp-badge-link:hover { text-decoration: none; }
/* Never below ~50px: the artwork carries baked-in 9-11pt text. */
.mp-badge { display: block; width: auto; height: 58px; }
.mp-badges--footer .mp-badge { height: 34px; }
a.mp-badge-link .mp-badge { transition: opacity .15s ease; }
a.mp-badge-link:hover .mp-badge { opacity: .82; }

.mp-reg--badges { display: flex; justify-content: center; padding: 18px 24px; }

@media (max-width: 760px) {
    .mp-trust { padding: 22px 20px; gap: 22px; }
    .mp-badge { height: 50px; }
}

/* Featured block: contact / payment / orders / guarantee. An <a> variant carries
   the phone, so the whole tile is tappable on a handset. */
a.mp-trust__item { color: inherit; text-decoration: none; }
a.mp-trust__item:hover { text-decoration: none; }
a.mp-trust__item:hover .mp-trust__title { color: var(--t-primary); }
.mp-trust__stars { flex: none; display: inline-flex; gap: 1px; line-height: 1; margin-top: 1px; }
.mp-trust__stars span { color: #e8a317; font-size: 19px; }
.mp-trust__phone { height: 18px; width: auto; display: block; }
.mp-trust__item--contact .mp-trust__title { font-size: 17px; letter-spacing: -.01em; }

/* ---- product content tabs + reviews ------------------------------------- */
.mp-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--t-border);
  margin:0 0 22px;padding:0 0 2px}
.mp-tabs .mp-tab{position:relative;bottom:-3px;border:0;border-bottom:3px solid transparent;
  background:none;padding:10px 4px;margin-right:18px;font:600 15px/1.2 var(--t-font-body),sans-serif;
  color:var(--t-text-muted);cursor:pointer}
.mp-tabs .mp-tab:hover{color:var(--t-text-main)}
.mp-tabs .mp-tab.st-on{color:var(--t-primary);border-bottom-color:var(--t-primary)}
.mp-tab__n{display:inline-block;min-width:20px;margin-left:6px;padding:1px 6px;border-radius:999px;
  background:var(--t-bg-secondary);color:var(--t-text-muted);font-size:12px;font-weight:600}
.mp-tabs .mp-tab.st-on .mp-tab__n{background:var(--t-primary);color:#fff}
.mp-tabpanel{display:none}
.mp-tabpanel.st-on{display:block}
.mp-reviews__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.mp-reviews__head b{font-size:20px}
.mp-reviews__head span:last-child{color:var(--t-text-muted);font-size:14px}
.mp-reviews__form{margin-top:26px}
@media (max-width:640px){
  .mp-tabs{gap:0}
  .mp-tabs .mp-tab{margin-right:14px;font-size:14px}
}

/* ---- legal notice (aviso legal / Impressum) ----------------------------- */
.rd-legal{background:var(--t-bg-surface);border:1px solid var(--t-border);
  border-radius:var(--mp-r);padding:26px 30px;margin:0 0 28px}
.rd-legal__title{font:600 22px/1.25 var(--t-font-heading),serif;color:var(--mp-ink);margin:0 0 18px}
.rd-legal__list{margin:0}
.rd-legal__row{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:6px 24px;
  padding:10px 0;border-top:1px solid var(--t-border-light)}
.rd-legal__row:first-child{border-top:0;padding-top:0}
.rd-legal__row dt{font-weight:600;font-size:14px;color:var(--t-text-muted);margin:0}
.rd-legal__row dd{margin:0;font-size:15px;color:var(--t-text-main);overflow-wrap:anywhere}
.rd-legal__phone{height:20px;width:auto;display:block}
.rd-legal__odr{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--t-border-light);
  font-size:13.5px;line-height:1.55;color:var(--t-text-muted)}
.rd-legal__odr a{overflow-wrap:anywhere}
@media (max-width:640px){
  .rd-legal{padding:20px}
  .rd-legal__row{grid-template-columns:1fr;gap:2px}
}

/* ---- product gallery thumbnails ---------------------------------------- */
.mp-sku__thumb{cursor:pointer;border:1px solid var(--t-border);background:var(--t-bg-surface);
  padding:6px;transition:border-color .15s ease,box-shadow .15s ease}
.mp-sku__thumb:hover{border-color:var(--t-primary)}
.mp-sku__thumb.is-picked{border-color:var(--t-primary);box-shadow:0 0 0 2px var(--t-primary) inset}
.mp-sku__thumb:focus-visible{outline:2px solid var(--t-primary);outline-offset:2px}

/* ---- review form ------------------------------------------------------- */
/* The engine's .row uses margin:0 -8px, so without matching padding the fields
   sit outside the card they are supposed to be inside. */
.mp-reviews__form{padding:24px 26px}
.mp-reviews__form .row{margin-left:0;margin-right:0}
.mp-reviews__form .row > [class*="col"]{padding-left:0;padding-right:0}
.mp-reviews__form .row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.mp-reviews__form .row > .col-md-12{grid-column:1 / -1}
.mp-reviews__form .ui-vote{margin-bottom:6px}
.mp-reviews__form .ui-label{display:block;font-size:12.5px;font-weight:700;
  color:var(--t-text-muted);margin:4px 0 10px}
.mp-reviews__form .ui-placeholder__code img{border:1px solid var(--t-border);
  border-radius:6px;display:block}
.mp-reviews__form .ui-btn,.mp-reviews__form button[type=submit]{margin-top:4px}
@media (max-width:640px){
  .mp-reviews__form{padding:18px}
  .mp-reviews__form .row{grid-template-columns:1fr;gap:0}
}

/* ---- checkout: spacing and the coupon row ------------------------------- */
.checkout__section { margin-bottom: 34px; }
.checkout__title { margin-bottom: 14px; }
/* The coupon input and its button were flush to the table edge and to each
   other, with the button left at browser-default styling. */
.cart__table .cart__promo,
.cart__promo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.cart__promo input[type="text"] { flex: 1 1 220px; min-width: 0; }
.cart__promo button,
.cart__promo .ui-btn { flex: none; white-space: nowrap; }
.cart__table td, .cart__table th { vertical-align: middle; }

/* Card-brand picker: same footprint for each brand, so VISA/MC/AMEX line up. */
#cardVariant .ui-payment__check-btn { min-width: 104px; min-height: 58px; }
#cardVariant .ui-payment__check-btn svg,
#cardVariant .ui-payment__check-btn img { height: 34px; width: auto; }
#cardVariant .ui-payment__check-btn { min-width: 112px; min-height: 64px; }

/* The CVV helper trigger belongs beside its field, not floating under it. */
.ui-placeholder .ui-tooltip, .ui-placeholder .ui-hint { vertical-align: middle; }

@media (max-width: 991.98px) {
    /* Two options per row on a phone; four stacked near-empty rows was most of
       a screen to scroll through. */
    .checkout__payment .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
    .checkout__payment [class*="col"] { flex: none; max-width: none; padding: 0; margin: 0; }
    .checkout__payment .ui-check__method { min-height: 104px; padding: 16px 10px 14px; }
    .ui-check__method-list img, .ui-check__method-list svg { height: 30px; }
    .checkout__shipping [class*="col-lg-4"] { margin-bottom: 10px; }
}

/* ---- mega menu: contextual link groups ---------------------------------- */
/* The design's middle column is grouped links, not a grid of pack shots. Each
   group is one active ingredient, which is the useful axis in a pharmacy. */
.mp-mega__groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px 24px;
    align-content: start;
}
.mp-mega__group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mp-mega__group-title {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--t-text-muted);
}
.mp-mega__link {
    font-size: 14px; font-weight: 500; line-height: 1.4;
    color: var(--t-text-main); overflow-wrap: anywhere;
}
.mp-mega__link:hover { color: var(--t-primary); text-decoration: none; }

/* Featured cards get the design's box treatment: the pack shot sits in its own
   framed square so cards line up whatever the image's aspect ratio. */
.mp-mega__pick img {
    width: 100%; aspect-ratio: 1; object-fit: contain;
    background: var(--t-bg-main); border: 1px solid var(--t-border-light);
    padding: 6px;
}
.mp-mega__pick { min-width: 0; }
.mp-mega__pick-name { overflow-wrap: anywhere; }

/* ---- product: shipping / payment / free delivery ------------------------ */
.mp-skuinfo { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--t-border); }
.mp-skuinfo__row {
    display: flex; align-items: center; gap: 12px;
    padding: 7px 0; font-size: 13.5px;
}
.mp-skuinfo__dt { color: var(--t-text-muted); font-weight: 600; flex: none; }
/* A dotted leader ties the label to its value, as in the engine's own block. */
.mp-skuinfo__row::after {
    content: ""; order: 1; flex: 1 1 auto;
    border-bottom: 1px dotted var(--t-border); margin: 0 2px; min-width: 12px;
}
.mp-skuinfo__dd { order: 2; flex: none; font-weight: 600; color: var(--mp-ink); }
.mp-skuinfo__pay { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mp-skuinfo__pay img { height: 20px; width: auto; display: block; }
.mp-skuinfo__free {
    margin-top: 10px; padding: 10px 12px; border-radius: var(--mp-r);
    background: var(--t-bg-secondary); color: var(--t-primary);
    font-size: 13.5px; font-weight: 600;
}
@media (max-width: 520px) {
    .mp-skuinfo__row { flex-wrap: wrap; }
    .mp-skuinfo__row::after { display: none; }
    .mp-skuinfo__dd { order: 0; }
}

/* The engine uses <mark> for the cart's discount nudge; browsers paint that
   highlighter-yellow. Same defect as the review form's rating labels. */
.cart__table-text mark {
    background: var(--t-bg-secondary);
    color: var(--t-primary);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 12.5px;
}
.cart__table-text { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* The flyout's single footnote spans all three columns. */
.mp-mega__note { grid-column: 1 / -1; margin-top: 4px; }
.mp-pay-glyph { color: var(--t-primary); display: block; }

/* rd-logo-size2 */ .hd__logo .logo-icon{width:46px;height:46px} .ft__logo .logo-icon{width:38px;height:38px;filter:brightness(0) invert(1)}