:root{--fs-primary:#5b6b3a;--fs-primary-rgb:91, 107, 58;--fs-on-primary:#ffffff;--fs-primary-ink:#5b6b3a;--fs-radius:0rem;--fs-radius-scale:0;--fs-space:1.5rem}
:root{--bs-body-bg:#ffffff;--bs-body-bg-rgb:255, 255, 255;--bs-body-color:#1c1c1c;--bs-body-color-rgb:28, 28, 28;--bs-border-color:#e6e2dc;--bs-link-color:#4c5a31;--bs-link-color-rgb:76, 90, 49;--bs-link-hover-color:#3b4626;--bs-link-hover-color-rgb:59, 70, 38;--bs-font-sans-serif:Manrope, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--bs-headings-font-family:Manrope, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--bs-headings-font-weight:700;}
/* Modern Fashion (pack "fashion", V497): a fashion / clothing shop. The frame, front page and
   product card are the pack's own ("mf-*" classes): a centred logo with the category menu with
   pictures under it, an editorial front page, tall 3:4 product cards with a second picture on hover.
   The other pages (category, product, account, content, checkout) come from Modern System for now
   and keep its "tp-*" markup and rules below; the Fashion rules are at the end of this file.
   Colours come from the design primary (--fs-primary) and a few neutral tokens; the header / footer
   look switches (data-fs-header / data-fs-footer) and the masthead switch (data-fs-masthead) only
   change tokens. The tokens live on :root too: offcanvas panels are moved to <body> (V311). */
:root,
.tp-site,
.offcanvas {
    --tp-accent: var(--fs-primary);
    --tp-dark: #212529;
    --tp-muted: #6c757d;
    --tp-line: #dee2e6;
    --tp-soft: #f1f3f5;
    --tp-danger: var(--bs-danger);
}

.min-w-0 {
    min-width: 0;
}

/* ---- Bootstrap components in the design colour ------------------------------------- */
/* Compiled Bootstrap 5.3 writes #0d6efd literally in these component variables, so the design
   primary (--fs-primary) does not reach them; site.css fixes only buttons and page links.
   Candidate for site.css (all designs). */
.tp-site,
.offcanvas {
    --bs-focus-ring-color: rgba(var(--fs-primary-rgb), 0.25);
}

.tp-site .nav-pills,
.offcanvas .nav-pills {
    --bs-nav-pills-link-active-bg: var(--tp-accent);
}

.tp-site .nav-link,
.offcanvas .nav-link {
    --bs-nav-link-color: var(--tp-dark);
    --bs-nav-link-hover-color: var(--fs-primary-ink);
}

.tp-site .list-group,
.offcanvas .list-group {
    --bs-list-group-active-bg: var(--tp-accent);
    --bs-list-group-active-border-color: var(--tp-accent);
}

.tp-site .accordion,
.offcanvas .accordion {
    --bs-accordion-active-bg: var(--tp-soft);
    --bs-accordion-active-color: var(--tp-dark);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--fs-primary-rgb), 0.25);
}

.tp-site .form-check-input:checked,
.offcanvas .form-check-input:checked {
    border-color: var(--tp-accent);
    background-color: var(--tp-accent);
}

.tp-site .form-check-input:focus,
.offcanvas .form-check-input:focus {
    border-color: rgba(var(--fs-primary-rgb), 0.5);
    box-shadow: 0 0 0 0.25rem rgba(var(--fs-primary-rgb), 0.25);
}

.tp-site .progress,
.offcanvas .progress {
    --bs-progress-bar-bg: var(--tp-accent);
}

.tp-site .dropdown-menu {
    --bs-dropdown-link-active-bg: var(--tp-accent);
}

/* ---- Frame ---------------------------------------------------------------------------- */
.tp-header {
    z-index: 1030;
}

.tp-brand img {
    max-height: 3rem;
    width: auto;
}

.tp-header-search {
    min-width: 12rem;
    max-width: 40rem;
}

.tp-header-tools .fs-position {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tp-header-tools .btn {
    padding: 0.375rem 0.5rem;
}

@media (max-width: 575.98px) {
    .tp-header-tools .btn {
        padding-inline: 0.35rem;
    }

}

/* V482: the burger's position is empty on wide screens: it takes no place (and no gap) before the logo. */
@media (min-width: 992px) {
    .tp-header .fs-position-sy_mobile_menu {
        display: none;
    }
}

/* The logo gives way first, so the tools stay on the logo row. */
@media (max-width: 991.98px) {
    .tp-brand {
        min-width: 0;
        flex: 1 1 0;
        overflow: hidden;
    }
}

/* Below lg the search takes its own row under the logo and the tools. */
@media (max-width: 991.98px) {
    .tp-header-search {
        order: 10;
        flex-basis: 100%;
        max-width: none;
    }
}

.tp-header .fs-section,
.tp-topbar .fs-section,
.tp-footer .fs-section {
    padding: 0;
}

.tp-search-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: 70vh;
    overflow-y: auto;
}

.tp-footer .fs-position + .fs-position {
    margin-top: 1rem;
}

/* Native menus (mod_mainmenu prints ul.menu > li > a > span): laid out like Bootstrap navs. */
.tp-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-menu a {
    display: block;
    color: var(--bs-body-color);
    text-decoration: none;
}

.tp-menu a:hover {
    color: var(--fs-primary-ink);
}

.tp-menu-inline ul.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
}

.tp-mainnav .tp-menu-inline a {
    padding: 0.6rem 0;
    font-weight: 500;
}

.tp-mainnav .tp-menu-inline li.active > a,
.tp-mainnav .tp-menu-inline li#current > a {
    box-shadow: inset 0 -2px 0 var(--tp-accent);
}

.tp-topbar .tp-menu-inline a {
    color: var(--tp-muted);
}

.tp-menu-column li + li {
    margin-top: 0.35rem;
}

.tp-menu-column a {
    font-size: 0.875rem;
}

.tp-menu-side a,
.tp-menu-vertical a {
    padding: 0.5rem 0.75rem;
    border-radius: var(--bs-border-radius);
}

.tp-menu-side li.active > a,
.tp-menu-side li#current > a,
.tp-menu-vertical li.active > a,
.tp-menu-vertical li#current > a {
    background: var(--tp-accent);
    color: var(--fs-on-primary);
}

.tp-menu-side a:hover,
.tp-menu-vertical a:hover {
    background: var(--tp-soft);
}

.tp-menu ul ul {
    padding-left: 1rem;
}

/* Newsletter (native mod_mailerlt form), V481 as in Modern Classic: a soft box, the title on the
   left, labels and fields in one row with the button on the right. */
.tp-newsletter-box {
    margin: 0;
    padding: 1.5rem 1.75rem;
    border-radius: var(--bs-border-radius-lg);
    background: var(--tp-soft);
}

.tp-newsletter-box .h5 {
    font-size: 1.25rem;
}

/* The title takes what it needs, the form the rest (as in Classic). */
@media (min-width: 992px) {
    .tp-newsletter-box > [class*="col-"] {
        width: auto;
    }

    .tp-newsletter-box > .tp-newsletter-form {
        flex: 1 1 0;
    }
}

.tp-newsletter-form form {
    margin: 0;
}

.tp-newsletter-form .subscribe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
}

.tp-newsletter-form br {
    display: none;
}

.tp-newsletter-form label {
    margin: 0;
    color: var(--tp-muted);
    font-size: 0.85rem;
}

.tp-newsletter-form input[type="text"],
.tp-newsletter-form input[type="email"] {
    width: 11rem;
    max-width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--tp-line);
    border-radius: var(--bs-border-radius);
    background: #fff;
}

.tp-newsletter-form input[type="submit"],
.tp-newsletter-form button {
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--tp-dark);
    border-radius: var(--bs-border-radius);
    background: var(--tp-dark);
    color: #fff;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .tp-newsletter-box {
        padding: 1.25rem;
    }

    /* Labels above full-width fields. */
    .tp-newsletter-form .subscribe {
        display: grid;
        justify-content: stretch;
        gap: 0.35rem;
    }

    .tp-newsletter-form input[type="text"],
    .tp-newsletter-form input[type="email"],
    .tp-newsletter-form input[type="submit"],
    .tp-newsletter-form button {
        width: 100%;
    }

    .tp-newsletter-form input[type="submit"],
    .tp-newsletter-form button {
        margin-top: 0.4rem;
    }
}

/* ---- Front page ------------------------------------------------------------------------ */
.tp-home > .fs-position {
    margin-bottom: 2.5rem;
}

.tp-home > .fs-position > * + * {
    margin-top: 2.5rem;
}

/* ---- Small shared pieces -------------------------------------------------------------- */

/* V487: the banner arrows sit at the edges and the slide text keeps clear of them. */
.tp-site .carousel-control-prev,
.tp-site .carousel-control-next {
    width: 3.5rem;
}

.tp-hero-slide {
    padding-inline: 4.5rem !important;
}

@media (max-width: 575.98px) {
    .tp-site .carousel-control-prev,
    .tp-site .carousel-control-next {
        width: 2.5rem;
    }

    .tp-hero-slide {
        padding: 2rem 3rem 3rem !important;
    }
}

.tp-thumb {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    flex: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    background: var(--tp-soft);
    color: var(--tp-muted);
}

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

.tp-thumb-sm {
    width: 2rem;
    height: 2rem;
}

.tp-thumb-lg {
    width: 4.5rem;
    height: 4.5rem;
}

.tp-thumb-xl {
    display: flex;
    width: 8rem;
    height: 8rem;
}

.tp-avatar {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tp-soft);
    color: var(--tp-muted);
}

.tp-section + .tp-section {
    margin-top: 2.5rem;
}

/* V509: Font Awesome 7 icons have a fixed width, so a block icon needs centring of its own. */
.tp-empty i {
    display: block;
    margin-inline: auto;
    color: var(--tp-line);
}

/* ---- Product card --------------------------------------------------------------------- */
.tp-card {
    position: relative;
    overflow: hidden;
}

.tp-card-badges,
.tp-card-tools {
    z-index: 2;
}

.tp-card-image {
    display: flex;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--bs-body-bg);
    color: var(--tp-line);
    font-size: 3rem;
}

.tp-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tp-card-desc {
    display: none;
}

/* Native prices (span.price + span.old_price, or the older product-Old-Price): the old price
   first and struck, the current one red when discounted. */
.tp-card-price,
/* V481: the description tabs sit on their panel: no rounded corners where they meet. */
.tp-product .nav-tabs .nav-link {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.tp-product .nav-tabs + .tab-content {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.tp-product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
}

.fs-price .old_price,
.fs-price .product-Old-Price,
.fs-price .productOldPrice,
.fs-price del,
.fs-price s {
    order: -1;
    color: var(--tp-muted);
    font-size: 0.85em;
    font-weight: 400;
    text-decoration: line-through;
}

.fs-price:has(.old_price, .product-Old-Price, .productOldPrice) .price {
    color: var(--tp-danger);
}

.fs-price br,
.fs-price .taxtext {
    display: none;
}

/* Native add-to-cart forms (cards and the product page): quantity − / field / + as one group. */
.tp-card-cart form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.tp-card-cart label.quantity_box,
.tp-card-cart .clr {
    display: none;
}

.tp-card-cart .product_quantity,
.tp-product-cart .product_quantity {
    display: inline-flex;
    align-items: stretch;
}

.tp-site input.quantity_box_button {
    width: 2rem;
    padding: 0;
    border: 1px solid var(--tp-line);
    border-radius: 0;
    background: var(--tp-soft);
    color: var(--tp-dark);
    font-weight: 600;
}

.tp-site input.quantity_box_button_down {
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}

.tp-site input.quantity_box_button_up {
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

.tp-site .product_quantity input.inputboxquantity {
    width: 2.75rem;
    border-radius: 0;
    border-inline: 0;
    text-align: center;
}

.tp-card-cart input[type="submit"],
.tp-card-cart button[type="submit"] {
    flex: 1;
}

/* Wishlist and comparison buttons: site.js turns them on (html.fs-wishlist-on / fs-compare-on). */
.tp-wish,
.tp-compare {
    display: none;
}

.fs-wishlist-on .tp-wish,
.fs-compare-on .tp-compare {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* V481: dark round buttons with white icons; a chosen one turns white with a dark icon.
   V482: the same on the product page. */
.tp-card-tools .btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
}

.tp-card-tools .btn,
.tp-product .tp-wish,
.tp-product .tp-compare {
    border-color: var(--tp-dark);
    background: var(--tp-dark);
    color: #fff;
}

.tp-card-tools .btn:hover,
.tp-card-tools .btn:focus-visible,
.tp-product .tp-wish:hover,
.tp-product .tp-compare:hover,
.tp-product .tp-wish:focus-visible,
.tp-product .tp-compare:focus-visible {
    border-color: #000;
    background: #000;
    color: #fff;
}

.tp-wish[aria-pressed="true"],
.tp-compare[aria-pressed="true"],
.tp-card-tools .btn[aria-pressed="true"]:hover,
.tp-product .tp-wish[aria-pressed="true"]:hover,
.tp-product .tp-compare[aria-pressed="true"]:hover {
    border-color: var(--tp-dark);
    background: #fff;
    color: var(--tp-dark);
}

.tp-wish[aria-pressed="true"] {
    color: var(--tp-danger);
}

.tp-wish.is-busy,
.tp-compare.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

/* Cards in scrolling rows: whole cards only, 5 / 4 / 3 / 2 per row. */
.tp-products .fs-scroller-track > .tp-card,
.tp-circles .fs-scroller-track > * {
    flex: 0 0 calc((100% - 4 * 1rem) / 5);
}

.tp-circles .fs-scroller-track > * {
    flex-basis: calc((100% - 7 * 1rem) / 8);
}

@media (max-width: 1199.98px) {
    .tp-products .fs-scroller-track > .tp-card {
        flex-basis: calc((100% - 3 * 1rem) / 4);
    }
}

@media (max-width: 991.98px) {
    .tp-products .fs-scroller-track > .tp-card {
        flex-basis: calc((100% - 2 * 1rem) / 3);
    }

    .tp-circles .fs-scroller-track > * {
        flex-basis: calc((100% - 4 * 1rem) / 5);
    }
}

@media (max-width: 575.98px) {
    .tp-products .fs-scroller-track > .tp-card {
        flex-basis: calc((100% - 1rem) / 2);
    }

    .tp-circles .fs-scroller-track > * {
        flex-basis: calc((100% - 2 * 1rem) / 3.5);
    }
}

/* ---- Categories ----------------------------------------------------------------------- */
.tp-circle .tp-thumb-lg {
    width: 5.5rem;
    height: 5.5rem;
    border: 1px solid var(--tp-line);
}

.tp-catalog {
    columns: 4 16rem;
    column-gap: 1rem;
}

.tp-catalog > .card {
    break-inside: avoid;
}

.tp-tree summary {
    list-style: none;
    cursor: pointer;
}

.tp-tree summary::-webkit-details-marker {
    display: none;
}

.tp-tree details[open] > summary .tp-tree-chevron {
    transform: rotate(180deg);
}

.tp-tree .is-current > a,
.tp-tree .is-current > summary > a,
.tp-tree .is-current > details > summary > a,
.tp-tree .is-current > .tp-tree-row > a {
    font-weight: 600;
    color: var(--fs-primary-ink);
}

.tp-rail {
    width: max-content;
}

/* ---- Category page -------------------------------------------------------------------- */
/* V500: Modern Fashion's own category page is at "Category page (V500)" below. */
@media (min-width: 992px) {
    .tp-browse-sidebar {
        position: sticky;
        top: calc(var(--fs-header-height, 0px) + 1rem);
    }
}

/* Subcategory tiles (the override gives one .col per category, V499: the grid is the list itself). */
.tp-subcats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.tp-subcats br,
.tp-subcats .clr {
    display: none;
}

/* Toolbar: the native counter, page size and sorting forms; they submit on change (site.js). */
.tp-browse-toolbar form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--tp-muted);
}

.tp-browse-toolbar select {
    width: auto;
    padding: 0.25rem 2rem 0.25rem 0.6rem;
    font-size: 0.875rem;
}

.tp-browse-toolbar input[type="submit"],
.tp-browse-toolbar button[type="submit"],
.tp-browse-toolbar noscript {
    display: none;
}

/* List view: image on the left, description and cart visible. */
.tp-browse-list .tp-card {
    flex-direction: row;
}

.tp-browse-list .tp-card-image {
    flex: 0 0 10rem;
}

.tp-browse-list .tp-card-desc {
    display: block;
}

.tp-browse-list .tp-card-cart {
    align-self: center;
    border: 0;
}

@media (max-width: 575.98px) {
    .tp-browse-list .tp-card {
        flex-direction: column;
    }
}

/* Native pagination (ul.pagination with plain li > a / span): shown like Bootstrap page links. */
.tp-pagination .pagination,
.tp-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-pagination li > a,
.tp-pagination li > span {
    display: inline-flex;
    min-width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.6rem;
    border: 1px solid var(--tp-line);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-decoration: none;
}

.tp-pagination li > a:hover {
    background: var(--tp-soft);
}

.tp-pagination li.active > span,
.tp-pagination li.active > a {
    border-color: var(--tp-accent);
    background: var(--tp-accent);
    color: var(--fs-on-primary);
}

.tp-pagination li.first,
.tp-pagination li.last {
    display: none;
}

.tp-pagination li.previous > span,
.tp-pagination li.next > span {
    color: var(--tp-line);
}

/* VirtueMart Filters (native markup). */
.tp-filters .shopping_options_title,
.tp-filters .clr {
    display: none;
}

.tp-filters .parameter + .parameter {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tp-line);
}

.tp-filters .parametertitle,
.tp-filters .currently_shopping_by_title {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.tp-filters .typetitle {
    color: var(--tp-muted);
    font-size: 0.8rem;
    font-weight: 400;
}

.tp-filters .checkbox,
.tp-filters .radio,
.tp-filters .filtermenu li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
    font-size: 0.9rem;
}

.tp-filters .checkbox .form-check-input,
.tp-filters .radio .form-check-input {
    flex: none;
    margin: 0;
}

.tp-filters .checkbox label,
.tp-filters .radio label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    color: var(--tp-muted);
    cursor: pointer;
}

.tp-filters label.active,
.tp-filters .filtermenu li.active a {
    color: var(--tp-dark);
    font-weight: 600;
}

.tp-filters .fs-filter-count {
    margin-left: auto;
    color: var(--tp-muted);
    font-size: 0.8rem;
}

.tp-filters select {
    width: 100%;
}

.tp-filters .choosemore,
.tp-filters .clear_all {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    text-decoration: underline;
}

.tp-filters .single_button {
    margin-top: 1rem;
}

.tp-filters .single_button .btn,
.tp-filters .parameter .btn,
.tp-filters input[type="submit"] {
    width: 100%;
}

.tp-filters input[type="submit"]:not(.btn) {
    margin-top: 0.75rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--tp-line);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

/* Active filters above the products: "Clear filters" first, then one badge-like chip per filter. */
.tp-active-filters .vmfilter form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.tp-active-filters .currently_shopping_by_title,
.tp-active-filters .clr {
    display: none;
}

.tp-active-filters .filtered_parameters {
    display: contents;
}

.tp-active-filters .filtered_parameters li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    order: 2;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--tp-line);
    border-radius: calc(2rem * var(--fs-radius-scale, 1));
    background: var(--bs-body-bg);
}

.tp-active-filters [data-fs-vmfilter-remove],
.tp-filters [data-fs-vmfilter-remove] {
    order: -1;
    color: var(--tp-dark);
    line-height: 1;
    text-decoration: none;
}

.tp-active-filters [data-fs-vmfilter-remove] img,
.tp-filters [data-fs-vmfilter-remove] img {
    display: none;
}

.tp-active-filters [data-fs-vmfilter-remove]::after,
.tp-filters [data-fs-vmfilter-remove]::after {
    content: "\00d7";
    font-size: 1.1rem;
}

.tp-active-filters .clear_all {
    order: 1;
    margin-right: 0.5rem;
}

/* ---- Product page --------------------------------------------------------------------- */
.tp-gallery-stage {
    padding: 1rem;
}

.tp-gallery-badges {
    z-index: 3;
}

.tp-gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.tp-gallery-track::-webkit-scrollbar {
    display: none;
}

.tp-gallery-slide {
    display: flex;
    width: 100%;
    flex: 0 0 100%;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
    scroll-snap-align: start;
}

.tp-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tp-gallery-step {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    transform: translateY(-50%);
}

.tp-gallery-prev {
    left: 0.75rem;
}

.tp-gallery-next {
    right: 0.75rem;
}

.tp-gallery-thumb {
    width: 5rem;
    height: 5rem;
}

.tp-gallery-thumb.is-active {
    border-color: var(--tp-dark) !important;
}

.tp-gallery-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tp-product-price .you_save {
    width: 100%;
    color: var(--tp-muted);
    font-size: 0.875rem;
    font-weight: 400;
}

/* Native add-to-cart form: attributes on top, quantity and a wide button in one row. */
.tp-product-cart form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.tp-product-cart .product_children,
.tp-product-cart #product_final_price,
.tp-product-cart #cartupdate_message {
    flex-basis: 100%;
}

.tp-product-cart #product_final_price:empty,
.tp-product-cart #cartupdate_message:empty,
.tp-product-cart .clr {
    display: none;
}

.tp-product-cart .product_children select {
    max-width: 20rem;
}


.tp-product-cart label.quantity_box {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}



.tp-product-cart input[type="submit"] {
    min-width: 12rem;
    height: 2.5rem;
    flex: 1;
}

/* Product type parameters (native table): heading row, then label / value rows. */
.tp-product-params br {
    display: none;
}

.tp-product-params table {
    width: 100%;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.tp-product-params td {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--tp-line);
}

.tp-product-params tr:first-child td {
    font-weight: 600;
}

.tp-product-params td + td {
    color: var(--tp-muted);
    text-align: right;
}

/* ---- Account pages, wishlist, comparison ---------------------------------------------- */
/* The account menu shows only in the site frame; without it (tmpl=component pages, e.g. the
   wishlist drawer) and when empty the content takes the full width. */
.fs-component .tp-account-aside,
.tp-account-page:not(:has(.tp-account-menu)) > .tp-account-aside,
.tp-article-layout:not(:has(.tp-menu-side)) > .tp-article-side {
    display: none;
}

.fs-component .tp-account-page > .col-lg-9,
.tp-account-page:not(:has(.tp-account-menu)) > .col-lg-9,
.tp-article-layout:not(:has(.tp-menu-side)) > .col-lg-9 {
    width: 100%;
}

@media (min-width: 992px) {
    .tp-account-menu,
    .tp-article-side > .fs-position {
        position: sticky;
        top: calc(var(--fs-header-height, 0px) + 1rem);
    }
}

.tp-account-menu .list-group-item.active {
    border-color: var(--tp-accent);
    background: var(--tp-accent);
}

.tp-account-content .product_navigation,
.tp-account-content div.warning:has(.required) {
    display: none;
}

.tp-account-content h1.componentheading,
.tp-account-content .componentheading {
    margin: 0 0 1rem;
    font-size: 1.75rem;
}

.tp-address-add {
    border-style: dashed;
}

.tp-address-add:hover,
a.tp-stat:hover {
    border-color: var(--tp-dark);
}

.tp-totals {
    width: min(100%, 22rem);
}

.tp-doc-vendor {
    white-space: pre-line;
}

.fs-component .tp-wishlist-title,
.fs-in-frame #wishlist_container h1 {
    display: none;
}

.tp-wishlist-manage > summary,
.tp-wishlist-rename > summary {
    list-style: none;
}

.tp-wishlist-manage > summary::-webkit-details-marker,
.tp-wishlist-rename > summary::-webkit-details-marker {
    display: none;
}

.tp-wishlist-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.tp-comparison.is-differences tr.is-same {
    display: none;
}

.tp-comparison-product {
    min-width: 12rem;
}

.tp-contact-map iframe {
    display: block;
    width: 100%;
    border: 0;
}

.tp-post-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.tp-posts-intro-image {
    max-width: 16rem;
}

.tp-auth-card {
    max-width: 32rem;
}

/* ---- Native adapters ported from Modern Classic (colours neutralised) ------------------ */
/* VirtueMart's address forms (bill to / ship to): fieldsets as cards, fields in two columns. */
.tp-account-content fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.25rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--tp-line);
    border-radius: calc(0.9rem * var(--fs-radius-scale, 1));
}

.tp-account-content fieldset > legend {
    float: none;
    grid-column: 1 / -1;
    width: auto;
    padding: 0 0.4rem;
    margin: 0 0 0 -0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.tp-account-content fieldset > div[id$="_div"] {
    min-width: 0;
}

.tp-account-content fieldset > div[style*="clear"] {
    display: none;
}

.tp-account-content .formLabel {
    margin-bottom: 0.3rem;
    color: var(--tp-muted);
    font-size: 0.85rem;
}

.tp-account-content .formLabel.missing {
    color: var(--tp-danger);
}

.tp-account-content .formLabel .required {
    color: var(--tp-danger);
}

.tp-account-content .formField input[type="text"],
.tp-account-content .formField input[type="password"],
.tp-account-content .formField input[type="email"],
.tp-account-content .formField select,
.tp-account-content .formField textarea {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: calc(0.5rem * var(--fs-radius-scale, 1));
    background: #fff;
}

.tp-account-content .formField input:focus,
.tp-account-content .formField select:focus,
.tp-account-content .formField textarea:focus {
    border-color: var(--tp-accent);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--fs-primary-rgb), 0.15);
}

.tp-account-content .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Single check boxes: VirtueMart puts the box in the label column and the label in the field
   column; both on one line, with some room above and below (V331). */
.tp-account-content fieldset > div[id$="_div"]:has(> .formLabel input[type="checkbox"]),
#checkout_accordiation .user_fields fieldset > div[id$="_div"]:has(> .formLabel input[type="checkbox"]) {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 0.6rem;
    margin-block: 0.5rem;
}

.tp-account-content fieldset > div[id$="_div"]:has(> .formLabel input[type="checkbox"]) > .formLabel,
#checkout_accordiation .user_fields fieldset > div[id$="_div"]:has(> .formLabel input[type="checkbox"]) > .formLabel {
    display: flex;
    margin: 0;
}

.tp-account-content fieldset > div[id$="_div"]:has(> .formLabel input[type="checkbox"]) input[type="checkbox"],
#checkout_accordiation .user_fields fieldset > div[id$="_div"]:has(> .formLabel input[type="checkbox"]) input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--tp-accent);
}

.tp-account-content fieldset > div[id$="_div"]:has(> .formLabel input[type="checkbox"]) > .formField label,
#checkout_accordiation .user_fields fieldset > div[id$="_div"]:has(> .formLabel input[type="checkbox"]) > .formField label {
    margin: 0;
    color: var(--tp-dark);
    cursor: pointer;
}

.tp-account-content fieldset > div[id$="_div"]:has(> .formLabel input[type="checkbox"]) > div[style*="clear"],
#checkout_accordiation .user_fields fieldset > div[id$="_div"]:has(> .formLabel input[type="checkbox"]) > div[style*="clear"] {
    display: none;
}

/* Field hints (a "hasTip" span with an old info image): an icon beside the field (V331). */
.tp-account-content .formField:has(> .hasTip),
#checkout_accordiation .formField:has(> .hasTip) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tp-account-content .formField:has(> .hasTip) > :is(input, select, textarea),
#checkout_accordiation .formField:has(> .hasTip) > :is(input, select, textarea) {
    min-width: 0;
    flex: 1;
}

.tp-account-content .formField > .hasTip,
#checkout_accordiation .formField > .hasTip {
    flex: none;
    color: var(--tp-muted);
    font-size: 0;
    cursor: help;
}

.tp-account-content .formField > .hasTip img,
#checkout_accordiation .formField > .hasTip img {
    display: none;
}

.tp-account-content .formField > .hasTip::before,
#checkout_accordiation .formField > .hasTip::before {
    content: "\f05a";
    font: var(--fa-font-solid);
    font-size: 1.1rem;
}

.tp-account-content .formField > .hasTip:hover,
#checkout_accordiation .formField > .hasTip:hover {
    color: var(--fs-primary-ink);
}

@media (max-width: 575.98px) {
    .tp-account-content fieldset {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------------------------------
   Checkout (com_freeshop checkout, layout "form"): the native accordion of three steps, styled
   in place (V329). The markup, its scripts and the inline heights the accordion animates stay
   native; !important only overrides the native inline widths, floats and line heights.
   Never force display here: the checkout scripts hide rows and fields with inline display:none.
   ------------------------------------------------------------------------------------------ */
#checkout_accordiation {
    display: flex;
    max-width: 68rem;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto 2rem;
    counter-reset: tp-checkout-step;
}

#checkout_accordiation .checkout_step {
    border: 1px solid var(--tp-line);
    border-radius: calc(1rem * var(--fs-radius-scale, 1));
    background: #fff;
    counter-increment: tp-checkout-step;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#checkout_accordiation .checkout_step.active_checkout_step {
    border-color: color-mix(in srgb, var(--tp-accent) 40%, var(--tp-line));
    box-shadow: 0 10px 30px rgba(33, 37, 41, 0.06);
}

/* Step header: a numbered badge, the step name and "Edit" for completed steps. */
#checkout_accordiation .step_header {
    position: relative;
}

#checkout_accordiation .step_header .header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "badge label edit"
        "badge title edit";
    align-items: center;
    column-gap: 0.9rem;
    padding: 1rem 1.25rem;
    color: var(--tp-muted);
}

#checkout_accordiation .step_header .header::before {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    grid-area: badge;
    place-items: center;
    border: 2px solid var(--tp-line);
    border-radius: 50%;
    background: #fff;
    color: var(--tp-muted);
    content: counter(tp-checkout-step);
    font-weight: 700;
}

#checkout_accordiation .step_header h5 {
    grid-area: label;
    margin: 0;
    color: var(--tp-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#checkout_accordiation .step_header h1 {
    grid-area: title;
    margin: 0;
    color: inherit;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
}

#checkout_accordiation .step_header .header_swicher {
    grid-area: edit;
    display: none;
    cursor: pointer;
}

#checkout_accordiation .step_header .header_swicher .edit {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--tp-line);
    border-radius: calc(2rem * var(--fs-radius-scale, 1));
    color: var(--tp-dark);
    font-size: 0.85rem;
    font-weight: 500;
}

#checkout_accordiation .step_header .header_swicher .edit::before {
    content: "\270E";
    color: var(--fs-primary-ink);
}

#checkout_accordiation .step_header .header_swicher:hover .edit {
    border-color: var(--tp-accent);
    color: var(--fs-primary-ink);
}

/* Completed steps: green check, clickable header, "Edit". */
#checkout_accordiation .checkout_step.valid_checkout_step:not(.active_checkout_step) .header {
    color: var(--tp-dark);
    cursor: pointer;
}

#checkout_accordiation .checkout_step.valid_checkout_step:not(.active_checkout_step) .header::before {
    border-color: var(--tp-accent);
    background: var(--tp-accent);
    color: var(--fs-on-primary);
    content: "\2713";
}

#checkout_accordiation .checkout_step.valid_checkout_step:not(.active_checkout_step) .header_swicher {
    display: block;
}

/* The open step. */
#checkout_accordiation .checkout_step.active_checkout_step .header {
    color: var(--tp-dark);
}

#checkout_accordiation .checkout_step.active_checkout_step .header::before {
    border-color: var(--tp-accent);
    color: var(--fs-primary-ink);
}

/* Loading: a spinner in the header while the step loads or stores. */
#checkout_accordiation .loading_point {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    display: none;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -0.75rem;
    border: 2px solid var(--tp-line);
    border-top-color: var(--tp-accent);
    border-radius: 50%;
    animation: tp-checkout-spin 0.8s linear infinite;
}

#checkout_accordiation .loading_checkout_step .loading_point {
    display: block;
}

#checkout_accordiation .loading_checkout_step .header_swicher {
    visibility: hidden;
}

@keyframes tp-checkout-spin {
    to {
        transform: rotate(360deg);
    }
}

/* The body: the accordion animates its inline height, so it clips and has no margins. */
#checkout_accordiation .step_body_container {
    overflow: hidden;
}

#checkout_accordiation .step_body {
    padding: 0.25rem 1.25rem 1.5rem;
}

#checkout_accordiation .loading_checkout_step .step_body {
    opacity: 0.55;
    transition: opacity 0.2s;
}

#checkout_accordiation .clr,
#checkout_accordiation .cart_white_line,
#checkout_accordiation .coupon_border {
    display: none;
}

/* Messages: Joomla's system message list inside a step, and the native info notes. */
#checkout_accordiation [id^="messages_step_"] {
    padding: 0 1.25rem;
}

/* Spacing as padding: the accordion measures scrollHeight, which leaves collapsed margins out. */
#checkout_accordiation [id^="messages_step_"]:not(:empty) {
    padding-bottom: 0.5rem;
}

#checkout_accordiation #system-message {
    margin: 0;
}

#checkout_accordiation #system-message dt {
    display: none;
}

#checkout_accordiation #system-message dd {
    padding: 0.75rem 1rem;
    margin: 0 0 0.5rem;
    border: 1px solid #f5c2c0;
    border-radius: calc(0.75rem * var(--fs-radius-scale, 1));
    background: #fdecea;
    color: #8a1f1b;
    /* Bootstrap's .fade would keep the message invisible. */
    opacity: 1;
}

#checkout_accordiation #system-message dd.message,
#checkout_accordiation #system-message dd.info {
    border-color: color-mix(in srgb, var(--tp-accent) 35%, #fff);
    background: var(--tp-soft);
    color: var(--tp-dark);
}

#checkout_accordiation #system-message dd.warning,
#checkout_accordiation #system-message dd.notice {
    border-color: #f6dfa4;
    background: #fff8e6;
    color: #7a5a00;
}

#checkout_accordiation #system-message dd.error {
    border-color: #f5c2c0;
    background: #fdecea;
    color: #8a1f1b;
}

#checkout_accordiation #system-message ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#checkout_accordiation .valid_messages {
    margin: 0 0 1rem !important;
}

#checkout_accordiation .valid_container {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: calc(0.75rem * var(--fs-radius-scale, 1));
    background: var(--tp-soft);
    color: var(--tp-dark);
    font-size: 0.9rem;
}

#checkout_accordiation .valid_container::before {
    flex: none;
    color: var(--fs-primary-ink);
    content: "\2139";
    font-weight: 700;
}

#checkout_accordiation .valid_container p {
    margin: 0;
}

/* Fieldsets: a heading, no frame (the step is the card). */
#checkout_accordiation fieldset {
    min-width: 0;
    padding: 0;
    margin: 0 0 1.25rem;
    border: 0;
}

#checkout_accordiation fieldset fieldset,
#checkout_accordiation #shipping_methods fieldset {
    margin-bottom: 0;
}

#checkout_accordiation fieldset > legend {
    float: none;
    width: 100%;
    padding: 0 0 0.6rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--tp-line);
    font-size: 1rem;
    font-weight: 700;
}

/* Form controls and buttons (the checkout keeps its native markup, not Bootstrap's). */
#checkout_accordiation input[type="text"],
#checkout_accordiation input[type="password"],
#checkout_accordiation input[type="email"],
#checkout_accordiation input[type="tel"],
#checkout_accordiation select,
#checkout_accordiation textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 2.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: calc(0.5rem * var(--fs-radius-scale, 1));
    background-color: #fff;
    color: var(--tp-dark);
    font: inherit;
}

#checkout_accordiation select {
    padding-right: 2.25rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") right 0.75rem center / 0.75rem no-repeat;
    appearance: none;
}

#checkout_accordiation textarea {
    min-height: 6rem;
    resize: vertical;
}

#checkout_accordiation input:focus,
#checkout_accordiation select:focus,
#checkout_accordiation textarea:focus {
    border-color: var(--tp-accent);
    outline: 0;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--tp-accent) 18%, transparent);
}

#checkout_accordiation input.invalid,
#checkout_accordiation select.invalid,
#checkout_accordiation textarea.invalid {
    border-color: var(--tp-danger);
}

#checkout_accordiation input[type="radio"],
#checkout_accordiation input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    margin: 0;
    accent-color: var(--tp-accent);
    cursor: pointer;
}

#checkout_accordiation .button,
#checkout_accordiation .cp_button {
    display: inline-flex;
    min-height: 2.6rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.1rem;
    border: 1px solid #ced4da;
    border-radius: calc(0.5rem * var(--fs-radius-scale, 1));
    background: #fff;
    color: var(--tp-dark);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

#checkout_accordiation .button:hover,
#checkout_accordiation .cp_button:hover {
    border-color: var(--tp-accent);
    color: var(--fs-primary-ink);
}

/* The main action of each step ("Continue", "View and pay", "Submit order") and "Apply". */
#checkout_accordiation .button.checkout,
#checkout_accordiation .button.registration_button,
#checkout_accordiation input[type="submit"].button,
#checkout_accordiation .cp_button {
    border-color: var(--tp-accent);
    background: var(--tp-accent);
    color: var(--fs-on-primary);
}

#checkout_accordiation .button.checkout:hover,
#checkout_accordiation .button.registration_button:hover,
#checkout_accordiation input[type="submit"].button:hover,
#checkout_accordiation .cp_button:hover {
    border-color: color-mix(in srgb, var(--tp-accent), #000 12%);
    background: color-mix(in srgb, var(--tp-accent), #000 12%);
    color: #fff;
}

#checkout_accordiation .button.checkout {
    min-height: 3rem;
    padding-inline: 2rem;
    font-size: 1rem;
}

#checkout_accordiation .button:disabled,
#checkout_accordiation .cp_button:disabled {
    opacity: 0.6;
    cursor: wait;
}

#checkout_accordiation .buttons,
#checkout_accordiation .form_item.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* The save / back buttons under the billing and ship-to forms (V336). */
#checkout_accordiation #checkout_billing .form_item.buttons,
#checkout_accordiation #checkout_shipto .form_item.buttons {
    margin-top: 1.25rem;
}

/* V490: step 2 "Continue" (buying without registration, registration) keeps a gap from the fields. */
#checkout_accordiation .form_item.buttons:has(.registration_button) {
    margin-top: 1.25rem;
}

/* Two-column step bodies (step 2, the payment part of step 3). */
#checkout_accordiation .form_box.main_form {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.5rem 2rem;
}

#checkout_accordiation .form_box .form_left,
#checkout_accordiation .form_box .form_right {
    float: none !important;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
}

/* ---- Step 1: the cart ---- */
#checkout_accordiation .cart_top {
    border: 0 !important;
}

#checkout_accordiation #mega_cart_list .product_row {
    padding: 1rem 0;
    border-bottom: 1px solid var(--tp-line);
}

#checkout_accordiation #mega_cart_list .product_row:first-child {
    padding-top: 0.25rem;
}

#checkout_accordiation #mega_cart_list .product_row_body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
}

#checkout_accordiation #mega_cart_list .product_row_body > .data:first-child {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

#checkout_accordiation #mega_cart_list .product_row_body > .data:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

#checkout_accordiation .product_image {
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border: 1px solid var(--tp-line);
    border-radius: calc(0.75rem * var(--fs-radius-scale, 1));
    background: #fff;
}

/* V382: the native link carries its own 50 px size (inline): fill the box and centre the picture. */
#checkout_accordiation .product_image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}

#checkout_accordiation .product_image a {
    display: flex;
    width: 100% !important;
    height: 100% !important;
    align-items: center;
    justify-content: center;
}

#checkout_accordiation .product_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#checkout_accordiation .product_data {
    min-width: 0;
}

#checkout_accordiation .product_data h4 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

#checkout_accordiation .product_data .atributes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
    color: var(--tp-muted);
    font-size: 0.82rem;
}

#checkout_accordiation .quantity_box {
    width: auto !important;
    min-width: 0 !important;
}

#checkout_accordiation .qty_body {
    display: inline-flex;
    height: 2.5rem;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #ced4da;
    border-radius: calc(2rem * var(--fs-radius-scale, 1));
}

#checkout_accordiation .qty_body .cart_button_minus,
#checkout_accordiation .qty_body .cart_button_plus {
    display: flex;
    width: 2.4rem;
    align-items: center;
    justify-content: center;
    color: var(--tp-dark);
    font-size: 1.1rem;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

#checkout_accordiation .qty_body .cart_button_minus::before {
    content: "\2212";
}

#checkout_accordiation .qty_body .cart_button_plus::before {
    content: "+";
}

#checkout_accordiation .qty_body .cart_button_minus:hover,
#checkout_accordiation .qty_body .cart_button_plus:hover {
    background: var(--tp-soft);
    color: var(--fs-primary-ink);
}

#checkout_accordiation .qty_body input[type="text"] {
    width: 2.75rem;
    min-height: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    font-weight: 600;
}

#checkout_accordiation #mega_cart_list .price_body {
    width: auto !important;
    min-width: 5.5rem;
    color: var(--tp-dark);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: right;
}

#checkout_accordiation .delete_button {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M4.3 3.2 8 6.9l3.7-3.7 1.1 1.1L9.1 8l3.7 3.7-1.1 1.1L8 9.1l-3.7 3.7-1.1-1.1L6.9 8 3.2 4.3z'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
    color: transparent;
    font-size: 0;
    cursor: pointer;
}

#checkout_accordiation .delete_button:hover {
    background-color: #fdecea;
}

/* Cart totals: a summary on the right, the coupon hint and "Continue" below. */
#checkout_accordiation #mega_cart_totals .cart_bottom {
    display: flex;
    max-width: 22rem;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 0 0;
    margin-left: auto;
}

#checkout_accordiation #mega_cart_totals .cart_bottom .product_row_body {
    display: flex;
    min-height: 0 !important;
}

#checkout_accordiation #mega_cart_totals .cart_bottom .product_row_body > .data:first-child,
#checkout_accordiation #mega_cart_totals .cart_bottom .product_row_body > div[style*="clear"] {
    display: none;
}

#checkout_accordiation #mega_cart_totals .cart_bottom .product_row_body > .data {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

#checkout_accordiation #mega_cart_totals .cart_bottom .price_body {
    width: auto !important;
    min-width: 0 !important;
    color: var(--tp-muted);
    line-height: 1.5 !important;
    text-align: left !important;
}

#checkout_accordiation #mega_cart_totals .cart_bottom .price_body:last-child {
    color: var(--tp-dark);
    text-align: right !important;
}

#checkout_accordiation #mega_cart_totals .cart_bottom .product_row:last-child {
    padding-top: 0.6rem;
    margin-top: 0.3rem;
    border-top: 1px solid var(--tp-line);
}

#checkout_accordiation #mega_cart_totals .cart_bottom .product_row:last-child .price_body {
    color: var(--tp-dark);
    font-size: 1.1rem;
    font-weight: 700;
}

#checkout_accordiation #mega_cart_totals .cart_bottom .product_row:last-child .price_body:last-child {
    color: var(--fs-primary-ink);
    font-size: 1.35rem;
}

#checkout_accordiation #mega_cart_totals #step1Form > div[style*="float"] {
    float: none !important;
    padding-top: 1.25rem !important;
}

#checkout_accordiation #mega_cart_totals .form_box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 0 !important;
}

#checkout_accordiation #mega_cart_totals .cart_message {
    padding: 0 !important;
}

#checkout_accordiation #mega_cart_totals .valid_messages {
    margin: 0 !important;
}

#checkout_accordiation #mega_cart_totals .form_right {
    margin-left: auto;
}

#checkout_accordiation #mega_cart_totals .form_box > div[style*="clear"],
#checkout_accordiation #mega_cart_totals .form_right > div[style*="clear"] {
    display: none;
}

/* ---- Step 2: buyer and delivery ---- */
/* Choices as selectable tiles (buy options, addresses, shipping and payment methods, rates). */
#checkout_accordiation .buy_option .option,
#checkout_accordiation #address_chooser .option,
#checkout_accordiation .shipping_m,
#checkout_accordiation .payment_m {
    position: relative;
    padding: 0.8rem 1rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--tp-line);
    border-radius: calc(0.75rem * var(--fs-radius-scale, 1));
    background: #fff;
    transition: border-color 0.15s, background-color 0.15s;
}

#checkout_accordiation .buy_option .option:hover,
#checkout_accordiation #address_chooser .option:hover,
#checkout_accordiation .shipping_m:hover,
#checkout_accordiation .payment_m:hover {
    border-color: color-mix(in srgb, var(--tp-accent) 45%, var(--tp-line));
}

#checkout_accordiation .buy_option .option:has(> input:checked),
#checkout_accordiation #address_chooser .option:has(> input:checked),
#checkout_accordiation .shipping_m:has(.selector_div input:checked),
#checkout_accordiation .payment_m:has(.selector_div input:checked) {
    border-color: var(--tp-accent);
    background: var(--tp-soft);
    box-shadow: inset 0 0 0 1px var(--tp-accent);
}

#checkout_accordiation .buy_option .option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

#checkout_accordiation .buy_option .option label,
#checkout_accordiation #address_chooser .option > label,
#checkout_accordiation .selector_div label,
#checkout_accordiation .shipping_rate_row label,
#checkout_accordiation .payment_rate_row label {
    flex: 1;
    margin: 0;
    cursor: pointer;
}

/* The whole tile selects its radio. */
#checkout_accordiation .buy_option .option label::after,
#checkout_accordiation .selector_div label::after {
    position: absolute;
    inset: 0;
    content: "";
}

#checkout_accordiation .buy_option .option input,
#checkout_accordiation .selector_div input {
    position: relative;
    z-index: 1;
}

/* Saved addresses: cards in a grid. */
#checkout_accordiation #address_chooser {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

#checkout_accordiation #address_chooser .option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

#checkout_accordiation #address_chooser .option > label {
    font-weight: 600;
}

#checkout_accordiation #address_chooser .option > div[style*="clear"] {
    display: none;
}

#checkout_accordiation #address_chooser .option_details {
    flex-basis: 100%;
    padding-left: 1.7rem;
    color: var(--tp-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

#checkout_accordiation #address_chooser .option_details .link {
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--fs-primary-ink);
    font-weight: 600;
    cursor: pointer;
}

/* Shipping and payment methods, their rates and terminals. */
#checkout_accordiation .shipping_m > .form_row,
#checkout_accordiation .payment_m > .form_row {
    margin: 0;
}

#checkout_accordiation .selector_div {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

/* The radio's wrapper is a block with a line box; as a flex box the radio centres on the text. */
#checkout_accordiation .selector_div .form_item.input {
    display: flex;
    align-items: center;
}

#checkout_accordiation .selector_div .form_item.label {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

#checkout_accordiation .selector_div label img {
    max-height: 2rem;
    width: auto;
}

#checkout_accordiation .selector_div label br {
    display: none;
}

#checkout_accordiation .shipping_method_rates,
#checkout_accordiation .payment_method_rates {
    position: relative;
    z-index: 1;
}

#checkout_accordiation .shipping_method_rates .rates,
#checkout_accordiation .payment_method_rates .rates {
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px dashed color-mix(in srgb, var(--tp-accent) 30%, var(--tp-line));
}

#checkout_accordiation .rates .form_right {
    width: auto !important;
}

#checkout_accordiation .shipping_rate_row,
#checkout_accordiation .payment_rate_row {
    padding: 0.5rem 0.25rem;
}

#checkout_accordiation .shipping_rate_row .form_item.input:first-child,
#checkout_accordiation .payment_rate_row .form_item.input:first-child {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

#checkout_accordiation .shipping_rate_row.active > .form_item:first-child label,
#checkout_accordiation .payment_rate_row.active > .form_item:first-child label {
    font-weight: 600;
}

/* Rate details (V336): the pickup point's own heading repeats the rate name and the parcel
   lockers' "Terminals" heading says nothing; only the details and the select stay. */
#checkout_accordiation .shipping_rate_terminals fieldset > legend,
#checkout_accordiation .payment_rate_terminals fieldset > legend {
    display: none;
}

#checkout_accordiation .shipping_rate_terminals fieldset,
#checkout_accordiation .payment_rate_terminals fieldset {
    margin: 0;
    color: var(--tp-muted);
    font-size: 0.88rem;
}

#checkout_accordiation .shipping_rate_terminals:not(:empty),
#checkout_accordiation .payment_rate_terminals:not(:empty) {
    padding: 0.5rem 0 0 1.7rem;
}

/* Notes, the delivery date and the step button. */
#checkout_accordiation #shipping_details,
#checkout_accordiation #shipping_note {
    margin-top: 1rem;
}

#checkout_accordiation #shipping_details .form_row,
#checkout_accordiation #shipping_note .form_row {
    margin-bottom: 1rem;
}

#checkout_accordiation #shipping_details .form_left,
#checkout_accordiation #shipping_note .form_left,
#checkout_accordiation #shipping_details .form_right,
#checkout_accordiation #shipping_note .form_right {
    float: none !important;
    width: auto !important;
}

#checkout_accordiation label[for="customer_note"],
#checkout_accordiation label[for="customer_date_delivery"] {
    margin-bottom: 0.35rem;
    color: var(--tp-muted);
    font-size: 0.85rem;
}

#checkout_accordiation #main_step2_button {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
}

/* Registration, guest details, billing and ship-to forms (VirtueMart user fields). */
#checkout_accordiation .user_fields fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

#checkout_accordiation .user_fields fieldset > legend {
    grid-column: 1 / -1;
    margin-bottom: 0;
    border: 0;
    padding-bottom: 0;
    color: var(--tp-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* V655: room around the form's section titles (buyer information, send registration) and the security code block,
   whose title is a legend like theirs. */
#checkout_accordiation .user_fields fieldset + fieldset:has(> legend),
#checkout_accordiation #registration_captcha {
    margin-top: 1.5rem;
}

#checkout_accordiation .user_fields fieldset > legend {
    margin-bottom: 0.75rem;
}

#checkout_accordiation #registration_captcha > legend {
    float: none;
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
    color: var(--tp-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#checkout_accordiation .user_fields fieldset > div {
    min-width: 0;
}

/* Wide fields: the buyer type, e-mail, address, note-like fields. */
#checkout_accordiation .user_fields #buyer_type_div,
#checkout_accordiation .user_fields #email_div,
#checkout_accordiation .user_fields #address_1_div,
#checkout_accordiation .user_fields #address_2_div,
#checkout_accordiation .user_fields #company_div,
#checkout_accordiation .user_fields #agreed_div,
#checkout_accordiation .user_fields #registration_captcha {
    grid-column: 1 / -1;
}

/* V491: the buyer type ("no invoice" / "invoice"): each radio centred on its text, more room between. */
#checkout_accordiation #buyer_type_input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.5rem;
    margin-block: 0.25rem 0.5rem;
}

#checkout_accordiation #buyer_type_input label {
    margin: 0 1.5rem 0 0;
    line-height: 1.3;
    cursor: pointer;
}

#checkout_accordiation .user_fields div[style*="clear"],
#checkout_accordiation .form > div[style*="clear"],
#checkout_accordiation fieldset > div[style*="clear"] {
    display: none;
}

#checkout_accordiation .formLabel {
    float: none !important;
    width: auto !important;
    margin-bottom: 0.3rem;
    color: var(--tp-muted);
    font-size: 0.85rem;
}

#checkout_accordiation .formLabel label {
    margin: 0;
}

#checkout_accordiation .formLabel.missing,
#checkout_accordiation .formLabel .required,
#checkout_accordiation .warning .required {
    color: var(--tp-danger);
}

#checkout_accordiation .formField {
    float: none !important;
    width: auto !important;
}

/* The empty ("&nbsp;") label placeholders before buttons and check boxes. */
#checkout_accordiation .formLabel:not(:has(*)) {
    display: none;
}

#checkout_accordiation .form > .formField {
    margin-top: 1rem;
}

#checkout_accordiation .form-validate > .warning {
    padding: 0 0 0.75rem !important;
    color: var(--tp-muted);
    font-size: 0.8rem;
    text-align: left !important;
}

#checkout_accordiation .form-validate > .warning strong {
    font-weight: 400;
}

/* Radio lists (e.g. "Invoice needed / not needed") as a segmented choice. */
#checkout_accordiation .formField table {
    width: 100%;
    margin: 0;
    border: 0;
}

#checkout_accordiation .formField table tbody {
    display: block;
}

#checkout_accordiation .formField table tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#checkout_accordiation .formField table td {
    display: flex;
    flex: 1 1 10rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--tp-line);
    border-radius: calc(0.6rem * var(--fs-radius-scale, 1));
}

#checkout_accordiation .formField table td:has(input:checked) {
    border-color: var(--tp-accent);
    background: var(--tp-soft);
}

#checkout_accordiation .formField table td label {
    flex: 1;
    margin: 0;
    cursor: pointer;
}

/* Login. */
#checkout_accordiation #checkout_login .formLabel,
#checkout_accordiation #checkout_login .formField {
    margin-bottom: 0.25rem;
}

#checkout_accordiation #checkout_login .formField {
    margin-bottom: 0.9rem;
}

#checkout_accordiation #checkout_login .formField:has(> .check_input) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#checkout_accordiation .link_after_input {
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--fs-primary-ink);
    font-size: 0.85rem;
}

/* ---- Step 3: confirmation and payment ---- */
#checkout_accordiation .step_3_omega_content {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}

#checkout_accordiation .step_3_omega_content > .valid_messages {
    grid-column: 1 / -1;
}

/* Discount code and loyalty points. */
#checkout_accordiation #discounts_container .el_coupns {
    margin-bottom: 0.9rem;
}

#checkout_accordiation .el_coupns .l label {
    margin-bottom: 0.3rem;
    color: var(--tp-muted);
    font-size: 0.85rem;
}

#checkout_accordiation .el_coupns .r {
    display: flex;
    gap: 0.5rem;
}

#checkout_accordiation .el_coupns .r input[type="text"] {
    flex: 1;
    min-width: 0;
}

#checkout_accordiation .el_coupns .r > div:empty {
    display: none;
}

/* Applied codes and points; the native rows are not Bootstrap grid rows. */
#checkout_accordiation #coupons_container .row {
    position: relative;
    display: block;
    padding: 0.55rem 2.75rem 0.55rem 0.8rem;
    margin: 0 0 0.5rem;
    border: 1px dashed var(--tp-accent);
    border-radius: calc(0.6rem * var(--fs-radius-scale, 1));
    background: var(--tp-soft);
    font-size: 0.9rem;
}

#checkout_accordiation #coupons_container .row > * {
    width: auto;
    padding: 0;
    margin: 0;
}

#checkout_accordiation #coupons_container .row strong {
    color: var(--fs-primary-ink);
    white-space: nowrap;
}

#checkout_accordiation #coupons_container .c_d {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: -0.875rem;
    border-radius: 50%;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M4.3 3.2 8 6.9l3.7-3.7 1.1 1.1L9.1 8l3.7 3.7-1.1 1.1L8 9.1l-3.7 3.7-1.1-1.1L6.9 8 3.2 4.3z'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

#checkout_accordiation #coupons_container .c_d:hover {
    background-color: #fdecea;
}

#checkout_accordiation #bonus_absolute {
    margin-bottom: 0;
    color: var(--tp-muted);
    font-size: 0.88rem;
}

/* Summary card: the total and the delivery / contact details. */
#checkout_accordiation #final_info {
    padding: 1.25rem;
    border-radius: calc(0.9rem * var(--fs-radius-scale, 1));
    background: var(--tp-soft);
}

#checkout_accordiation .final_price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label total"
        "note total";
    align-items: center;
    column-gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--tp-accent) 20%, var(--tp-line));
}

#checkout_accordiation .final_price .top_layer {
    grid-area: label;
}

#checkout_accordiation .final_price .medium_layer {
    grid-area: note;
}

#checkout_accordiation .final_price .main_layer {
    grid-area: total;
}

#checkout_accordiation .final_price h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

#checkout_accordiation .final_price h4 {
    margin: 0;
    color: var(--tp-muted);
    font-size: 0.82rem;
    font-weight: 400;
}

#checkout_accordiation .final_price h1 {
    margin: 0;
    color: var(--fs-primary-ink);
    font-size: 1.75rem;
    font-weight: 700;
    white-space: nowrap;
}

#checkout_accordiation .final_shipping {
    display: grid;
    gap: 1rem;
}

#checkout_accordiation .shipping_block {
    color: var(--tp-dark);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

#checkout_accordiation .shipping_block .top h3 {
    margin: 0 0 0.3rem;
    color: var(--tp-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Payment and the final confirmation. */
#checkout_accordiation #step3Form > .form_box.main_form {
    display: block;
}

#checkout_accordiation #step3Form > .form_box.main_form > div {
    padding-top: 0 !important;
}

#checkout_accordiation #third_step_payment .form_right {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.6rem;
}

#checkout_accordiation #third_step_payment .payment_m {
    margin: 0;
}

#checkout_accordiation #addintional_info_final {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tp-line);
}

#checkout_accordiation .agree_ch .form_element {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

#checkout_accordiation .agree_ch a,
#checkout_accordiation .legal_info a {
    color: var(--fs-primary-ink);
    text-decoration: underline;
}

/* The terms link opens in the native modal (class "modal"), which Bootstrap would hide. */
#checkout_accordiation a.modal {
    position: static;
    z-index: auto;
    display: inline;
    width: auto;
    height: auto;
    overflow: visible;
}

#checkout_accordiation .final_info {
    flex-basis: 100%;
    order: -1;
    color: var(--tp-muted);
    font-size: 0.85rem;
}

#checkout_accordiation #addintional_info_final #main_step2_button {
    margin-left: auto;
    padding: 0;
}

/* ---- Thank you page ---- */
#thanks {
    max-width: 40rem;
    padding: 2rem 1.5rem;
    margin: 1rem auto 2.5rem;
    border: 1px solid var(--tp-line);
    border-radius: calc(1rem * var(--fs-radius-scale, 1));
    background: #fff;
    text-align: center;
}

#thanks .thx_block h3::before {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: 50%;
    background: var(--tp-accent);
    color: var(--fs-on-primary);
    content: "\2713";
    font-size: 1.6rem;
}

#thanks .thx_block h3 {
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    font-weight: 700;
}

#thanks .info {
    padding: 0.5rem 1.25rem;
    border-radius: calc(0.9rem * var(--fs-radius-scale, 1));
    background: var(--tp-soft);
    text-align: left;
}

/* The native rows are not Bootstrap grid rows. */
#thanks .info .row {
    display: block;
    padding: 0.6rem 0;
    margin: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--tp-accent) 15%, var(--tp-line));
}

#thanks .info .row:last-child {
    border-bottom: 0;
}

#thanks .info .row > * {
    width: auto;
    padding: 0;
}

#thanks .info p {
    margin: 0;
    color: var(--tp-muted);
}

#thanks .info p > span {
    color: var(--tp-dark);
    font-weight: 700;
}

#thanks .info .stitle > span {
    display: block;
    margin-bottom: 0.25rem;
}

#thanks .final_button {
    margin-top: 1.5rem;
}

#thanks .final_button a {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    padding: 0.5rem 1.5rem;
    border-radius: calc(0.5rem * var(--fs-radius-scale, 1));
    background: var(--tp-accent);
    color: var(--fs-on-primary);
    font-weight: 600;
}

#thanks .final_button a:hover {
    background: color-mix(in srgb, var(--tp-accent), #000 12%);
    color: #fff;
}

/* ---- Checkout on smaller screens ---- */
@media (max-width: 991.98px) {
    #checkout_accordiation .form_box.main_form,
    #checkout_accordiation .step_3_omega_content {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    #checkout_accordiation .step_header .header {
        padding: 0.85rem 1rem;
        column-gap: 0.7rem;
    }

    #checkout_accordiation .step_header h1 {
        font-size: 1rem;
    }

    #checkout_accordiation .step_body {
        padding: 0.25rem 1rem 1.25rem;
    }

    #checkout_accordiation [id^="messages_step_"] {
        padding: 0 1rem;
    }

    /* Cart rows: product on top, quantity and price below. */
    #checkout_accordiation #mega_cart_list .product_row_body {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "product remove"
            "numbers numbers";
        gap: 0.75rem;
    }

    #checkout_accordiation #mega_cart_list .product_row_body > .data:first-child {
        grid-area: product;
    }

    #checkout_accordiation #mega_cart_list .product_row_body > .data:nth-child(2) {
        grid-area: numbers;
        justify-content: space-between;
        padding-left: 5.5rem;
    }

    #checkout_accordiation #mega_cart_list .product_row_body > .actions {
        grid-area: remove;
        align-self: start;
    }

    #checkout_accordiation .product_image {
        width: 4.5rem;
        height: 4.5rem;
    }

    #checkout_accordiation #mega_cart_totals .cart_bottom {
        max-width: none;
    }

    #checkout_accordiation #mega_cart_totals .form_right {
        flex-basis: 100%;
    }

    #checkout_accordiation #mega_cart_totals .next_button,
    #checkout_accordiation .button.checkout,
    #checkout_accordiation .button.registration_button,
    #checkout_accordiation #checkout_login input[type="submit"],
    #checkout_accordiation #main_step2_button {
        width: 100%;
    }

    #checkout_accordiation .user_fields fieldset {
        grid-template-columns: minmax(0, 1fr);
    }

    #checkout_accordiation #addintional_info_final #main_step2_button {
        margin-left: 0;
    }

    #checkout_accordiation .final_price h1 {
        font-size: 1.45rem;
    }
}

/* The Joomla account form (com_user, layout "form"): its table as a single column form (V333). */
.tp-account-profile form {
    max-width: 36rem;
}

.tp-account-profile table,
.tp-account-profile tbody,
.tp-account-profile tr,
.tp-account-profile td {
    display: block;
    width: auto;
}

.tp-account-profile table.table {
    margin: 0;
}

.tp-account-profile .table > :not(caption) > * > * {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.tp-account-profile tr {
    margin-bottom: 0.9rem;
}

.tp-account-profile td:first-child,
.tp-account-profile td.paramlist_key {
    margin-bottom: 0.3rem;
    color: var(--tp-muted);
    font-size: 0.85rem;
}

.tp-account-profile td:first-child label {
    margin: 0;
}

.tp-account-profile td > span {
    font-weight: 600;
}

.tp-account-profile button[type="submit"] {
    margin-top: 0.5rem;
}


/* ------------------------------------------------------------------------------------------
   PDF (V340): print=1 pages rendered by wkhtmltopdf (body.fs-pdf). Its old WebKit engine has no
   CSS variables, grid or modern flexbox, so these rules use plain values and table layout.
   ------------------------------------------------------------------------------------------ */
.fs-pdf {
    margin: 0;
    background: #fff;
    color: #212529;
    font-family: "DejaVu Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
}

/* Bootstrap's reboot gives table parts "border-style: solid" with a zero width; the old engine
   still draws hairlines for them (the frames around the PDF header / footer). No table borders
   unless a rule below sets one (V343). */
.fs-pdf table,
.fs-pdf thead,
.fs-pdf tbody,
.fs-pdf tfoot,
.fs-pdf tr,
.fs-pdf th,
.fs-pdf td {
    border-style: none;
}

.fs-pdf main.container,
.fs-pdf .fs-section {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
}

.fs-pdf .md-print-hide,
.fs-pdf .md-doc-tools,
.fs-pdf .md-doc i {
    display: none;
}

.fs-pdf a {
    color: #212529;
    text-decoration: none;
}

.fs-pdf .md-doc {
    max-width: none;
    padding: 0;
    margin: 14px 0 0;
    border: 0;
    background: #fff;
}

.fs-pdf .md-doc-head {
    display: table;
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid #212529;
}

.fs-pdf .md-doc-head > * {
    display: table-cell;
    vertical-align: top;
}

.fs-pdf .md-doc-head h1 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
}

.fs-pdf .md-doc-meta {
    display: block;
    color: #6c757d;
    font-size: 11px;
}

.fs-pdf .md-doc-meta > span {
    display: inline-block;
    margin-right: 10px;
}

.fs-pdf .md-status {
    padding: 1px 8px;
    border-radius: 8px;
    background: #f1f3f5;
    color: #212529;
    font-size: 10px;
    font-weight: 700;
}

.fs-pdf .md-doc-vendor,
.fs-pdf .md-doc-logo {
    color: #6c757d;
    font-size: 11px;
    text-align: right;
}

.fs-pdf .md-doc-logo {
    max-width: 180px;
    max-height: 60px;
}

.fs-pdf .md-doc-parties {
    display: table;
    width: 100%;
    margin-bottom: 16px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 8px 0;
    font-size: 11px;
}

.fs-pdf .md-doc-party {
    display: table-cell;
    padding: 8px 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    vertical-align: top;
}

.fs-pdf .md-doc-party h2 {
    margin: 0 0 4px;
    color: #6c757d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fs-pdf .md-doc-party h2.mt-3 {
    margin-top: 10px;
}

.fs-pdf .md-doc-lines {
    overflow: visible;
}

.fs-pdf .md-doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.fs-pdf .md-doc-table th {
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid #212529;
    background: #f1f3f5;
    color: #6c757d;
    font-size: 9px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

.fs-pdf .md-doc-table td {
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid #dee2e6;
    vertical-align: top;
}

.fs-pdf .md-doc-table .text-end {
    text-align: right;
}

.fs-pdf .md-doc-table tr {
    page-break-inside: avoid;
}

.fs-pdf .md-doc-muted {
    color: #6c757d;
    font-size: 10px;
}

.fs-pdf .md-doc-totals {
    width: 45%;
    margin: 12px 0 0 55%;
    font-size: 11px;
}

.fs-pdf .md-doc-totals > div {
    display: table;
    width: 100%;
    padding: 3px 0;
}

.fs-pdf .md-doc-totals dt,
.fs-pdf .md-doc-totals dd {
    display: table-cell;
    margin: 0;
}

.fs-pdf .md-doc-totals dt {
    color: #6c757d;
    font-weight: 400;
}

.fs-pdf .md-doc-totals dd {
    text-align: right;
    white-space: nowrap;
}

.fs-pdf .md-doc-totals .is-total {
    padding-top: 6px;
    margin-top: 4px;
    border-top: 2px solid #212529;
    font-size: 14px;
    font-weight: 700;
}

.fs-pdf .md-doc-totals .is-total dt {
    color: #212529;
    font-weight: 700;
}

.fs-pdf .md-doc-note {
    padding: 8px 10px;
    margin-top: 16px;
    border-radius: 6px;
    background: #f1f3f5;
    font-size: 11px;
}

.fs-pdf .md-doc-note h2 {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
}

.fs-pdf .md-doc-words,
.fs-pdf .md-doc-signature {
    margin: 12px 0 0;
    font-size: 11px;
}

/* The PDF page header and footer (com_freeshop pdf view, layouts header / footer). */
.fs-pdf .pdf_header,
.fs-pdf .pdf_footer {
    width: 100%;
    border-collapse: collapse;
    color: #6c757d;
    font-size: 10px;
}

.fs-pdf .pdf_header,
.fs-pdf .pdf_footer,
.fs-pdf .pdf_header tr,
.fs-pdf .pdf_footer tr,
.fs-pdf .pdf_header td,
.fs-pdf .pdf_footer td {
    border: 0;
}

.fs-pdf .pdf_header td,
.fs-pdf .pdf_footer td {
    padding: 4px 0;
    vertical-align: middle;
}

.fs-pdf .pdf_header strong {
    color: #212529;
    font-size: 11px;
}

/* Invoice templates (com_invoices "template" layout, seeded by invoice-templates:seed, V345):
   the same md-doc blocks as the order, with the parser's field tables and a totals table. */
.invoice_wrapper #tools {
    max-width: 60rem;
    margin: 0 auto 0.75rem;
    color: var(--tp-muted);
    font-size: 0.85rem;
    text-align: right;
}

.invoice_wrapper #tools img {
    display: none;
}

.invoice_wrapper #tools a {
    margin-left: 0.4rem;
    color: var(--fs-primary-ink);
    font-weight: 600;
}

.md-doc-fields {
    width: 100%;
    border-collapse: collapse;
}

.md-doc-fields td {
    padding: 0;
    border: 0;
}

.md-doc-fields td:empty,
.md-doc-muted:empty {
    display: none;
}

.md-invoice-template .md-doc-vendor {
    white-space: normal;
}

.md-doc-vendor .md-doc-fields {
    width: auto;
    margin-left: auto;
    text-align: right;
}

.md-doc-buyer .md-doc-fields tr:first-child td {
    font-weight: 700;
}

.md-doc-sum {
    width: min(100%, 22rem);
    margin: 1rem 0 0 auto;
    border-collapse: collapse;
}

.md-doc-sum th {
    padding: 0.3rem 0;
    color: var(--tp-muted);
    font-weight: 400;
    text-align: left;
}

.md-doc-sum td {
    padding: 0.3rem 0;
    text-align: right;
    white-space: nowrap;
}

.md-doc-sum tr.is-total th,
.md-doc-sum tr.is-total td {
    padding-top: 0.6rem;
    border-top: 2px solid var(--tp-dark);
    color: var(--tp-dark);
    font-size: 1.1rem;
    font-weight: 700;
}

@media print {
    .invoice_wrapper #tools {
        display: none;
    }
}

/* The same in PDF (plain values for wkhtmltopdf). */
.fs-pdf .invoice_wrapper #tools {
    display: none;
}

.fs-pdf .md-doc-vendor .md-doc-fields {
    margin-left: auto;
    color: #6c757d;
    font-size: 11px;
}

.fs-pdf .md-doc-party .md-doc-fields td {
    padding: 0;
}

.fs-pdf .md-doc-sum {
    width: 45%;
    margin: 12px 0 0 55%;
    font-size: 11px;
}

.fs-pdf .md-doc-sum th {
    padding: 3px 0;
    color: #6c757d;
    font-weight: 400;
    text-align: left;
}

.fs-pdf .md-doc-sum td {
    padding: 3px 0;
    text-align: right;
    white-space: nowrap;
}

.fs-pdf .md-doc-sum tr.is-total th,
.fs-pdf .md-doc-sum tr.is-total td {
    padding-top: 6px;
    border-top: 2px solid #212529;
    color: #212529;
    font-size: 14px;
    font-weight: 700;
}

/* Messages printed by payment modules and other native code ("shop_message shop_error", V347). */
.shop_message {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem 0.85rem 2.75rem;
    margin-bottom: 1rem;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--tp-accent) 35%, #fff);
    border-radius: calc(0.75rem * var(--fs-radius-scale, 1));
    background: var(--tp-soft);
    color: var(--tp-dark);
    line-height: 1.45;
}

.shop_message::before {
    position: absolute;
    top: 0.85rem;
    left: 1rem;
    color: var(--fs-primary-ink);
    content: "\f05a";
    font: var(--fa-font-solid);
    font-size: 1.1rem;
}

.shop_message.shop_error {
    border-color: #f5c2c0;
    background: #fdecea;
    color: #8a1f1b;
}

.shop_message.shop_error::before {
    color: var(--tp-danger);
    content: "\f06a";
}

.shop_message br {
    display: none;
}

.shop_message small {
    opacity: 0.8;
    font-size: 0.82rem;
}

/* Rich text: readable measure and spacing for editor content. */
.tp-article-body {
    font-size: 1.05rem;
    line-height: 1.75;
    overflow-wrap: break-word;
}

.tp-article-body > :first-child {
    margin-top: 0;
}

.tp-site .tp-article-body h2,
.tp-site .tp-article-body h3,
.tp-site .tp-article-body h4 {
    margin: 2rem 0 0.75rem;
    font-weight: 700;
    line-height: 1.3;
}

.tp-article-body h2 {
    font-size: 1.5rem;
}

.tp-article-body h3 {
    font-size: 1.25rem;
}

.tp-article-body p,
.tp-article-body ul,
.tp-article-body ol,
.tp-article-body table,
.tp-article-body blockquote {
    margin: 0 0 1.1rem;
}

.tp-site .tp-article-body ul,
.tp-site .tp-article-body ol {
    max-width: none;
}

.tp-site .tp-article-body ul,
.tp-site .tp-article-body ol {
    padding-left: 1.4rem;
    list-style: disc;
}

.tp-site .tp-article-body ol {
    list-style: decimal;
}

.tp-article-body li {
    margin-bottom: 0.35rem;
}

.tp-article-body li::marker {
    color: var(--fs-primary-ink);
}

.tp-site .tp-article-body a {
    color: var(--fs-primary-ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.tp-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: calc(0.75rem * var(--fs-radius-scale, 1));
}

.tp-article-body blockquote {
    padding: 0.9rem 1.25rem;
    border-left: 4px solid var(--tp-accent);
    border-radius: 0 calc(0.75rem * var(--fs-radius-scale, 1)) calc(0.75rem * var(--fs-radius-scale, 1)) 0;
    background: var(--tp-soft);
    font-style: italic;
}

.tp-article-body blockquote > :last-child {
    margin-bottom: 0;
}

.tp-article-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tp-article-body th,
.tp-article-body td {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--tp-line);
    vertical-align: top;
}

.tp-article-body th {
    background: var(--tp-soft);
    font-weight: 600;
}

.tp-article-body hr {
    margin: 2rem 0;
    border-color: var(--tp-line);
    opacity: 1;
}

/* Legacy pages that still print the plugin table (e.g. native article layouts). */
.tp-site table.pagenav {
    width: 100%;
    margin-top: 2rem;
}

.tp-site table.pagenav td {
    display: none;
}

.tp-site table.pagenav th {
    padding: 0;
    border: 0;
    background: none;
}

.tp-site table.pagenav th.pagenav_next {
    text-align: right;
}

.tp-site table.pagenav a {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--tp-line);
    border-radius: calc(0.6rem * var(--fs-radius-scale, 1));
    background: #fff;
    color: var(--tp-dark);
    font-weight: 600;
    text-decoration: none;
}

.tp-site table.pagenav a:hover {
    border-color: var(--tp-accent);
    color: var(--fs-primary-ink);
}

/* Thank-you page message (V350). */
#thanks .shop_message {
    margin-top: 1rem;
}

/* Sign-in pages (com_user login / register / remind / reset, V350): the native form in a centred card. */
.tp-auth {
    display: flex;
    justify-content: center;
    padding-block: 1.5rem 3rem;
}

.tp-auth-card {
    width: 100%;
    max-width: 30rem;
    padding: 2rem;
    border: 1px solid var(--tp-line);
    border-radius: calc(1.25rem * var(--fs-radius-scale, 1));
    background: #fff;
    box-shadow: 0 16px 40px rgba(33, 37, 41, 0.06);
}

.tp-auth .componentheading {
    margin: 0 0 1.25rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

/* Native two-column tables become stacked fields. */
.tp-auth table,
.tp-auth tbody,
.tp-auth tr,
.tp-auth td {
    display: block;
    width: auto !important;
    height: auto !important;
    padding: 0;
    border: 0;
}

.tp-auth table {
    margin: 0;
}

.tp-auth tr + tr {
    margin-top: 0.9rem;
}

.tp-auth td:empty {
    display: none;
}

.tp-auth fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.tp-auth fieldset p {
    margin: 0 0 0.9rem;
}

.tp-auth fieldset p br {
    display: none;
}

.tp-auth p {
    color: var(--tp-muted);
    line-height: 1.6;
}

.tp-auth label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--tp-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.tp-auth input[type='text'],
.tp-auth input[type='email'],
.tp-auth input[type='password'],
.tp-auth input:not([type]),
.tp-auth select {
    display: block;
    width: 100% !important;
    max-width: none;
    min-height: 2.9rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--tp-line);
    border-radius: calc(0.6rem * var(--fs-radius-scale, 1));
    background: #fff;
    color: var(--tp-dark);
    font: inherit;
}

.tp-auth input:focus,
.tp-auth select:focus {
    border-color: var(--tp-accent);
    outline: 0;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--tp-accent), transparent 80%);
}

/* Registration: the " *" printed after required inputs moves to the label. */
.tp-auth td:has(> input) {
    font-size: 0;
}

.tp-auth td:has(> input) > * {
    font-size: 1rem;
}

.tp-auth tr:has(input.required) label::after {
    color: var(--tp-danger);
    content: " *";
}

/* "Remember me": the checkbox beside its label. */
.tp-auth #com-form-login-remember {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.tp-auth #com-form-login-remember label {
    margin: 0;
    font-size: 0.9rem;
}

.tp-auth input[type='checkbox'] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--tp-accent);
}

.tp-auth input[type='submit'],
.tp-auth button[type='submit'],
.tp-auth .button {
    display: flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.1rem;
    padding: 0 1.5rem;
    border: 1px solid var(--tp-accent);
    border-radius: calc(0.6rem * var(--fs-radius-scale, 1));
    background: var(--tp-accent);
    color: var(--fs-on-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tp-auth input[type='submit']:hover,
.tp-auth button[type='submit']:hover,
.tp-auth .button:hover {
    background: color-mix(in srgb, var(--tp-accent), #000 12%);
}

/* Forgot password / username, register. */
.tp-site .tp-auth ul {
    display: flex;
    max-width: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.25rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.tp-site .tp-auth ul a {
    color: var(--fs-primary-ink);
    font-weight: 500;
}

.tp-auth .fs-social-login {
    margin-top: 1.5rem;
}

/* Social login buttons in the Modern look (plugins google_login / facebook_login). */
.tp-site .fs-social-sep {
    color: var(--tp-muted);
}

.tp-site .fs-social-sep::before,
.tp-site .fs-social-sep::after {
    background: var(--tp-line);
}

.tp-site a.fs-social-btn {
    min-height: 2.9rem;
    border-radius: calc(0.6rem * var(--fs-radius-scale, 1));
    color: var(--tp-dark);
}

.tp-site a.fs-social-btn:hover {
    color: var(--tp-dark);
}

.tp-site a.fs-social-facebook,
.tp-site a.fs-social-facebook:hover {
    color: #fff;
}

/* Remaining native pages (search, polls, links, feeds, GDPR, e-mail a friend, ...): Modern basics. */
.tp-site .fs-native .componentheading,
.tp-site .fs-native .contentheading {
    margin: 0 0 1.25rem;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
}

.tp-site .fs-native .contentheading {
    font-size: 1.35rem;
}

.fs-native table.contentpane,
.fs-native table.contentpaneopen,
.fs-native table.blog {
    width: 100%;
    border-collapse: collapse;
}

.fs-native .sectiontableheader {
    padding: 0.7rem 0.9rem;
    border-bottom: 2px solid var(--tp-line);
    color: var(--tp-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}

/* A fieldset's legend (e.g. the account's shipping addresses) needs no underline. */
.fs-native legend.sectiontableheader {
    border-bottom: 0;
}

.fs-native .sectiontableentry1 td,
.fs-native .sectiontableentry2 td {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--tp-line);
}

.fs-native .sectiontableentry2 td {
    background: #f8f9fa;
}

.fs-native .inputbox:not([type='checkbox']):not([type='radio']),
.fs-native input[type='text'],
.fs-native input[type='email'],
.fs-native input[type='password'],
.fs-native textarea,
.fs-native select {
    max-width: 100%;
    min-height: 2.6rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--tp-line);
    border-radius: calc(0.5rem * var(--fs-radius-scale, 1));
    background: #fff;
    color: var(--tp-dark);
    font: inherit;
}

.fs-native textarea {
    width: 100%;
    min-height: 8rem;
}

.fs-native .inputbox:focus,
.fs-native input:focus,
.fs-native textarea:focus,
.fs-native select:focus {
    border-color: var(--tp-accent);
    outline: 0;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--tp-accent), transparent 80%);
}

.fs-native .button,
.fs-native button[type='submit'],
.fs-native input[type='submit'] {
    min-height: 2.6rem;
    padding: 0 1.25rem;
    border: 1px solid var(--tp-accent);
    border-radius: calc(0.5rem * var(--fs-radius-scale, 1));
    background: var(--tp-accent);
    color: var(--fs-on-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.fs-native .button:hover,
.fs-native button[type='submit']:hover,
.fs-native input[type='submit']:hover {
    background: color-mix(in srgb, var(--tp-accent), #000 12%);
}

.fs-native fieldset {
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--tp-line);
    border-radius: calc(0.9rem * var(--fs-radius-scale, 1));
}

.fs-native legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 0.4rem;
    font-size: 1rem;
    font-weight: 700;
}

/* V481: :where() keeps the colour weaker than the modules' own link styles (site.css) and
   the social login buttons keep their brand colours. */
.tp-site .fs-native a:where(:not(.button):not(.btn):not(.page-link):not(.fs-social-btn)) {
    color: var(--fs-primary-ink);
}

/* com_search: the keyword row as one bar and results as cards. */
.fs-native #searchForm table.contentpaneopen td {
    padding: 0.35rem 0.5rem 0.35rem 0;
    vertical-align: middle;
}

.fs-native #searchForm .searchintro {
    margin: 1rem 0;
    color: var(--tp-muted);
}

.fs-native #searchForm .searchintro br,
.fs-native #searchForm + br {
    display: none;
}

.fs-native table.contentpaneopen fieldset {
    margin-bottom: 0.75rem;
    background: #fff;
}

.fs-native table.contentpaneopen fieldset a {
    font-size: 1.05rem;
    font-weight: 600;
}

.fs-native .small {
    color: var(--tp-muted);
    font-size: 0.85rem;
}

.tp-auth td[colspan] {
    color: var(--tp-muted);
    font-size: 0.85rem;
}

/* Former picture buttons (PDF, print, e-mail, edit, info ...) shown as icons (V353). */
.fs-legacy-icon {
    color: var(--fs-primary-ink);
    font-size: 1.05em;
    vertical-align: -0.1em;
}

a:hover > .fs-legacy-icon {
    color: color-mix(in srgb, var(--tp-accent), #000 15%);
}

.fs-legacy-icon.fs-icon-star {
    color: #f5a524;
}

.fs-legacy-icon.fs-icon-muted {
    color: var(--tp-muted);
}

/* Old content toolbars (PDF / print / e-mail) as small round buttons. */
.tp-site .buttonheading a,
.tp-site td.buttonheading a {
    display: inline-grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border: 1px solid var(--tp-line);
    border-radius: 50%;
    background: #fff;
}

.fs-legacy-stars {
    display: inline-flex;
    gap: 0.1rem;
    color: #f5a524;
    font-size: 0.9em;
    vertical-align: -0.05em;
}

/* Order and invoice documents: printable (V328). */
.md-doc {
    max-width: 60rem;
    padding: 1.5rem;
    margin-inline: auto;
    border: 1px solid var(--tp-line);
    border-radius: 1rem;
    background: #fff;
}

.md-doc-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.md-doc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--tp-dark);
}

.md-doc-head h1 {
    margin: 0 0 0.4rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.md-doc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    color: var(--tp-muted);
    font-size: 0.9rem;
}

.md-doc-vendor {
    color: var(--tp-muted);
    font-size: 0.85rem;
    text-align: right;
    white-space: pre-line;
}

.md-doc-logo {
    max-width: 12rem;
    max-height: 4rem;
    object-fit: contain;
}

.md-doc-parties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

.md-doc-party h2 {
    margin: 0 0 0.35rem;
    color: var(--tp-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.md-doc-party i {
    width: 1.1rem;
    color: var(--tp-muted);
}

.md-doc-lines {
    overflow-x: auto;
}

.md-doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.md-doc-table th {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--tp-dark);
    color: var(--tp-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.md-doc-table td {
    padding: 0.6rem;
    border-bottom: 1px solid var(--tp-line);
    vertical-align: top;
}

.md-doc-muted {
    color: var(--tp-muted);
    font-size: 0.85em;
}

.md-doc-totals {
    width: min(100%, 22rem);
    margin: 1rem 0 0 auto;
}

.md-doc-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
}

.md-doc-totals dt {
    color: var(--tp-muted);
    font-weight: 400;
}

.md-doc-totals dd {
    margin: 0;
    white-space: nowrap;
}

.md-doc-totals .is-total {
    padding-top: 0.6rem;
    margin-top: 0.3rem;
    border-top: 2px solid var(--tp-dark);
    font-size: 1.1rem;
    font-weight: 700;
}

.md-doc-totals .is-total dt {
    color: var(--tp-dark);
    font-weight: 700;
}

.md-doc-note {
    padding: 1rem;
    margin-top: 1.25rem;
    border-radius: 0.75rem;
    background: var(--tp-soft);
}

.md-doc-note p {
    margin: 0;
}

.md-doc-note p + p {
    margin-top: 0.35rem;
}

.md-doc-note h2 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.md-doc-words,
.md-doc-signature {
    margin: 1rem 0 0;
    font-size: 0.92rem;
}

@media print {
    @page {
        margin: 12mm;
    }

    .tp-topbar,
    .tp-header,
    .tp-footer,
    .tp-account-aside,
    .md-print-hide,
    .fs-messages,
    .breadcrumb,
    .fs-position-sy_breadcrumbs {
        display: none !important;
    }

    .tp-account-page > .col-lg-9 {
        width: 100%;
    }

    .tp-main,
    .container {
        max-width: none;
        padding: 0;
    }

    .md-doc,
    .tp-doc {
        max-width: none;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .md-doc-table tr,
    .tp-doc tr {
        break-inside: avoid;
    }

    a {
        color: inherit;
        text-decoration: none;
    }
}

/* "Notify me" (shop.waiting_list) and its thank-you page (shop.waiting_thanks), V386: the native form
   and message in the sign-in card. */
.tp-waiting .component_content,
.tp-waiting fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.tp-waiting .description {
    margin-bottom: 1.25rem;
    color: var(--tp-muted);
    text-align: center;
}

.tp-waiting .description p {
    margin: 0;
}

.tp-waiting .description br,
.tp-waiting .clr {
    display: none;
}

.tp-waiting .form_label label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.tp-waiting .form_field input {
    width: 100%;
}

.tp-waiting .butons {
    margin-top: 1rem !important;
}

.tp-waiting .butons input[type="submit"] {
    width: 100%;
}

.tp-waiting h3 {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
}

.tp-waiting .component_content > br {
    display: none;
}

.tp-waiting a.previous_page {
    display: block;
    padding: 0.6rem 1rem;
    border: 1px solid var(--tp-line);
    border-radius: calc(0.5rem * var(--fs-radius-scale, 1));
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.tp-waiting a.previous_page:hover {
    border-color: var(--tp-accent);
    color: var(--fs-primary-ink);
}

/* Checkout step 3, legal information (V388): the short text, the whole article under "Read more". */
#checkout_accordiation .legal_info_more {
    margin-top: 0.5rem;
}

#checkout_accordiation .legal_info_more > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--fs-primary-ink);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

#checkout_accordiation .legal_info_more > summary::-webkit-details-marker {
    display: none;
}

#checkout_accordiation .legal_info_more > summary::after {
    content: "\f078";
    font: var(--fa-font-solid);
    font-size: 0.7rem;
    transition: transform 0.2s;
}

#checkout_accordiation .legal_info_more[open] > summary::after {
    transform: rotate(180deg);
}

#checkout_accordiation .legal_info_text {
    max-height: 20rem;
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    border: 1px solid var(--tp-line);
    border-radius: calc(0.75rem * var(--fs-radius-scale, 1));
    background: var(--tp-soft);
}

#checkout_accordiation .legal_info_text :is(h1, h2, h3, h4) {
    margin: 1rem 0 0.4rem;
    color: var(--tp-dark);
    font-size: 1rem;
    font-weight: 600;
}

#checkout_accordiation .legal_info_text > :first-child {
    margin-top: 0;
}

#checkout_accordiation .legal_info_text p {
    margin: 0 0 0.5rem;
}

#checkout_accordiation .legal_info_text :is(ol, ul) {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
}


/* ==========================================================================================
   Modern Fashion (V497)
   ========================================================================================== */

/* ---- Tokens ------------------------------------------------------------------------------ */
/* On :root only (everything, the offcanvas panels in <body> too, inherits them), so the look
   switches on <html> below can change them. */
:root {
    --mf-ink: var(--bs-body-color);
    --mf-muted: color-mix(in srgb, var(--bs-body-color) 62%, var(--bs-body-bg));
    --mf-line: var(--bs-border-color);
    --mf-soft: color-mix(in srgb, var(--fs-primary) 5%, #f5f3f0);
    --mf-light: #ffffff;
    --mf-night: #111111;
    --mf-radius: calc(0.5rem * var(--fs-radius-scale, 1));
    --mf-radius-lg: calc(1rem * var(--fs-radius-scale, 1));
    /* V508: Bootstrap's other corner sizes follow the design's corners too (0 = square). */
    --bs-border-radius-sm: calc(0.25rem * var(--fs-radius-scale, 1));
    --bs-border-radius-lg: calc(0.5rem * var(--fs-radius-scale, 1));
    --bs-border-radius-xl: calc(1rem * var(--fs-radius-scale, 1));
    --bs-border-radius-xxl: calc(2rem * var(--fs-radius-scale, 1));
    --mf-gap: clamp(3rem, 2rem + 3vw, 5.5rem);

    /* Header parts: announcement bar, logo row, category row. */
    --mf-announce-bg: var(--fs-primary);
    --mf-announce-color: var(--mf-light);
    --mf-header-bg: var(--bs-body-bg);
    --mf-header-color: var(--mf-ink);
    --mf-header-rgb: var(--bs-emphasis-color-rgb);
    --mf-header-line: var(--mf-line);
    --mf-nav-bg: var(--mf-header-bg);
    --mf-nav-color: var(--mf-header-color);

    /* Footer. */
    --mf-footer-bg: var(--mf-soft);
    --mf-footer-color: var(--mf-ink);
    --mf-footer-muted: var(--mf-muted);
    --mf-footer-line: var(--mf-line);
}

/* Header looks (Look::HEADERS). */
[data-fs-header="brand"] {
    --mf-announce-bg: color-mix(in srgb, var(--fs-primary), #000 25%);
    --mf-header-bg: var(--fs-primary);
    --mf-header-color: var(--fs-on-primary);
    --mf-header-rgb: 255, 255, 255;
    --mf-header-line: color-mix(in srgb, var(--fs-primary), #fff 18%);
}

[data-fs-header="brand-contained"] {
    --mf-nav-bg: var(--fs-primary);
    --mf-nav-color: var(--fs-on-primary);
}

[data-fs-header="dark"] {
    --mf-announce-bg: #000000;
    --mf-header-bg: var(--mf-night);
    --mf-header-color: var(--mf-light);
    --mf-header-rgb: 255, 255, 255;
    --mf-header-line: color-mix(in srgb, var(--mf-night), #fff 14%);
}

/* Footer looks (Look::FOOTERS): the pack's own is a soft warm grey. */
[data-fs-footer="light"] {
    --mf-footer-bg: var(--bs-body-bg);
}

[data-fs-footer="gray"] {
    --mf-footer-bg: #f1f1f1;
}

[data-fs-footer="dark"] {
    --mf-footer-bg: var(--mf-night);
    --mf-footer-color: var(--mf-light);
    --mf-footer-muted: color-mix(in srgb, var(--mf-light) 62%, var(--mf-night));
    --mf-footer-line: color-mix(in srgb, var(--mf-night), #fff 14%);
}

/* ---- Frame -------------------------------------------------------------------------------- */
/* The front page pictures reach the window edges (100vw): no sideways scrolling. */
.mf-site {
    overflow-x: clip;
}

.mf-main {
    padding-top: 1.5rem;
    padding-bottom: var(--mf-gap);
}

.mf-main:has(> .mf-home) {
    padding-top: 0;
}

/* Announcement bar. */
.mf-announce {
    background: var(--mf-announce-bg);
    color: var(--mf-announce-color);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.mf-announce-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 2.25rem;
}

.mf-announce-text {
    text-align: center;
}

.mf-announce-end {
    display: flex;
    justify-content: flex-end;
}

.mf-announce a {
    color: inherit;
    text-decoration: none;
}

.mf-announce a:hover {
    text-decoration: underline;
}

.mf-announce .tp-menu-inline ul.menu {
    gap: 1.25rem;
}

.mf-announce .tp-menu-inline ul.menu a {
    padding: 0;
    color: inherit;
    font-weight: 400;
}

/* V528: the links beside the message need the room of xl (narrower they broke into several lines). */
.mf-announce li {
    white-space: nowrap;
}

@media (max-width: 1199.98px) {
    .mf-announce-inner {
        grid-template-columns: 1fr;
    }

    .mf-announce-side {
        display: none;
    }
}

/* Header: logo in the middle, the search / burger on the left, account and cart on the right. */
.mf-header {
    background: var(--mf-header-bg);
    color: var(--mf-header-color);
    border-bottom: 1px solid var(--mf-header-line);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    --bs-emphasis-color-rgb: var(--mf-header-rgb);
}

.mf-header-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
}

.mf-header-start,
.mf-header-tools {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.mf-header-tools {
    justify-content: flex-end;
}

.mf-header-tools .fs-position {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.mf-icon-btn,
.mf-header .tp-account-toggle,
.mf-header .fs-cart-toggle {
    transition: color 0.25s ease, opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    color: var(--mf-header-color);
    font-size: 1.125rem;
    /* V500: .btn-link underlines; the icons are not text links. */
    text-decoration: none;
}

.mf-icon-btn:hover,
.mf-icon-btn:focus-visible,
.mf-header .fs-cart-toggle:hover {
    color: var(--mf-header-color);
    opacity: 0.7;
}

.mf-header .fs-cart-count {
    position: absolute;
    top: 0.1rem;
    right: -0.1rem;
    background: var(--fs-primary);
    color: var(--fs-on-primary);
    font-size: 0.625rem;
}

.mf-header .fs-cart-toggle {
    position: relative;
}

/* V499: the comparison count and the "logged in" dot in the design colour, like the cart count. */
.mf-header .mf-count {
    position: absolute;
    top: 0.1rem;
    right: -0.1rem;
    background: var(--fs-primary);
    color: var(--fs-on-primary);
    font-size: 0.625rem;
}

/* V500: above the icon's top right corner, like the counts, not on the icon. */
.mf-account-dot {
    position: absolute;
    top: 0.3rem;
    right: 0.2rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--fs-primary);
    box-shadow: 0 0 0 2px var(--mf-header-bg, #fff);
}

[data-fs-header="brand"] .mf-account-dot,
[data-fs-header="dark"] .mf-account-dot {
    background: var(--mf-light);
}

[data-fs-header="brand"] .mf-header .mf-count,
[data-fs-header="dark"] .mf-header .mf-count,
[data-fs-header="brand"] .mf-header .fs-cart-count,
[data-fs-header="dark"] .mf-header .fs-cart-count {
    background: var(--mf-light);
    color: var(--mf-night);
}

.mf-brand {
    text-align: center;
}

.mf-logo img {
    max-height: 2.75rem;
    width: auto;
}

.mf-wordmark {
    color: var(--mf-header-color);
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    font-weight: var(--bs-headings-font-weight, 500);
    letter-spacing: 0.22em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.mf-wordmark:hover {
    color: var(--mf-header-color);
}

.mf-footer .mf-wordmark {
    color: var(--mf-footer-color);
    font-size: 1.5rem;
}

/* Narrow screens: the account and cart only (comparison and wishlist are in the account panel). */
@media (max-width: 575.98px) {
    .mf-header-bar {
        gap: 0.5rem;
    }

    .mf-icon-btn,
    .mf-header .tp-account-toggle,
    .mf-header .fs-cart-toggle {
        width: 2.25rem;
    }

    .mf-header .tp-account > .tp-account-toggle:not(:last-of-type) {
        display: none;
    }
}

/* Category row and the menu with pictures. */
.mf-nav {
    position: relative;
    background: var(--mf-nav-bg);
    color: var(--mf-nav-color);
    /* V500 (masthead overlay): the row lies on the header, whose background fades in; its own
       background (as a rule the same colour) comes in only once the header is solid, otherwise the
       two fading layers make the row solid sooner than the logo bar. The text fades with the header. */
    transition: background-color 0s linear 0.25s, color 0.25s ease;
}

.mf-nav-inner {
    display: flex;
    justify-content: center;
}

.mf-mega {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* V499: the items touch (padding, no gap), so the pointer moving from one category to the next
   never leaves the menu and the panels do not close in between. */
.mf-mega-item {
    padding: 0 1.125rem;
}

.mf-mega-link {
    display: block;
    padding: 0.85rem 0;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 calc(100% - 0.6rem);
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.2s ease;
}

.mf-mega-item:hover > .mf-mega-link,
.mf-mega-item:focus-within > .mf-mega-link {
    color: inherit;
    background-size: 100% 1px;
}

.mf-mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.25rem);
    background: var(--bs-body-bg);
    color: var(--mf-ink);
    border-top: 1px solid var(--mf-line);
    box-shadow: 0 1.5rem 2rem -1.5rem rgba(0, 0, 0, 0.25);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.mf-mega-item:hover > .mf-mega-panel,
.mf-mega-item:focus-within > .mf-mega-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0.08s, 0.08s, 0s;
}

/* V499: inside the menu the panels switch without fading: the closing one and the opening one change
   at the same moment (after a short pause, so passing over the menu opens nothing), so moving from
   one category to the next shows no gap. Leaving the menu still fades the panel out. */
.mf-mega:hover .mf-mega-panel {
    transition: opacity 0s linear 0.06s, transform 0s linear 0.06s, visibility 0s linear 0.06s;
}

.mf-mega-inner {
    display: grid;
    grid-template-columns: 1fr minmax(12rem, 18rem);
    gap: 2.5rem;
    padding-top: 2rem;
    padding-bottom: 2.25rem;
}

.mf-mega-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--mf-ink);
    font-weight: 600;
    text-decoration: none;
}

.mf-mega-list {
    columns: 3 11rem;
    column-gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mf-mega-list li {
    break-inside: avoid;
}

.mf-mega-list a {
    display: inline-block;
    padding: 0.3rem 0;
    color: var(--mf-muted);
    text-decoration: none;
}

.mf-mega-list a:hover,
.mf-mega-all:hover {
    color: var(--mf-ink);
    text-decoration: underline;
}

.mf-mega-picture {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--mf-radius);
    background: var(--mf-soft);
    color: var(--mf-ink);
    text-decoration: none;
}

.mf-mega-picture img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mf-mega-picture:hover img {
    transform: scale(1.04);
}

.mf-mega-picture span {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    padding: 0.35rem 0.75rem;
    background: var(--bs-body-bg);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Burger panel: categories, then the menu links. */
.mf-menu-panel {
    --bs-offcanvas-width: min(24rem, 90vw);
}

.offcanvas .mf-drawer,
.mf-drawer {
    --bs-accordion-border-color: var(--mf-line);
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    margin-bottom: 1.5rem;
}

.mf-drawer .accordion-button,
.mf-drawer-link {
    padding: 1rem 0;
    font-family: var(--bs-body-font-family);
    color: var(--mf-ink);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mf-drawer-link {
    display: block;
    text-decoration: none;
}

.mf-drawer-list {
    margin: 0 0 1rem;
}

.mf-drawer-list a {
    display: block;
    padding: 0.45rem 0;
    color: var(--mf-muted);
    text-decoration: none;
}

.mf-menu-vertical ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mf-menu-vertical ul.menu a {
    display: block;
    padding: 0.5rem 0;
    color: var(--mf-ink);
    text-decoration: none;
}

/* Search panel from the top. */
.mf-search-panel {
    --bs-offcanvas-height: auto;
    max-height: 85vh;
}

.mf-search-inner {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.mf-search-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mf-search-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 2px solid var(--mf-ink);
}

.mf-search-field > i {
    color: var(--mf-muted);
    font-size: 1.25rem;
}

.mf-search-field .form-control {
    padding: 0.75rem 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
}

.mf-search-field .btn {
    flex-shrink: 0;
}

.mf-search-results {
    max-height: 60vh;
    margin-top: 1.25rem;
    overflow-x: hidden;
    overflow-y: auto;
}

/* V505: live search results as a row of small product cards (3:4 pictures, name, price). */
.mf-search-results .searchHolder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 1.5rem 1rem;
}

.mf-search-results .searchTitle,
.mf-search-results .searchSummary,
.mf-search-results .searchNoresults {
    grid-column: 1 / -1;
}

.mf-search-results .searchTitle {
    color: var(--mf-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mf-search-results .searchProductHolder {
    min-width: 0;
}

.mf-search-results .searchProductSnapshot {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mf-search-results .searchImgHolder a {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--mf-radius);
    background: var(--mf-soft);
}

.mf-search-results .searchImgHolder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mf-search-results .searchProductHolder:hover .searchImgHolder img {
    transform: scale(1.04);
}

.mf-search-results .searchInfoHolder {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.mf-search-results .searchProductName {
    font-size: 0.875rem;
    line-height: 1.35;
}

.mf-search-results .searchProductPrice .price_title,
.mf-search-results .clr {
    display: none;
}

.mf-search-results .searchProductName a {
    color: var(--mf-ink);
    text-decoration: none;
}

.mf-search-results .searchProductName a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mf-search-results .searchProductPrice {
    color: var(--mf-ink);
    font-size: 0.875rem;
    font-weight: 600;
}

.mf-search-results .searchProductPrice br {
    display: none;
}

.mf-search-results .searchSummary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mf-line);
    color: var(--mf-muted);
    font-size: 0.8125rem;
}

.mf-search-results .searchMore {
    color: var(--mf-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-decoration: underline;
    text-transform: uppercase;
    text-underline-offset: 0.35em;
}

.mf-search-results .searchMore:hover {
    color: var(--mf-muted);
}

.mf-search-results .searchNoresults {
    padding: 2rem 0;
    color: var(--mf-muted);
    text-align: center;
}

@media (max-width: 575.98px) {
    .mf-search-results .searchHolder {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 0.75rem;
    }
}

/* ---- Masthead switch: the header over the front page picture (Look::SWITCHES) -------------- */
/* Only a page that shows .mf-hero; the hero goes up under the header, the header is transparent
   until the page scrolls (site.js data-fs-scrolled), a menu opens or it holds the focus. */
[data-fs-masthead="overlay"] .mf-site:has(.mf-main .mf-hero) .mf-main .mf-home > .fs-position:first-child .mf-hero {
    margin-top: calc(-1 * var(--fs-header-height, 0px));
}

[data-fs-masthead="overlay"] .mf-site:has(.mf-main .mf-hero) .mf-home > .fs-position:first-child .mf-hero-content {
    padding-top: var(--fs-header-height, 0px);
}

[data-fs-masthead="overlay"] .mf-site:has(.mf-main .mf-hero) .mf-header:not([data-fs-scrolled]):not(:hover):not(:focus-within) {
    --mf-header-bg: transparent;
    --mf-nav-bg: transparent;
    --mf-header-color: var(--mf-light);
    --mf-nav-color: var(--mf-light);
    --mf-header-rgb: 255, 255, 255;
    --mf-header-line: rgba(255, 255, 255, 0.22);
}

/* V500: back to transparent at once (the header's own background fades out). */
[data-fs-masthead="overlay"] .mf-site:has(.mf-main .mf-hero) .mf-header:not([data-fs-scrolled]):not(:hover):not(:focus-within) .mf-nav {
    transition: background-color 0s, color 0.25s ease;
}

[data-fs-masthead="overlay"] .mf-site:has(.mf-main .mf-hero) .mf-header:not([data-fs-scrolled]):not(:hover):not(:focus-within) .mf-logo img {
    filter: brightness(0) invert(1);
}

/* V499: badges stay visible on the picture. */
[data-fs-masthead="overlay"] .mf-site:has(.mf-main .mf-hero) .mf-header:not([data-fs-scrolled]):not(:hover):not(:focus-within) :is(.mf-account-dot, .mf-count, .fs-cart-count) {
    background: var(--mf-light);
    color: var(--mf-night);
}

.mf-header[data-fs-scrolled] {
    box-shadow: 0 0.5rem 1.5rem -1rem rgba(0, 0, 0, 0.35);
}

/* ---- Sections ------------------------------------------------------------------------------ */
.mf-section {
    margin-top: var(--mf-gap);
}

.mf-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.mf-section-title {
    margin: 0;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
    letter-spacing: 0.01em;
}

.mf-section-link {
    color: var(--mf-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-underline-offset: 0.3em;
}

.mf-section-link:hover {
    color: var(--mf-ink);
}

.mf-eyebrow {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Editorial buttons: capitals, spaced. */
.mf-home .btn:not(.btn-link):not(.fs-scroller-btn),
.mf-newsletter .btn,
.mf-newsletter input[type="submit"],
.mf-search-field .btn {
    padding: 0.8rem 1.75rem;
    border-radius: var(--mf-radius);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---- Main picture (hero) ------------------------------------------------------------------- */
.mf-hero {
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--mf-night);
    color: var(--mf-light);
}

.mf-hero-slide {
    position: relative;
    display: grid;
    min-height: clamp(26rem, 78vh, 48rem);
}

.mf-hero-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}

.mf-hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 75%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 30%);
}

.mf-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding-bottom: 3rem;
}

.mf-hero-content > .container > * {
    max-width: 32rem;
}

.mf-hero-title {
    margin-bottom: 1rem;
    font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.75rem);
    line-height: 1.05;
    color: inherit;
}

.mf-hero-text {
    margin-bottom: 2rem;
    font-size: 1.0625rem;
    opacity: 0.9;
}

.mf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
}

@media (max-width: 767.98px) {
    .mf-hero-picture {
        object-position: 72% center;
    }

    .mf-hero-slide::after {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.35) 100%);
    }

    .mf-hero-content {
        align-items: flex-end;
    }
}

/* ---- Category tiles ------------------------------------------------------------------------ */
.mf-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.mf-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--mf-radius);
    background: var(--mf-soft);
    color: var(--mf-ink);
    text-decoration: none;
}

.mf-tile-picture {
    display: block;
    aspect-ratio: 3 / 4;
}

.mf-tile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mf-tile:hover .mf-tile-picture img {
    transform: scale(1.05);
}

.mf-tile-caption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    background: var(--bs-body-bg);
    border-radius: var(--mf-radius);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mf-tile:hover .mf-tile-caption {
    background: var(--mf-ink);
    color: var(--bs-body-bg);
}

@media (max-width: 991.98px) {
    .mf-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Product card -------------------------------------------------------------------------- */
.mf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.mf-card-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--mf-radius);
    background: var(--mf-soft);
}

.mf-card-picture {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    color: var(--mf-line);
    font-size: 2.5rem;
}

.mf-card-picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease, transform 0.6s ease;
}

.mf-card-img-hover {
    opacity: 0;
}

.mf-card:hover .mf-has-hover .mf-card-img-hover {
    opacity: 1;
}

.mf-card:hover .mf-card-picture img {
    transform: scale(1.03);
}

.mf-card-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    pointer-events: none;
}

.mf-badge {
    padding: 0.3rem 0.55rem;
    border-radius: calc(0.25rem * var(--fs-radius-scale, 1));
    background: var(--bs-body-bg);
    color: var(--mf-ink);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.mf-badge-sale {
    background: var(--fs-primary);
    color: var(--fs-on-primary);
}

.mf-card .mf-wish {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bs-body-bg);
    color: var(--mf-ink);
}

.mf-card .mf-wish:hover,
.mf-card .mf-wish:focus-visible {
    background: var(--mf-ink);
    color: var(--bs-body-bg);
}

.mf-card .mf-wish[aria-pressed="true"] {
    background: var(--bs-body-bg);
    color: var(--tp-danger);
}

.mf-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.85rem;
}

.mf-card-swatches {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.mf-card-swatches .fs-swatch {
    width: 0.8rem;
    height: 0.8rem;
}

.mf-card-more {
    color: var(--mf-muted);
    font-size: 0.75rem;
}

.mf-card-title {
    margin: 0;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
}

.mf-card-title a {
    color: var(--mf-ink);
    text-decoration: none;
}

.mf-card-title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mf-card-rating {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    color: var(--mf-ink);
    font-size: 0.6875rem;
}

.mf-card-rating span {
    margin-left: 0.3rem;
    color: var(--mf-muted);
}

.mf-card-price {
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Cards in the scrolling row (4 / 3 / 2 whole cards) and in the grid (4 / 3 / 2 columns). */
.mf-products .fs-scroller-track > .mf-card {
    flex: 0 0 calc((100% - 3 * 1.25rem) / 4);
}

.mf-products .fs-scroller-track {
    gap: 1.25rem;
}

.mf-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 1.25rem;
}

@media (max-width: 991.98px) {
    .mf-products .fs-scroller-track > .mf-card {
        flex-basis: calc((100% - 2 * 1.25rem) / 3);
    }

    .mf-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .mf-products .fs-scroller-track > .mf-card {
        flex-basis: calc((100% - 1rem) / 2);
    }

    .mf-products .fs-scroller-track,
    .mf-grid {
        gap: 1.5rem 1rem;
    }

    .mf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Story ----------------------------------------------------------------------------------- */
.mf-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.mf-story-picture {
    margin: 0;
    overflow: hidden;
    border-radius: var(--mf-radius-lg);
}

.mf-story-picture img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.mf-story-text {
    max-width: 30rem;
}

.mf-story-title {
    margin-bottom: 1.25rem;
    font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem);
    line-height: 1.1;
}

.mf-story-text p:not(.mf-eyebrow) {
    color: var(--mf-muted);
    font-size: 1.0625rem;
}

.mf-story-text .mf-eyebrow {
    color: var(--fs-primary-ink);
}

@media (max-width: 767.98px) {
    .mf-story-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Shop the look (V548, fashion@home): a picture with numbered spots and the list they point to ----------- */
.mf-look {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
}

.mf-look-picture {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--mf-radius-lg);
}

.mf-look-picture img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.mf-look-spot {
    position: absolute;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0.4rem rgba(255, 255, 255, 0.35);
    color: #1f1d1b;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transform: translate(-50%, -50%);
    transition: box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mf-look-spot:hover,
.mf-look-spot:focus-visible {
    background: #1f1d1b;
    box-shadow: 0 0 0 0.55rem rgba(255, 255, 255, 0.5);
    color: #fff;
}

.mf-look-spot.mf-x-5 { left: 5%; }
.mf-look-spot.mf-x-10 { left: 10%; }
.mf-look-spot.mf-x-15 { left: 15%; }
.mf-look-spot.mf-x-20 { left: 20%; }
.mf-look-spot.mf-x-25 { left: 25%; }
.mf-look-spot.mf-x-30 { left: 30%; }
.mf-look-spot.mf-x-35 { left: 35%; }
.mf-look-spot.mf-x-40 { left: 40%; }
.mf-look-spot.mf-x-45 { left: 45%; }
.mf-look-spot.mf-x-50 { left: 50%; }
.mf-look-spot.mf-x-55 { left: 55%; }
.mf-look-spot.mf-x-60 { left: 60%; }
.mf-look-spot.mf-x-65 { left: 65%; }
.mf-look-spot.mf-x-70 { left: 70%; }
.mf-look-spot.mf-x-75 { left: 75%; }
.mf-look-spot.mf-x-80 { left: 80%; }
.mf-look-spot.mf-x-85 { left: 85%; }
.mf-look-spot.mf-x-90 { left: 90%; }
.mf-look-spot.mf-x-95 { left: 95%; }
.mf-look-spot.mf-y-5 { top: 5%; }
.mf-look-spot.mf-y-10 { top: 10%; }
.mf-look-spot.mf-y-15 { top: 15%; }
.mf-look-spot.mf-y-20 { top: 20%; }
.mf-look-spot.mf-y-25 { top: 25%; }
.mf-look-spot.mf-y-30 { top: 30%; }
.mf-look-spot.mf-y-35 { top: 35%; }
.mf-look-spot.mf-y-40 { top: 40%; }
.mf-look-spot.mf-y-45 { top: 45%; }
.mf-look-spot.mf-y-50 { top: 50%; }
.mf-look-spot.mf-y-55 { top: 55%; }
.mf-look-spot.mf-y-60 { top: 60%; }
.mf-look-spot.mf-y-65 { top: 65%; }
.mf-look-spot.mf-y-70 { top: 70%; }
.mf-look-spot.mf-y-75 { top: 75%; }
.mf-look-spot.mf-y-80 { top: 80%; }
.mf-look-spot.mf-y-85 { top: 85%; }
.mf-look-spot.mf-y-90 { top: 90%; }
.mf-look-spot.mf-y-95 { top: 95%; }

.mf-look-list {
    display: grid;
    gap: 0;
    margin: 1.5rem 0 2rem;
    padding: 0;
    list-style: none;
}

.mf-look-list a {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--mf-line);
    color: inherit;
    text-decoration: none;
}

.mf-look-list a:hover .mf-look-name {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mf-look-no {
    color: var(--mf-muted);
    font-size: 0.875rem;
}

.mf-look-price {
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .mf-look {
        grid-template-columns: 1fr;
    }

    .mf-look-spot {
        width: 1.9rem;
        height: 1.9rem;
    }
}

/* ---- Banners ----------------------------------------------------------------------------- */
.mf-promo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.mf-banner {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--mf-radius);
    color: var(--mf-ink);
    text-decoration: none;
}

.mf-banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mf-banner:hover img {
    transform: scale(1.04);
}

.mf-banner-text {
    position: absolute;
    left: clamp(1.25rem, 3vw, 2.5rem);
    top: clamp(1.25rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 45%;
}

.mf-banner-title {
    margin-bottom: 1rem;
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
    font-weight: var(--bs-headings-font-weight, 500);
    line-height: 1.1;
}

.mf-banner-link {
    padding-bottom: 0.2rem;
    border-bottom: 1px solid currentColor;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

@media (max-width: 767.98px) {
    .mf-promo-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Brands (native manufacturer list) ------------------------------------------------------- */
.mf-brands .manufacturers .form,
.mf-brands .manufacturers .row {
    display: contents;
}

.mf-brands .manufacturers {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.mf-brands .row_separator,
.mf-brands .clr,
.mf-brands .manufacturer_data {
    display: none;
}

/* V501: no Bootstrap .row > * gutters (the native markup uses .row). */
.mf-brands .manufacturer {
    width: auto !important;
    max-width: none;
    margin: 0;
    padding: 0;
}

.mf-brands .manufacturer_image a {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2 / 1;
    padding: 0.75rem;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    background: var(--bs-body-bg);
}

/* V501: the logo fills the box (kept whole), so it is not tiny on phones. */
.mf-brands .manufacturer_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.mf-brands .manufacturer_image a:hover img {
    filter: none;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .mf-brands .manufacturers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* V501: two larger logos in a row on phones. */
@media (max-width: 575.98px) {
    .mf-brands .manufacturers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .mf-brands .manufacturer_image a {
        padding: 0.5rem 0.75rem;
    }
}

/* ---- Advantages ------------------------------------------------------------------------------ */
.mf-features {
    margin-top: var(--mf-gap);
    padding: 2rem 0;
    border-top: 1px solid var(--mf-line);
    border-bottom: 1px solid var(--mf-line);
}

.mf-features-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mf-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    color: var(--mf-muted);
    font-size: 0.875rem;
}

.mf-features-list i {
    margin-top: 0.15rem;
    color: var(--fs-primary-ink);
    font-size: 1.35rem;
}

.mf-features-list strong {
    display: block;
    color: var(--mf-ink);
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .mf-features-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mf-seo {
    margin-top: var(--mf-gap);
}

/* ---- Newsletter band ------------------------------------------------------------------------- */
.mf-newsletter-band {
    padding: clamp(3rem, 2rem + 3vw, 5rem) 0;
    background: var(--mf-soft);
    border-top: 1px solid var(--mf-line);
}

.mf-newsletter-band:not(:has(.mf-newsletter)) {
    display: none;
}

.mf-newsletter {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.mf-newsletter-title {
    margin-bottom: 1.5rem;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
}

/* The native form (label, field, label, field, button): labels over their fields, one row. */
.mf-newsletter-form form {
    margin: 0;
}

.mf-newsletter-form .subscribe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    align-items: end;
    gap: 0.35rem 0.5rem;
    text-align: left;
}

.mf-newsletter-form br {
    display: none;
}

.mf-newsletter-form label {
    margin: 0;
    color: var(--mf-muted);
    font-size: 0.8125rem;
}

.mf-newsletter-form input[type="text"],
.mf-newsletter-form input[type="email"] {
    width: 100%;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    background: var(--bs-body-bg);
}

/* V499: the fields and the button share one height (the native inputs carry their own margins). */
.mf-newsletter-form input[type="text"],
.mf-newsletter-form input[type="email"],
.mf-newsletter-form input[type="submit"] {
    box-sizing: border-box;
    height: 3rem;
    margin: 0;
    line-height: 1;
    vertical-align: top;
}

.mf-newsletter-form input[type="submit"] {
    padding-top: 0;
    padding-bottom: 0;
    align-self: end;
    grid-row: 2;
    border: 1px solid var(--fs-primary);
    background: var(--fs-primary);
    color: var(--fs-on-primary);
}

@media (max-width: 575.98px) {
    .mf-newsletter-form .subscribe {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    .mf-newsletter-form input[type="submit"] {
        grid-row: auto;
        margin-top: 0.5rem;
    }
}

/* ---- Footer -------------------------------------------------------------------------------- */
.mf-footer {
    background: var(--mf-footer-bg);
    color: var(--mf-footer-color);
    border-top: 1px solid var(--mf-footer-line);
}

.mf-footer-inner {
    padding-top: clamp(3rem, 2rem + 2vw, 4.5rem);
    padding-bottom: 1.5rem;
}

.mf-footer a {
    color: var(--mf-footer-muted);
    text-decoration: none;
}

.mf-footer a:hover {
    color: var(--mf-footer-color);
}

.mf-footer h2,
.mf-footer .mf-footer-heading {
    margin-bottom: 1rem;
    color: var(--mf-footer-color);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mf-footer-text,
.mf-footer-contacts {
    color: var(--mf-footer-muted);
    font-size: 0.875rem;
}

.mf-footer-text {
    margin-top: 1rem;
    max-width: 22rem;
}

.mf-footer-contacts li {
    margin-bottom: 0.4rem;
}

.mf-footer-contacts i {
    width: 1.25rem;
}

.mf-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.mf-links li {
    margin-bottom: 0.55rem;
}

.mf-social {
    display: flex;
    gap: 0.5rem;
}

.mf-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    /* V502: a visible ring on any footer colour (from the text colour, not the faint line colour). */
    border: 1px solid color-mix(in srgb, var(--mf-footer-color) 30%, transparent);
    border-radius: 50%;
    color: var(--mf-footer-color);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mf-social a:hover,
.mf-social a:focus-visible {
    border-color: var(--mf-footer-color);
    background: var(--mf-footer-color);
    color: var(--mf-footer-bg);
}

.mf-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mf-footer-line);
    color: var(--mf-footer-muted);
    font-size: 0.8125rem;
}

.mf-payments {
    display: flex;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.6rem;
    line-height: 1;
}

[data-fs-footer="dark"] .mf-footer .fs-footer-on-light #solution img {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* ---- Category page: subcategories (V499) ---------------------------------------------------- */
.mf-subcats-wrap {
    margin-bottom: 2rem;
}

.mf-subcats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 1rem;
}

.mf-subcats > .col {
    width: auto;
    max-width: none;
    padding: 0;
}

.mf-subcat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--mf-ink);
    text-decoration: none;
}

.mf-subcat-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: var(--mf-radius);
    background: var(--mf-soft);
    color: var(--mf-line);
    font-size: 2rem;
}

.mf-subcat-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mf-subcat:hover .mf-subcat-picture img {
    transform: scale(1.04);
}

.mf-subcat-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.mf-subcat-name i {
    font-size: 0.75rem;
    opacity: 0;
    transform: translateX(-0.25rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mf-subcat:hover .mf-subcat-name i {
    opacity: 1;
    transform: none;
}

.mf-subcat:hover {
    color: var(--mf-ink);
}

/* A category without products of its own: large tiles with the name on the picture, 3 / 2 per row. */
.mf-subcats-only .mf-subcats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.mf-subcats-only .mf-subcat-picture {
    aspect-ratio: 4 / 5;
}

@media (max-width: 991.98px) {
    .mf-subcats-only .mf-subcats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mf-subcats-only .mf-subcat {
    position: relative;
}

.mf-subcats-only .mf-subcat-name {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--mf-radius);
    background: var(--bs-body-bg);
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mf-subcats-only .mf-subcat-name i {
    opacity: 1;
    transform: none;
}

.mf-subcats-only .mf-subcat:hover .mf-subcat-name {
    background: var(--mf-ink);
    color: var(--bs-body-bg);
}

@media (max-width: 575.98px) {
    .mf-subcats-only .mf-subcats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* V500: next to products the subcategories are one scrolling row on narrow screens. */
@media (max-width: 991.98px) {
    .mf-subcats-wrap:not(.mf-subcats-only) .mf-subcats {
        grid-auto-flow: column;
        grid-auto-columns: 7.25rem;
        grid-template-columns: none;
        gap: 0.75rem;
        margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem) * 0.5);
        padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .mf-subcats-wrap:not(.mf-subcats-only) .mf-subcats::-webkit-scrollbar {
        display: none;
    }

    .mf-subcats-wrap:not(.mf-subcats-only) .mf-subcats > * {
        scroll-snap-align: start;
    }

    .mf-subcats-wrap:not(.mf-subcats-only) .mf-subcat-name {
        font-size: 0.75rem;
        letter-spacing: 0.02em;
    }
}

/* ---- Category page (V500) ------------------------------------------------------------------------ */
.mf-site .breadcrumb {
    --bs-breadcrumb-divider-color: var(--mf-muted);
    --bs-breadcrumb-item-active-color: var(--mf-muted);
    margin-bottom: 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mf-site .breadcrumb a {
    color: var(--mf-ink);
    text-decoration: none;
}

.mf-site .breadcrumb a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mf-browse-head {
    margin: 0.5rem 0 2rem;
}

.mf-browse-title {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
    line-height: 1.05;
}

.mf-browse-desc {
    max-width: 44rem;
    color: var(--mf-muted);
    font-size: 0.9375rem;
}

.mf-browse-desc > :last-child {
    margin-bottom: 0;
}

/* Filters on the left from lg; the column sticks below the header (site.js lets a taller column
   scroll until its end is in view, V500). */
.mf-browse-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .mf-browse-layout {
        grid-template-columns: 15.5rem minmax(0, 1fr);
    }

    .mf-browse-sidebar {
        align-self: start;
    }

    .mf-browse-sidebar .offcanvas-header {
        display: none;
    }

    .mf-browse-sidebar .offcanvas-body {
        padding: 0;
    }
}

.mf-browse-sidebar-title {
    margin: 0;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mf-browse-sidebar .offcanvas-header {
    border-bottom: 1px solid var(--mf-line);
}

.mf-browse-sidebar .tp-side-box {
    margin-bottom: 0 !important;
    padding: 0 0 1.5rem;
}

.mf-browse-sidebar .tp-side-box + .tp-side-box,
.mf-browse-sidebar .fs-position > * + * {
    padding-top: 1.5rem;
    border-top: 1px solid var(--mf-line);
}

.mf-browse-sidebar .tp-side-box > h2,
.mf-browse-sidebar .tp-filters .parametertitle,
.mf-browse-sidebar .tp-filters .currently_shopping_by_title {
    display: block;
    margin-bottom: 0.85rem !important;
    color: var(--mf-ink) !important;
    font-family: inherit;
    font-size: 0.75rem !important;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* The category tree: plain rows, the current category underlined, no counters' boxes. */
.mf-browse-sidebar .tp-tree summary,
.mf-browse-sidebar .tp-tree .tp-tree-row {
    padding: 0.3rem 0 !important;
}

.mf-browse-sidebar .tp-tree a {
    color: var(--mf-ink) !important;
    font-size: 0.9rem;
}

.mf-browse-sidebar .tp-tree ul a {
    color: var(--mf-muted) !important;
}

.mf-browse-sidebar .tp-tree a:hover {
    color: var(--mf-ink) !important;
    text-decoration: underline !important;
    text-underline-offset: 0.2em;
}

.mf-browse-sidebar .tp-tree ul {
    margin: 0.15rem 0 0.4rem 0.9rem !important;
    padding-left: 0.75rem;
    border-left: 1px solid var(--mf-line);
}

.mf-browse-sidebar .tp-tree .badge {
    border: 0 !important;
    background: none !important;
    color: var(--mf-muted) !important;
    font-size: 0.75rem;
    font-weight: 400;
}

.mf-browse-sidebar .tp-tree .is-current > a,
.mf-browse-sidebar .tp-tree .is-current > summary > a,
.mf-browse-sidebar .tp-tree .is-current > details > summary > a,
.mf-browse-sidebar .tp-tree .is-current > .tp-tree-row > a {
    color: var(--mf-ink) !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* Filters: square checkboxes in the design colour, one full-width button. */
.mf-browse-sidebar .tp-filters .parameter + .parameter {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-color: var(--mf-line);
}

.mf-browse-sidebar .tp-filters .checkbox,
.mf-browse-sidebar .tp-filters .radio {
    padding: 0.25rem 0;
}

.mf-browse-sidebar .tp-filters .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    border-color: color-mix(in srgb, var(--mf-ink) 45%, transparent);
    border-radius: 0;
}

.mf-browse-sidebar .tp-filters .form-check-input[type="radio"] {
    border-radius: 50%;
}

.mf-browse-sidebar .tp-filters .form-check-input:checked {
    border-color: var(--fs-primary);
    background-color: var(--fs-primary);
}

.mf-browse-sidebar .tp-filters .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--fs-primary) 20%, transparent);
}

.mf-browse-sidebar .tp-filters .checkbox label,
.mf-browse-sidebar .tp-filters .radio label {
    color: var(--mf-ink);
}

.mf-browse-sidebar .tp-filters .single_button {
    margin-top: 1.5rem;
}

.mf-browse-sidebar .tp-filters .btn,
.mf-browse-sidebar .tp-filters input[type="submit"],
.mf-browse-sidebar .tp-filters input[type="button"] {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--fs-primary);
    border-radius: var(--mf-radius);
    background: var(--fs-primary);
    color: var(--fs-on-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mf-browse-sidebar .tp-filters .btn:hover,
.mf-browse-sidebar .tp-filters input[type="submit"]:hover,
.mf-browse-sidebar .tp-filters input[type="button"]:hover {
    background: transparent;
    color: var(--fs-primary-ink);
}

/* The toolbar: lines above and below, the count on the left, sorting and grid / list on the right. */
.mf-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    min-height: 3.25rem;
    margin-bottom: 1.75rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--mf-line);
    border-bottom: 1px solid var(--mf-line);
    font-size: 0.8125rem;
}

.mf-toolbar-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border: 0;
    background: none;
    color: var(--mf-ink);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mf-toolbar-count {
    margin-right: auto;
    color: var(--mf-muted);
}

.mf-toolbar form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0;
    color: var(--mf-muted);
}

.mf-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.mf-toolbar select {
    width: auto;
    padding: 0.3rem 1.6rem 0.3rem 0.1rem;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: right 0.1rem center;
    color: var(--mf-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
}

.mf-toolbar select:focus-visible {
    outline: 2px solid var(--mf-ink);
    outline-offset: 2px;
}

.mf-toolbar input[type="submit"],
.mf-toolbar button[type="submit"],
.mf-toolbar noscript {
    display: none;
}

.mf-view-switch {
    display: flex;
    gap: 0.25rem;
    padding-left: 1rem;
    border-left: 1px solid var(--mf-line);
}

.mf-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--mf-muted);
    font-size: 0.95rem;
    text-decoration: none;
}

.mf-view-btn:hover,
.mf-view-btn.active {
    color: var(--mf-ink);
}

/* Narrow screens: filters and grid / list in the first row, sorting in the second, then the count. */
@media (max-width: 991.98px) {
    .mf-toolbar {
        gap: 0.25rem 1rem;
    }

    .mf-view-switch {
        order: 1;
        margin-left: auto;
        padding-left: 0;
        border-left: 0;
    }

    .mf-toolbar-sort {
        order: 2;
        width: 100%;
        padding-top: 0.25rem;
        border-top: 1px solid var(--mf-line);
    }

    .mf-toolbar-count {
        order: 3;
        width: 100%;
        margin: 0;
        font-size: 0.75rem;
    }

    .mf-toolbar-sort form {
        flex-wrap: nowrap;
    }

    .mf-toolbar-sort select {
        min-width: 0;
        max-width: 100%;
    }
}

/* Grid: 2 / 3 columns of tall cards. */
.mf-browse-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1.25rem;
}

@media (max-width: 767.98px) {
    .mf-browse-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 0.75rem;
    }
}

/* List: a row per product (the picture on the left, the text and the price next to it). */
.mf-browse-list {
    display: flex;
    flex-direction: column;
}

.mf-browse-list > .mf-card-row + .mf-card-row {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mf-line);
}

.mf-card-row {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
    height: auto;
}

.mf-card-row .mf-card-body {
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.mf-card-row .mf-card-title {
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.375rem;
    font-weight: var(--bs-headings-font-weight, 500);
}

.mf-card-desc {
    max-width: 38rem;
    color: var(--mf-muted);
    font-size: 0.9rem;
}

.mf-card-desc > :last-child {
    margin-bottom: 0;
}

.mf-card-row .mf-card-price {
    margin-top: 0.25rem;
    font-size: 1.0625rem;
}

.mf-card-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--mf-ink);
    border-radius: var(--mf-radius);
    color: var(--mf-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mf-card-link:hover {
    background: var(--mf-ink);
    color: var(--bs-body-bg);
}

@media (max-width: 575.98px) {
    .mf-card-row {
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: 1rem;
    }

    .mf-card-row .mf-card-title {
        font-size: 1.0625rem;
    }

    .mf-card-row .mf-card-desc {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 0.8125rem;
    }

    .mf-card-link {
        padding: 0.55rem 0.9rem;
    }

    .mf-card-row .mf-card-badges {
        top: 0.4rem;
        left: 0.4rem;
    }

    .mf-card-row .mf-badge {
        padding: 0.25rem 0.35rem;
        font-size: 0.5625rem;
        letter-spacing: 0.06em;
    }

    .mf-card-row .mf-wish {
        top: auto;
        bottom: 0.4rem;
        right: 0.4rem;
        width: 1.9rem;
        height: 1.9rem;
        font-size: 0.8rem;
    }
}

.mf-browse-empty {
    grid-column: 1 / -1;
    color: var(--mf-muted);
}

.mf-pagination {
    margin-top: 3rem;
}

.mf-pagination li > a,
.mf-pagination li > span {
    border-color: transparent;
    border-radius: 0;
    font-size: 0.875rem;
}

.mf-pagination li > a:hover {
    border-color: var(--mf-ink);
}

.mf-pagination li.active > span,
.mf-pagination li > span.pagenav:not(:empty) {
    border-color: var(--mf-ink);
    background: var(--mf-ink);
    color: var(--bs-body-bg);
}

/* ---- Product page gallery arrows (V499) --------------------------------------------------------- */
/* Light round buttons that stay visible on any picture; at the end of the pictures the arrow hides. */
.mf-site .tp-gallery-step,
.mf-site .tp-gallery-step:hover,
.mf-site .tp-gallery-step:focus-visible,
.mf-site .tp-gallery-step:active {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.92);
    color: var(--mf-night);
    box-shadow: 0 0.25rem 0.9rem rgba(0, 0, 0, 0.18);
}

.mf-site .tp-gallery-step:hover {
    background: #ffffff;
}

.mf-site .tp-gallery-step:disabled {
    visibility: hidden;
    opacity: 0;
}

/* ---- Product page (V504) --------------------------------------------------------------------- */
/* Wide screens: the photos in a two-column grid, the buying panel beside them sticks below the
   header. Narrow screens: a swipeable photo row with dots, the panel below, a bottom bar. */
.mf-product {
    padding-top: 1.5rem;
}

.mf-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

@media (min-width: 992px) {
    .mf-product-layout {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 3rem;
        align-items: start;
    }
}

@media (min-width: 1200px) {
    .mf-product-layout {
        gap: 4.5rem;
    }
}

.mf-product-media {
    position: relative;
    min-width: 0;
}

.mf-product-badges {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    pointer-events: none;
}

.mf-product-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.mf-product-photos-single {
    grid-template-columns: minmax(0, 1fr);
}

/* An odd number of photos: the first one takes the whole row, the rest come in pairs. */
.mf-product-photo:first-child:nth-last-child(2n + 3) {
    grid-column: 1 / -1;
}

.mf-product-photo {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: var(--mf-radius);
    background: var(--mf-soft);
    cursor: zoom-in;
}

.mf-product-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mf-product-photo:hover img {
    transform: scale(1.03);
}

.mf-product-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.mf-product-dots {
    display: none;
}

@media (max-width: 991.98px) {
    .mf-product {
        padding-top: 0;
    }

    .mf-product-media {
        margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    }

    .mf-product-photos {
        display: flex;
        gap: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .mf-product-photos::-webkit-scrollbar {
        display: none;
    }

    .mf-product-photo {
        flex: 0 0 100%;
        border-radius: 0;
        scroll-snap-align: start;
    }

    .mf-product-photo:hover img {
        transform: none;
    }

    .mf-product-dots {
        display: flex;
        justify-content: center;
        gap: 0.4rem;
        margin-top: 0.85rem;
    }

    .mf-product-dot {
        width: 0.45rem;
        height: 0.45rem;
        padding: 0;
        border: 0;
        border-radius: 1rem;
        background: color-mix(in srgb, var(--mf-ink) 22%, transparent);
        transition: width 0.25s ease, background-color 0.25s ease;
    }

    .mf-product-dot.is-active {
        width: 1.35rem;
        background: var(--mf-ink);
    }
}

/* The buying panel. */
.mf-product-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 992px) {
    .mf-product-panel {
        position: sticky;
        top: calc(var(--fs-header-height, 0px) + 1.5rem);
    }
}

.mf-product-panel .breadcrumb {
    margin-bottom: 0;
}

.mf-product-title {
    margin: 0;
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
    line-height: 1.1;
}

.mf-product-rating {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.5rem;
    color: var(--mf-muted);
    font-size: 0.8125rem;
    text-decoration: none;
}

.mf-product-rating:hover {
    color: var(--mf-ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mf-stars {
    display: inline-flex;
    gap: 0.1rem;
    color: var(--mf-ink);
    font-size: 0.75rem;
}

.mf-product-price {
    font-size: 1.375rem;
    font-weight: 600;
}

.mf-product-short {
    color: var(--mf-muted);
    font-size: 0.9375rem;
}

.mf-product-short > :last-child {
    margin-bottom: 0;
}

/* The native add-to-cart form: options, quantity and the button; the heart beside the button. */
.mf-product-buy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mf-line);
}

.mf-product-buy > .mf-size-link {
    grid-column: 1 / -1;
    justify-self: end;
}

.mf-product-buy .product_addtocart_details,
.mf-product-buy form {
    min-width: 0;
    margin: 0;
}

.mf-product-buy form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
}

.mf-product-buy .product_children,
.mf-product-buy #product_final_price {
    width: 100%;
}

.mf-product-buy #product_final_price:empty,
.mf-product-buy #cartupdate_message:empty {
    display: none;
}

.mf-product-buy .form_row + .form_row {
    margin-top: 1.1rem;
}

.mf-product-buy .product_children label[for^="attr"] {
    margin-bottom: 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mf-product-buy .fs-attr-chosen {
    color: var(--mf-muted);
    letter-spacing: 0.02em;
    text-transform: none;
}

.mf-product-buy .vm_attr_choices {
    gap: 0.5rem;
    margin: 0;
}

.mf-product-buy a[data-fs-attr-index] {
    min-width: 3.25rem;
    height: 2.75rem;
    margin: 0;
    padding: 0 0.9rem;
    border-color: var(--mf-line);
    border-radius: var(--mf-radius);
    background: var(--bs-body-bg);
    color: var(--mf-ink);
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.mf-product-buy a[data-fs-attr-index]:hover {
    border-color: var(--mf-ink);
    box-shadow: none;
}

.mf-product-buy a[data-fs-attr-index].selected {
    border-color: var(--mf-ink);
    background: var(--mf-ink);
    box-shadow: none;
    color: var(--bs-body-bg);
}

/* V505: a value no variant has with the other chosen values (choosing it clears those). */
.mf-product-buy a[data-fs-attr-index].is-unavailable {
    border-color: var(--mf-line);
    background-image: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--mf-line) 50%, transparent calc(50% + 0.5px));
    color: var(--mf-muted);
}

.mf-product-buy a[data-fs-attr-index].is-unavailable:hover {
    border-color: var(--mf-muted);
}

.mf-product-buy .fs-attr-swatch[data-fs-attr-index].is-unavailable {
    opacity: 0.4;
}

.mf-product-buy .fs-attr-swatch[data-fs-attr-index] {
    width: 2.25rem;
    min-width: 0;
    height: 2.25rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--mf-ink) 18%, transparent);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--bs-body-bg);
}

.mf-product-buy .fs-attr-swatch[data-fs-attr-index]:hover,
.mf-product-buy .fs-attr-swatch[data-fs-attr-index].selected {
    border-color: var(--mf-ink);
    box-shadow: inset 0 0 0 3px var(--bs-body-bg);
}

.mf-product-buy .fs-attr-swatch[data-fs-attr-index].selected {
    outline: 1px solid var(--mf-ink);
    outline-offset: 2px;
}

/* V506: no underline; a light background on hover (the padding is taken back by the margins, so the
   text stays in line with the attribute name and the panel's edge). */
.mf-size-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: -0.35rem -0.6rem 0.25rem 0;
    padding: 0.35rem 0.6rem;
    border: 0;
    border-radius: var(--mf-radius);
    background: none;
    color: var(--mf-ink);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.mf-size-link:hover,
.mf-size-link:focus-visible {
    background: var(--mf-soft);
    color: var(--mf-ink);
}

/* No variant chosen yet (a product with options): VirtueMart's hint instead of the button. */
.mf-product-buy form > strong {
    display: flex;
    flex: 1 1 12rem;
    align-items: center;
    min-height: 3.25rem;
    color: var(--mf-muted);
    font-size: 0.875rem;
    font-weight: 400;
}

.mf-product-buy .product_quantity {
    display: inline-flex;
    align-items: stretch;
    height: 3.25rem;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
}

.mf-product-buy .product_quantity .quantity_box {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.mf-product-buy .product_quantity .btn,
.mf-product-buy .product_quantity input[type="button"] {
    width: 2.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mf-ink);
    font-size: 1.1rem;
}

.mf-product-buy .product_quantity .btn:hover {
    background: var(--mf-soft);
}

.mf-product-buy .product_quantity input[type="text"] {
    width: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: center;
}

.mf-product-buy input.addtocart,
.mf-product-buy input.notify,
.mf-product-buy button[type="submit"] {
    flex: 1 1 8rem;
    height: 3.25rem;
    border: 1px solid var(--fs-primary);
    border-radius: var(--mf-radius);
    background: var(--fs-primary);
    color: var(--fs-on-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mf-product-buy input.addtocart:hover,
.mf-product-buy input.notify:hover,
.mf-product-buy button[type="submit"]:hover {
    background: transparent;
    color: var(--fs-primary-ink);
}

.mf-product-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--mf-muted);
    font-size: 0.875rem;
}

.mf-product-availability {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: 0.6rem;
}

.mf-product-availability > div > :last-child {
    margin-bottom: 0;
}

/* V507: the wishlist heart and the comparison as plain icons of one colour, a light round background on
   hover. On the real page the buttons may also get Bootstrap's btn / btn-primary (a dark fill that hid the
   icon), so the button variables and every state are set here. */
.mf-product-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.mf-product .mf-product-icon {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--mf-ink);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--mf-soft);
    --bs-btn-hover-color: var(--mf-ink);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--mf-soft);
    --bs-btn-active-color: var(--mf-ink);
    --bs-btn-active-border-color: transparent;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--mf-ink);
    font-size: 1.05rem;
    transition: background-color 0.15s ease;
}

.mf-product .mf-product-icon:hover,
.mf-product .mf-product-icon:focus-visible,
.mf-product .mf-product-icon:active {
    border-color: transparent;
    background: var(--mf-soft);
    color: var(--mf-ink);
}

.mf-product .mf-product-compare[aria-pressed="true"] {
    background: var(--mf-soft);
    color: var(--mf-ink);
}

.mf-product .mf-product-wish[aria-pressed="true"],
.mf-product .mf-product-wish[aria-pressed="true"]:hover {
    --bs-btn-color: var(--tp-danger);
    --bs-btn-hover-color: var(--tp-danger);
    --bs-btn-active-color: var(--tp-danger);
    color: var(--tp-danger);
}

/* Folding sections instead of tabs. */
.mf-product-sections {
    border-top: 1px solid var(--mf-line);
}

.mf-product-sections .fs-position {
    display: contents;
}

.mf-acc {
    border-bottom: 1px solid var(--mf-line);
}

.mf-acc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 0;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    list-style: none;
    text-transform: uppercase;
}

.mf-acc > summary::-webkit-details-marker {
    display: none;
}

.mf-acc > summary::after {
    content: "+";
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
}

.mf-acc[open] > summary::after {
    content: "\2212";
}

.mf-acc-body {
    padding-bottom: 1.35rem;
    font-size: 0.9375rem;
}

.mf-acc-body > :last-child {
    margin-bottom: 0;
}

.mf-acc-body ul {
    padding-left: 1.1rem;
}

.mf-product-params table {
    width: 100%;
    border-collapse: collapse;
}

.mf-product-params td,
.mf-product-params th {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mf-line);
    text-align: left;
    vertical-align: top;
}

.mf-product-params tr:last-child td {
    border-bottom: 0;
}

.mf-product-params td:first-child {
    width: 45%;
    padding-right: 1rem;
    color: var(--mf-muted);
}

.mf-product-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.4rem 1.5rem;
    margin: 0;
}

.mf-product-facts dt {
    color: var(--mf-muted);
    font-weight: 400;
}

.mf-product-facts dd {
    margin: 0;
}

.mf-delivery-list {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0 !important;
    list-style: none;
}

.mf-delivery-list li {
    display: flex;
    gap: 0.75rem;
}

.mf-delivery-list i {
    width: 1.1rem;
    margin-top: 0.3rem;
    color: var(--mf-muted);
    text-align: center;
}

/* Reviews: the native list and form. */
.mf-reviews {
    padding-top: 3rem;
    border-top: 1px solid var(--mf-line);
}

.mf-reviews-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.mf-reviews-score {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--mf-muted);
}

.mf-reviews-score strong {
    color: var(--mf-ink);
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 2.25rem;
    font-weight: var(--bs-headings-font-weight, 500);
    line-height: 1;
}

.mf-reviews-body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
}

@media (max-width: 767.98px) {
    .mf-reviews-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}

.mf-reviews-list > h5:first-child,
.mf-reviews-list > br,
.mf-reviews-form > br,
.mf-reviews .clr {
    display: none;
}

.mf-reviews-list > strong {
    display: block;
    font-weight: 600;
}

.mf-reviews-list > strong:not(:first-of-type) {
    padding-top: 1.25rem;
}

.mf-reviews-list .product_rating {
    display: flex;
    align-items: center;
    margin: 0.3rem 0;
}

.mf-reviews-list .rating_label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.mf-reviews-list blockquote {
    margin: 0;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--mf-line);
    color: var(--mf-muted);
}

/* Native .rating.ratingN (a sprite in the old templates): five stars, N of them filled. */
.mf-reviews .rating {
    display: inline-block;
    font-size: 0;
    line-height: 1;
}

.mf-reviews .rating::before {
    content: "\2605\2605\2605\2605\2605";
    background: linear-gradient(90deg, var(--mf-ink) calc(var(--mf-rating, 0) * 20%), color-mix(in srgb, var(--mf-ink) 20%, transparent) 0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

.mf-reviews .rating1 { --mf-rating: 1; }
.mf-reviews .rating2 { --mf-rating: 2; }
.mf-reviews .rating3 { --mf-rating: 3; }
.mf-reviews .rating4 { --mf-rating: 4; }
.mf-reviews .rating5 { --mf-rating: 5; }

.mf-reviews-form {
    align-self: start;
    padding: 1.75rem;
    border-radius: var(--mf-radius-lg);
    background: var(--mf-soft);
}

.mf-reviews-form h5 {
    margin-bottom: 1.25rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mf-reviews-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.mf-reviews-form .form_label {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
}

.mf-reviews-form .form_field + .form_label {
    margin-top: 1rem;
}

.mf-reviews-form .review_rating_table th,
.mf-reviews-form .review_rating_table td {
    padding: 0 0.75rem 0.25rem 0;
    text-align: center;
}

.mf-reviews-form textarea {
    width: 100%;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    background: var(--bs-body-bg);
}

.mf-reviews-form input[type="submit"] {
    margin-top: 1rem;
    padding: 0.8rem 1.75rem;
    border: 1px solid var(--fs-primary);
    border-radius: var(--mf-radius);
    background: var(--fs-primary);
    color: var(--fs-on-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mf-recent {
    padding-top: 3rem;
    border-top: 1px solid var(--mf-line);
}

/* Size chart: a panel from the right with the article. */
.mf-size-chart {
    --bs-offcanvas-width: min(36rem, 100vw);
}

.mf-size-chart .offcanvas-header {
    border-bottom: 1px solid var(--mf-line);
}

.mf-size-chart .offcanvas-title {
    margin: 0;
    font-size: 1.35rem;
}

.mf-size-chart .offcanvas-body {
    font-size: 0.9375rem;
}

.mf-size-chart table {
    width: 100%;
    margin: 0.75rem 0 1.75rem;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.mf-size-chart th,
.mf-size-chart td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--mf-line);
    text-align: left;
}

.mf-size-chart th:first-child,
.mf-size-chart td:first-child {
    padding-left: 0;
    font-weight: 600;
}

.mf-size-chart thead th {
    color: var(--mf-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* The article's tables get Bootstrap's .table (NativeHtml), whose cells have their own background. */
.mf-size-chart tbody tr:hover > * {
    background: var(--mf-soft);
}

.mf-size-chart h3 {
    margin: 1.5rem 0 0.25rem;
    font-size: 1.05rem;
}

/* The photo in the zoom window: whole, as high as the window allows. */
#modern-image-modal .modal-body img {
    width: auto;
    max-height: 82vh;
}

/* Narrow screens: the price and the button at the bottom once the form's button is out of view. */
.mf-buybar {
    display: none;
}

@media (max-width: 991.98px) {
    .mf-buybar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--mf-line);
        background: var(--bs-body-bg);
        box-shadow: 0 -0.75rem 1.5rem -1.25rem rgba(0, 0, 0, 0.35);
        transform: translateY(110%);
        transition: transform 0.25s ease;
    }

    .mf-buybar.is-visible {
        transform: none;
    }

    .mf-buybar-info {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
    }

    .mf-buybar-name {
        overflow: hidden;
        font-size: 0.8125rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mf-buybar-price {
        font-weight: 600;
    }

    .mf-buybar-btn {
        flex: 0 0 auto;
        height: 2.9rem;
        padding: 0 1.25rem;
        border: 0;
        border-radius: var(--mf-radius);
        background: var(--fs-primary);
        color: var(--fs-on-primary);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
}

/* ==========================================================================================
   V510: Fashion's own account, sign-in, article and checkout pages (were Modern System copies).
   Lines instead of cards and boxes, small capitals for labels, serif titles, square corners
   (the design's corner setting).
   ========================================================================================== */

/* ---- Account: menu and page ---------------------------------------------------------------- */
.mf-account-page {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 4.5rem);
    align-items: start;
    padding-block: 1rem 3rem;
}

.mf-account-page > .mf-account-aside {
    position: sticky;
    top: calc(var(--fs-header-height, 0px) + 1.5rem);
}

/* Without the menu (tmpl=component pages such as the wishlist drawer, guests) the page is one column. */
.fs-component .mf-account-page,
.mf-account-page:not(:has(.mf-account-nav)) {
    grid-template-columns: minmax(0, 1fr);
}

.fs-component .mf-account-aside,
.mf-account-page:not(:has(.mf-account-nav)) > .mf-account-aside {
    display: none;
}

@media print {
    .mf-account-aside {
        display: none !important;
    }

    .mf-account-page {
        display: block;
    }
}

.mf-account-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mf-account-user {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--mf-line);
}

.mf-account-eyebrow {
    color: var(--mf-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mf-account-name {
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.5rem;
    font-weight: var(--bs-headings-font-weight, 500);
    line-height: 1.2;
}

.mf-account-email {
    overflow: hidden;
    color: var(--mf-muted);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mf-account-links {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mf-account-link {
    display: block;
    padding: 0.55rem 0 0.55rem 1rem;
    border-left: 1px solid var(--mf-line);
    color: var(--mf-muted);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.mf-account-link:hover {
    border-left-color: var(--mf-muted);
    color: var(--mf-ink);
}

.mf-account-link.is-active {
    border-left: 2px solid var(--mf-ink);
    padding-left: calc(1rem - 1px);
    color: var(--mf-ink);
    font-weight: 600;
}

/* The native account pages beside the menu. */
.mf-account-content {
    min-width: 0;
}

.mf-account-title,
.tp-site .mf-account-content h1.componentheading,
.tp-site .mf-account-content .componentheading {
    margin: 0 0 1.75rem;
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
    font-weight: var(--bs-headings-font-weight, 500);
    line-height: 1.1;
}

.mf-account-content .componentheading small {
    display: block;
    margin-top: 0.35rem;
    color: var(--mf-muted);
    font-family: var(--bs-body-font-family, inherit);
    font-size: 0.9375rem;
    font-weight: 400;
}

/* Address and profile forms: groups divided by lines, not framed. */
.mf-account-page .mf-account-content fieldset {
    gap: 1rem 1.5rem;
    margin: 0 0 2rem;
    padding: 0;
    border: 0;
}

.mf-account-page .mf-account-content fieldset > legend {
    width: 100%;
    margin: 0 0 0.25rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--mf-line);
    color: var(--mf-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mf-account-content fieldset fieldset {
    margin-bottom: 0;
}

.mf-account-content .formLabel,
.mf-account-content .formLabel label {
    color: var(--mf-muted);
    font-size: 0.8125rem;
}

.mf-account-content .formField input[type="text"],
.mf-account-content .formField input[type="password"],
.mf-account-content .formField input[type="email"],
.mf-account-content .formField select,
.mf-account-content .formField textarea {
    min-height: 2.9rem;
    border-color: var(--mf-line);
    color: var(--mf-ink);
}

.mf-account-content .formField input:focus,
.mf-account-content .formField select:focus,
.mf-account-content .formField textarea:focus {
    border-color: var(--mf-ink);
    box-shadow: none;
}

.mf-account-content .buttons {
    gap: 0.75rem;
    margin-top: 0;
}

.mf-account-content .buttons .button,
.mf-account-content .buttons input[type="submit"],
.mf-account-content .buttons a.button,
.mf-account-content form > .button,
.mf-account-content form input[type="submit"].button {
    min-height: 3rem;
    padding: 0 1.75rem;
    border: 1px solid var(--fs-primary);
    background: var(--fs-primary);
    color: var(--fs-on-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mf-account-content .buttons .button:hover,
.mf-account-content .buttons input[type="submit"]:hover {
    background: transparent;
    color: var(--fs-primary-ink);
}

/* ---- Account overview ------------------------------------------------------------------- */
.mf-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin: 0 0 3rem;
    border-top: 1px solid var(--mf-line);
    border-bottom: 1px solid var(--mf-line);
}

.mf-stat {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.35rem;
    padding: 1.5rem 1.5rem 1.5rem 0;
}

.mf-stat + .mf-stat {
    padding-left: 1.5rem;
    border-left: 1px solid var(--mf-line);
}

.mf-stat dt {
    color: var(--mf-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mf-stat dd {
    margin: 0;
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    font-weight: var(--bs-headings-font-weight, 500);
    line-height: 1;
}

.mf-stat dd a {
    color: inherit;
    text-decoration: none;
}

.mf-stat dd a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
}

.mf-dashboard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mf-dashboard-title {
    margin: 0;
    font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.75rem);
}

.mf-dashboard-all {
    color: var(--mf-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-underline-offset: 0.35em;
}

.mf-empty {
    border-top: 1px solid var(--mf-line);
    border-bottom: 1px solid var(--mf-line);
}

/* Orders: lines only; the status as a coloured dot and text. */
.mf-orders .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: transparent;
    border-top: 1px solid var(--mf-ink);
}

.mf-orders th {
    padding: 0.85rem 0.75rem;
    border-bottom-color: var(--mf-line);
    color: var(--mf-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mf-orders td {
    padding: 1.1rem 0.75rem;
    border-bottom-color: var(--mf-line);
    font-size: 0.9375rem;
}

.mf-orders th:first-child,
.mf-orders td:first-child {
    padding-left: 0;
}

.mf-orders th:last-child,
.mf-orders td:last-child {
    padding-right: 0;
}

.mf-order-number {
    color: var(--mf-ink);
    font-weight: 600;
    text-decoration: none;
}

.mf-order-number:hover {
    text-decoration: underline;
}

.mf-order-date {
    color: var(--mf-muted);
}

.mf-order-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.mf-order-status::before {
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--mf-muted);
    content: "";
}

.mf-order-status-wait::before {
    background: #c98a12;
}

.mf-order-status-sent::before {
    background: #2f6db5;
}

.mf-order-status-done::before {
    background: #2e7d4f;
}

.mf-order-status-off::before {
    background: var(--tp-danger, #b3261e);
}

.mf-order-total {
    font-weight: 600;
}

.mf-order-actions a {
    color: var(--mf-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-underline-offset: 0.35em;
}

.mf-order-actions a + a {
    margin-left: 1.25rem;
}

@media (max-width: 991.98px) {
    .mf-account-page {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
        padding-top: 0.5rem;
    }

    .mf-account-page > .mf-account-aside {
        position: static;
    }

    .mf-account-nav {
        gap: 1rem;
    }

    .mf-account-user {
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* The pages as a scrolling row with a line under the open one. */
    .mf-account-links {
        flex-direction: row;
        gap: 1.5rem;
        margin: 0 calc(-1 * var(--bs-gutter-x, 0.75rem));
        padding: 0 var(--bs-gutter-x, 0.75rem);
        overflow-x: auto;
        border-bottom: 1px solid var(--mf-line);
        scrollbar-width: none;
    }

    .mf-account-links::-webkit-scrollbar {
        display: none;
    }

    .mf-account-link,
    .mf-account-link.is-active {
        padding: 0.75rem 0;
        border-left: 0;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }

    .mf-account-link.is-active {
        border-bottom-color: var(--mf-ink);
    }
}

@media (max-width: 575.98px) {
    .mf-stat,
    .mf-stat + .mf-stat {
        padding: 1.1rem 0.75rem 1.1rem 0;
    }

    .mf-stat + .mf-stat {
        padding-left: 0.75rem;
    }

    .mf-orders thead {
        display: none;
    }

    /* Phones: each order as a small block (number and total, then date and status). */
    .mf-orders table,
    .mf-orders tbody,
    .mf-orders tr,
    .mf-orders td {
        display: block;
    }

    .mf-orders tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.35rem 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--mf-line);
    }

    .mf-orders td,
    .mf-orders td:first-child,
    .mf-orders td:last-child {
        padding: 0;
        border: 0;
    }

    .mf-orders .mf-order-actions {
        grid-column: 1 / -1;
        text-align: left !important;
    }
}

/* ---- Sign-in pages ---------------------------------------------------------------------- */
.mf-auth {
    display: flex;
    justify-content: center;
    padding-block: clamp(1.5rem, 1rem + 2vw, 3.5rem) clamp(3rem, 2rem + 3vw, 5rem);
}

.mf-auth-inner {
    width: 100%;
    max-width: 26rem;
}

.mf-auth:has(#josForm, form[name="josForm"], .user_fields) .mf-auth-inner {
    max-width: 34rem;
}

.mf-auth .componentheading {
    margin: 0 0 2rem;
    color: var(--mf-ink);
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
    font-weight: var(--bs-headings-font-weight, 500);
    line-height: 1.1;
    text-align: center;
}

.mf-auth label {
    margin-bottom: 0.4rem;
    color: var(--mf-ink);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mf-auth input[type='text'],
.mf-auth input[type='email'],
.mf-auth input[type='password'],
.mf-auth input:not([type]),
.mf-auth select {
    min-height: 3rem;
    border-color: var(--mf-line);
    color: var(--mf-ink);
}

.mf-auth input:focus,
.mf-auth select:focus {
    border-color: var(--mf-ink);
    box-shadow: none;
}

.mf-auth tr + tr,
.mf-auth fieldset p {
    margin: 0 0 1.25rem;
}

.mf-auth #com-form-login-remember label {
    color: var(--mf-muted);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.mf-auth input[type='submit'],
.mf-auth button[type='submit'],
.mf-auth .button {
    min-height: 3.25rem;
    margin-top: 1.5rem;
    border-color: var(--fs-primary);
    background: var(--fs-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mf-auth input[type='submit']:hover,
.mf-auth button[type='submit']:hover,
.mf-auth .button:hover {
    background: transparent;
    color: var(--fs-primary-ink);
}

/* The other links under a line; the registration link as an outlined button. */
.tp-site .mf-auth ul {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--mf-line);
}

.tp-site .mf-auth ul a {
    color: var(--mf-muted);
    font-size: 0.875rem;
    font-weight: 400;
    text-underline-offset: 0.25em;
}

.tp-site .mf-auth ul a:hover {
    color: var(--mf-ink);
}

.tp-site .mf-auth ul li:has(a[href*="register"]) {
    order: 1;
    width: 100%;
    margin-top: 0.75rem;
}

.tp-site .mf-auth ul a[href*="register"] {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mf-ink);
    border-radius: var(--mf-radius);
    color: var(--mf-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.tp-site .mf-auth ul a[href*="register"]:hover {
    background: var(--mf-ink);
    color: var(--bs-body-bg);
}

/* Registration: two columns of fields on wider screens; the note under them. */
@media (min-width: 576px) {
    .mf-auth #josForm tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.25rem;
    }

    .mf-auth #josForm tr + tr {
        margin-top: 0;
    }

    .mf-auth #josForm tr:has(td[colspan]) {
        grid-column: 1 / -1;
    }
}

.mf-auth #josForm td[colspan] {
    color: var(--mf-muted);
    font-size: 0.8125rem;
}

/* ---- Articles --------------------------------------------------------------------------- */
.mf-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding-block: clamp(1rem, 0.5rem + 2vw, 3rem) clamp(3rem, 2rem + 3vw, 5rem);
}

.mf-article-side:not(:has(*)) {
    display: none;
}

.mf-article {
    width: 100%;
    max-width: 44rem;
    min-width: 0;
}

@media (min-width: 992px) {
    .mf-article-layout:has(.mf-article-side *) {
        grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
        gap: clamp(2rem, 1rem + 3vw, 5rem);
        align-items: start;
    }

    .mf-article-layout:has(.mf-article-side *) > .mf-article-side {
        position: sticky;
        top: calc(var(--fs-header-height, 0px) + 1.5rem);
        justify-self: stretch;
    }
}

.mf-article-head {
    margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    text-align: center;
}

.mf-article-eyebrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
    margin: 0 0 1rem;
    color: var(--mf-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mf-article-eyebrow a {
    color: var(--mf-ink);
    text-decoration: none;
}

.mf-article-eyebrow > * + *::before {
    margin-right: 1rem;
    content: "·";
}

.mf-article-title {
    margin: 0;
    font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.5rem);
    line-height: 1.08;
    text-wrap: balance;
}

.mf-article-author {
    margin: 1rem 0 0;
    color: var(--mf-muted);
    font-size: 0.875rem;
}

.mf-article-body {
    color: var(--mf-ink);
    font-size: 1.0625rem;
    line-height: 1.8;
}

.mf-article-body > p:first-child {
    font-size: 1.1875rem;
    line-height: 1.7;
}

.mf-article-body h2,
.mf-article-body h3 {
    margin: 2.5rem 0 1rem;
    line-height: 1.2;
}

.mf-article-body img {
    height: auto;
    border-radius: 0;
}

.mf-article-body blockquote,
.mf-article-body.tp-article-body blockquote {
    margin: 2.5rem 0;
    padding: 0 0 0 1.5rem;
    border: 0;
    border-left: 1px solid var(--mf-ink);
    border-radius: 0;
    background: none;
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.4;
}

.mf-article-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mf-line);
}

.mf-article-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--mf-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
}

.mf-article-nav a:hover span {
    text-decoration: underline;
    text-underline-offset: 0.35em;
}

.mf-article-next {
    margin-left: auto;
}

/* ---- Article lists (blog, archive) ------------------------------------------------------ */
.mf-posts {
    padding-block: clamp(1rem, 0.5rem + 2vw, 2.5rem) clamp(3rem, 2rem + 3vw, 5rem);
}

.mf-posts-head {
    max-width: 44rem;
    margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem);
    text-align: center;
}

.mf-posts-title {
    margin: 0;
    font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
    line-height: 1.05;
}

.mf-posts-intro {
    margin-top: 1rem;
    color: var(--mf-muted);
    font-size: 1.0625rem;
}

.mf-posts-intro > :last-child {
    margin-bottom: 0;
}

.mf-posts-image {
    width: 100%;
    margin-top: 2rem;
}

.mf-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

.mf-posts-item {
    min-width: 0;
}

.mf-post {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    height: 100%;
}

.mf-post-image {
    display: block;
    overflow: hidden;
    border-radius: var(--mf-radius);
    background: var(--mf-soft);
    aspect-ratio: 4 / 5;
}

.mf-post-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mf-post:hover .mf-post-image img {
    transform: scale(1.03);
}

.mf-post-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.6rem;
}

.mf-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin: 0;
    color: var(--mf-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mf-post-meta > * + *::before {
    margin-right: 0.9rem;
    content: "·";
}

.mf-post-title {
    margin: 0;
    font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
    line-height: 1.2;
}

.mf-post-title a {
    color: var(--mf-ink);
    text-decoration: none;
}

.mf-post-title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.mf-post-excerpt {
    margin: 0;
    color: var(--mf-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.mf-post-more {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 0.4rem;
    color: var(--mf-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-underline-offset: 0.35em;
}

/* Lead articles across the grid: the picture beside the text. */
.mf-posts-item.is-lead {
    grid-column: 1 / -1;
}

.mf-posts-item.is-lead .mf-post {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
}

.mf-posts-item.is-lead .mf-post-image {
    aspect-ratio: 4 / 3;
}

.mf-posts-item.is-lead .mf-post-title {
    font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem);
}

.mf-posts-item.is-lead .mf-post-excerpt {
    font-size: 1.0625rem;
}

.mf-posts-item.is-lead .mf-post-more {
    margin-top: 0.75rem;
}

.mf-posts-empty {
    color: var(--mf-muted);
    text-align: center;
}

/* "More articles" and the plain article list: rows divided by lines. */
.mf-posts-more {
    max-width: 44rem;
    margin: clamp(3rem, 2rem + 3vw, 5rem) auto 0;
}

.mf-posts-more-title {
    margin: 0 0 0.5rem;
    color: var(--mf-muted);
    font-family: var(--bs-body-font-family, inherit);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mf-posts-more ul,
.mf-posts-rows {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mf-ink);
    list-style: none;
}

.mf-posts-more li,
.mf-posts-rows li {
    border-bottom: 1px solid var(--mf-line);
}

.mf-posts-more a,
.mf-posts-rows a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1.5rem;
    padding: 1.1rem 0;
    color: var(--mf-ink);
    text-decoration: none;
}

.mf-posts-more a:hover,
.mf-posts-rows a:hover .mf-posts-row-title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mf-posts-row-title {
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.25rem;
}

.mf-posts-row-meta {
    display: flex;
    gap: 1rem;
    color: var(--mf-muted);
    font-size: 0.8125rem;
}

@media (max-width: 991.98px) {
    .mf-posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .mf-posts-item.is-lead .mf-post {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.1rem;
    }
}

@media (max-width: 575.98px) {
    .mf-posts-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Checkout --------------------------------------------------------------------------- */
/* The steps as a numbered row on top, the accordion as sections divided by lines, the cart summary
   beside them (site.js initCheckout). The accordion's own markup and inline heights stay native. */
.mf-checkout {
    padding-block: clamp(0.5rem, 0.25rem + 1vw, 1.5rem) clamp(3rem, 2rem + 3vw, 5rem);
}

.mf-checkout-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 64rem;
    margin: 0 auto clamp(1.75rem, 1.25rem + 1.5vw, 3rem);
    padding: 0;
    list-style: none;
}

.mf-checkout-progress:empty {
    display: none;
}

.mf-checkout-progress li {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.mf-checkout-progress li:first-child {
    flex: none;
}

/* The line leading to each step. */
.mf-checkout-progress li + li::before {
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    height: 1px;
    background: var(--mf-line);
    content: "";
}

.mf-checkout-progress li.is-done + li::before,
.mf-checkout-progress li.is-active::before {
    background: var(--mf-ink);
}

.mf-checkout-progress button {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.65rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mf-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mf-checkout-progress button:disabled {
    opacity: 1;
    cursor: default;
}

.mf-checkout-progress .fs-checkout-step-name {
    max-width: 14rem;
    line-height: 1.4;
    text-align: left;
}

.mf-checkout-progress .fs-checkout-step-number {
    display: inline-grid;
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    place-items: center;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    font-size: 0.8125rem;
    letter-spacing: 0;
}

.mf-checkout-progress li.is-active button {
    color: var(--mf-ink);
}

.mf-checkout-progress li.is-active .fs-checkout-step-number {
    border-color: var(--mf-ink);
    background: var(--mf-ink);
    color: var(--bs-body-bg);
}

.mf-checkout-progress li.is-done button {
    color: var(--mf-ink);
    cursor: pointer;
}

.mf-checkout-progress li.is-done .fs-checkout-step-number {
    border-color: var(--mf-ink);
    font-size: 0;
}

.mf-checkout-progress li.is-done .fs-checkout-step-number::before {
    font-size: 0.8125rem;
    content: "\2713";
}

.mf-checkout-progress li.is-done button:hover .fs-checkout-step-name {
    text-decoration: underline;
    text-underline-offset: 0.35em;
}

/* Main column and the summary. */
.mf-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.mf-checkout-side {
    display: none;
}

.mf-checkout.has-summary:not([data-fs-checkout-step="1"]):not([data-fs-checkout-step="0"]) .mf-checkout-side {
    display: block;
}

@media (min-width: 992px) {
    .mf-checkout.has-summary:not([data-fs-checkout-step="1"]):not([data-fs-checkout-step="0"]) .mf-checkout-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
        gap: clamp(2rem, 1rem + 3vw, 4.5rem);
    }

    .mf-checkout-side {
        position: sticky;
        top: calc(var(--fs-header-height, 0px) + 1.5rem);
    }
}

@media (max-width: 991.98px) {
    .mf-checkout-side {
        order: -1;
    }

    .mf-checkout-progress .fs-checkout-step-name {
        display: none;
    }

    .mf-checkout-progress li.is-active .fs-checkout-step-name {
        display: inline;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .mf-checkout-progress li.is-active,
    .mf-checkout-progress li.is-active button {
        flex: 0 1 auto;
        min-width: 0;
    }

    .mf-checkout-progress li:not(.is-active) {
        flex: 0 0 auto;
    }

    .mf-checkout-progress li + li::before {
        flex: 0 0 1.25rem;
        min-width: 1.25rem;
    }
}

/* The accordion: sections divided by lines, no boxes. */
.mf-checkout #checkout_accordiation {
    max-width: none;
    gap: 0;
    margin: 0;
}

.mf-checkout-grid:not(:has(.mf-checkout-side:not(:empty))) #checkout_accordiation,
.mf-checkout[data-fs-checkout-step="1"] #checkout_accordiation {
    max-width: 68rem;
    margin-inline: auto;
}

.mf-checkout #checkout_accordiation .checkout_step,
.mf-checkout #checkout_accordiation .checkout_step.active_checkout_step {
    border: 0;
    border-top: 1px solid var(--mf-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mf-checkout #checkout_accordiation .checkout_step:last-child {
    border-bottom: 1px solid var(--mf-line);
}

.mf-checkout #checkout_accordiation .checkout_step.active_checkout_step {
    border-top-color: var(--mf-ink);
}

.mf-checkout #checkout_accordiation .step_header .header {
    column-gap: 1rem;
    padding: 1.35rem 0;
    color: var(--mf-muted);
}

.mf-checkout #checkout_accordiation .step_header .header::before {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
}

.mf-checkout #checkout_accordiation .checkout_step.active_checkout_step .header::before,
.mf-checkout #checkout_accordiation .checkout_step.valid_checkout_step:not(.active_checkout_step) .header::before {
    border-color: var(--mf-ink);
    background: var(--mf-ink);
    color: var(--bs-body-bg);
}

.mf-checkout #checkout_accordiation .checkout_step.valid_checkout_step:not(.active_checkout_step) .header::before {
    background: transparent;
    color: var(--mf-ink);
}

.mf-checkout #checkout_accordiation .step_header h5 {
    color: var(--mf-muted);
    font-family: var(--bs-body-font-family, inherit);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.mf-checkout #checkout_accordiation .step_header h1 {
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
    font-weight: var(--bs-headings-font-weight, 500);
}

.mf-checkout #checkout_accordiation .checkout_step.active_checkout_step .header,
.mf-checkout #checkout_accordiation .checkout_step.valid_checkout_step .header {
    color: var(--mf-ink);
}

/* "Edit" of a completed step: a plain text link. */
.mf-checkout #checkout_accordiation .step_header .header_swicher .edit {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--mf-ink);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-decoration: underline;
    text-transform: uppercase;
    text-underline-offset: 0.35em;
}

.mf-checkout #checkout_accordiation .step_header .header_swicher .edit::before {
    content: none;
}

.mf-checkout #checkout_accordiation .step_header .header_swicher:hover .edit {
    color: var(--mf-muted);
}

.mf-checkout #checkout_accordiation .loading_point {
    right: 0;
    border-top-color: var(--mf-ink);
}

.mf-checkout #checkout_accordiation .step_body,
.mf-checkout #checkout_accordiation [id^="messages_step_"] {
    padding-right: 0;
    padding-left: 0;
}

.mf-checkout #checkout_accordiation .step_body {
    padding-bottom: 2rem;
}

/* ---- Checkout summary (site.js) ------------------------------------------------------------ */
/* Step 3 shows the final sum (with delivery and discounts) itself: the summary keeps the products. */
.mf-checkout[data-fs-checkout-step="3"] .fs-checkout-summary-totals {
    display: none;
}

.fs-checkout-summary {
    border-top: 1px solid var(--mf-ink);
}

.fs-checkout-summary > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    list-style: none;
    cursor: pointer;
}

.fs-checkout-summary > summary::-webkit-details-marker {
    display: none;
}

.fs-checkout-summary-title {
    min-width: 0;
    line-height: 1.25;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* V531: a clear square toggle at the right end instead of the small caret after the title. */
.fs-checkout-summary > summary::after {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--mf-ink);
    border-radius: var(--mf-radius);
    background: transparent;
    color: var(--mf-ink);
    font-family: "Font Awesome 7 Free";
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    content: "\f078";
}

.fs-checkout-summary > summary:hover::after,
.fs-checkout-summary > summary:focus-visible::after {
    background: var(--mf-ink);
    color: var(--mf-light);
}

.fs-checkout-summary[open] > summary::after {
    transform: rotate(180deg);
}

.fs-checkout-summary > summary:focus-visible {
    outline: none;
}

.fs-checkout-summary-sum {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 600;
}

.fs-checkout-summary[open] .fs-checkout-summary-sum {
    visibility: hidden;
}

.fs-checkout-summary-items {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 0;
    padding: 0.25rem 0 1.5rem;
    list-style: none;
}

.fs-checkout-summary-items li {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem;
}

.fs-checkout-summary-media {
    position: relative;
    display: block;
    border-radius: var(--mf-radius);
    background: var(--mf-soft);
    aspect-ratio: 3 / 4;
}

.fs-checkout-summary-media img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.fs-checkout-summary-qty {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    display: grid;
    min-width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    padding: 0 0.3rem;
    border-radius: 50%;
    background: var(--mf-ink);
    color: var(--bs-body-bg);
    font-size: 0.6875rem;
    font-weight: 700;
}

.fs-checkout-summary-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.fs-checkout-summary-name {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
}

.fs-checkout-summary-attr {
    color: var(--mf-muted);
    font-size: 0.8125rem;
}

.fs-checkout-summary-price {
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
}

.fs-checkout-summary-totals {
    margin: 0;
    padding: 1rem 0;
    border-top: 1px solid var(--mf-line);
    border-bottom: 1px solid var(--mf-line);
}

.fs-checkout-summary-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    color: var(--mf-muted);
    font-size: 0.875rem;
}

.fs-checkout-summary-totals dt {
    font-weight: 400;
}

.fs-checkout-summary-totals dd {
    margin: 0;
    white-space: nowrap;
}

.fs-checkout-summary-totals > div:last-child {
    margin-top: 0.5rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--mf-line);
    color: var(--mf-ink);
    font-size: 1.0625rem;
    font-weight: 600;
}

/* ---- Side menu (articles, contact) ------------------------------------------------------ */
.mf-side-menu-title {
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mf-line);
    color: var(--mf-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mf-side-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mf-side-menu ul ul {
    padding-left: 1rem;
}

.tp-site .mf-side-menu a {
    display: block;
    padding: 0.5rem 0 0.5rem 1rem;
    border-left: 1px solid var(--mf-line);
    border-radius: 0;
    background: none;
    color: var(--mf-muted);
    font-size: 0.9375rem;
    text-decoration: none;
}

.tp-site .mf-side-menu a:hover {
    border-left-color: var(--mf-muted);
    background: none;
    color: var(--mf-ink);
}

.tp-site .mf-side-menu li.active > a,
.tp-site .mf-side-menu li#current > a {
    padding-left: calc(1rem - 1px);
    border-left: 2px solid var(--mf-ink);
    background: none;
    color: var(--mf-ink);
    font-weight: 600;
}

/* ==========================================================================================
   V517: Fashion's own product comparison (was the Modern System table): a large serif title, the
   tools as small capitals, the table in lines only — products on top (picture 3:4, name, price, the
   ink button), parameter names in small capitals kept on the left while the table scrolls sideways;
   equal values muted.
   ========================================================================================== */
.mf-compare-page {
    padding-block: clamp(1rem, 0.5rem + 2vw, 2.5rem) clamp(3rem, 2rem + 3vw, 5rem);
}

.mf-compare-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.mf-compare-title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
    font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    line-height: 1.05;
}

.mf-compare-count {
    color: var(--mf-muted);
    font-family: var(--bs-body-font-family, inherit);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.mf-compare-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.mf-compare-switch {
    font-size: 0.875rem;
}

.mf-compare-switch .form-check-input:checked {
    border-color: var(--mf-ink);
    background-color: var(--mf-ink);
}

.mf-compare-page .mf-compare-tool {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--mf-ink);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--mf-muted);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-color: var(--mf-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mf-compare-scroll {
    overflow-x: auto;
    border-top: 1px solid var(--mf-ink);
}

.mf-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.mf-compare-table th,
.mf-compare-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--mf-line);
    background: var(--bs-body-bg);
    text-align: left;
    vertical-align: top;
}

.mf-compare-table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 13rem;
    min-width: 9rem;
    padding-left: 0;
}

.mf-compare-table tbody th {
    color: var(--mf-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mf-compare-table tbody td {
    font-size: 0.9375rem;
}

.mf-compare-table tbody tr.is-same td {
    color: var(--mf-muted);
}

.mf-compare-product {
    position: relative;
    min-width: 14rem;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.mf-compare-page .mf-compare-remove {
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-color: var(--mf-ink);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--mf-soft);
    --bs-btn-hover-color: var(--mf-ink);
    --bs-btn-hover-border-color: transparent;
    position: absolute;
    top: 2rem;
    right: 1.75rem;
    z-index: 1;
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    font-size: 0.85rem;
}

.mf-compare-picture {
    display: block;
    max-width: 11rem;
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: var(--mf-radius);
    background: var(--mf-soft);
    aspect-ratio: 3 / 4;
    color: var(--mf-line);
    font-size: 2.5rem;
}

.mf-compare-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mf-compare-picture > i {
    display: grid;
    height: 100%;
    place-items: center;
}

.mf-compare-name {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--mf-ink);
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.15rem;
    font-weight: var(--bs-headings-font-weight, 500);
    line-height: 1.25;
    text-decoration: none;
}

.mf-compare-name:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mf-compare-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.mf-compare-cart {
    margin: 0;
}

.mf-compare-page .mf-compare-add,
.mf-compare-page .mf-compare-more {
    --bs-btn-bg: var(--fs-primary);
    --bs-btn-color: var(--fs-on-primary);
    --bs-btn-border-color: var(--fs-primary);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--fs-primary-ink);
    --bs-btn-hover-border-color: var(--fs-primary);
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: var(--mf-radius);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mf-compare-page .mf-compare-more {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--fs-primary-ink);
    --bs-btn-hover-bg: var(--fs-primary);
    --bs-btn-hover-color: var(--fs-on-primary);
}

.mf-compare-none {
    color: var(--mf-muted);
}

@media (max-width: 575.98px) {
    .mf-compare-table tr > :first-child {
        width: 7rem;
        min-width: 7rem;
    }

    .mf-compare-product {
        min-width: 10.5rem;
    }

    .mf-compare-table th,
    .mf-compare-table td {
        padding: 0.85rem 0.75rem;
    }
}

/* ---- V518 --------------------------------------------------------------------------------------- */
/* Review stars: Font Awesome icons (site.css, all designs) instead of the text stars above; the review
   form's rating is a grid of options that fits the form (site.css), without the table cell padding. */
.mf-reviews .rating::before {
    content: "\f005\f005\f005\f005\f005";
    font-family: "Font Awesome 7 Free";
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.mf-reviews-form .review_rating_table .rating::before {
    font-size: 0.8rem;
}

.mf-reviews-form .review_rating_table input[type="radio"]:checked {
    border-color: var(--mf-ink);
    background-color: var(--mf-ink);
}

/* ---- V528 --------------------------------------------------------------------------------------- */
/* Logo on the left (layout.mf_shell_left, the example layout set "Logo on the left"): one header row — the
   logo, the category menu and the icons. The menu's panels span the header (the sticky header is their box):
   the row itself is not positioned and its items reach the header's bottom, so the pointer keeps the panel.
   Below xl the burger opens the categories. */
.mf-header-left .mf-header-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav tools";
    gap: 1rem 2rem;
}

.mf-header-left .mf-brand {
    grid-area: brand;
    text-align: left;
}

.mf-header-left .mf-nav-row {
    display: flex;
    grid-area: nav;
    position: static;
    align-self: stretch;
    background: none;
}

.mf-header-left .mf-nav-inner,
.mf-header-left .mf-nav-inner > .fs-position,
.mf-header-left .mf-mega {
    display: flex;
    width: 100%;
    align-items: stretch;
    justify-content: center;
}

.mf-header-left .mf-mega {
    flex-wrap: nowrap;
}

.mf-header-left .mf-mega-item {
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
}

.mf-header-left .mf-mega-link {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.mf-header-left .mf-header-tools {
    grid-area: tools;
}

.mf-header-left .mf-burger {
    display: none;
    grid-area: burger;
}

@media (max-width: 1199.98px) {
    .mf-header-left .mf-header-bar {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas: "burger brand tools";
        gap: 0.5rem;
    }

    .mf-header-left .mf-brand {
        text-align: center;
    }

    .mf-header-left .mf-burger {
        display: inline-flex;
        justify-self: start;
    }

    .mf-header-left .mf-nav-row {
        display: none;
    }
}

/* ---- V532: VirtueMart login / registration and the cart page ------------------------------ */
/* Fashion: no paper, ink rules, small uppercase headings. Both pages are native HTML without a design layout.
   Login / registration (shop.login_registration): the two radio headings choose which form shows;
   the registration fields go in two columns. */
.mf-main #vmMainPage:has(> .module > #login_register_cont) {
    max-width: 46rem;
    margin: 0 auto clamp(2rem, 1.5rem + 2vw, 4rem);
    padding: 0;
    border-top: 1px solid var(--mf-ink);
    padding-top: 1.5rem;
}

#vmMainPage:has(> .module > #login_register_cont) > .componentheading {
    margin: 0 0 1.5rem;
    color: var(--mf-ink);
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
    font-weight: var(--bs-headings-font-weight, 500);
    line-height: 1.1;
    text-align: center;
}

#login_register_cont > h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 1.1rem 0;
    border-top: 1px solid var(--mf-line);
    color: var(--mf-ink);
    font-family: var(--bs-body-font-family, inherit);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#login_register_cont > h3 .form-check-input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

#login_register_cont .form-check-input:not(:checked) {
    border-color: color-mix(in srgb, var(--mf-ink) 35%, transparent);
}

#login_register_cont > h3 .form-check-input:checked {
    border-color: var(--mf-ink);
    background-color: var(--mf-ink);
}

#login_register_cont > h3 label {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

#login_register_cont > h3:has(.toggler:not(:checked)) + .stretcher {
    display: none;
}

#login_register_cont .stretcher {
    padding: 0.25rem 0 1.75rem;
}

#login_register_cont .stretcher form > br {
    display: none;
}

#login_register_cont label {
    display: inline-block;
    margin: 0.75rem 0 0.35rem;
    color: var(--mf-ink);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#login_register_cont .form-control,
#login_register_cont .form-select {
    min-height: 2.9rem;
    border-color: var(--mf-ink);
    border-radius: var(--mf-radius);
}

#login_register_cont .form-control:focus,
#login_register_cont .form-select:focus {
    border-color: var(--mf-ink);
}

#login_register_cont .stretcher form > a,
#login_register_cont .stretcher form > label + a {
    color: var(--mf-muted);
    font-size: 0.8125rem;
}

#login_register_cont input[type="submit"] {
    display: block;
    width: 100%;
    min-height: 3rem;
    margin: 1.25rem 0 0.75rem;
}

#login_register_cont input[type="checkbox"] + label {
    margin: 0 0 0 0.4rem;
    color: var(--mf-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

#login_register_cont fieldset {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

#login_register_cont legend {
    margin: 1rem 0 0.25rem;
    padding: 0 0 0.6rem;
    border-bottom: 1px solid var(--mf-line);
    color: var(--mf-ink);
    font-family: var(--bs-body-font-family, inherit);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

@media (min-width: 576px) {
    #login_register_cont .user_fields fieldset {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.25rem;
    }

    #login_register_cont .user_fields legend {
        grid-column: 1 / -1;
    }
}

/* The terms and newsletter rows: the checkbox before its text, over both columns. */
#login_register_cont #agreed_div,
#login_register_cont #vm_subscribe_div {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

#login_register_cont #agreed_div .form-check-input,
#login_register_cont #vm_subscribe_div .form-check-input {
    margin: 0.15rem 0 0;
}

#login_register_cont #agreed_div label,
#login_register_cont #vm_subscribe_div label {
    margin: 0;
    color: var(--mf-ink);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

#login_register_cont .captchalegend {
    color: var(--mf-muted);
    font-size: 0.8125rem;
}

#login_register_cont .warning label {
    color: var(--mf-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* The cart page (com_freeshop cart; also a saved cart): the checkout's first step on its own —
   product rows, the totals and the button on the right. */
.mf-main #cart {
    max-width: 60rem;
    margin: 0 auto clamp(2rem, 1.5rem + 2vw, 4rem);
    padding: 0;
    border-top: 1px solid var(--mf-ink);
    padding-top: 1.5rem;
}

.mf-main #cart .step_header h1 {
    margin: 0 0 1.25rem;
    color: var(--mf-ink);
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
    font-weight: var(--bs-headings-font-weight, 500);
    line-height: 1.1;
}

.mf-main #cart .cart_white_line,
.mf-main #cart .loading_point:empty {
    display: none;
}

.mf-main #cart #mega_cart_list .product_row {
    padding: 1rem 0;
    border-top: 1px solid var(--mf-line);
}

.mf-main #cart .product_row_body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.mf-main #cart #mega_cart_list .product_row_body > .data:first-child {
    display: flex;
    flex: 1 1 18rem;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.mf-main #cart #mega_cart_list .product_image img {
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    background: #fff;
    object-fit: contain;
}

.mf-main #cart .product_data h4 {
    margin: 0 0 0.2rem;
    font-family: var(--bs-body-font-family, inherit);
    font-size: 0.975rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.mf-main #cart .product_data h4 a {
    color: var(--mf-ink);
    text-decoration: none;
}

.mf-main #cart .product_data h4 a:hover {
    color: var(--mf-ink);
}

.mf-main #cart .product_data .small {
    color: var(--mf-muted);
}

.mf-main #cart #mega_cart_list .product_row_body > .data:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

.mf-main #cart .qty_body {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--mf-ink);
    border-radius: var(--mf-radius);
}

.mf-main #cart .qty_body .form-control {
    width: 3rem;
    min-height: 2.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    box-shadow: none;
}

.mf-main #cart .qty_body a {
    display: inline-grid;
    width: 2.25rem;
    height: 2.5rem;
    place-items: center;
    color: var(--mf-ink);
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}

.mf-main #cart .qty_body a:hover {
    background: var(--mf-soft);
}

.mf-main #cart .qty_body .cart_button_minus::before {
    content: "\2212";
}

.mf-main #cart .qty_body .cart_button_plus::before {
    content: "+";
}

.mf-main #cart #mega_cart_list .price_body {
    min-width: 5.5rem;
    color: var(--mf-ink);
    font-weight: 600;
    text-align: right;
}

.mf-main #cart #mega_cart_totals {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mf-ink);
}

.mf-main #cart #mega_cart_totals .product_row_body > .data:first-child {
    display: none;
}

.mf-main #cart #mega_cart_totals .product_row_body > .data {
    display: flex;
    justify-content: space-between;
    width: min(100%, 20rem);
    margin-left: auto;
    padding: 0.2rem 0;
    color: var(--mf-muted);
    font-size: 0.9rem;
}

.mf-main #cart #mega_cart_totals .product_row:last-child .data {
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--mf-line);
    color: var(--mf-ink);
    font-size: 1.1rem;
    font-weight: 600;
}

.mf-main #cart .form_right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 1.25rem;
}

.mf-main #cart .next_button .btn {
    min-width: 14rem;
    min-height: 3.25rem;
}

/*
 * V678 (as Tech, V675 / V677): the footer's logo in the footer's colour — a picture logo by its shape (site.js
 * initLogoTone()), one it cannot shape keeps its colours on a light plate.
 */
.mf-footer {
    --fs-logo-tone: var(--mf-footer-color);
    --fs-logo-plate: #ffffff;
    --fs-logo-plate-padding: 0.4rem 0.65rem;
}

/* V678: the text logo's icon (the logo module's "logo_icon"), in the name's colour. */
.mf-wordmark-icon {
    margin-right: 0.35em;
    font-size: 0.72em;
    vertical-align: 0.12em;
}

/* V679: logo sizes — a picture logo a little lower in the header and lower still in the footer; the text logo a
   little smaller in the footer (the header's as it was). */
.mf-logo img {
    max-height: 2.35rem;
}

.mf-footer .mf-logo img {
    max-height: 1.85rem;
}

.mf-footer .mf-wordmark {
    font-size: 1.3rem;
}

/* ---- V699: a banner with an AI-placed photo that is not calm and light (data-fs-tone="dark") — light words on a shade
   (the pack's banners are made for calm light pictures with dark words on them). ------------------------------------ */
.mf-banner:has(> img[data-fs-tone="dark"]) {
    color: #ffffff;
}

.mf-banner:has(> img[data-fs-tone="dark"])::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 75%);
    content: "";
    pointer-events: none;
}

.mf-banner:has(> img[data-fs-tone="dark"]) .mf-banner-text {
    z-index: 1;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}