/* Adaptations of the ui-v2 skin to this application.
 *
 * Kept apart from ui-v2.css on purpose: that file is the ported design and must stay
 * byte-identical to the original, so everything the port itself needs lives here.
 * Each rule below exists because the Laravel side renders a control the WordPress
 * original did not have. */

/* The original opens search and cart in <details> popovers styled through the summary
   element. Here both are Livewire components, each wrapped in its own root element, and
   the trigger is a <button>: the wrapper has to behave as a flex item, and the button
   needs the browser's default chrome removed. */
.jm-ui-v2 .ui-header-slot {
    display: flex;
    align-items: center;
}

.jm-ui-v2 .ui-cart-link,
.jm-ui-v2 .ui-icon-button {
    border: 0;
    background: none;
    color: inherit;
    padding: 0;
}

.jm-ui-v2 .ui-icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* Quantity picker. The original ships a hidden field at the minimum quantity, so the
   skin has no rule for this control; this shop lets the buyer choose, and the row is
   built from the same option buttons the dosage chips use. */
.jm-ui-v2 .ui-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jm-ui-v2 .ui-qty input {
    width: 76px;
    text-align: center;
    font-weight: 700;
}

body.jm-ui-v2 .ui-qty button.ui-dose {
    flex: 0 0 auto;
    min-width: 44px;
}

/* The shop's own stylesheet is loaded first and styles the search field through
   .search-input; inside the skin's search row the field must stay flat and borderless,
   as it is in the original. */
.jm-ui-v2 .ui-search .search-input {
    min-width: 0;
    width: 100%;
    flex: 1;
}

/* Expert photos. In the original the 46px portrait keeps its size beside the text; here the
   description is one long run of text, and as a flex item the photo gave way to it and was
   squeezed to about 24px wide - an oval instead of a circle. It must not shrink.
   The photos are tall portraits (340x656) and "cover" keeps their middle, which cut the heads
   off; the circle is taken from the top instead, where the face is. */
.jm-ui-v2 .ui-expert img {
    flex: 0 0 46px;
    object-position: center top;
}

/* Hero heading. The heading HTML comes from the page editor and wraps part of it in a <span>;
   the shop's own home.css paints that span with !important. The original heading is one
   colour, so the span takes the heading's. */
.jm-ui-v2 .ui-hero h1 span {
    color: inherit !important;
}

/* USP icons. ui-v2.css paints them #0b6f4d directly; here the colour can be changed in
   Settings -> Colors, and the original green stays the fallback when it is not set. Only
   these icons: the same green on the stock mark, the savings and the free-delivery bar
   keeps its value. */
.jm-ui-v2 .ui-usp svg {
    color: var(--ui-usp-icon, #0b6f4d);
}

/* "Why us" icons. ui-v2.css paints them with the brand colour; here they can be given
   their own in Settings -> Colors, and follow the brand when it is not set. */
.jm-ui-v2 .ui-benefits > .ui-card > svg {
    color: var(--ui-benefit-icon, var(--ui-brand));
}

/* Result count at the end of the sort bar. The bar is one unwrapped row, and the original
   lets the count run past its right edge ("...wordt getoon"). Here it takes the space the
   chips leave and wraps inside it, right-aligned, so the sentence is read in full. */
.jm-ui-v2 .ui-sortbar .woocommerce-result-count {
    flex: 1 1 0;
    min-width: 170px;
    white-space: normal;
    text-align: right;
    line-height: 1.35;
}

/* Contact form, in the look of the original's Contact Form 7 form as measured on
   /contacteert-ons/: the field borders, radius and padding already come from ui-v2.css; what
   the original took from Contact Form 7 and its captcha plugin is reproduced here - a label
   above a ~408px field, a 240px grey captcha box, a small brand-coloured button. */
.jm-ui-v2 .ui-cform {
    margin: 0 0 25px;
}

.jm-ui-v2 .ui-cform p {
    margin: 0 0 12px;
}

.jm-ui-v2 .ui-cform label {
    display: block;
    line-height: 16px;
}

.jm-ui-v2 .ui-cform p input,
.jm-ui-v2 .ui-cform p textarea {
    display: block;
    width: 408px;
    max-width: 100%;
    font-size: 16px;
    line-height: 16px;
}

.jm-ui-v2 .ui-cform p input {
    height: 44px;
}

.jm-ui-v2 .ui-cform p textarea {
    height: 180px;
    resize: vertical;
}

.jm-ui-v2 .ui-cform [aria-invalid="true"] {
    border-color: #c0392b;
}

.jm-ui-v2 .ui-cform-error {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: #c0392b;
}

.jm-ui-v2 .ui-captcha {
    width: 240px;
    max-width: 100%;
    margin: 12px 0 25px;
    padding: 15px;
    border-radius: 10px;
    background: #f7f7f7;
}

.jm-ui-v2 .ui-captcha-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    line-height: 27.9px;
}

.jm-ui-v2 .ui-captcha-refresh {
    display: inline-flex;
    min-width: 0;
    min-height: 0;
    padding: 2px;
    border: 0;
    background: none;
    color: var(--ui-ink);
    cursor: pointer;
}

.jm-ui-v2 .ui-captcha input {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
}

.jm-ui-v2 .ui-cform-submit {
    padding: 9px 9px;
    border: 1px solid #858d9b;
    border-radius: 9px;
    background: var(--ui-brand);
    color: var(--ui-on-brand);
    font-size: 16px;
    line-height: 24.8px;
    cursor: pointer;
}

.jm-ui-v2 .ui-cform-submit:hover:not(:disabled) {
    background: var(--ui-brand-dark);
}

.jm-ui-v2 .ui-cform-submit:disabled {
    opacity: .7;
    cursor: default;
}

.jm-ui-v2 .ui-cform-alert {
    position: relative;
    margin: 0 0 12px;
    padding: 12px 40px 12px 16px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
}

.jm-ui-v2 .ui-cform-alert.is-success {
    border-left: 4px solid #0d8a5f;
}

.jm-ui-v2 .ui-cform-alert.is-error {
    border-left: 4px solid #c0392b;
}

.jm-ui-v2 .ui-cform-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* Product description inside a lone wrapper (the feed's <section class="product-info">).
   ui-v2.css takes the line and the gap off the first section and the margin off the last
   child with ".ui-description > ..." - direct children only - so through the wrapper the
   description opened with a stray rule. The same two rules, one level down. */
.jm-ui-v2 .ui-description > :only-child > details.ui-sec-details:first-child {
    margin-top: 0;
    border-top: 0;
}

.jm-ui-v2 .ui-description > :only-child > :last-child {
    margin-bottom: 0;
}

/* Result of "In winkelwagen". The buy bar is pulled to the top of the purchase column
   (order: -1 in ui-v2.css), so a message after it in the markup landed at the foot of the
   column, under every pack row and out of sight. It takes the same order and so sits right
   under the bar. On a phone the bar is fixed to the bottom of the screen; the message floats
   just above it. */
.jm-ui-v2 .ui-status.is-success,
.jm-ui-v2 .ui-status.is-error {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
}

.jm-ui-v2 .ui-status.is-success {
    background: #e9f7f1;
    border: 1px solid #cceade;
    color: #0b6f4d;
}

.jm-ui-v2 .ui-status.is-error {
    background: #fdecea;
    border: 1px solid #f5c6c0;
    color: #c0392b;
}

.jm-ui-v2 .ui-col-buy .ui-status {
    order: -1;
}

@media (max-width: 799px) {
    .jm-ui-v2 .ui-status.is-success,
    .jm-ui-v2 .ui-status.is-error {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: calc(96px + env(safe-area-inset-bottom));
        z-index: 51;
        margin: 0;
        box-shadow: 0 6px 20px #141e3c26;
    }
}

/* Cart page. */

/* "Empty cart" to the right of the title row, where the original's form puts it. */
.jm-ui-v2 .ui-top .ui-clear {
    margin-left: auto;
}

/* The original's remove control is a link; here it is a button, which brought the browser's
   own grey button box. Same look as the link. */
.jm-ui-v2 .ui-cart-item .ui-remove {
    border: 0;
    background: none;
    cursor: pointer;
}

/* Delivery row of the cart totals: the destination over the list of methods. */
.jm-ui-v2 .ui-totals .ui-ship-to {
    display: block;
    color: var(--ui-muted);
    font-size: 13px;
}

.jm-ui-v2 .ui-totals .ui-ship-methods li {
    margin: 2px 0;
}

/* Header mini cart: the cart icon opens it in the menu's popover (.ui-popover - same width
   and place). A small card per line - picture left, name, strength and pack, quantity x price
   on the right - then the subtotal and the button to the cart page. */
.jm-ui-v2 .ui-mini-cart > summary {
    position: relative;
}

.jm-ui-v2 .ui-mini-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.jm-ui-v2 .ui-mini-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--ui-line);
}

.jm-ui-v2 .ui-mini-item:first-child {
    padding-top: 0;
}

.jm-ui-v2 .ui-mini-item img {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    max-width: 56px;
    object-fit: contain;
    border-radius: 9px;
    background: #f2f5fa;
    padding: 4px;
}

.jm-ui-v2 .ui-mini-item b {
    display: block;
    font-size: 15px;
    line-height: 1.3;
}

.jm-ui-v2 .ui-mini-item .ui-variant {
    display: inline-block;
    margin: 4px 0 2px;
}

.jm-ui-v2 .ui-mini-price {
    display: block;
    font-size: 14px;
    color: var(--ui-muted);
}

.jm-ui-v2 .ui-mini-total {
    display: flex;
    justify-content: space-between;
    margin: 0 0 12px;
    font-size: 15px;
}

.jm-ui-v2 .ui-mini-cart .ui-popover .ui-button {
    width: 100%;
}

/* Header search: the magnifier opens the menu's popover, like the mini cart. The form is the
   original's .ui-search; suggestions reuse the mini cart's cards, the whole card a link. */
.jm-ui-v2 .ui-mini-search > summary {
    list-style: none;
    cursor: pointer;
}

.jm-ui-v2 .ui-mini-search > summary::-webkit-details-marker {
    display: none;
}

.jm-ui-v2 .ui-mini-search .ui-search {
    margin: 0 0 12px;
}

.jm-ui-v2 .ui-mini-search .ui-search .ui-button {
    flex: 0 0 auto;
}

.jm-ui-v2 .ui-mini-search .ui-mini-item {
    padding: 0;
}

.jm-ui-v2 .ui-mini-link {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    padding: 10px 0;
    color: inherit;
    text-decoration: none;
}

.jm-ui-v2 .ui-mini-link:hover b,
.jm-ui-v2 .ui-mini-link:focus-visible b {
    color: var(--ui-link);
    text-decoration: underline;
}

.jm-ui-v2 .ui-mini-empty {
    margin: 0;
    color: var(--ui-muted);
}

.jm-ui-v2 .ui-mini-all {
    display: block;
    text-align: center;
    font-weight: 700;
    color: var(--ui-link);
}

/* Order status page: the answer under the form, as the original lists it - label and value per
   line - in the card's own type. */
.jm-ui-v2 .ui-os-result {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 8px 18px;
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: #fff;
}

.jm-ui-v2 .ui-os-result dt {
    color: var(--ui-muted);
}

.jm-ui-v2 .ui-os-result dd {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.jm-ui-v2 .ui-order-status .ui-cform-alert {
    margin-top: 16px;
}

/* Author page (front/authorTemplate). The original's author page is from its old theme; this one is
   a text page card with the photo on the left at 200x200, cut from the top like the experts'
   circles, and stacked above the text on phones (client, 01.10.2026). */
.jm-ui-v2 .ui-author-head {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.jm-ui-v2 .ui-author-photo {
    flex: 0 0 200px;
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: center top;
    border-radius: 14px;
    background: #f2f5fa;
}

.jm-ui-v2 .ui-author-intro h1 {
    margin-top: 0;
}

.jm-ui-v2 .ui-author-role {
    margin: -4px 0 10px;
    color: var(--ui-muted);
    font-weight: 600;
}

@media (max-width: 640px) {
    .jm-ui-v2 .ui-author-head {
        flex-direction: column;
    }
}

/* Blog tiles (components/front/post-card): the catalogue's grid and card, a 16:9 picture on top.
   The newest post on the blog page is one wide tile with its picture on the left. */
.jm-ui-v2 .ui-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin: 0 0 20px;
}

.jm-ui-v2 .ui-post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 14px;
}

.jm-ui-v2 .ui-post-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #f2f5fa;
}

.jm-ui-v2 .ui-post-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
}

.jm-ui-v2 .ui-post-cat {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-link);
    text-decoration: none;
}

.jm-ui-v2 .ui-post-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
}

.jm-ui-v2 .ui-post-title a {
    color: inherit;
    text-decoration: none;
}

.jm-ui-v2 .ui-post-title a:hover {
    color: var(--ui-link);
}

.jm-ui-v2 .ui-post-excerpt,
.jm-ui-v2 .ui-post-meta {
    margin: 0;
    color: var(--ui-muted);
    font-size: 14px;
}

.jm-ui-v2 .ui-post-meta a {
    color: inherit;
}

.jm-ui-v2 .ui-post-card.is-featured {
    margin-bottom: 22px;
}

@media (min-width: 800px) {
    .jm-ui-v2 .ui-post-card.is-featured {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .jm-ui-v2 .ui-post-card.is-featured .ui-post-media img {
        height: 100%;
    }

    .jm-ui-v2 .ui-post-card.is-featured .ui-post-body {
        justify-content: center;
        padding: 24px 28px;
    }

    .jm-ui-v2 .ui-post-card.is-featured .ui-post-title {
        font-size: 24px;
    }
}

.jm-ui-v2 .ui-blog .ui-sortbar button {
    font: inherit;
    cursor: pointer;
}

/* Blog post (front/blogPostTemplate): the text page card; a picture under the title, the text
   with the author and the table of contents beside it on wide screens. */
.jm-ui-v2 .ui-post-hero {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    margin: 6px 0 20px;
    border-radius: 12px;
}

.jm-ui-v2 .ui-post .ui-post-meta {
    margin-bottom: 12px;
}

.jm-ui-v2 .ui-post-layout {
    display: grid;
    gap: 24px;
}

@media (min-width: 960px) {
    .jm-ui-v2 .ui-post-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
    }
}

.jm-ui-v2 .ui-post-aside > div {
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: #fff;
}

.jm-ui-v2 .ui-post-author {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 6px 12px;
    align-items: center;
}

.jm-ui-v2 .ui-post-author img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
}

.jm-ui-v2 .ui-post-author span,
.jm-ui-v2 .ui-post-author b {
    display: block;
}

.jm-ui-v2 .ui-post-author p {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--ui-muted);
}

.jm-ui-v2 .ui-post-share {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--ui-line);
}

.jm-ui-v2 .ui-stars span,
.jm-ui-v2 .ui-rating-input button {
    color: var(--ui-line);
}

.jm-ui-v2 .ui-stars .is-on,
.jm-ui-v2 .ui-rating-input .is-on {
    color: #f5a623;
}

/* Comments and the comment form (livewire/front/comment-*-v2): a card per comment; the form is
   the contact form's (.ui-cform) with a row of rating stars. */
.jm-ui-v2 .ui-post-comments {
    margin-top: 16px;
}

.jm-ui-v2 .ui-comment {
    padding: 12px 0;
    border-bottom: 1px solid var(--ui-line);
}

.jm-ui-v2 .ui-comment.is-reply {
    margin-left: 24px;
}

.jm-ui-v2 .ui-comment-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.jm-ui-v2 .ui-comment-head b {
    margin-right: 8px;
}

.jm-ui-v2 .ui-comment-text {
    margin: 6px 0 0;
}

.jm-ui-v2 .ui-comment-reply {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ui-link);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.jm-ui-v2 .ui-comment-form-wrap {
    margin-top: 22px;
}

.jm-ui-v2 .ui-rating-field {
    margin: 0 0 14px;
}

.jm-ui-v2 .ui-rating-label {
    display: block;
    margin-bottom: 4px;
}

.jm-ui-v2 .ui-rating-input button {
    padding: 0 2px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.jm-ui-v2 .ui-cform-hint {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}

.jm-ui-v2 .ui-latest-posts {
    margin-top: 24px;
}

/* Table of contents beside a post: the shop's own app.css paints it as a dark slab with red links;
   in the v2 card it is a plain list in the skin's colours. */
.jm-ui-v2 .ui-post-toc .table-of-contents {
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    border: 0;
    box-shadow: none;
}

.jm-ui-v2 .ui-post-toc .toc-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: inherit;
}

.jm-ui-v2 .ui-post-toc .toc-list {
    margin: 0;
    padding-left: 18px;
}

.jm-ui-v2 .ui-post-toc .toc-item {
    margin: 4px 0;
    color: var(--ui-muted);
}

.jm-ui-v2 .ui-post-toc .toc-link {
    color: var(--ui-link);
    text-decoration: none;
}

.jm-ui-v2 .ui-post-toc .toc-link:hover {
    text-decoration: underline;
}