:root{--fs-primary:#495057;--fs-primary-rgb:73, 80, 87;--fs-on-primary:#ffffff;--fs-primary-ink:#495057;--fs-radius:0.5rem;--fs-radius-scale:1;--fs-space:1.5rem}
:root{--bs-body-bg:#f8f9fa;--bs-body-bg-rgb:248, 249, 250;--bs-link-color:#495057;--bs-link-color-rgb:73, 80, 87;--bs-link-hover-color:#212529;--bs-link-hover-color-rgb:33, 37, 41;--bs-code-color:#495057;}
/* Modern System (pack "system", V486; from Modern Template without the development showcase):
   the plain grey design new shops start with. Standard Bootstrap 5 components in neutral greys.
   Everything that Bootstrap classes in the layouts can do is done there; this file only holds
   what Bootstrap has no class for and the adapters for native (VirtueMart / Joomla) markup.
   Hooks are "tp-*" classes; behaviour stays on site.js data-fs-* attributes.
   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 -------------------------------------------------------------------- */
@media (min-width: 992px) {
    .tp-browse-sidebar {
        position: sticky;
        top: calc(var(--fs-header-height, 0px) + 1rem);
    }

    .tp-browse-sidebar .offcanvas-body {
        padding: 1.25rem;
        border: 1px solid var(--tp-line);
        border-radius: var(--bs-border-radius);
        background: var(--bs-body-bg);
    }
}

/* 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;
}

/* V500: a category without products of its own shows its subcategories as large tiles: the picture
   on top, a larger name under it; 4 / 3 / 2 in a row. */
.tp-subcats-only .tp-subcats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.tp-subcats-only .tp-subcat {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tp-subcats-only .tp-subcat:hover {
    box-shadow: 0 0.75rem 1.75rem -0.75rem rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.tp-subcats-only .tp-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    padding: 1rem;
    border-radius: 0;
    font-size: 2.5rem;
}

.tp-subcats-only .tp-subcat > span:last-child {
    padding: 0.9rem 1rem 1rem;
    font-size: 1.05rem !important;
    text-align: center;
}

@media (max-width: 1199.98px) {
    .tp-subcats-only .tp-subcats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .tp-subcats-only .tp-subcats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .tp-subcats-only .tp-subcat > span:last-child {
        padding: 0.7rem 0.6rem 0.8rem;
        font-size: 0.95rem !important;
    }
}

/* 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: 2rem;
    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: 0.9rem;
}

.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: 0.5rem;
    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: 1rem;
    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: 2rem;
    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: 0.75rem;
    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: 0.75rem;
    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: 0.5rem;
    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: 0.5rem;
    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: 0.75rem;
    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: 2rem;
}

#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: 0.75rem;
    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: 0.6rem;
}

#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: 0.6rem;
    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: 0.9rem;
    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: 1rem;
    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: 0.9rem;
    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: 0.5rem;
    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: 0.75rem;
    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: 0.75rem;
}

.tp-article-body blockquote {
    padding: 0.9rem 1.25rem;
    border-left: 4px solid var(--tp-accent);
    border-radius: 0 0.75rem 0.75rem 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: 0.6rem;
    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: 1.25rem;
    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: 0.6rem;
    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: 0.6rem;
    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: 0.6rem;
    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: 0.5rem;
    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: 0.5rem;
    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: 0.9rem;
}

.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: 0.5rem;
    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: 0.75rem;
    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;
}

/* V517: product comparison: the parameter names stay on the left while the table scrolls sideways,
   the product columns get room, equal values are muted and different ones stand out. */
.tp-comparison-table {
    border-collapse: separate;
    border-spacing: 0;
}

.tp-comparison-table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 9rem;
}

.tp-comparison-table thead tr > :first-child {
    background: var(--bs-body-bg) !important;
}

.tp-comparison-table tbody th {
    background: var(--bs-tertiary-bg) !important;
}

.tp-comparison-product {
    min-width: 13rem;
    padding: 1.25rem 1rem !important;
}

.tp-comparison-product .tp-thumb {
    background: transparent;
}

.tp-comparison-table tbody td {
    font-weight: 600;
}

.tp-comparison-table tbody tr.is-same td {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

.tp-comparison-table tbody tr:hover td {
    background: var(--bs-tertiary-bg);
}

/*
 * 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.
 */
.tp-footer {
    --fs-logo-tone: var(--bs-body-color);
    --fs-logo-plate: #ffffff;
    --fs-logo-plate-padding: 0.4rem 0.65rem;
}

/* 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). */
.tp-logo img {
    display: block;
    width: auto;
    max-height: 2.35rem;
}

.tp-footer .tp-logo img {
    max-height: 1.85rem;
}

.tp-footer .tp-logo .navbar-brand {
    font-size: 1.1rem;
}

/* V680: the text logo lines up — the icon without Font Awesome's fixed 1.25em box, the name's box trimmed to its
   capital letters (text-box, where the browser knows it): it sits in the icon's middle. */
.tp-logo .navbar-brand i {
    --fa-width: auto;
}

.tp-logo .navbar-brand span {
    text-box: trim-both cap alphabetic;
}