:root{--fs-primary:#6f9fd8;--fs-primary-rgb:111, 159, 216;--fs-on-primary:#ffffff;--fs-primary-ink:#6f9fd8;--fs-radius:0.75rem;--fs-radius-scale:1.5;--fs-space:1.5rem}
:root{--bs-body-bg:#fdfbf7;--bs-body-bg-rgb:253, 251, 247;--bs-body-color:#3b3a4a;--bs-body-color-rgb:59, 58, 74;--bs-border-color:#ece6dc;--bs-link-color:#4f82c0;--bs-link-color-rgb:79, 130, 192;--bs-link-hover-color:#3d6aa0;--bs-link-hover-color-rgb:61, 106, 160;--bs-font-sans-serif:Nunito, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--bs-headings-font-family:Nunito, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--bs-headings-font-weight:700;}
/* Modern Kids (pack "kids", V561): a toy / children's shop in bright, playful colours. The structure is Modern
   Tech's (V511–V528: the "kd-*" frame, front page, category and product pages; the "tp-*" System rules below for
   native markup); the Modern Kids rules at the end of this file give it its look: Baloo 2 headings, big round
   corners, colourful category and age tiles (layout.kd_age_band), playful cards with chips and a wavy footer.
   Colours come from the design primary (--fs-primary), a few neutral tokens and the fixed bright palette
   --kd-c1 … --kd-c6; the header / footer looks (data-fs-header / data-fs-footer) only change tokens. The tokens
   live on :root too: offcanvas panels are moved to <body> (V311). */
:root,
.tp-site,
.offcanvas {
    --tp-accent: var(--fs-primary);
    --tp-dark: #212529;
    --tp-muted: #6c757d;
    --tp-line: #dee2e6;
    --tp-soft: #f1f3f5;
    --tp-danger: var(--bs-danger);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================================
   Modern Tech (V511)
   ========================================================================================== */

/* ---- Tokens ------------------------------------------------------------------------------ */
/* On :root only (everything, the offcanvas panels in <body> too, inherits them), so the look
   switches on <html> below can change them. */
:root {
    --kd-ink: var(--bs-body-color);
    --kd-muted: color-mix(in srgb, var(--bs-body-color) 60%, #ffffff);
    --kd-line: var(--bs-border-color);
    --kd-surface: #ffffff;
    --kd-soft: color-mix(in srgb, var(--fs-primary) 7%, #f4f6f9);
    --kd-accent: var(--fs-primary);
    --kd-accent-soft: color-mix(in srgb, var(--fs-primary) 12%, #ffffff);
    --kd-sale: #e5412d;
    --kd-ok: #15a34a;
    --kd-wait: #d98a06;
    --kd-night: #0f1a2e;
    --kd-light: #ffffff;
    --kd-radius: calc(0.5rem * var(--fs-radius-scale, 1));
    --kd-radius-lg: calc(0.75rem * var(--fs-radius-scale, 1));
    --kd-shadow: 0 1px 2px rgba(15, 26, 46, 0.06), 0 6px 20px rgba(15, 26, 46, 0.06);
    --kd-shadow-lg: 0 18px 44px rgba(15, 26, 46, 0.16);
    /* V508 (as Fashion): Bootstrap's other corner sizes follow the design's corners (0 = square). */
    --bs-border-radius-sm: calc(0.25rem * var(--fs-radius-scale, 1));
    --bs-border-radius-lg: calc(0.75rem * var(--fs-radius-scale, 1));
    --bs-border-radius-xl: calc(1rem * var(--fs-radius-scale, 1));
    --bs-border-radius-xxl: calc(2rem * var(--fs-radius-scale, 1));
    --tp-danger: var(--kd-sale);

    /* Header parts: info bar, logo row, category row. */
    --kd-topbar-bg: var(--kd-night);
    --kd-topbar-color: color-mix(in srgb, var(--kd-light) 82%, var(--kd-night));
    --kd-header-bg: var(--kd-surface);
    --kd-header-color: var(--kd-ink);
    --kd-header-line: var(--kd-line);
    --kd-nav-bg: var(--kd-surface);
    --kd-nav-color: var(--kd-ink);
    --kd-search-bg: var(--kd-soft);

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

/* Header looks (Look::HEADERS). */
[data-fs-header="brand"] {
    --kd-topbar-bg: color-mix(in srgb, var(--fs-primary), #000 30%);
    --kd-header-bg: var(--fs-primary);
    --kd-header-color: var(--fs-on-primary);
    --kd-header-line: color-mix(in srgb, var(--fs-primary), #fff 18%);
    --kd-search-bg: var(--kd-light);
}

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

[data-fs-header="dark"] {
    --kd-topbar-bg: #000000;
    --kd-header-bg: var(--kd-night);
    --kd-header-color: var(--kd-light);
    --kd-header-line: color-mix(in srgb, var(--kd-night), #fff 14%);
    --kd-nav-bg: var(--kd-night);
    --kd-nav-color: var(--kd-light);
    --kd-search-bg: var(--kd-light);
}

/* Footer looks (Look::FOOTERS): the pack's own is white. */
[data-fs-footer="gray"] {
    --kd-footer-bg: #eef0f4;
}

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

.kd-site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.kd-main {
    flex: 1 0 auto;
    padding-top: 1.5rem;
    padding-bottom: 3.5rem;
}

.kd-header .fs-section,
.kd-topbar .fs-section,
.kd-nav .fs-section,
.kd-footer .fs-section,
.kd-prefooter .fs-section {
    padding: 0;
}

/* ---- Info bar ------------------------------------------------------------------------------ */
.kd-topbar {
    background: var(--kd-topbar-bg);
    color: var(--kd-topbar-color);
    font-size: 0.8125rem;
}

.kd-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.25rem;
}

.kd-topbar p {
    margin: 0;
}

.kd-topbar-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kd-topbar-info li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.kd-topbar-info i {
    color: color-mix(in srgb, var(--fs-primary), #fff 45%);
}

.kd-topbar .tp-menu-inline ul.menu {
    gap: 0 1.25rem;
}

.kd-topbar .tp-menu-inline a {
    color: inherit;
}

.kd-topbar .tp-menu-inline a:hover {
    color: var(--kd-light);
}

@media (max-width: 767.98px) {
    .kd-topbar-end {
        display: none;
    }

    .kd-topbar-inner {
        justify-content: center;
    }
}

/* ---- Header: logo, search, icons ------------------------------------------------------------ */
.kd-header {
    z-index: 1030;
    border-bottom: 1px solid var(--kd-header-line);
    background: var(--kd-header-bg);
    color: var(--kd-header-color);
    box-shadow: 0 2px 12px rgba(15, 26, 46, 0.05);
}

.kd-header-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand search tools";
    align-items: center;
    gap: 1rem 2rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.kd-burger {
    grid-area: burger;
}

.kd-brand {
    grid-area: brand;
    min-width: 0;
}

.kd-header-search {
    grid-area: search;
    max-width: 46rem;
    width: 100%;
    justify-self: center;
}

.kd-header-tools {
    grid-area: tools;
}

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

@media (max-width: 991.98px) {
    .kd-header-bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "burger brand tools"
            "search search search";
        gap: 0.6rem 0.5rem;
        padding-top: 0.6rem;
        padding-bottom: 0.75rem;
    }

    .kd-header-search {
        max-width: none;
    }
}

.kd-icon-btn {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    color: inherit;
    font-size: 1.25rem;
}

.kd-icon-btn:hover {
    color: var(--fs-primary-ink);
}

/* Logo: an image, or the name as a word mark with a small mark. */
.kd-logo img {
    display: block;
    width: auto;
    max-height: 2.75rem;
}

.kd-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: inherit;
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.kd-wordmark:hover {
    color: inherit;
}

.kd-wordmark-mark {
    display: inline-flex;
    width: 2.1rem;
    height: 2.1rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--kd-radius);
    background: var(--kd-accent);
    color: var(--fs-on-primary);
    font-size: 1rem;
}

[data-fs-header="brand"] .kd-wordmark-mark {
    background: var(--kd-light);
    color: var(--fs-primary-ink);
}

@media (max-width: 575.98px) {
    .kd-wordmark {
        font-size: 1.3rem;
    }

    .kd-wordmark-mark {
        width: 1.8rem;
        height: 1.8rem;
        font-size: 0.85rem;
    }
}

/* Search: a large field with the button inside its right end. */
.kd-search {
    margin: 0;
}

.kd-search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.kd-search-icon {
    position: absolute;
    left: 1rem;
    color: var(--kd-muted);
    pointer-events: none;
}

.kd-search-field .form-control {
    height: 3rem;
    padding: 0 7.5rem 0 2.75rem;
    border: 2px solid transparent;
    border-radius: var(--kd-radius-lg);
    background: var(--kd-search-bg);
    color: var(--kd-ink);
    font-size: 1rem;
    box-shadow: none;
}

.kd-search-field .form-control:focus {
    border-color: var(--kd-accent);
    background: var(--kd-surface);
}

.kd-search-submit {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
    padding: 0 1.25rem;
    border-radius: calc(var(--kd-radius-lg) - 0.2rem);
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .kd-search-field .form-control {
        height: 2.75rem;
        padding-right: 3.25rem;
    }

    .kd-search-submit {
        padding: 0 0.85rem;
    }
}

/* Account, comparison, wishlist and cart: an icon with a short name under it. */
.kd-account {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.kd-tool,
.kd-cart {
    position: relative;
    display: inline-flex;
    min-width: 3.5rem;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.4rem;
    border: 0;
    color: inherit;
    line-height: 1;
}

.kd-tool:hover,
.kd-cart:hover {
    color: var(--fs-primary-ink);
}

[data-fs-header="brand"] .kd-tool:hover,
[data-fs-header="brand"] .kd-cart:hover,
[data-fs-header="dark"] .kd-tool:hover,
[data-fs-header="dark"] .kd-cart:hover {
    color: inherit;
    opacity: 0.8;
}

.kd-tool-icon {
    position: relative;
    font-size: 1.3rem;
}

.kd-tool-label {
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}

.kd-count,
.kd-cart .fs-cart-count {
    position: absolute;
    top: -0.35rem;
    right: -0.65rem;
    min-width: 1.1rem;
    padding: 0.2rem 0.3rem;
    border-radius: 1rem;
    background: var(--kd-accent);
    color: var(--fs-on-primary);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    transform: none;
}

[data-fs-header="brand"] .kd-count,
[data-fs-header="brand"] .kd-cart .fs-cart-count {
    background: var(--kd-light);
    color: var(--fs-primary-ink);
}

.kd-account-dot {
    position: absolute;
    top: -0.1rem;
    right: -0.3rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 2px solid var(--kd-header-bg);
    border-radius: 50%;
    background: var(--kd-ok);
}

/* The cart drawer's own button: its icon like the others; the name under it opens it too. */
.kd-cart .fs-cart {
    position: static;
}

.kd-cart .fs-cart-toggle {
    position: static;
    padding: 0;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
}

.kd-cart .fs-cart-toggle::after {
    position: absolute;
    inset: 0;
    content: "";
}

.kd-cart .fs-cart-count {
    top: 0;
    right: 0.35rem;
}

@media (max-width: 1199.98px) {
    .kd-tool-label {
        display: none;
    }

    .kd-tool,
    .kd-cart {
        min-width: 2.5rem;
    }
}

/* Narrow screens: the account and cart only (comparison and wishlist are in the account panel). */
@media (max-width: 575.98px) {
    .kd-account > .tp-account-toggle:not([data-bs-target^="#tp-account-"]) {
        display: none;
    }
}

/* ---- Category row and the "All categories" menu ------------------------------------------ */
.kd-nav {
    border-top: 1px solid var(--kd-header-line);
    background: var(--kd-nav-bg);
    color: var(--kd-nav-color);
}

.kd-nav-inner {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 1.75rem;
    min-height: 3.25rem;
}

.kd-nav-categories,
.kd-nav-categories > .fs-position {
    display: flex;
    align-items: stretch;
}

.kd-nav-links {
    display: flex;
    align-items: center;
    min-width: 0;
}

.kd-nav .tp-menu-inline ul.menu {
    flex-wrap: nowrap;
    gap: 0 1.5rem;
    overflow: hidden;
}

.kd-nav .tp-menu-inline a {
    padding: 0.9rem 0;
    color: inherit;
    font-size: 0.925rem;
    font-weight: 600;
    white-space: nowrap;
}

.kd-nav .tp-menu-inline a:hover,
.kd-nav .tp-menu-inline li.active > a,
.kd-nav .tp-menu-inline li#current > a {
    color: var(--fs-primary-ink);
}

[data-fs-header="brand-contained"] .kd-nav .tp-menu-inline a:hover,
[data-fs-header="dark"] .kd-nav .tp-menu-inline a:hover,
[data-fs-header="brand-contained"] .kd-nav .tp-menu-inline li#current > a,
[data-fs-header="dark"] .kd-nav .tp-menu-inline li#current > a {
    color: inherit;
    opacity: 0.8;
}

.kd-nav-end {
    display: flex;
    align-items: center;
    margin-left: auto;
    font-size: 0.875rem;
    white-space: nowrap;
}

.kd-nav-help {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.kd-nav-help i {
    color: var(--fs-primary-ink);
}

.kd-nav-help span {
    color: var(--kd-muted);
}

.kd-nav-help a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

[data-fs-header="brand-contained"] .kd-nav-help i,
[data-fs-header="brand-contained"] .kd-nav-help span,
[data-fs-header="dark"] .kd-nav-help i,
[data-fs-header="dark"] .kd-nav-help span {
    color: inherit;
    opacity: 0.8;
}

@media (max-width: 1199.98px) {
    .kd-nav-end {
        display: none;
    }
}

/* The button fills the row's height, so the pointer reaches the panel without leaving the menu. */
.kd-mega {
    display: flex;
    align-items: stretch;
}

.kd-mega-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.45rem 0;
    padding: 0 1.1rem;
    border: 0;
    border-radius: var(--kd-radius);
    background: var(--kd-accent);
    color: var(--fs-on-primary);
    font-size: 0.925rem;
    font-weight: 700;
    white-space: nowrap;
}

[data-fs-header="brand-contained"] .kd-mega-toggle {
    background: var(--kd-light);
    color: var(--fs-primary-ink);
}

.kd-mega-caret {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.kd-mega:hover .kd-mega-caret,
.kd-mega:focus-within .kd-mega-caret {
    transform: rotate(180deg);
}

.kd-mega-panel {
    position: absolute;
    top: 100%;
    right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    z-index: 20;
    display: none;
    min-height: 27rem;
    border: 1px solid var(--kd-line);
    border-radius: 0 0 var(--kd-radius-lg) var(--kd-radius-lg);
    background: var(--kd-surface);
    color: var(--kd-ink);
    box-shadow: var(--kd-shadow-lg);
}

.kd-mega:hover .kd-mega-panel,
.kd-mega:focus-within .kd-mega-panel {
    display: block;
}

.kd-mega-roots {
    width: 17.5rem;
    height: 100%;
    margin: 0;
    padding: 0.6rem 0;
    border-right: 1px solid var(--kd-line);
    list-style: none;
}

.kd-mega-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    color: var(--kd-ink);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.kd-mega-thumb {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--kd-radius);
    background: var(--kd-soft);
    color: var(--kd-muted);
    overflow: hidden;
}

.kd-mega-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.kd-mega-name {
    flex: 1 1 auto;
    min-width: 0;
}

.kd-mega-arrow {
    color: var(--kd-muted);
    font-size: 0.7rem;
}

/* The hovered or focused top category, and the first one while none is. */
.kd-mega-root:hover > .kd-mega-link,
.kd-mega-root:focus-within > .kd-mega-link,
.kd-mega-roots:not(:hover):not(:focus-within) > .kd-mega-root:first-child > .kd-mega-link {
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
}

.kd-mega-sub {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 17.5rem;
    display: none;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 2rem;
    overflow-y: auto;
}

.kd-mega-root:hover > .kd-mega-sub,
.kd-mega-root:focus-within > .kd-mega-sub,
.kd-mega-roots:not(:hover):not(:focus-within) > .kd-mega-root:first-child > .kd-mega-sub {
    display: flex;
}

.kd-mega-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--kd-line);
}

.kd-mega-title {
    color: var(--kd-ink);
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
}

.kd-mega-all {
    color: var(--fs-primary-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.kd-mega-all i {
    margin-left: 0.25rem;
    font-size: 0.75rem;
}

.kd-mega-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13rem;
    gap: 2rem;
}

.kd-mega-cols {
    columns: 3 12rem;
    column-gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kd-mega-col {
    margin-bottom: 1rem;
    break-inside: avoid;
}

.kd-mega-col-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--kd-ink);
    font-weight: 600;
    text-decoration: none;
}

.kd-mega-col-title:hover,
.kd-mega-list a:hover,
.kd-mega-title:hover {
    color: var(--fs-primary-ink);
}

.kd-mega-count {
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
    background: var(--kd-soft);
    color: var(--kd-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.kd-mega-list {
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
}

.kd-mega-list li + li {
    margin-top: 0.25rem;
}

.kd-mega-list a {
    color: var(--kd-muted);
    font-size: 0.875rem;
    text-decoration: none;
}

.kd-mega-picture {
    display: flex;
    align-self: start;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: var(--kd-radius-lg);
    background: var(--kd-soft);
}

.kd-mega-picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* ---- Burger panel ----------------------------------------------------------------------------- */
.kd-menu-panel {
    --bs-offcanvas-width: min(22rem, 90vw);
}

.kd-menu-panel .offcanvas-header {
    border-bottom: 1px solid var(--kd-line);
}

.kd-menu-panel .offcanvas-body {
    padding: 0;
}

.kd-drawer .accordion-button,
.kd-drawer-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    color: var(--kd-ink);
    font-weight: 600;
    text-decoration: none;
}

.kd-drawer .accordion-button:not(.collapsed) {
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
    box-shadow: none;
}

.kd-drawer-thumb {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--kd-radius);
    background: var(--kd-soft);
    color: var(--kd-muted);
}

.kd-drawer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.kd-drawer-list {
    margin: 0;
    padding: 0.25rem 0 0.75rem 4rem;
}

.kd-drawer-list a {
    display: block;
    padding: 0.4rem 0;
    color: var(--kd-ink);
    text-decoration: none;
}

.kd-menu-vertical {
    padding: 1rem;
    border-top: 1px solid var(--kd-line);
}

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

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

/* ---- Live search results under the header ---------------------------------------------------- */
.kd-search-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: 70vh;
    overflow-y: auto;
    border-bottom: 1px solid var(--kd-line);
    background: var(--kd-surface);
    color: var(--kd-ink);
    box-shadow: var(--kd-shadow-lg);
}

.kd-search-panel-inner {
    position: relative;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.kd-search-close {
    position: absolute;
    top: 1rem;
    right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    z-index: 1;
}

.kd-search-panel .searchHolder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1rem;
}

.kd-search-panel .searchTitle,
.kd-search-panel .searchSummary,
.kd-search-panel .searchNoresults {
    grid-column: 1 / -1;
}

.kd-search-panel .searchTitle {
    padding-right: 2.5rem;
    font-weight: 700;
}

.kd-search-panel .searchProductSnapshot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    padding: 0.6rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
}

.kd-search-panel .searchImgHolder a {
    display: flex;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
}

.kd-search-panel .searchImgHolder img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kd-search-panel .searchProductName {
    font-size: 0.85rem;
    line-height: 1.3;
}

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

.kd-search-panel .searchProductPrice {
    font-weight: 700;
}

.kd-search-panel .searchProductPrice .price_title,
.kd-search-panel .searchProductPrice br,
.kd-search-panel .clr {
    display: none;
}

.kd-search-panel .searchSummary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--kd-line);
    color: var(--kd-muted);
    font-size: 0.85rem;
}

.kd-search-panel .searchMore {
    font-weight: 600;
}

/* ---- Sections ---------------------------------------------------------------------------------- */
.kd-section {
    margin-top: 2.75rem;
}

.kd-home > .fs-position:first-child > .kd-section:first-child,
.kd-home > .fs-position:first-child > .kd-hero:first-child {
    margin-top: 0;
}

.kd-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.kd-section-title {
    margin: 0;
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.kd-section-more {
    flex-shrink: 0;
    color: var(--fs-primary-ink);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.kd-section-more i {
    margin-left: 0.2rem;
    font-size: 0.75rem;
}

.kd-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kd-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.2rem 0.5rem;
    border-radius: calc(0.3rem * var(--fs-radius-scale, 1));
    background: var(--kd-accent);
    color: var(--fs-on-primary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.kd-badge-sale {
    background: var(--kd-sale);
    /* V655: light text on the red badge (the brand's text colour was dark on light primaries). */
    color: #ffffff;
}

/* ---- Offer slider and banners ------------------------------------------------------------------ */
.kd-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
}

.kd-hero-main {
    overflow: hidden;
    border-radius: var(--kd-radius-lg);
    background: var(--kd-night);
}

.kd-slide,
.kd-banner {
    position: relative;
    display: block;
    overflow: hidden;
    color: var(--kd-light);
    text-decoration: none;
}

.kd-slide {
    aspect-ratio: 1400 / 640;
}

.kd-slide-picture,
.kd-banner-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.kd-slide:hover .kd-slide-picture,
.kd-banner:hover .kd-banner-picture {
    transform: scale(1.03);
}

.kd-slide-content,
.kd-banner-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    background: linear-gradient(90deg, rgba(10, 17, 32, 0.82) 0%, rgba(10, 17, 32, 0.45) 45%, rgba(10, 17, 32, 0) 75%);
}

.kd-slide-content {
    max-width: none;
}

.kd-slide-content > * {
    max-width: 26rem;
}

.kd-slide-title {
    display: block;
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(1.6rem, 1rem + 2.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.kd-slide-text {
    display: block;
    opacity: 0.88;
}

.kd-slide-button {
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.65rem 1.4rem;
    font-weight: 700;
}

.kd-hero-main .carousel-indicators {
    justify-content: flex-start;
    margin: 0 0 1.1rem clamp(1.5rem, 1rem + 3vw, 3.5rem);
}

.kd-hero-main .carousel-indicators [data-bs-target] {
    width: 1.5rem;
    height: 0.25rem;
    border: 0;
    border-radius: 1rem;
    opacity: 0.5;
}

.kd-hero-main .carousel-indicators .active {
    width: 2.5rem;
    opacity: 1;
}

.kd-hero-main .carousel-control-prev,
.kd-hero-main .carousel-control-next {
    width: 3.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.kd-hero-main:hover .carousel-control-prev,
.kd-hero-main:hover .carousel-control-next {
    opacity: 0.85;
}

.kd-hero-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
}

.kd-banner {
    min-height: 10rem;
    border-radius: var(--kd-radius-lg);
    background: var(--kd-night);
}

.kd-banner-content {
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 1.25rem 1.4rem;
    background: linear-gradient(0deg, rgba(10, 17, 32, 0.8) 0%, rgba(10, 17, 32, 0.25) 55%, rgba(10, 17, 32, 0) 80%);
}

.kd-banner-title {
    display: block;
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.15;
}

.kd-banner-link {
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.9;
}

.kd-banner-link i {
    margin-left: 0.25rem;
    font-size: 0.75rem;
}

@media (max-width: 991.98px) {
    .kd-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .kd-hero-side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
    }

    .kd-hero-side .kd-banner {
        aspect-ratio: 7 / 4;
    }
}

@media (max-width: 575.98px) {
    .kd-slide {
        aspect-ratio: 4 / 3;
    }

    .kd-slide-content {
        justify-content: flex-end;
        background: linear-gradient(0deg, rgba(10, 17, 32, 0.85) 0%, rgba(10, 17, 32, 0.35) 60%, rgba(10, 17, 32, 0) 85%);
    }

    .kd-slide-text {
        display: none;
    }

    .kd-hero-main .carousel-indicators {
        display: none;
    }

    .kd-hero-side {
        gap: 0.75rem;
    }

    .kd-hero-side .kd-banner {
        min-height: 0;
        aspect-ratio: 1 / 1;
    }

    .kd-banner-title {
        font-size: 1.05rem;
    }

    .kd-banner-content {
        padding: 0.9rem;
    }
}

/* Wide banners between the product rows. */
.kd-promo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.kd-banner-wide {
    min-height: 0;
    aspect-ratio: 12 / 5;
}

.kd-banner-wide .kd-banner-content {
    justify-content: center;
    background: linear-gradient(90deg, rgba(10, 17, 32, 0.8) 0%, rgba(10, 17, 32, 0.35) 50%, rgba(10, 17, 32, 0) 75%);
}

.kd-banner-wide .kd-banner-title {
    max-width: 16rem;
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
}

@media (max-width: 767.98px) {
    .kd-promo-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .kd-banner-wide {
        aspect-ratio: 16 / 9;
    }
}

/* ---- Category row ----------------------------------------------------------------------------- */
.kd-cat-icons-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kd-cat-icon {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 0.5rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    color: var(--kd-ink);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.kd-cat-icon:hover {
    border-color: var(--kd-accent);
    color: var(--fs-primary-ink);
    box-shadow: var(--kd-shadow);
    transform: translateY(-2px);
}

.kd-cat-icon-picture {
    display: flex;
    width: 5.5rem;
    height: 5.5rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--kd-soft);
    color: var(--kd-muted);
    font-size: 1.75rem;
}

.kd-cat-icon-picture img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

@media (max-width: 767.98px) {
    .kd-cat-icons-list {
        display: flex;
        gap: 0.75rem;
        margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5) 0.25rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .kd-cat-icons-list::-webkit-scrollbar {
        display: none;
    }

    .kd-cat-icons-list > li {
        flex: 0 0 6.75rem;
        scroll-snap-align: start;
    }

    .kd-cat-icon {
        padding: 0.75rem 0.4rem;
        border: 0;
        background: transparent;
        font-size: 0.8rem;
    }

    .kd-cat-icon-picture {
        width: 4.75rem;
        height: 4.75rem;
        background: var(--kd-surface);
        box-shadow: inset 0 0 0 1px var(--kd-line);
    }
}

/* ---- Product card -------------------------------------------------------------------------- */
.kd-card {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: 0.9rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.kd-card:hover {
    border-color: color-mix(in srgb, var(--fs-primary) 35%, var(--kd-line));
    box-shadow: var(--kd-shadow);
}

.kd-card-media {
    position: relative;
}

.kd-card-picture {
    display: flex;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: var(--kd-line);
    font-size: 3rem;
}

.kd-card-picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.kd-card:hover .kd-card-picture img {
    transform: scale(1.04);
}

.kd-card-media .kd-badge {
    position: absolute;
    top: 0;
    left: 0;
}

.kd-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.kd-card-title {
    display: -webkit-box;
    min-height: 2.6em;
    margin: 0;
    overflow: hidden;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 600;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

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

.kd-card-title a:hover {
    color: var(--fs-primary-ink);
}

/* Specifications: "Label: value" lines, one line each. */
.kd-card-specs {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    color: var(--kd-muted);
    font-size: 0.78rem;
    line-height: 1.35;
    list-style: none;
}

.kd-card-specs li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kd-card-spec-label::after {
    content: ":";
}

.kd-card-spec-value {
    color: var(--kd-ink);
}

.kd-card-desc {
    color: var(--kd-muted);
    font-size: 0.875rem;
}

.kd-card-buy {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.75rem;
}

.kd-stock {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
}

.kd-stock::before {
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.kd-stock.is-in {
    color: var(--kd-ok);
}

.kd-stock.is-out {
    color: var(--kd-wait);
}

.kd-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    color: var(--kd-ink);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
}

.kd-card-price .old_price,
.kd-card-price .product-Old-Price {
    font-size: 0.8rem;
}

/* "Add to cart": the native form with the button only (the quantity stays 1). */
.kd-card-cart form {
    display: flex;
    margin: 0;
}

.kd-card-cart .product_quantity,
.kd-card-cart label.quantity_box,
.kd-card-cart .clr,
.kd-card-cart br {
    display: none;
}

.kd-card-cart input[type="submit"],
.kd-card-cart button[type="submit"],
.kd-card-more {
    --bs-btn-bg: var(--kd-accent);
    --bs-btn-border-color: var(--kd-accent);
    --bs-btn-color: var(--fs-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--fs-primary), #000 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--fs-primary), #000 15%);
    --bs-btn-hover-color: var(--fs-on-primary);
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--kd-accent);
    border-radius: var(--kd-radius);
    background: var(--kd-accent);
    color: var(--fs-on-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.kd-card-cart input[type="submit"]:hover,
.kd-card-cart button[type="submit"]:hover,
.kd-card-more:hover {
    border-color: color-mix(in srgb, var(--fs-primary), #000 15%);
    background: color-mix(in srgb, var(--fs-primary), #000 15%);
    color: var(--kd-light);
}

.kd-card-more {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--fs-primary-ink);
    background: transparent;
    color: var(--fs-primary-ink);
}

/* The comparison tick: shown when comparison is on (site.js: html.fs-compare-on). */
.kd-compare {
    display: none;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.2rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kd-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.fs-compare-on .kd-compare {
    display: inline-flex;
}

.kd-compare:hover {
    color: var(--fs-primary-ink);
}

.kd-compare-box {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    border: 1.5px solid color-mix(in srgb, var(--kd-ink) 30%, var(--kd-surface));
    border-radius: calc(0.25rem * var(--fs-radius-scale, 1));
    background: var(--kd-surface);
    color: transparent;
    font-size: 0.6rem;
}

.kd-compare[aria-pressed="true"] {
    color: var(--kd-ink);
}

.kd-compare[aria-pressed="true"] .kd-compare-box {
    border-color: var(--kd-accent);
    background: var(--kd-accent);
    color: var(--fs-on-primary);
}

.kd-compare.is-busy {
    opacity: 0.5;
}

/* Cards in scrolling rows (5 / 4 / 3 / 2 whole cards) and in the grid (5 / 4 / 3 / 2 columns). */
.kd-products .fs-scroller-track {
    gap: 1rem;
}

.kd-products .fs-scroller-track > .kd-card {
    flex: 0 0 calc((100% - 4 * 1rem) / 5);
    height: auto;
}

.kd-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

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

    .kd-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

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

    .kd-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .kd-products .fs-scroller-track,
    .kd-grid {
        gap: 0.6rem;
    }

    .kd-products .fs-scroller-track > .kd-card {
        flex-basis: calc((100% - 0.6rem) / 2);
    }

    .kd-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kd-card {
        padding: 0.65rem;
    }

    .kd-card-price {
        font-size: 1.1rem;
    }

    .kd-card-specs li:nth-child(n + 4) {
        display: none;
    }
}

/* ---- Brands (native manufacturer list) --------------------------------------------------------- */
/* V512: the native markup is .manufacturers > .form > .row > .manufacturer (inline widths, rows of
   "per_row"): the rows dissolve into one grid of logo tiles, 6 / 4 / 3 per row. */
.kd-brands .manufacturers .form,
.kd-brands .manufacturers .row {
    display: contents;
}

.kd-brands .manufacturers {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

.kd-brands .row_separator,
.kd-brands .clr,
.kd-brands .manufacturer_data,
.kd-brands .headertext:empty {
    display: none;
}

.kd-brands .manufacturer {
    width: auto !important;
    max-width: none;
    margin: 0;
    padding: 0;
}

.kd-brands .manufacturer_image a {
    display: flex;
    aspect-ratio: 2 / 1;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.kd-brands .manufacturer_image a:hover {
    border-color: var(--kd-accent);
    box-shadow: var(--kd-shadow);
}

.kd-brands .manufacturer_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.2s, opacity 0.2s;
}

.kd-brands .manufacturer_image a:hover img {
    filter: none;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .kd-brands .manufacturers {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .kd-brands .manufacturers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .kd-brands .manufacturer_image a {
        padding: 0.4rem 0.5rem;
    }
}

/* ---- SEO text ------------------------------------------------------------------------------------ */
.kd-seo {
    margin-top: 2.75rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

/* ---- Advantages above the footer ---------------------------------------------------------------- */
.kd-prefooter {
    border-top: 1px solid var(--kd-line);
    background: var(--kd-surface);
}

.kd-features-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    margin: 0;
    padding: 1.75rem 0;
    list-style: none;
}

.kd-features-list li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.kd-features-list i {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
    font-size: 1.15rem;
}

.kd-features-list span {
    color: var(--kd-muted);
    font-size: 0.85rem;
    line-height: 1.35;
}

.kd-features-list strong {
    display: block;
    color: var(--kd-ink);
    font-size: 0.95rem;
}

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

@media (max-width: 575.98px) {
    .kd-features-list {
        gap: 1rem;
        padding: 1.25rem 0;
    }

    .kd-features-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .kd-features-list i {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
}

/* ---- Footer ------------------------------------------------------------------------------------ */
.kd-footer {
    background: var(--kd-footer-bg);
    color: var(--kd-footer-color);
    font-size: 0.9rem;
}

.kd-footer a {
    color: inherit;
    text-decoration: none;
}

.kd-footer a:hover {
    color: inherit;
    opacity: 0.75;
}

.kd-footer-newsletter {
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--kd-footer-line);
}

.kd-footer-newsletter .tp-newsletter-box {
    padding: 0;
    background: transparent;
}

.kd-footer-newsletter .tp-newsletter-box .h5 {
    font-size: 1.35rem;
    font-weight: 800;
}

.kd-footer-newsletter .tp-newsletter-form label {
    color: var(--kd-footer-muted);
}

.kd-footer-newsletter .tp-newsletter-form input[type="text"],
.kd-footer-newsletter .tp-newsletter-form input[type="email"] {
    border-color: var(--kd-footer-line);
    border-radius: var(--kd-radius);
}

.kd-footer-newsletter .tp-newsletter-form input[type="submit"],
.kd-footer-newsletter .tp-newsletter-form button {
    border-color: var(--kd-accent);
    border-radius: var(--kd-radius);
    background: var(--kd-accent);
    color: var(--fs-on-primary);
    font-weight: 700;
}

.kd-footer-columns {
    padding: 2.5rem 0 2rem;
}

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

.kd-footer h2,
.kd-footer .h5,
.kd-footer-heading {
    margin-bottom: 1rem;
    color: inherit;
    font-size: 0.95rem;
    font-weight: 700;
}

.kd-footer-text,
.kd-footer-contacts {
    color: var(--kd-footer-muted);
}

.kd-footer-text {
    max-width: 22rem;
    margin: 1rem 0 0;
}

.kd-footer .tp-menu a,
.kd-footer .tp-menu-column a {
    color: var(--kd-footer-muted);
}

.kd-footer .tp-menu a:hover {
    color: var(--kd-footer-color);
    opacity: 1;
}

.kd-footer .list-unstyled a,
.kd-footer .fs-native a,
.kd-links a {
    color: var(--kd-footer-muted);
}

.kd-links-list,
.kd-links ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kd-links-list li + li,
.kd-links ul.menu li + li {
    margin-top: 0.45rem;
}

.kd-links a:hover {
    color: var(--kd-footer-color);
    opacity: 1;
}

.kd-footer-contacts li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.kd-footer-contacts i {
    width: 1rem;
    color: var(--kd-accent);
}

[data-fs-footer="dark"] .kd-footer-contacts i {
    color: color-mix(in srgb, var(--fs-primary), #fff 45%);
}

.kd-social {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

.kd-social a {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--kd-footer-line);
    border-radius: 50%;
}

.kd-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--kd-footer-line);
    color: var(--kd-footer-muted);
    font-size: 0.8125rem;
}

.kd-payments {
    display: flex;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    list-style: none;
}

/* ---- Category page (V512) ----------------------------------------------------------------------- */
.kd-site .breadcrumb {
    --bs-breadcrumb-divider-color: var(--kd-muted);
    --bs-breadcrumb-item-active-color: var(--kd-muted);
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
}

.kd-site .breadcrumb a {
    color: var(--kd-muted);
    text-decoration: none;
}

.kd-site .breadcrumb a:hover {
    color: var(--fs-primary-ink);
}

.kd-browse-head {
    margin-bottom: 1.5rem;
}

.kd-browse-title {
    margin: 0;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.kd-browse-desc {
    max-width: 48rem;
    margin-top: 0.5rem;
    color: var(--kd-muted);
    font-size: 0.9375rem;
}

.kd-browse-desc > :last-child {
    margin-bottom: 0;
}

/* Subcategories: small tiles in a row (the override gives one .col per category). */
.kd-subcats-wrap {
    margin-bottom: 1.75rem;
}

.kd-subcats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: 0.75rem;
}

.kd-subcats > .col {
    width: auto;
    max-width: none;
    padding: 0;
}

.kd-subcat {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem 0.6rem 0.6rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    color: var(--kd-ink);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.kd-subcat:hover {
    border-color: var(--kd-accent);
    color: var(--fs-primary-ink);
    box-shadow: var(--kd-shadow);
}

.kd-subcat-picture {
    display: flex;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--kd-radius);
    background: var(--kd-soft);
    color: var(--kd-muted);
}

.kd-subcat-picture img {
    width: 88%;
    height: 88%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.kd-subcat-name {
    flex: 1 1 auto;
    min-width: 0;
}

.kd-subcat-arrow {
    color: var(--kd-muted);
    font-size: 0.7rem;
}

/* A category without products of its own: large tiles, the picture on top. */
.kd-subcats-only .kd-subcats {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
}

.kd-subcats-only .kd-subcat {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 1rem;
    font-size: 1rem;
    text-align: center;
}

.kd-subcats-only .kd-subcat-picture {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
}

.kd-subcats-only .kd-subcat-picture img {
    width: 80%;
    height: 80%;
}

.kd-subcats-only .kd-subcat-arrow {
    display: none;
}

@media (max-width: 991.98px) {
    .kd-subcats-wrap:not(.kd-subcats-only) .kd-subcats {
        grid-auto-columns: minmax(11.5rem, max-content);
        grid-auto-flow: column;
        grid-template-columns: none;
        margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .kd-subcats-wrap:not(.kd-subcats-only) .kd-subcats::-webkit-scrollbar {
        display: none;
    }

    .kd-subcats-wrap:not(.kd-subcats-only) .kd-subcats > * {
        scroll-snap-align: start;
    }
}

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

    .kd-subcats-only .kd-subcat {
        padding: 0.6rem;
        font-size: 0.875rem;
    }
}

/* Filters on the left from lg (a panel), an offcanvas below lg. */
.kd-browse-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .kd-browse-layout {
        grid-template-columns: 16.5rem minmax(0, 1fr);
    }

    .kd-browse-sidebar {
        align-self: start;
        border: 1px solid var(--kd-line);
        border-radius: var(--kd-radius-lg);
        background: var(--kd-surface);
    }

    .kd-browse-sidebar .offcanvas-header {
        display: none;
    }

    .kd-browse-sidebar .offcanvas-body {
        padding: 0;
    }
}

.kd-browse-sidebar .offcanvas-header {
    border-bottom: 1px solid var(--kd-line);
}

.kd-browse-sidebar-foot {
    padding: 0.9rem 1rem;
    border-top: 1px solid var(--kd-line);
    background: var(--kd-surface);
}

.kd-browse-sidebar-foot .btn i {
    margin-left: 0.35rem;
    font-size: 0.8rem;
}

/* The boxes (category tree, filters) as sections of one panel. */
.kd-browse-sidebar .tp-side-box {
    margin: 0 !important;
    padding: 1.1rem 1.25rem;
    border: 0;
    border-radius: 0;
    background: none;
}

.kd-browse-sidebar .fs-position > * + * {
    border-top: 1px solid var(--kd-line);
}

.kd-browse-sidebar .tp-side-box > h2,
.kd-browse-sidebar .tp-filters .parametertitle,
.kd-browse-sidebar .tp-filters .currently_shopping_by_title {
    display: block;
    margin-bottom: 0.6rem !important;
    color: var(--kd-ink) !important;
    font-family: inherit;
    font-size: 0.9rem !important;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none !important;
}

.kd-browse-sidebar .tp-tree summary,
.kd-browse-sidebar .tp-tree .tp-tree-row {
    padding: 0.3rem 0 !important;
}

.kd-browse-sidebar .tp-tree a {
    color: var(--kd-ink) !important;
    font-size: 0.9rem;
}

.kd-browse-sidebar .tp-tree ul a {
    color: var(--kd-muted) !important;
}

.kd-browse-sidebar .tp-tree a:hover {
    color: var(--fs-primary-ink) !important;
}

.kd-browse-sidebar .tp-tree ul {
    margin: 0.1rem 0 0.35rem 0.35rem !important;
    padding-left: 0.75rem;
    border-left: 2px solid var(--kd-line);
}

.kd-browse-sidebar .tp-tree .badge {
    border: 0 !important;
    background: var(--kd-soft) !important;
    color: var(--kd-muted) !important;
    font-size: 0.7rem;
    font-weight: 600;
}

.kd-browse-sidebar .tp-tree .is-current > a,
.kd-browse-sidebar .tp-tree .is-current > summary > a,
.kd-browse-sidebar .tp-tree .is-current > details > summary > a,
.kd-browse-sidebar .tp-tree .is-current > .tp-tree-row > a {
    color: var(--fs-primary-ink) !important;
    font-weight: 700;
}

/* Filters: groups between thin lines, checkboxes in the design colour, counts muted, one wide button. */
.kd-browse-sidebar .tp-filters .parameter + .parameter {
    margin-top: 1rem;
    padding-top: 1rem;
    border-color: var(--kd-line);
}

.kd-browse-sidebar .tp-filters .checkbox,
.kd-browse-sidebar .tp-filters .radio {
    padding: 0.2rem 0;
}

.kd-browse-sidebar .tp-filters .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    border-color: color-mix(in srgb, var(--kd-ink) 30%, var(--kd-surface));
    border-radius: calc(0.25rem * var(--fs-radius-scale, 1));
}

.kd-browse-sidebar .tp-filters .form-check-input[type="radio"] {
    border-radius: 50%;
}

.kd-browse-sidebar .tp-filters .form-check-input:checked {
    border-color: var(--kd-accent);
    background-color: var(--kd-accent);
}

.kd-browse-sidebar .tp-filters .checkbox label,
.kd-browse-sidebar .tp-filters .radio label {
    color: var(--kd-ink);
    font-size: 0.9rem;
}

.kd-browse-sidebar .tp-filters .fs-filter-count {
    color: var(--kd-muted);
    font-size: 0.75rem;
}

.kd-browse-sidebar .tp-filters .single_button {
    margin-top: 1.25rem;
}

.kd-browse-sidebar .tp-filters .btn,
.kd-browse-sidebar .tp-filters input[type="submit"],
.kd-browse-sidebar .tp-filters input[type="button"] {
    --bs-btn-bg: var(--kd-accent);
    --bs-btn-border-color: var(--kd-accent);
    --bs-btn-color: var(--fs-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--fs-primary), #000 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--fs-primary), #000 15%);
    --bs-btn-hover-color: var(--fs-on-primary);
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1px solid var(--kd-accent);
    border-radius: var(--kd-radius);
    background: var(--kd-accent);
    color: var(--fs-on-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.kd-browse-sidebar .tp-filters .btn:hover,
.kd-browse-sidebar .tp-filters input[type="submit"]:hover,
.kd-browse-sidebar .tp-filters input[type="button"]:hover {
    border-color: color-mix(in srgb, var(--fs-primary), #000 15%);
    background: color-mix(in srgb, var(--fs-primary), #000 15%);
}

/* The toolbar: a white bar with the count, sorting, page size and grid / list. */
.kd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    min-height: 3.25rem;
    margin-bottom: 1rem;
    padding: 0.45rem 0.6rem 0.45rem 1rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    font-size: 0.875rem;
}

.kd-toolbar-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
    background: var(--kd-surface);
    color: var(--kd-ink);
    font-weight: 700;
}

.kd-toolbar-count {
    margin-right: auto;
    color: var(--kd-muted);
}

.kd-toolbar form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0;
    color: var(--kd-muted);
}

.kd-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.kd-toolbar select {
    width: auto;
    padding: 0.35rem 1.9rem 0.35rem 0.65rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
    background-color: var(--kd-surface);
    color: var(--kd-ink);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
}

.kd-toolbar select:focus {
    border-color: var(--kd-accent);
}

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

.kd-view-switch {
    display: flex;
    gap: 0.2rem;
    padding: 0.2rem;
    border-radius: var(--kd-radius);
    background: var(--kd-soft);
}

.kd-view-btn {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--kd-radius) - 0.15rem);
    color: var(--kd-muted);
    text-decoration: none;
}

.kd-view-btn:hover {
    color: var(--fs-primary-ink);
}

.kd-view-btn.active {
    background: var(--kd-surface);
    color: var(--fs-primary-ink);
    box-shadow: 0 1px 3px rgba(15, 26, 46, 0.12);
}

@media (max-width: 991.98px) {
    .kd-toolbar {
        padding-left: 0.6rem;
    }

    .kd-view-switch {
        order: 1;
        margin-left: auto;
    }

    .kd-toolbar-count {
        order: 3;
        width: 100%;
        margin: 0;
        font-size: 0.8rem;
    }

    .kd-toolbar-sort {
        order: 2;
        width: 100%;
    }

    .kd-toolbar-sort form {
        flex-wrap: nowrap;
    }

    .kd-toolbar-sort select {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* Active filters: chips above the products. */
.kd-browse-main .tp-active-filters {
    margin-bottom: 1rem !important;
}

/* Grid: 4 / 3 / 2 cards. */
.kd-browse-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

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

@media (max-width: 767.98px) {
    .kd-browse-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }
}

/* List: a row per product — the picture, the name with all specifications in two columns, and the
   buying column (stock, price, cart, comparison) on the right. */
.kd-browse-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kd-card-row {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr) 14rem;
    align-items: start;
    gap: 1.5rem;
    height: auto;
    padding: 1.1rem;
}

.kd-card-row .kd-card-body {
    margin-top: 0;
}

.kd-card-row .kd-card-title {
    min-height: 0;
    font-size: 1.1rem;
    -webkit-line-clamp: 3;
}

.kd-card-row .kd-card-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem 1.5rem;
    font-size: 0.85rem;
}

.kd-card-row .kd-card-specs li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed var(--kd-line);
    white-space: normal;
}

.kd-card-row .kd-card-spec-label::after {
    content: none;
}

.kd-card-row .kd-card-spec-value {
    font-weight: 600;
    text-align: right;
}

.kd-card-row .kd-card-buy {
    margin: 0;
    padding: 0 0 0 1.5rem;
    border-left: 1px solid var(--kd-line);
    height: 100%;
}

.kd-card-row .kd-card-price {
    font-size: 1.5rem;
}

@media (max-width: 1199.98px) {
    .kd-card-row {
        grid-template-columns: 9rem minmax(0, 1fr) 12rem;
        gap: 1.1rem;
    }

    .kd-card-row .kd-card-specs {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .kd-card-row {
        grid-template-columns: 7rem minmax(0, 1fr);
        gap: 0.5rem 0.9rem;
        padding: 0.8rem;
    }

    .kd-card-row .kd-card-buy {
        grid-column: 1 / -1;
        padding: 0.6rem 0 0;
        border-top: 1px solid var(--kd-line);
        border-left: 0;
    }

    .kd-card-row .kd-card-title {
        font-size: 0.95rem;
    }

    .kd-card-row .kd-card-specs {
        font-size: 0.78rem;
    }

    .kd-card-row .kd-card-specs li:nth-child(n + 5) {
        display: none;
    }
}

.kd-browse-empty {
    grid-column: 1 / -1;
    padding: 2rem 0;
    color: var(--kd-muted);
    text-align: center;
}

/* Pagination: page numbers as rounded squares. */
.kd-pagination {
    margin-top: 2rem;
}

.kd-pagination li > a,
.kd-pagination li > span {
    min-width: 2.4rem;
    border-color: var(--kd-line);
    border-radius: var(--kd-radius) !important;
    background: var(--kd-surface);
    color: var(--kd-ink);
    font-weight: 600;
    text-align: center;
}

.kd-pagination li > a:hover {
    border-color: var(--kd-accent);
    color: var(--fs-primary-ink);
}

.kd-pagination li.active > span,
.kd-pagination li > span.pagenav:not(:empty) {
    border-color: var(--kd-accent);
    background: var(--kd-accent);
    color: var(--fs-on-primary);
}

/* The native form of a product with variants shows its own button (e.g. "Choose"): as wide as the cart's. */
.kd-card-cart a,
.kd-card-cart input[type="button"],
.kd-card-cart button:not([type="submit"]) {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--kd-accent);
    border-radius: var(--kd-radius);
    background: transparent;
    color: var(--fs-primary-ink);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.kd-card-cart a:hover,
.kd-card-cart input[type="button"]:hover,
.kd-card-cart button:not([type="submit"]):hover {
    background: var(--kd-accent);
    color: var(--fs-on-primary);
}

/* V513: the comparison count on its icon like the cart's. Bootstrap's ".btn .badge" (the header icons
   are buttons) put it back into the line under the icon. */
.kd-tool .kd-count {
    position: absolute;
    top: -0.35rem;
    right: -0.65rem;
}

/* ---- Product page (V513) ------------------------------------------------------------------------ */
/* Three columns from xl (gallery, product, buying card), two from lg (the gallery beside the product
   and the card), one below. */
.kd-product {
    padding-bottom: 1rem;
}

.kd-product-top {
    display: grid;
    grid-template-areas:
        "media"
        "main"
        "side";
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .kd-product-top {
        grid-template-areas:
            "media main"
            "media side";
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 1.5rem 2rem;
    }

    .kd-product-media {
        position: sticky;
        top: calc(var(--fs-header-height, 0px) + 1rem);
    }
}

@media (min-width: 1200px) {
    .kd-product-top {
        grid-template-areas: "media main side";
        grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3.4fr);
        gap: 2rem;
    }

    .kd-product-side {
        align-self: stretch;
    }

    .kd-buybox {
        position: sticky;
        top: calc(var(--fs-header-height, 0px) + 1rem);
    }
}

.kd-product-media {
    grid-area: media;
    min-width: 0;
}

.kd-product-main {
    display: flex;
    grid-area: main;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.kd-product-side {
    grid-area: side;
    min-width: 0;
}

/* Gallery: the picture in a white frame, thumbnails on its left from md (a row under it below). */
.kd-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.kd-gallery-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

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

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

.kd-gallery-slide {
    display: flex;
    flex: 0 0 100%;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 0.5rem + 2vw, 2.25rem);
    cursor: zoom-in;
    scroll-snap-align: start;
}

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

.kd-gallery-empty {
    color: var(--kd-line);
    cursor: default;
}

.kd-gallery-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.kd-badge-new {
    background: var(--kd-night);
}

.kd-product .kd-gallery-step {
    --bs-btn-bg: var(--kd-surface);
    --bs-btn-color: var(--kd-ink);
    --bs-btn-border-color: var(--kd-line);
    --bs-btn-hover-bg: var(--kd-surface);
    --bs-btn-hover-color: var(--fs-primary-ink);
    --bs-btn-hover-border-color: var(--kd-accent);
    --bs-btn-active-bg: var(--kd-surface);
    --bs-btn-active-color: var(--fs-primary-ink);
    --bs-btn-disabled-bg: var(--kd-surface);
    --bs-btn-disabled-border-color: var(--kd-line);
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--kd-shadow);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
}

.kd-gallery-stage:hover .kd-gallery-step,
.kd-product .kd-gallery-step:focus-visible {
    opacity: 1;
}

.kd-product .kd-gallery-step:disabled {
    visibility: hidden;
}

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

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

.kd-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.kd-product .kd-gallery-thumb {
    --bs-btn-bg: var(--kd-surface);
    --bs-btn-border-color: var(--kd-line);
    --bs-btn-hover-bg: var(--kd-surface);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--fs-primary) 45%, var(--kd-line));
    --bs-btn-active-bg: var(--kd-surface);
    --bs-btn-active-border-color: var(--kd-accent);
    flex: 0 0 4.5rem;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0.3rem;
    border-radius: var(--kd-radius);
}

.kd-product .kd-gallery-thumb.is-active {
    border-color: var(--kd-accent);
    box-shadow: 0 0 0 1px var(--kd-accent);
}

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

@media (min-width: 768px) {
    .kd-gallery.has-thumbs {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .kd-gallery.has-thumbs .kd-gallery-stage {
        grid-column: 2;
    }

    /* A column as high as the picture: more thumbnails scroll. */
    .kd-gallery.has-thumbs .kd-gallery-thumbs {
        grid-row: 1;
        grid-column: 1;
        flex-direction: column;
        height: 0;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
    }
}

@media (max-width: 767.98px) {
    .kd-product .kd-gallery-thumb {
        flex-basis: 3.5rem;
        width: 3.5rem;
        height: 3.5rem;
    }
}

/* The product: brand and code, name, rating, key specifications. */
.kd-product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    color: var(--kd-muted);
    font-size: 0.8125rem;
}

.kd-product-brand a {
    display: inline-flex;
    padding: 0.25rem 0.65rem;
    border-radius: 2rem;
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
    font-weight: 700;
    text-decoration: none;
}

.kd-product-brand a:hover {
    background: var(--kd-accent);
    color: var(--fs-on-primary);
}

.kd-product-title {
    margin: 0;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.kd-product-rating {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.4rem;
    color: var(--kd-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.kd-product-rating-count {
    color: var(--kd-muted);
    font-weight: 400;
}

.kd-product-rating:hover .kd-product-rating-count {
    color: var(--fs-primary-ink);
    text-decoration: underline;
}

.kd-stars {
    display: inline-flex;
    gap: 0.1rem;
    color: #f5a524;
    font-size: 0.8rem;
}

.kd-keyspecs {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

.kd-keyspecs-title {
    margin: 0 0 0.9rem;
    color: var(--kd-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kd-keyspecs-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.25rem;
    margin: 0;
}

.kd-keyspec dt {
    color: var(--kd-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.kd-keyspec dd {
    margin: 0.1rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.kd-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    color: var(--fs-primary-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.kd-more-link i {
    font-size: 0.75rem;
}

.kd-more-link:hover {
    text-decoration: underline;
}

.kd-product-short {
    color: var(--kd-muted);
    font-size: 0.9375rem;
}

.kd-product-short > :last-child {
    margin-bottom: 0;
}

/* The buying card: price, availability, the native form (variants, quantity, button), comparison and
   wishlist, delivery and warranty. */
.kd-buybox {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.35rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    box-shadow: var(--kd-shadow);
}

.kd-buybox-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6rem;
    color: var(--kd-ink);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.kd-buybox-price .old_price,
.kd-buybox-price .product-Old-Price,
.kd-buybox-price .productOldPrice {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
}

/* Availability: VirtueMart's text after a dot, green; red text (not available) in the waiting colour. */
.kd-buybox-stock {
    color: var(--kd-ok);
    font-size: 0.875rem;
    font-weight: 600;
}

.kd-buybox-stock:has(.redtext) {
    color: var(--kd-wait);
}

.kd-buybox-stock .stock_status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.45rem;
}

.kd-buybox-stock .stock_status::before {
    width: 0.55rem;
    height: 0.55rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.kd-buybox-stock .redtext,
.kd-buybox-stock span {
    color: inherit !important;
}

.kd-buybox-stock br,
.kd-buybox-stock .clr {
    display: none;
}

.kd-buybox-stock > :last-child {
    margin-bottom: 0;
}

.kd-buybox-form .product_addtocart_details,
.kd-buybox-form form {
    min-width: 0;
    margin: 0;
}

.kd-buybox-form form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
}

.kd-buybox-form .product_children,
.kd-buybox-form #product_final_price {
    width: 100%;
}

.kd-buybox-form #product_final_price:empty,
.kd-buybox-form #cartupdate_message:empty,
.kd-buybox-form form > br,
.kd-buybox-form .clr {
    display: none;
}

.kd-buybox-form .form_row + .form_row {
    margin-top: 1rem;
}

.kd-buybox-form .product_children label[for^="attr"] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.kd-buybox-form .fs-attr-chosen {
    color: var(--kd-muted);
    font-weight: 500;
}

.kd-buybox-form .vm_attr_choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.kd-buybox-form a[data-fs-attr-index] {
    display: inline-flex;
    min-width: 4.25rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 0.8rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
    background: var(--kd-surface);
    box-shadow: none;
    color: var(--kd-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.kd-buybox-form a[data-fs-attr-index]:hover {
    border-color: var(--kd-accent);
    color: var(--fs-primary-ink);
}

.kd-buybox-form a[data-fs-attr-index].selected {
    border-color: var(--kd-accent);
    background: var(--kd-accent-soft);
    box-shadow: 0 0 0 1px var(--kd-accent);
    color: var(--fs-primary-ink);
}

/* A value no variant has with the other chosen values (choosing it clears those, V505). */
.kd-buybox-form a[data-fs-attr-index].is-unavailable {
    background-image: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--kd-line) 50%, transparent calc(50% + 0.5px));
    color: var(--kd-muted);
}

.kd-buybox-form .fs-attr-swatch[data-fs-attr-index] {
    width: 2.25rem;
    min-width: 0;
    height: 2.25rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--kd-ink) 18%, transparent);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--kd-surface);
}

.kd-buybox-form .fs-attr-swatch[data-fs-attr-index]:hover {
    border-color: var(--kd-accent);
}

.kd-buybox-form .fs-attr-swatch[data-fs-attr-index].selected {
    border-color: var(--kd-accent);
    box-shadow: inset 0 0 0 3px var(--kd-surface);
    outline: 2px solid var(--kd-accent);
    outline-offset: 1px;
}

.kd-buybox-form .fs-attr-swatch[data-fs-attr-index].is-unavailable {
    background-image: none;
    opacity: 0.35;
}

.kd-buybox-form select {
    width: 100%;
    min-height: 2.75rem;
    border-color: var(--kd-line);
    border-radius: var(--kd-radius);
}

/* No variant chosen yet: VirtueMart's hint instead of the button. */
.kd-buybox-form form > strong {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--kd-radius);
    background: var(--kd-soft);
    color: var(--kd-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.kd-buybox-form .product_quantity {
    display: inline-flex;
    height: 3rem;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
    background: var(--kd-surface);
}

.kd-buybox-form .product_quantity .quantity_box {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.kd-buybox-form .product_quantity .btn,
.kd-buybox-form .product_quantity input[type="button"] {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--kd-ink);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--kd-soft);
    --bs-btn-hover-color: var(--fs-primary-ink);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--kd-soft);
    --bs-btn-active-color: var(--fs-primary-ink);
    width: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--kd-ink);
    font-size: 1.1rem;
}

.kd-buybox-form .product_quantity .btn:hover,
.kd-buybox-form .product_quantity input[type="button"]:hover {
    background: var(--kd-soft);
    color: var(--fs-primary-ink);
}

.kd-buybox-form .product_quantity input[type="text"],
.kd-buybox-form .product_quantity input[type="number"] {
    width: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-weight: 600;
    text-align: center;
}

.kd-buybox-form input.addtocart,
.kd-buybox-form input.notify,
.kd-buybox-form button[type="submit"] {
    --bs-btn-bg: var(--kd-accent);
    --bs-btn-border-color: var(--kd-accent);
    --bs-btn-color: var(--fs-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--fs-primary), #000 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--fs-primary), #000 15%);
    --bs-btn-hover-color: var(--fs-on-primary);
    flex: 1 1 9rem;
    height: 3rem;
    padding: 0 1rem;
    border: 1px solid var(--kd-accent);
    border-radius: var(--kd-radius);
    background: var(--kd-accent);
    color: var(--fs-on-primary);
    font-size: 1rem;
    font-weight: 700;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.kd-buybox-form input.addtocart:hover,
.kd-buybox-form button[type="submit"]:hover {
    border-color: color-mix(in srgb, var(--fs-primary), #000 15%);
    background: color-mix(in srgb, var(--fs-primary), #000 15%);
    color: var(--kd-light);
}

/* Not in stock: "Notify me" as an outlined button. */
.kd-buybox-form input.notify {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--fs-primary-ink);
    background: transparent;
    color: var(--fs-primary-ink);
}

.kd-buybox-form input.notify:hover {
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
}

/* Comparison and wishlist: two outlined buttons with their names (each shown when it is on). */
.kd-buybox-actions {
    display: flex;
    gap: 0.5rem;
}

html:not(.fs-compare-on):not(.fs-wishlist-on) .kd-buybox-actions {
    display: none;
}

.kd-product .kd-action {
    --bs-btn-bg: var(--kd-surface);
    --bs-btn-color: var(--kd-ink);
    --bs-btn-border-color: var(--kd-line);
    --bs-btn-hover-bg: var(--kd-surface);
    --bs-btn-hover-color: var(--fs-primary-ink);
    --bs-btn-hover-border-color: var(--kd-accent);
    --bs-btn-active-bg: var(--kd-accent-soft);
    --bs-btn-active-color: var(--fs-primary-ink);
    --bs-btn-active-border-color: var(--kd-accent);
    flex: 1 1 0;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
    background: var(--kd-surface);
    color: var(--kd-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.kd-product .kd-action:hover {
    border-color: var(--kd-accent);
    color: var(--fs-primary-ink);
}

.kd-product .kd-action[aria-pressed="true"] {
    border-color: var(--kd-accent);
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
}

.kd-product .tp-wish[aria-pressed="true"] i {
    color: var(--kd-sale);
}

.kd-buybox .fs-position:empty {
    display: none;
}

.kd-perks {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--kd-line);
    list-style: none;
}

.kd-perks li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--kd-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.kd-perks i {
    width: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--fs-primary-ink);
    font-size: 1rem;
    text-align: center;
}

.kd-perks strong {
    display: block;
    color: var(--kd-ink);
    font-weight: 600;
}

/* Sections: white panels, the text at a readable width. */
.kd-product-sections {
    display: grid;
    gap: 1.25rem;
}

.kd-product-section {
    padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    scroll-margin-top: calc(var(--fs-header-height, 0px) + 1rem);
}

.kd-product-section-title {
    margin: 0 0 1.1rem;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.kd-product-description {
    max-width: 52rem;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.kd-product-description > :last-child {
    margin-bottom: 0;
}

/* The native parameter table (ps_product_type): its name as a heading row, lines between the rows. */
.kd-spec-table {
    max-width: 52rem;
}

.kd-spec-table > br:first-child,
.kd-spec-table > br {
    display: none;
}

.kd-spec-table table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.kd-spec-table table + table {
    margin-top: 1.5rem;
}

.kd-spec-table td,
.kd-spec-table th {
    padding: 0.7rem 0.9rem;
    border: 0;
    border-bottom: 1px solid var(--kd-line);
    background: transparent;
    text-align: left;
    vertical-align: top;
}

.kd-spec-table tr:nth-child(odd) td {
    background: color-mix(in srgb, var(--kd-soft) 55%, transparent);
}

.kd-spec-table td:first-child {
    width: 40%;
    color: var(--kd-muted);
}

.kd-spec-table td:not(:first-child) {
    font-weight: 600;
}

.kd-spec-table td[colspan] {
    padding: 0 0 0.6rem;
    background: transparent !important;
    color: var(--kd-ink);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kd-spec-table tr:last-child td {
    border-bottom: 0;
}

/* Reviews: the score, the native list and form side by side from md. */
.kd-reviews-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1.1rem;
}

.kd-reviews-head .kd-product-section-title {
    margin: 0;
}

.kd-reviews-score {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    color: var(--kd-muted);
}

.kd-reviews-score strong {
    color: var(--kd-ink);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.kd-reviews-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .kd-reviews-body:has(.kd-reviews-form) {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 2.5rem;
    }
}

.kd-reviews-list > h5:first-child,
.kd-reviews-list > br,
.kd-reviews-form > br,
.kd-reviews .clr {
    display: none;
}

.kd-reviews-list > strong {
    display: block;
    padding-top: 1rem;
    font-weight: 700;
}

.kd-reviews-list > strong:first-of-type {
    padding-top: 0;
}

.kd-reviews-list .product_rating {
    display: flex;
    align-items: center;
    margin: 0.3rem 0;
}

.kd-reviews-list .rating_label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.kd-reviews-list blockquote {
    margin: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--kd-line);
    color: var(--kd-ink);
    font-size: 0.9375rem;
}

.kd-reviews-list blockquote:last-of-type {
    border-bottom: 0;
}

/* Native .rating.ratingN: five stars, N of them filled. */
.kd-reviews .rating {
    display: inline-block;
    font-size: 0;
    line-height: 1;
}

.kd-reviews .rating::before {
    background: linear-gradient(90deg, #f5a524 calc(var(--kd-rating, 0) * 20%), var(--kd-line) 0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    content: "\2605\2605\2605\2605\2605";
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.kd-reviews .rating1 { --kd-rating: 1; }
.kd-reviews .rating2 { --kd-rating: 2; }
.kd-reviews .rating3 { --kd-rating: 3; }
.kd-reviews .rating4 { --kd-rating: 4; }
.kd-reviews .rating5 { --kd-rating: 5; }

.kd-reviews-form {
    align-self: start;
    padding: 1.25rem;
    border-radius: var(--kd-radius-lg);
    background: var(--kd-soft);
}

.kd-reviews-form h5 {
    margin-bottom: 1rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
}

.kd-reviews-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.kd-reviews-form .form_label {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
}

.kd-reviews-form .form_field + .form_label {
    margin-top: 1rem;
}

.kd-reviews-form .review_rating_table th,
.kd-reviews-form .review_rating_table td {
    padding: 0 0.6rem 0.25rem 0;
    text-align: center;
}

.kd-reviews-form textarea {
    width: 100%;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
    background: var(--kd-surface);
}

.kd-reviews-form input[type="submit"] {
    margin-top: 1rem;
    padding: 0.65rem 1.5rem;
    border: 1px solid var(--kd-accent);
    border-radius: var(--kd-radius);
    background: var(--kd-accent);
    color: var(--fs-on-primary);
    font-weight: 700;
}

.kd-product > .fs-position:last-of-type .kd-section:first-child {
    margin-top: 2.5rem;
}

/* Narrow screens: a bar with the picture, price and the button once the form's button has scrolled
   away (site.js moves it into <body>). */
.kd-buybar {
    display: none;
}

@media (max-width: 991.98px) {
    .kd-buybar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--kd-line);
        background: var(--kd-surface);
        box-shadow: 0 -0.75rem 1.5rem -1.25rem rgba(15, 26, 46, 0.4);
        transform: translateY(110%);
        transition: transform 0.25s ease;
    }

    .kd-buybar.is-visible {
        transform: none;
    }

    .kd-buybar-img {
        width: 2.75rem;
        height: 2.75rem;
        flex-shrink: 0;
        border: 1px solid var(--kd-line);
        border-radius: var(--kd-radius);
        object-fit: contain;
    }

    .kd-buybar-info {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
    }

    .kd-buybar-name {
        overflow: hidden;
        font-size: 0.8125rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kd-buybar-price {
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .kd-buybar-price .old_price,
    .kd-buybar-price .product-Old-Price,
    .kd-buybar-price .productOldPrice,
    .kd-buybar-price br {
        display: none;
    }

    .kd-buybar .kd-buybar-btn {
        --bs-btn-bg: var(--kd-accent);
        --bs-btn-border-color: var(--kd-accent);
        --bs-btn-color: var(--fs-on-primary);
        --bs-btn-hover-bg: color-mix(in srgb, var(--fs-primary), #000 15%);
        --bs-btn-hover-color: var(--fs-on-primary);
        --bs-btn-active-bg: color-mix(in srgb, var(--fs-primary), #000 15%);
        --bs-btn-active-color: var(--fs-on-primary);
        flex: 0 0 auto;
        height: 2.9rem;
        padding: 0 1.25rem;
        border: 0;
        border-radius: var(--kd-radius);
        background: var(--kd-accent);
        color: var(--fs-on-primary);
        font-size: 0.9rem;
        font-weight: 700;
    }
}

@media (max-width: 575.98px) {
    .kd-keyspecs-list {
        gap: 0.75rem 1rem;
    }

    .kd-buybox {
        padding: 1.1rem;
    }

    .kd-buybox-price {
        font-size: 1.75rem;
    }

    .kd-spec-table td:first-child {
        width: 45%;
    }
}

/* ---- V514 --------------------------------------------------------------------------------------- */
/* Live search: the old price grey and struck (before the current one), the current price red when
   discounted (as the cards). */
.kd-search-panel .searchProductPrice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.4rem;
}

.kd-search-panel .searchProductPrice .old_price,
.kd-search-panel .searchProductPrice .product-Old-Price,
.kd-search-panel .searchProductPrice .productOldPrice {
    order: -1;
    color: var(--kd-muted);
    font-size: 0.8em;
    font-weight: 400;
    text-decoration: line-through;
}

.kd-search-panel .searchProductPrice:has(.old_price, .product-Old-Price, .productOldPrice) .price {
    color: var(--kd-sale);
}

.kd-search-panel .searchProductPrice .taxtext {
    display: none;
}

/* The signed-in dot on the account icon: the design colour (white on a coloured header). */
.kd-account-dot {
    background: var(--kd-accent);
}

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

/* ==========================================================================================
   V514: Tech's own account, sign-in, article, checkout and comparison pages (were Modern System
   copies; structure as Fashion V510). White panels on the grey page, the design colour for the open
   and chosen things.
   ========================================================================================== */
.kd-panel {
    padding: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

.kd-empty {
    border: 1px dashed var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

/* ---- Account: menu and page ---------------------------------------------------------------- */
.kd-account-page {
    display: grid;
    grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
    padding-block: 0.5rem 2.5rem;
}

.kd-account-page > .kd-account-aside {
    position: sticky;
    top: calc(var(--fs-header-height, 0px) + 1rem);
}

/* Without the menu (tmpl=component pages such as the wishlist drawer, guests) the page is one column. */
.fs-component .kd-account-page,
.kd-account-page:not(:has(.kd-account-nav)) {
    grid-template-columns: minmax(0, 1fr);
}

.fs-component .kd-account-aside,
.kd-account-page:not(:has(.kd-account-nav)) > .kd-account-aside {
    display: none;
}

@media print {
    .kd-account-aside {
        display: none !important;
    }

    .kd-account-page {
        display: block;
    }
}

.kd-account-nav {
    overflow: hidden;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

.kd-account-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--kd-line);
}

.kd-account-avatar {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
    font-size: 1.1rem;
}

.kd-account-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kd-account-name,
.kd-account-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kd-account-name {
    font-weight: 700;
}

.kd-account-email {
    color: var(--kd-muted);
    font-size: 0.8125rem;
}

.kd-account-links {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
}

.kd-account-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--kd-radius);
    color: var(--kd-ink);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.kd-account-link i {
    color: var(--kd-muted);
}

.kd-account-link:hover {
    background: var(--kd-soft);
    color: var(--kd-ink);
}

.kd-account-link.is-active {
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
    font-weight: 600;
}

.kd-account-link.is-active i {
    color: var(--fs-primary-ink);
}

/* The native account pages beside the menu: a white panel (the overview has its own cards). */
.kd-account-content {
    min-width: 0;
    padding: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

.kd-account-content:has(> .kd-dashboard),
.fs-component .kd-account-content {
    padding: 0;
    border: 0;
    background: none;
}

.kd-account-title,
.kd-site .kd-account-content h1.componentheading,
.kd-site .kd-account-content .componentheading {
    margin: 0 0 1.25rem;
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.kd-account-content .componentheading small {
    display: block;
    margin-top: 0.35rem;
    color: var(--kd-muted);
    font-family: var(--bs-body-font-family, inherit);
    font-size: 0.9375rem;
    font-weight: 400;
}

/* Address and profile forms: groups with a title line inside the panel (not boxes in the box). */
.kd-account-page .kd-account-content fieldset {
    gap: 1rem 1.25rem;
    margin: 0 0 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.kd-account-page .kd-account-content fieldset > legend {
    width: 100%;
    margin: 0 0 0.25rem;
    padding: 0 0 0.65rem;
    border-bottom: 1px solid var(--kd-line);
    color: var(--kd-ink);
    font-size: 1rem;
    font-weight: 700;
}

.kd-account-content fieldset fieldset {
    margin-bottom: 0;
}

.kd-account-content .formLabel,
.kd-account-content .formLabel label {
    color: var(--kd-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.kd-account-content .formField input[type="text"],
.kd-account-content .formField input[type="password"],
.kd-account-content .formField input[type="email"],
.kd-account-content .formField select,
.kd-account-content .formField textarea {
    min-height: 2.75rem;
    border-color: var(--kd-line);
    border-radius: var(--kd-radius);
}

.kd-account-content .formField input:focus,
.kd-account-content .formField select:focus,
.kd-account-content .formField textarea:focus {
    border-color: var(--kd-accent);
    box-shadow: 0 0 0 3px var(--kd-accent-soft);
}

.kd-account-content .buttons {
    gap: 0.75rem;
    margin-top: 0;
}

.kd-account-content .buttons .button,
.kd-account-content .buttons input[type="submit"],
.kd-account-content .buttons a.button,
.kd-account-content form > .button,
.kd-account-content form input[type="submit"].button {
    --bs-btn-bg: var(--kd-accent);
    --bs-btn-border-color: var(--kd-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--fs-primary), #000 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--fs-primary), #000 15%);
    min-height: 2.9rem;
    padding: 0 1.5rem;
    border: 1px solid var(--kd-accent);
    border-radius: var(--kd-radius);
    background: var(--kd-accent);
    color: var(--fs-on-primary);
    font-size: 0.9375rem;
    font-weight: 700;
}

.kd-account-content .buttons .button:hover,
.kd-account-content .buttons input[type="submit"]:hover,
.kd-account-content form input[type="submit"].button:hover {
    border-color: color-mix(in srgb, var(--fs-primary), #000 15%);
    background: color-mix(in srgb, var(--fs-primary), #000 15%);
    color: var(--kd-light);
}

/* ---- Account overview ------------------------------------------------------------------------ */
.kd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.kd-stat {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    color: var(--kd-ink);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

a.kd-stat:hover {
    border-color: color-mix(in srgb, var(--fs-primary) 35%, var(--kd-line));
    box-shadow: var(--kd-shadow);
    color: var(--kd-ink);
}

.kd-stat-icon {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
    font-size: 1.15rem;
}

.kd-stat-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kd-stat-value {
    color: var(--kd-ink);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}

.kd-stat-label {
    color: var(--kd-muted);
    font-size: 0.8125rem;
}

.kd-dashboard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.kd-dashboard-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.kd-dashboard-all {
    color: var(--fs-primary-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.kd-dashboard-all i {
    font-size: 0.7rem;
}

.kd-dashboard-orders .kd-empty {
    border: 0;
}

/* Orders: a plain table, the status as a coloured label. */
.kd-orders .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: transparent;
    margin: 0;
}

.kd-orders th {
    padding: 0.75rem;
    border-bottom-color: var(--kd-line);
    color: var(--kd-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kd-orders td {
    padding: 0.9rem 0.75rem;
    border-bottom-color: var(--kd-line);
    font-size: 0.9375rem;
}

.kd-orders tr:last-child td {
    border-bottom: 0;
}

.kd-orders th:first-child,
.kd-orders td:first-child {
    padding-left: 0;
}

.kd-orders th:last-child,
.kd-orders td:last-child {
    padding-right: 0;
}

.kd-order-number {
    color: var(--fs-primary-ink);
    font-weight: 700;
    text-decoration: none;
}

.kd-order-number:hover {
    text-decoration: underline;
}

.kd-order-date {
    color: var(--kd-muted);
}

.kd-order-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border-radius: 2rem;
    background: color-mix(in srgb, var(--kd-muted) 14%, transparent);
    color: var(--kd-ink);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.kd-order-status::before {
    width: 0.45rem;
    height: 0.45rem;
    flex: none;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.kd-order-status-wait {
    background: color-mix(in srgb, var(--kd-wait) 14%, transparent);
    color: color-mix(in srgb, var(--kd-wait), #000 20%);
}

.kd-order-status-sent {
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
}

.kd-order-status-done {
    background: color-mix(in srgb, var(--kd-ok) 13%, transparent);
    color: color-mix(in srgb, var(--kd-ok), #000 15%);
}

.kd-order-status-off {
    background: color-mix(in srgb, var(--kd-sale) 12%, transparent);
    color: var(--kd-sale);
}

.kd-order-total {
    font-weight: 700;
}

.kd-order-actions a {
    display: inline-flex;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
    color: var(--kd-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.kd-order-actions a:hover {
    border-color: var(--kd-accent);
    color: var(--fs-primary-ink);
}

.kd-order-actions a + a {
    margin-left: 0.4rem;
}

@media (max-width: 991.98px) {
    .kd-account-page {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .kd-account-page > .kd-account-aside {
        position: static;
    }

    /* The pages as a scrolling row of chips. */
    .kd-account-links {
        flex-direction: row;
        gap: 0.4rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .kd-account-links::-webkit-scrollbar {
        display: none;
    }

    .kd-account-link {
        border: 1px solid var(--kd-line);
        white-space: nowrap;
    }

    .kd-account-link.is-active {
        border-color: var(--kd-accent);
    }
}

@media (max-width: 575.98px) {
    .kd-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .kd-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        padding: 0.9rem;
    }

    .kd-stat-icon {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 0.95rem;
    }

    .kd-orders thead {
        display: none;
    }

    /* Phones: each order as a small block (number and total, then date and status). */
    .kd-orders table,
    .kd-orders tbody,
    .kd-orders tr,
    .kd-orders td {
        display: block;
    }

    .kd-orders tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.45rem 1rem;
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--kd-line);
    }

    .kd-orders tr:last-child {
        border-bottom: 0;
    }

    .kd-orders .table td,
    .kd-orders .table td:first-child,
    .kd-orders .table td:last-child {
        padding: 0;
        border: 0;
    }

    .kd-orders .kd-order-actions {
        grid-column: 1 / -1;
        text-align: left !important;
    }
}

/* ---- Sign-in pages ------------------------------------------------------------------------ */
.kd-auth {
    display: flex;
    justify-content: center;
    padding-block: clamp(1rem, 0.5rem + 2vw, 2.5rem) clamp(2.5rem, 2rem + 2vw, 4rem);
}

.kd-auth-inner {
    width: 100%;
    max-width: 27rem;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    box-shadow: var(--kd-shadow);
}

.kd-auth:has(#josForm, form[name="josForm"], .user_fields) .kd-auth-inner {
    max-width: 38rem;
}

.kd-auth .componentheading {
    margin: 0 0 1.5rem;
    color: var(--kd-ink);
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-align: center;
}

.kd-auth label {
    margin-bottom: 0.35rem;
    color: var(--kd-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.kd-auth input[type='text'],
.kd-auth input[type='email'],
.kd-auth input[type='password'],
.kd-auth input:not([type]),
.kd-auth select {
    min-height: 2.9rem;
    border-color: var(--kd-line);
    border-radius: var(--kd-radius);
}

.kd-auth input:focus,
.kd-auth select:focus {
    border-color: var(--kd-accent);
    box-shadow: 0 0 0 3px var(--kd-accent-soft);
}

.kd-auth tr + tr,
.kd-auth fieldset p {
    margin: 0 0 1rem;
}

.kd-auth #com-form-login-remember label {
    color: var(--kd-muted);
    font-size: 0.875rem;
    font-weight: 400;
}

.kd-auth input[type='submit'],
.kd-auth button[type='submit'],
.kd-auth .button {
    --bs-btn-bg: var(--kd-accent);
    --bs-btn-border-color: var(--kd-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--fs-primary), #000 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--fs-primary), #000 15%);
    width: 100%;
    min-height: 3rem;
    margin-top: 1rem;
    border-color: var(--kd-accent);
    border-radius: var(--kd-radius);
    background: var(--kd-accent);
    font-size: 1rem;
    font-weight: 700;
}

.kd-auth input[type='submit']:hover,
.kd-auth button[type='submit']:hover,
.kd-auth .button:hover {
    border-color: color-mix(in srgb, var(--fs-primary), #000 15%);
    background: color-mix(in srgb, var(--fs-primary), #000 15%);
    color: var(--kd-light);
}

/* The other links under a line; the registration link as an outlined button. */
.kd-site .kd-auth ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin: 1.75rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--kd-line);
    list-style: none;
}

.kd-site .kd-auth ul a {
    color: var(--kd-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.kd-site .kd-auth ul a:hover {
    color: var(--fs-primary-ink);
}

.kd-site .kd-auth ul li:has(a[href*="register"]) {
    order: 1;
    width: 100%;
    margin-top: 0.5rem;
}

.kd-site .kd-auth ul a[href*="register"] {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--kd-accent);
    border-radius: var(--kd-radius);
    color: var(--fs-primary-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    transition: background-color 0.2s ease;
}

.kd-site .kd-auth ul a[href*="register"]:hover {
    background: var(--kd-accent-soft);
}

/* Registration: two columns of fields on wider screens; the note under them. */
@media (min-width: 576px) {
    .kd-auth #josForm tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.25rem;
    }

    .kd-auth #josForm tr + tr {
        margin-top: 0;
    }

    .kd-auth #josForm tr:has(td[colspan]) {
        grid-column: 1 / -1;
    }
}

.kd-auth #josForm td[colspan] {
    color: var(--kd-muted);
    font-size: 0.8125rem;
}

/* ---- Side menu (articles, contact) ------------------------------------------------------ */
.kd-side-menu {
    padding: 0.6rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

.kd-side-menu-title {
    margin: 0;
    padding: 0.5rem 0.75rem 0.6rem;
    color: var(--kd-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kd-side-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kd-side-menu ul ul {
    padding-left: 0.85rem;
}

.kd-site .kd-side-menu a {
    display: block;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: var(--kd-radius);
    background: none;
    color: var(--kd-ink);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.kd-site .kd-side-menu a:hover {
    background: var(--kd-soft);
    color: var(--kd-ink);
}

.kd-site .kd-side-menu li.active > a,
.kd-site .kd-side-menu li#current > a {
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
    font-weight: 600;
}

/* ---- Articles ------------------------------------------------------------------------------ */
.kd-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1.5rem;
    padding-block: 0.5rem 3rem;
}

.kd-article-side:not(:has(*)) {
    display: none;
}

.kd-article {
    width: 100%;
    max-width: 54rem;
    min-width: 0;
    padding: clamp(1.35rem, 0.9rem + 2vw, 3rem);
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

@media (min-width: 992px) {
    .kd-article-layout:has(.kd-article-side *) {
        grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr);
        align-items: start;
    }

    .kd-article-layout:has(.kd-article-side *) > .kd-article-side {
        position: sticky;
        top: calc(var(--fs-header-height, 0px) + 1rem);
        justify-self: stretch;
    }

    .kd-article-layout:has(.kd-article-side *) > .kd-article {
        max-width: none;
    }
}

.kd-article-head {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--kd-line);
}

.kd-article-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0 0 0.9rem;
    color: var(--kd-muted);
    font-size: 0.8125rem;
}

.kd-article-cat {
    padding: 0.2rem 0.65rem;
    border-radius: 2rem;
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
    font-weight: 700;
    text-decoration: none;
}

a.kd-article-cat:hover {
    background: var(--kd-accent);
    color: var(--fs-on-primary);
}

.kd-article-date i,
.kd-article-author i {
    margin-right: 0.2rem;
    font-size: 0.8em;
}

.kd-article-title {
    max-width: 44rem;
    margin: 0;
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
}

.kd-article-author {
    margin: 0.9rem 0 0;
    color: var(--kd-muted);
    font-size: 0.875rem;
}

.kd-article-body {
    max-width: 44rem;
    color: var(--kd-ink);
    font-size: 1.0625rem;
    line-height: 1.75;
}

.kd-article-body > p:first-child {
    font-size: 1.15rem;
}

.kd-article-body h2,
.kd-article-body h3 {
    margin: 2.25rem 0 0.9rem;
    font-weight: 800;
    line-height: 1.25;
}

.kd-article-body img {
    height: auto;
    border-radius: var(--kd-radius-lg);
}

.kd-article-body blockquote,
.kd-article-body.tp-article-body blockquote {
    margin: 2rem 0;
    padding: 1.1rem 1.35rem;
    border: 0;
    border-left: 3px solid var(--kd-accent);
    border-radius: 0 var(--kd-radius) var(--kd-radius) 0;
    background: var(--kd-soft);
    font-size: 1.1rem;
    font-weight: 500;
}

.kd-article-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--kd-line);
}

.kd-article-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
    color: var(--kd-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.kd-article-nav a:hover {
    border-color: var(--kd-accent);
    color: var(--fs-primary-ink);
}

.kd-article-next {
    margin-left: auto;
}

/* ---- Article lists (blog, archive) ------------------------------------------------------ */
.kd-posts {
    padding-block: 0.5rem 3rem;
}

.kd-posts-head {
    margin-bottom: 1.75rem;
}

.kd-posts-title {
    margin: 0;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.kd-posts-intro {
    max-width: 48rem;
    margin-top: 0.6rem;
    color: var(--kd-muted);
    font-size: 1rem;
}

.kd-posts-intro > :last-child {
    margin-bottom: 0;
}

.kd-posts-image {
    width: 100%;
    max-height: 22rem;
    margin-top: 1.25rem;
    border-radius: var(--kd-radius-lg);
    object-fit: cover;
}

.kd-posts .row.g-2 {
    margin-bottom: 1.5rem !important;
    padding: 0.75rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

.kd-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.kd-posts-item {
    min-width: 0;
}

.kd-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kd-post:hover {
    border-color: color-mix(in srgb, var(--fs-primary) 35%, var(--kd-line));
    box-shadow: var(--kd-shadow);
}

.kd-post-image {
    display: block;
    overflow: hidden;
    background: var(--kd-soft);
    aspect-ratio: 16 / 9;
}

.kd-post-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.kd-post:hover .kd-post-image img {
    transform: scale(1.04);
}

.kd-post-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem 1.25rem;
}

.kd-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin: 0;
    color: var(--kd-muted);
    font-size: 0.8125rem;
}

.kd-post-cat {
    padding: 0.15rem 0.6rem;
    border-radius: 2rem;
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
    font-weight: 700;
}

.kd-post-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

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

.kd-post-title a:hover {
    color: var(--fs-primary-ink);
}

.kd-post-excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--kd-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.kd-post-more {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 0.25rem;
    color: var(--fs-primary-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.kd-post-more::after {
    margin-left: 0.35rem;
    content: "\2192";
}

.kd-post-more:hover {
    text-decoration: underline;
}

/* Lead articles across the grid: the picture beside the text. */
.kd-posts-item.is-lead {
    grid-column: 1 / -1;
}

.kd-posts-item.is-lead .kd-post {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.kd-posts-item.is-lead .kd-post-image {
    height: 100%;
    aspect-ratio: 16 / 10;
}

.kd-posts-item.is-lead .kd-post-body {
    justify-content: center;
    padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

.kd-posts-item.is-lead .kd-post-title {
    font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem);
    font-weight: 800;
}

.kd-posts-item.is-lead .kd-post-excerpt {
    font-size: 1rem;
    -webkit-line-clamp: 5;
}

.kd-posts-item.is-lead .kd-post-more {
    margin-top: 0.5rem;
}

.kd-posts-empty {
    color: var(--kd-muted);
    text-align: center;
}

/* "More articles" and the plain article list: rows in a white panel. */
.kd-posts-more {
    margin-top: 2rem;
}

.kd-posts-more-title {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.kd-posts-more ul,
.kd-posts-rows {
    margin: 0;
    padding: 0.35rem 1.25rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    list-style: none;
}

.kd-posts-more li,
.kd-posts-rows li {
    border-bottom: 1px solid var(--kd-line);
}

.kd-posts-more li:last-child,
.kd-posts-rows li:last-child {
    border-bottom: 0;
}

.kd-posts-more a,
.kd-posts-rows a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1.5rem;
    padding: 0.9rem 0;
    color: var(--kd-ink);
    font-weight: 600;
    text-decoration: none;
}

.kd-posts-more a:hover,
.kd-posts-rows a:hover .kd-posts-row-title {
    color: var(--fs-primary-ink);
}

.kd-posts-row-meta {
    display: flex;
    gap: 1rem;
    color: var(--kd-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

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

@media (max-width: 767.98px) {
    .kd-posts-item.is-lead .kd-post {
        display: flex;
    }

    .kd-posts-item.is-lead .kd-post-image {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 575.98px) {
    .kd-posts-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Checkout ------------------------------------------------------------------------------ */
/* The steps as a bar on top, the accordion's steps as white panels, the cart summary beside them
   (site.js initCheckout). The accordion's own markup and inline heights stay native. */
.kd-checkout {
    padding-block: 0.5rem 3rem;
}

.kd-checkout-progress {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.25rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    list-style: none;
}

.kd-checkout-progress:empty {
    display: none;
}

.kd-checkout-progress li {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.kd-checkout-progress li:first-child {
    flex: none;
}

/* The line leading to each step. */
.kd-checkout-progress li + li::before {
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    height: 2px;
    border-radius: 1px;
    background: var(--kd-line);
    content: "";
}

.kd-checkout-progress li.is-done + li::before,
.kd-checkout-progress li.is-active::before {
    background: var(--kd-accent);
}

.kd-checkout-progress button {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kd-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.kd-checkout-progress button:disabled {
    opacity: 1;
    cursor: default;
}

.kd-checkout-progress .fs-checkout-step-name {
    max-width: 16rem;
    line-height: 1.3;
    text-align: left;
}

.kd-checkout-progress .fs-checkout-step-number {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: none;
    place-items: center;
    border: 2px solid var(--kd-line);
    border-radius: 50%;
    background: var(--kd-surface);
    font-size: 0.875rem;
    font-weight: 700;
}

.kd-checkout-progress li.is-active button {
    color: var(--kd-ink);
}

.kd-checkout-progress li.is-active .fs-checkout-step-number {
    border-color: var(--kd-accent);
    background: var(--kd-accent);
    color: var(--fs-on-primary);
}

.kd-checkout-progress li.is-done button {
    color: var(--kd-ink);
    cursor: pointer;
}

.kd-checkout-progress li.is-done .fs-checkout-step-number {
    border-color: var(--kd-accent);
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
    font-size: 0;
}

.kd-checkout-progress li.is-done .fs-checkout-step-number::before {
    font-size: 0.875rem;
    content: "\2713";
}

.kd-checkout-progress li.is-done button:hover .fs-checkout-step-name {
    color: var(--fs-primary-ink);
}

/* Main column and the summary. */
.kd-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
}

.kd-checkout-side {
    display: none;
}

.kd-checkout.has-summary:not([data-fs-checkout-step="1"]):not([data-fs-checkout-step="0"]) .kd-checkout-side {
    display: block;
}

@media (min-width: 992px) {
    .kd-checkout.has-summary:not([data-fs-checkout-step="1"]):not([data-fs-checkout-step="0"]) .kd-checkout-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
        gap: 1.5rem;
    }

    .kd-checkout-side {
        position: sticky;
        top: calc(var(--fs-header-height, 0px) + 1rem);
    }
}

@media (max-width: 991.98px) {
    .kd-checkout-side {
        order: -1;
    }

    .kd-checkout-progress {
        padding: 0.75rem 1rem;
    }

    .kd-checkout-progress .fs-checkout-step-name {
        display: none;
    }

    .kd-checkout-progress li.is-active .fs-checkout-step-name {
        display: inline;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .kd-checkout-progress li.is-active,
    .kd-checkout-progress li.is-active button {
        flex: 0 1 auto;
        min-width: 0;
    }

    .kd-checkout-progress li:not(.is-active) {
        flex: 0 0 auto;
    }

    .kd-checkout-progress li + li::before {
        flex: 0 0 1.25rem;
        min-width: 1.25rem;
    }
}

/* The accordion: the design's corners and colour. */
.kd-checkout #checkout_accordiation {
    max-width: none;
    gap: 0.9rem;
    margin: 0;
}

.kd-checkout-grid:not(:has(.kd-checkout-side:not(:empty))) #checkout_accordiation,
.kd-checkout[data-fs-checkout-step="1"] #checkout_accordiation {
    max-width: 68rem;
    margin-inline: auto;
}

.kd-checkout #checkout_accordiation .checkout_step {
    border-color: var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

.kd-checkout #checkout_accordiation .checkout_step.active_checkout_step {
    border-color: color-mix(in srgb, var(--fs-primary) 45%, var(--kd-line));
    box-shadow: var(--kd-shadow);
}

.kd-checkout #checkout_accordiation .step_header .header::before {
    border-color: var(--kd-line);
    color: var(--kd-muted);
}

.kd-checkout #checkout_accordiation .checkout_step.active_checkout_step .header::before {
    border-color: var(--kd-accent);
    background: var(--kd-accent);
    color: var(--fs-on-primary);
}

.kd-checkout #checkout_accordiation .checkout_step.valid_checkout_step:not(.active_checkout_step) .header::before {
    border-color: var(--kd-accent);
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
}

.kd-checkout #checkout_accordiation .step_header h5 {
    color: var(--kd-muted);
    font-family: var(--bs-body-font-family, inherit);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.kd-checkout #checkout_accordiation .step_header h1 {
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
    font-weight: 800;
}

.kd-checkout #checkout_accordiation .step_header .header_swicher .edit {
    border-color: var(--kd-line);
    border-radius: var(--kd-radius);
    color: var(--fs-primary-ink);
    font-weight: 600;
}

.kd-checkout #checkout_accordiation .step_header .header_swicher:hover .edit {
    border-color: var(--kd-accent);
}

.kd-checkout #checkout_accordiation .loading_point {
    border-top-color: var(--kd-accent);
}

/* ---- Checkout summary (site.js) ------------------------------------------------------------ */
/* Step 3 shows the final sum (with delivery and discounts) itself: the summary keeps the products. */
.kd-checkout[data-fs-checkout-step="3"] .fs-checkout-summary-totals {
    display: none;
}

.kd-checkout .fs-checkout-summary {
    padding: 0 1.25rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

.kd-checkout .fs-checkout-summary > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    list-style: none;
    cursor: pointer;
}

.kd-checkout .fs-checkout-summary > summary::-webkit-details-marker {
    display: none;
}

.kd-checkout .fs-checkout-summary-title {
    min-width: 0;
    line-height: 1.25;
    font-size: 1.05rem;
    font-weight: 800;
}

/* V531: a clear round toggle at the right end instead of the small caret after the title. */
.kd-checkout .fs-checkout-summary > summary::after {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--kd-line);
    border-radius: calc(999px * var(--fs-radius-scale, 1));
    background: var(--kd-soft);
    color: var(--kd-ink);
    font-family: "Font Awesome 7 Free";
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    content: "\f078";
}

.kd-checkout .fs-checkout-summary > summary:hover::after,
.kd-checkout .fs-checkout-summary > summary:focus-visible::after {
    border-color: var(--kd-ink);
    background: var(--kd-ink);
    color: var(--kd-surface);
}

.kd-checkout .fs-checkout-summary[open] > summary::after {
    transform: rotate(180deg);
}

.kd-checkout .fs-checkout-summary > summary:focus-visible {
    outline: none;
}

.kd-checkout .fs-checkout-summary-sum {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 800;
}

.kd-checkout .fs-checkout-summary[open] .fs-checkout-summary-sum {
    visibility: hidden;
}

.kd-checkout .fs-checkout-summary-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0.25rem 0 1.25rem;
    list-style: none;
}

.kd-checkout .fs-checkout-summary-items li {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
}

.kd-checkout .fs-checkout-summary-media {
    position: relative;
    display: block;
    padding: 0.25rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
    background: var(--kd-surface);
    aspect-ratio: 1 / 1;
}

.kd-checkout .fs-checkout-summary-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kd-checkout .fs-checkout-summary-qty {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    display: grid;
    min-width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    padding: 0 0.3rem;
    border-radius: 1rem;
    background: var(--kd-accent);
    color: var(--fs-on-primary);
    font-size: 0.6875rem;
    font-weight: 700;
}

.kd-checkout .fs-checkout-summary-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.kd-checkout .fs-checkout-summary-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.kd-checkout .fs-checkout-summary-attr {
    color: var(--kd-muted);
    font-size: 0.8rem;
}

.kd-checkout .fs-checkout-summary-price {
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.kd-checkout .fs-checkout-summary-totals {
    margin: 0;
    padding: 0.85rem 0 1rem;
    border-top: 1px solid var(--kd-line);
}

.kd-checkout .fs-checkout-summary-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    color: var(--kd-muted);
    font-size: 0.875rem;
}

.kd-checkout .fs-checkout-summary-totals dt {
    font-weight: 400;
}

.kd-checkout .fs-checkout-summary-totals dd {
    margin: 0;
    white-space: nowrap;
}

.kd-checkout .fs-checkout-summary-totals > div:last-child {
    margin-top: 0.4rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--kd-line);
    color: var(--kd-ink);
    font-size: 1.125rem;
    font-weight: 800;
}

/* ---- Product comparison ------------------------------------------------------------------- */
.kd-compare-page {
    padding-block: 0.5rem 3rem;
}

.kd-compare-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.kd-compare-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.kd-compare-count {
    padding: 0.15rem 0.6rem;
    border-radius: 2rem;
    background: var(--kd-accent-soft);
    color: var(--fs-primary-ink);
    font-size: 0.9rem;
}

.kd-compare-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}

.kd-compare-switch {
    font-size: 0.9rem;
    font-weight: 500;
}

.kd-compare-switch .form-check-input:checked {
    border-color: var(--kd-accent);
    background-color: var(--kd-accent);
}

.kd-compare-page .kd-compare-tool {
    --bs-btn-bg: var(--kd-surface);
    --bs-btn-color: var(--kd-ink);
    --bs-btn-border-color: var(--kd-line);
    --bs-btn-hover-bg: var(--kd-surface);
    --bs-btn-hover-color: var(--fs-primary-ink);
    --bs-btn-hover-border-color: var(--kd-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--kd-radius);
    font-size: 0.875rem;
    font-weight: 600;
}

.kd-compare-scroll {
    overflow-x: auto;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
}

.kd-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

.kd-compare-table th,
.kd-compare-table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--kd-line);
    border-left: 1px solid var(--kd-line);
    text-align: left;
    vertical-align: top;
}

.kd-compare-table thead th {
    border-top: 0;
}

.kd-compare-table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 12rem;
    min-width: 9rem;
    border-left: 0;
    background: var(--kd-surface);
}

.kd-compare-table tbody th {
    background: color-mix(in srgb, var(--kd-soft) 60%, var(--kd-surface));
    color: var(--kd-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.kd-compare-table tbody td {
    font-weight: 600;
}

.kd-compare-table tbody tr.is-same td {
    color: var(--kd-muted);
    font-weight: 400;
}

.kd-compare-table tbody tr:hover td {
    background: color-mix(in srgb, var(--kd-soft) 45%, transparent);
}

.kd-compare-product {
    position: relative;
    min-width: 13rem;
    padding: 1.25rem 1rem !important;
    text-align: center !important;
}

.kd-compare-page .kd-compare-remove {
    --bs-btn-bg: var(--kd-surface);
    --bs-btn-color: var(--kd-muted);
    --bs-btn-border-color: var(--kd-line);
    --bs-btn-hover-bg: var(--kd-surface);
    --bs-btn-hover-color: var(--kd-sale);
    --bs-btn-hover-border-color: var(--kd-sale);
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    font-size: 0.85rem;
}

.kd-compare-picture {
    display: flex;
    width: 8.5rem;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    color: var(--kd-line);
    font-size: 2.5rem;
}

.kd-compare-picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kd-compare-name {
    display: -webkit-box;
    min-height: 2.6em;
    margin-bottom: 0.4rem;
    overflow: hidden;
    color: var(--kd-ink);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.kd-compare-name:hover {
    color: var(--fs-primary-ink);
}

.kd-compare-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 0.4rem;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.kd-compare-cart {
    margin: 0;
}

.kd-compare-page .kd-compare-add,
.kd-compare-page .kd-compare-more {
    --bs-btn-bg: var(--kd-accent);
    --bs-btn-color: var(--fs-on-primary);
    --bs-btn-border-color: var(--kd-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--fs-primary), #000 15%);
    --bs-btn-hover-color: var(--fs-on-primary);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--fs-primary), #000 15%);
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--kd-radius);
    font-size: 0.875rem;
    font-weight: 700;
}

.kd-compare-page .kd-compare-more {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--fs-primary-ink);
    --bs-btn-hover-bg: var(--kd-accent-soft);
    --bs-btn-hover-color: var(--fs-primary-ink);
    --bs-btn-hover-border-color: var(--kd-accent);
}

.kd-compare-none {
    color: var(--kd-muted);
    font-weight: 400;
}

@media (max-width: 575.98px) {
    .kd-compare-table tr > :first-child {
        width: 7.5rem;
        min-width: 7.5rem;
    }

    .kd-compare-product {
        min-width: 10.5rem;
    }

    .kd-compare-picture {
        width: 6rem;
    }
}

/* Native tables on white panels: Bootstrap's .table paints its cells with the (grey) page colour. */
.kd-panel .table,
.kd-account-content .table,
.kd-auth .table,
.kd-article .table,
.kd-checkout .table {
    --bs-table-bg: transparent;
}

.kd-auth .table > :not(caption) > * > * {
    border-bottom: 0;
}

.kd-checkout #checkout_accordiation .button.checkout,
.kd-checkout #checkout_accordiation input[type="submit"].button {
    border-radius: var(--kd-radius);
    font-weight: 700;
}

/* ---- V516 --------------------------------------------------------------------------------------- */
/* Filters panel (lg and wider): the white card of the product page's buying card. Bootstrap's
   .offcanvas-lg makes the aside and its body transparent there, and the System rule framed the body a
   second time, so the card is drawn on the body only. */
@media (min-width: 992px) {
    .kd-browse-sidebar {
        border: 0;
        border-radius: 0;
        background: none;
    }

    .kd-browse-sidebar .offcanvas-body {
        overflow: hidden;
        padding: 0;
        border: 1px solid var(--kd-line);
        border-radius: var(--kd-radius-lg);
        /* Bootstrap: .offcanvas-lg .offcanvas-body { background-color: transparent !important }. */
        background-color: var(--kd-surface) !important;
        box-shadow: var(--kd-shadow);
    }
}

/* Prices: the product page's price smaller; "You save" (VirtueMart's .you_save) on its own line, small
   and not bold (buying card, cards, comparison); the bar on phones leaves it out. */
.kd-buybox-price {
    font-size: 1.65rem;
}

.kd-buybox-price .old_price,
.kd-buybox-price .product-Old-Price,
.kd-buybox-price .productOldPrice {
    font-size: 0.95rem;
}

.fs-price .you_save {
    flex-basis: 100%;
    margin-top: 0.15rem;
    color: var(--kd-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3;
}

.kd-card-price .you_save {
    font-size: 0.75rem;
}

.kd-buybar-price .you_save {
    display: none;
}

/* ---- V517 --------------------------------------------------------------------------------------- */
/* Slider arrows: no background on hover (the site's buttons get Bootstrap's .btn classes), only the
   arrow turns the design colour. The arrow is drawn with a mask of Bootstrap's own icon. */
.kd-hero-main .carousel-control-prev,
.kd-hero-main .carousel-control-next {
    border: 0;
    background: none !important;
    box-shadow: none !important;
    color: var(--kd-light);
}

.kd-hero-main .carousel-control-prev:hover,
.kd-hero-main .carousel-control-next:hover,
.kd-hero-main .carousel-control-prev:focus-visible,
.kd-hero-main .carousel-control-next:focus-visible {
    color: var(--fs-primary-ink);
    opacity: 1;
}

.kd-hero-main .carousel-control-prev-icon,
.kd-hero-main .carousel-control-next-icon {
    background: currentColor;
    transition: background-color 0.15s ease;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e") center / 100% 100% no-repeat;
}

.kd-hero-main .carousel-control-next-icon {
    transform: scaleX(-1);
}

/* ---- V518 --------------------------------------------------------------------------------------- */
/* Review stars: Font Awesome icons (site.css, all designs) instead of the text stars above. */
.kd-reviews .rating::before {
    content: "\f005\f005\f005\f005\f005";
    font-family: "Font Awesome 7 Free";
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.15em;
}

/* The review form's rating (a grid of options, site.css): stars readable on the tinted panel, the chosen
   radio button in the accent colour. */
.kd-reviews-form .review_rating_table .rating::before {
    background-image: linear-gradient(90deg, #f5a524 calc(var(--kd-rating, 0) * 20%), rgba(15, 23, 42, 0.16) 0);
    font-size: 0.8rem;
}

.kd-reviews-form .review_rating_table .form-check-input:checked,
.kd-reviews-form .review_rating_table input[type="radio"]:checked {
    border-color: var(--kd-accent);
    background-color: var(--kd-accent);
}

/* ---- V519 --------------------------------------------------------------------------------------- */
/* Slider arrows: always visible (not only when the pointer is over the slider). */
.kd-hero-main .carousel-control-prev,
.kd-hero-main .carousel-control-next {
    opacity: 0.85;
}

/* ---- V520 --------------------------------------------------------------------------------------- */
/* No section links bar: the sections start after the top part of the page. */
.kd-product-sections {
    margin-top: 2.5rem;
}

/* ---- V523 --------------------------------------------------------------------------------------- */
/* Comparison: on the site the table passes through NativeHtml, which adds Bootstrap's .table. Its grey
   cell background and bottom borders are cancelled (together with the lines above they drew double
   lines); the table has only its own lines. The columns are equally wide (site.css). */
.kd-compare-table.table {
    --bs-table-bg: transparent;
    --bs-table-color: inherit;
    --bs-table-border-color: var(--kd-line);
    margin-bottom: 0;
    color: inherit;
}

.kd-compare-table.table > :not(caption) > * > * {
    border-bottom-width: 0;
    box-shadow: none;
}

.kd-compare-table.table > tbody > tr > td {
    background-color: var(--kd-surface);
}

.kd-compare-table.table > tbody > tr:hover > td {
    background-color: color-mix(in srgb, var(--kd-soft) 45%, var(--kd-surface));
}

.kd-compare-table.table > thead > tr > th {
    vertical-align: top;
}

/* ---- V528 --------------------------------------------------------------------------------------- */
/* Compact header (layout.kd_shell_compact, the example layout set "Compact header"): one row — the logo,
   "All categories", the search and the icons. The panel spans the header row (the bar is its box). */
.kd-header-compact .kd-header-bar {
    position: relative;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "brand cats search tools";
    gap: 1rem 1.5rem;
}

.kd-header-cats {
    grid-area: cats;
    align-self: stretch;
}

.kd-header-cats > .fs-position {
    display: flex;
    align-items: center;
}

.kd-header-compact .kd-mega {
    align-self: center;
}

.kd-header-compact .kd-mega-toggle {
    min-height: 2.75rem;
    margin: 0;
}

.kd-header-compact .kd-mega-panel {
    top: calc(100% - 0.4rem);
}

/* V747: the button sits in the middle of the row, the panel opens under the row — a bridge under the button while the
   menu is open, so the pointer going down to the panel does not leave the menu (it closed in the gap of a few pixels). */
.kd-header-compact .kd-mega-toggle {
    position: relative;
}

.kd-header-compact .kd-mega:hover .kd-mega-toggle::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 1.25rem;
}

@media (max-width: 991.98px) {
    .kd-header-compact .kd-header-bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "burger brand tools"
            "search search search";
        gap: 0.6rem 0.5rem;
    }
}

/* ---- V532: VirtueMart login / registration and the cart page ------------------------------ */
/* Tech: a bordered white panel, bold headings, square-ish controls. Both pages are native HTML without a design layout.
   Login / registration (shop.login_registration): the two radio headings choose which form shows;
   the registration fields go in two columns. */
.kd-main #vmMainPage:has(> .module > #login_register_cont) {
    max-width: 46rem;
    margin: 0 auto clamp(2rem, 1.5rem + 2vw, 4rem);
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    box-shadow: var(--kd-shadow);
}

#vmMainPage:has(> .module > #login_register_cont) > .componentheading {
    margin: 0 0 1.5rem;
    color: var(--kd-ink);
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: center;
}

#login_register_cont > h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 1.1rem 0;
    border-top: 1px solid var(--kd-line);
    color: var(--kd-ink);
    font-size: 1.05rem;
    font-weight: 800;
}

#login_register_cont > h3 .form-check-input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

#login_register_cont .form-check-input:not(:checked) {
    border-color: color-mix(in srgb, var(--kd-ink) 35%, transparent);
}

#login_register_cont > h3 .form-check-input:checked {
    border-color: var(--kd-accent);
    background-color: var(--kd-accent);
}

#login_register_cont > h3 label {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

#login_register_cont > h3:has(.toggler:not(:checked)) + .stretcher {
    display: none;
}

#login_register_cont .stretcher {
    padding: 0.25rem 0 1.75rem;
}

#login_register_cont .stretcher form > br {
    display: none;
}

#login_register_cont label {
    display: inline-block;
    margin: 0.75rem 0 0.35rem;
    color: var(--kd-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

#login_register_cont .form-control,
#login_register_cont .form-select {
    min-height: 2.9rem;
    border-color: var(--kd-line);
    border-radius: var(--kd-radius);
}

#login_register_cont .form-control:focus,
#login_register_cont .form-select:focus {
    border-color: var(--kd-accent);
}

#login_register_cont .stretcher form > a,
#login_register_cont .stretcher form > label + a {
    color: var(--kd-muted);
    font-size: 0.8125rem;
}

#login_register_cont input[type="submit"] {
    display: block;
    width: 100%;
    min-height: 3rem;
    margin: 1.25rem 0 0.75rem;
}

#login_register_cont input[type="checkbox"] + label {
    margin: 0 0 0 0.4rem;
    color: var(--kd-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

#login_register_cont fieldset {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

#login_register_cont legend {
    margin: 1rem 0 0.25rem;
    padding: 0 0 0.6rem;
    border-bottom: 1px solid var(--kd-line);
    color: var(--kd-ink);
    font-size: 1.05rem;
    font-weight: 800;
}

@media (min-width: 576px) {
    #login_register_cont .user_fields fieldset {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.25rem;
    }

    #login_register_cont .user_fields legend {
        grid-column: 1 / -1;
    }
}

/* The terms and newsletter rows: the checkbox before its text, over both columns. */
#login_register_cont #agreed_div,
#login_register_cont #vm_subscribe_div {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

#login_register_cont #agreed_div .form-check-input,
#login_register_cont #vm_subscribe_div .form-check-input {
    margin: 0.15rem 0 0;
}

#login_register_cont #agreed_div label,
#login_register_cont #vm_subscribe_div label {
    margin: 0;
    color: var(--kd-ink);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

#login_register_cont .captchalegend {
    color: var(--kd-muted);
    font-size: 0.8125rem;
}

#login_register_cont .warning label {
    color: var(--kd-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* The cart page (com_freeshop cart; also a saved cart): the checkout's first step on its own —
   product rows, the totals and the button on the right. */
.kd-main #cart {
    max-width: 60rem;
    margin: 0 auto clamp(2rem, 1.5rem + 2vw, 4rem);
    padding: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem);
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-lg);
    background: var(--kd-surface);
    box-shadow: var(--kd-shadow);
}

.kd-main #cart .step_header h1 {
    margin: 0 0 1.25rem;
    color: var(--kd-ink);
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.kd-main #cart .cart_white_line,
.kd-main #cart .loading_point:empty {
    display: none;
}

.kd-main #cart #mega_cart_list .product_row {
    padding: 1rem 0;
    border-top: 1px solid var(--kd-line);
}

.kd-main #cart .product_row_body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

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

.kd-main #cart #mega_cart_list .product_image img {
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
    background: #fff;
    object-fit: contain;
}

.kd-main #cart .product_data h4 {
    margin: 0 0 0.2rem;
    font-family: var(--bs-body-font-family, inherit);
    font-size: 0.975rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.kd-main #cart .product_data h4 a {
    color: var(--kd-ink);
    text-decoration: none;
}

.kd-main #cart .product_data h4 a:hover {
    color: var(--fs-primary-ink);
}

.kd-main #cart .product_data .small {
    color: var(--kd-muted);
}

.kd-main #cart #mega_cart_list .product_row_body > .data:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

.kd-main #cart .qty_body {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
}

.kd-main #cart .qty_body .form-control {
    width: 3rem;
    min-height: 2.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    box-shadow: none;
}

.kd-main #cart .qty_body a {
    display: inline-grid;
    width: 2.25rem;
    height: 2.5rem;
    place-items: center;
    color: var(--kd-ink);
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}

.kd-main #cart .qty_body a:hover {
    background: var(--kd-soft);
}

.kd-main #cart .qty_body .cart_button_minus::before {
    content: "\2212";
}

.kd-main #cart .qty_body .cart_button_plus::before {
    content: "+";
}

.kd-main #cart #mega_cart_list .price_body {
    min-width: 5.5rem;
    color: var(--kd-ink);
    font-weight: 800;
    text-align: right;
}

.kd-main #cart #mega_cart_totals {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--kd-line);
}

.kd-main #cart #mega_cart_totals .product_row_body > .data:first-child {
    display: none;
}

.kd-main #cart #mega_cart_totals .product_row_body > .data {
    display: flex;
    justify-content: space-between;
    width: min(100%, 20rem);
    margin-left: auto;
    padding: 0.2rem 0;
    color: var(--kd-muted);
    font-size: 0.9rem;
}

.kd-main #cart #mega_cart_totals .product_row:last-child .data {
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--kd-line);
    color: var(--kd-ink);
    font-size: 1.1rem;
    font-weight: 800;
}

.kd-main #cart .form_right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 1.25rem;
}

.kd-main #cart .next_button .btn {
    min-width: 14rem;
    min-height: 3.25rem;
}

/* ==========================================================================================
   Modern Kids (V561)
   ========================================================================================== */

/* ---- Tokens ------------------------------------------------------------------------------ */
:root {
    --kd-c1: #ff6b3d;
    --kd-c2: #ffbf1f;
    --kd-c3: #22b8a7;
    --kd-c4: #4a7dff;
    --kd-c5: #ff5d9e;
    --kd-c6: #8b62f2;
    --kd-night: #2a2346;
    --kd-soft: color-mix(in srgb, var(--fs-primary) 9%, var(--bs-body-bg, #fffaf3));
    --kd-accent-soft: color-mix(in srgb, var(--fs-primary) 14%, #ffffff);
    --kd-line: color-mix(in srgb, var(--bs-border-color) 70%, #ffffff);
    --kd-shadow: 0 2px 0 rgba(42, 35, 70, 0.04), 0 10px 26px rgba(42, 35, 70, 0.08);
    --kd-shadow-lg: 0 22px 46px rgba(42, 35, 70, 0.18);
    --kd-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
    --kd-topbar-bg: var(--fs-primary);
    --kd-topbar-color: #ffffff;
    --kd-search-bg: #ffffff;
    --kd-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V20C100 0 200 0 300 20S500 40 600 20 800 0 900 20 1100 40 1200 20V40Z' fill='%23000'/%3E%3C/svg%3E");
}

[data-fs-header="brand"] {
    --kd-topbar-bg: var(--kd-night);
}

[data-fs-header="dark"] {
    --kd-topbar-bg: var(--fs-primary);
}

[data-fs-footer="dark"] {
    --kd-footer-muted: color-mix(in srgb, var(--kd-light) 70%, var(--kd-night));
}

.kd-site {
    font-size: 1rem;
}

.kd-site :where(h1, h2, h3, .h1, .h2, .h3, .kd-section-title) {
    letter-spacing: 0;
}

/* ---- Info bar and header ------------------------------------------------------------------ */
.kd-topbar {
    font-weight: 600;
}

.kd-topbar-info i {
    color: inherit;
    opacity: 0.9;
}

.kd-topbar .tp-menu-inline a:hover {
    color: inherit;
    opacity: 0.8;
}

.kd-header {
    border-bottom: 0;
    box-shadow: 0 6px 20px rgba(42, 35, 70, 0.06);
}

.kd-wordmark {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: 0;
}

.kd-wordmark-mark {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    background: conic-gradient(from 45deg, var(--kd-c1), var(--kd-c2), var(--kd-c3), var(--kd-c4), var(--kd-c5), var(--kd-c1));
    color: #ffffff;
    font-size: 1.05rem;
    transform: rotate(-8deg);
    transition: transform 0.35s var(--kd-pop);
}

.kd-wordmark:hover .kd-wordmark-mark {
    transform: rotate(8deg) scale(1.08);
}

/* V562: a long shop name stays inside the header on phones (smaller, then cut with an ellipsis). */
.kd-wordmark {
    max-width: 100%;
}

.kd-wordmark-mark {
    flex-shrink: 0;
}

.kd-wordmark-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    /* V746: the cut box reaches above and below the letters (Ž, Š, g, ą) — without it overflow cut them off, the name's
       box being trimmed to its capital letters (text-box below); the negative margin keeps the logo's size. */
    padding-block: 0.35em;
    margin-block: -0.35em;
}

@media (max-width: 575.98px) {
    .kd-wordmark {
        gap: 0.45rem;
        font-size: 1.4rem;
    }

    .kd-wordmark-mark {
        width: 2rem;
        height: 2rem;
        font-size: 0.9rem;
    }
}

.kd-search-field .form-control {
    border: 2px solid var(--kd-line);
    border-radius: 999px;
    background: var(--kd-search-bg);
}

.kd-search-submit {
    border-radius: 999px;
    font-family: var(--bs-headings-font-family, inherit);
    font-weight: 700;
}

.kd-tool-label {
    font-weight: 600;
}

.kd-nav {
    border-top: 0;
}

.kd-mega-toggle {
    border-radius: 999px;
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1rem;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--fs-primary), #000 22%);
    transition: transform 0.2s var(--kd-pop), box-shadow 0.2s;
}

.kd-mega:hover .kd-mega-toggle,
.kd-mega-toggle:focus-visible {
    box-shadow: 0 2px 0 color-mix(in srgb, var(--fs-primary), #000 22%);
    transform: translateY(2px);
}

.kd-nav .tp-menu-inline a {
    font-weight: 700;
}

.kd-mega-panel {
    border-radius: 1.5rem;
}

/* ---- Buttons: round, with a playful "step" shadow ----------------------------------------- */
.kd-site :where(.btn-primary),
.offcanvas :where(.btn-primary) {
    border-radius: 999px;
    font-family: var(--bs-headings-font-family, inherit);
    font-weight: 700;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--fs-primary), #000 22%);
}

.kd-site :where(.btn-primary):active {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--fs-primary), #000 22%);
    transform: translateY(3px);
}

.kd-site :where(.btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-light) {
    border-width: 2px;
    border-radius: 999px;
    font-weight: 700;
}

/* ---- Sections: a title with a colourful squiggle under it --------------------------------- */
.kd-section-title {
    position: relative;
    padding-bottom: 0.55rem;
    font-size: clamp(1.45rem, 1.2rem + 0.8vw, 2rem);
    font-weight: 700;
}

.kd-section-title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 4.5rem;
    height: 0.45rem;
    background: linear-gradient(90deg, var(--kd-c1) 0 25%, var(--kd-c2) 25% 50%, var(--kd-c3) 50% 75%, var(--kd-c4) 75%);
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 8'%3E%3Cpath d='M2 5c5-4 9-4 14 0s9 4 14 0 9-4 14 0 9 4 14 0 9-4 12-1' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 8'%3E%3Cpath d='M2 5c5-4 9-4 14 0s9 4 14 0 9-4 14 0 9 4 14 0 9-4 12-1' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.kd-section-more {
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1rem;
    font-weight: 700;
}

.kd-badge {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
}

.kd-badge-new {
    background: var(--kd-c3);
}

/* ---- Offer slider and banners: bright pictures, dark text on their plain side ------------- */
.kd-hero-main,
.kd-banner {
    border-radius: 2rem;
    background: var(--kd-soft);
}

.kd-slide,
.kd-banner {
    color: var(--kd-night);
}

.kd-slide-content,
.kd-banner-content {
    background: none;
}

.kd-slide-content {
    max-width: 30rem;
}

.kd-slide-title {
    font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
}

.kd-slide-text {
    color: color-mix(in srgb, var(--kd-night) 78%, transparent);
    font-size: 1.1rem;
    font-weight: 600;
}

.kd-eyebrow {
    display: inline-block;
    align-self: flex-start;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--kd-night);
    letter-spacing: 0.04em;
}

.kd-slide-button {
    padding: 0.75rem 1.6rem;
    font-size: 1.05rem;
}

.kd-hero-main .carousel-indicators [data-bs-target] {
    background-color: var(--kd-night);
}

.kd-hero-main .carousel-control-prev-icon,
.kd-hero-main .carousel-control-next-icon {
    filter: invert(1) grayscale(1) brightness(0.25);
}

.kd-banner-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.05;
}

.kd-banner-link {
    color: var(--kd-night);
    font-weight: 700;
}

.kd-banner-content {
    justify-content: center;
    max-width: 62%;
}

.kd-banner-wide .kd-banner-content {
    max-width: 55%;
    background: none;
}

.kd-banner-wide .kd-banner-title {
    max-width: 18rem;
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
}

/* Phones and tablets: the slide's text above its picture (the toys are on the picture's right half), the side
   banners one under the other, no arrows. */
@media (max-width: 767.98px) {
    .kd-slide {
        display: flex;
        aspect-ratio: auto;
        flex-direction: column;
        background: linear-gradient(180deg, color-mix(in srgb, var(--kd-c2) 30%, #ffffff), color-mix(in srgb, var(--kd-c2) 55%, #ffffff));
    }

    .carousel-item:nth-child(3n + 2) .kd-slide {
        background: linear-gradient(180deg, color-mix(in srgb, var(--kd-c4) 30%, #ffffff), color-mix(in srgb, var(--kd-c4) 55%, #ffffff));
    }

    .carousel-item:nth-child(3n) .kd-slide {
        background: linear-gradient(180deg, color-mix(in srgb, var(--kd-c5) 25%, #ffffff), color-mix(in srgb, var(--kd-c5) 45%, #ffffff));
    }

    .kd-slide-content {
        position: relative;
        inset: auto;
        order: 1;
        justify-content: flex-start;
        padding: 1.4rem 1.4rem 0.5rem;
        background: none;
    }

    .kd-slide-text {
        display: block;
    }

    .kd-slide-picture {
        position: relative;
        order: 2;
        height: 11rem;
        object-position: 88% 60%;
    }

    .kd-slide:hover .kd-slide-picture {
        transform: none;
    }

    .kd-hero-main .carousel-control-prev,
    .kd-hero-main .carousel-control-next {
        display: none;
    }

    .kd-hero-main .carousel-indicators {
        display: flex;
        justify-content: center;
        margin: 0 0 0.75rem;
    }

    .kd-hero-side {
        grid-template-columns: minmax(0, 1fr);
    }

    .kd-hero-side .kd-banner {
        min-height: 0;
        aspect-ratio: 7 / 4;
    }

    .kd-banner-content {
        justify-content: center;
        padding: 1.1rem 1.25rem;
    }

    .kd-banner-title {
        font-size: 1.3rem;
    }
}

/* ---- Shop by age (layout.kd_age_band) ----------------------------------------------------- */
.kd-ages-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kd-ages-list > li {
    --kd-tile: var(--kd-c5);
}

.kd-ages-list > li:nth-child(6n + 2) {
    --kd-tile: var(--kd-c2);
}

.kd-ages-list > li:nth-child(6n + 3) {
    --kd-tile: var(--kd-c3);
}

.kd-ages-list > li:nth-child(6n + 4) {
    --kd-tile: var(--kd-c4);
}

.kd-ages-list > li:nth-child(6n + 5) {
    --kd-tile: var(--kd-c1);
}

.kd-ages-list > li:nth-child(6n) {
    --kd-tile: var(--kd-c6);
}

.kd-age {
    position: relative;
    display: flex;
    height: 100%;
    min-height: 9.5rem;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem 1.4rem;
    overflow: hidden;
    border-radius: 1.75rem;
    background: var(--kd-tile);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 6px 0 color-mix(in srgb, var(--kd-tile), #000 20%);
    transition: transform 0.25s var(--kd-pop), box-shadow 0.25s;
}

.kd-age::before {
    position: absolute;
    top: -2.5rem;
    right: -2rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    content: "";
}

.kd-age:hover {
    color: #ffffff;
    box-shadow: 0 10px 0 color-mix(in srgb, var(--kd-tile), #000 20%);
    transform: translateY(-4px) rotate(-1deg);
}

.kd-age-icon {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: var(--kd-tile);
    font-size: 1.2rem;
}

.kd-age-name {
    font-family: var(--bs-headings-font-family, inherit);
    font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
}

.kd-age-note,
.kd-age-note p {
    margin: 0.2rem 0 0;
    font-weight: 700;
    opacity: 0.95;
}

@media (max-width: 575.98px) {
    .kd-ages-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .kd-age {
        min-height: 7.5rem;
        padding: 1rem;
        border-radius: 1.4rem;
    }

    .kd-age-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }
}

/* ---- Category row: tiles in the palette's light tones ------------------------------------- */
.kd-cat-icons-list > li {
    --kd-tile: var(--kd-c1);
}

.kd-cat-icons-list > li:nth-child(6n + 2) {
    --kd-tile: var(--kd-c4);
}

.kd-cat-icons-list > li:nth-child(6n + 3) {
    --kd-tile: var(--kd-c2);
}

.kd-cat-icons-list > li:nth-child(6n + 4) {
    --kd-tile: var(--kd-c3);
}

.kd-cat-icons-list > li:nth-child(6n + 5) {
    --kd-tile: var(--kd-c5);
}

.kd-cat-icons-list > li:nth-child(6n) {
    --kd-tile: var(--kd-c6);
}

.kd-cat-icon {
    border: 0;
    border-radius: 1.75rem;
    background: color-mix(in srgb, var(--kd-tile) 14%, #ffffff);
    color: var(--kd-night);
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1rem;
    font-weight: 700;
    transition: transform 0.25s var(--kd-pop), box-shadow 0.25s, background-color 0.2s;
}

.kd-cat-icon:hover {
    background: color-mix(in srgb, var(--kd-tile) 24%, #ffffff);
    color: var(--kd-night);
    box-shadow: none;
    transform: translateY(-4px);
}

.kd-cat-icon-picture {
    width: 6rem;
    height: 6rem;
    background: #ffffff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kd-tile) 45%, #ffffff);
}

.kd-cat-icon-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
}

@media (max-width: 767.98px) {
    .kd-cat-icon {
        padding: 0.75rem 0.4rem;
        background: color-mix(in srgb, var(--kd-tile) 14%, #ffffff);
        font-size: 0.85rem;
    }

    .kd-cat-icon-picture {
        width: 4.75rem;
        height: 4.75rem;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--kd-tile) 45%, #ffffff);
    }
}

/* ---- Product card --------------------------------------------------------------------------- */
.kd-card {
    padding: 0.75rem;
    border: 2px solid var(--kd-line);
    border-radius: 1.75rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s var(--kd-pop);
}

.kd-card:hover {
    border-color: color-mix(in srgb, var(--fs-primary) 45%, var(--kd-line));
    box-shadow: var(--kd-shadow);
    transform: translateY(-3px);
}

.kd-card-picture {
    padding: 0;
    overflow: hidden;
    border-radius: 1.25rem;
    background: var(--kd-soft);
}

.kd-card-picture img {
    object-fit: cover;
}

.kd-card:hover .kd-card-picture img {
    transform: scale(1.05) rotate(-1deg);
}

.kd-card-media .kd-badge {
    top: 0.6rem;
    left: 0.6rem;
}

.kd-card-body {
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0 0.25rem;
}

.kd-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kd-chip {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kd-c3) 15%, #ffffff);
    color: color-mix(in srgb, var(--kd-c3), #000 38%);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
}

.kd-chip:first-child {
    background: color-mix(in srgb, var(--kd-c6) 14%, #ffffff);
    color: color-mix(in srgb, var(--kd-c6), #000 25%);
}

.kd-card-title {
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
}

.kd-card-rating {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--kd-muted);
    font-size: 0.78rem;
}

.kd-card-stars {
    display: inline-flex;
    gap: 0.1rem;
    color: var(--kd-c2);
    font-size: 0.8rem;
}

.kd-card-buy {
    padding: 0.6rem 0.25rem 0;
}

.kd-card-price {
    color: var(--kd-night);
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.45rem;
    font-weight: 800;
}

.kd-card-cart input[type="submit"],
.kd-card-cart button[type="submit"],
.kd-card-more {
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1rem;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--fs-primary), #000 22%);
}

.kd-card-more {
    border-width: 2px;
    box-shadow: none;
}

.kd-card-cart input[type="submit"]:active,
.kd-card-cart button[type="submit"]:active {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--fs-primary), #000 22%);
    transform: translateY(3px);
}

@media (max-width: 575.98px) {
    .kd-card {
        padding: 0.5rem;
        border-radius: 1.4rem;
    }

    .kd-card-title {
        font-size: 0.95rem;
    }

    .kd-card-price {
        font-size: 1.2rem;
    }
}

/* ---- Brands, advantages, footer --------------------------------------------------------------- */
.kd-brands .manufacturer a,
.kd-brands .manufacturer > div {
    border-radius: 1.5rem;
}

/* The toy brands are colourful: their logos keep their colours. */
.kd-brands .manufacturer_image img {
    filter: none;
    opacity: 1;
    transition: transform 0.25s var(--kd-pop);
}

.kd-brands .manufacturer_image a:hover img {
    transform: scale(1.06) rotate(-2deg);
}

.kd-prefooter {
    border-top: 0;
    background: transparent;
}

.kd-features-list li:nth-child(4n + 1) i {
    background: color-mix(in srgb, var(--kd-c1) 16%, #ffffff);
    color: var(--kd-c1);
}

.kd-features-list li:nth-child(4n + 2) i {
    background: color-mix(in srgb, var(--kd-c5) 16%, #ffffff);
    color: var(--kd-c5);
}

.kd-features-list li:nth-child(4n + 3) i {
    background: color-mix(in srgb, var(--kd-c3) 16%, #ffffff);
    color: var(--kd-c3);
}

.kd-features-list li:nth-child(4n) i {
    background: color-mix(in srgb, var(--kd-c4) 16%, #ffffff);
    color: var(--kd-c4);
}

.kd-features-list i {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1.1rem;
    font-size: 1.3rem;
    transform: rotate(-6deg);
}

.kd-features-list strong {
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.05rem;
}

/* The footer starts with a wave. */
.kd-footer {
    position: relative;
    margin-top: 2.5rem;
}

.kd-footer::before {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 2.25rem;
    background: var(--kd-footer-bg);
    content: "";
    -webkit-mask: var(--kd-wave) no-repeat center bottom / 100% 100%;
    mask: var(--kd-wave) no-repeat center bottom / 100% 100%;
}

.kd-footer-newsletter .tp-newsletter-box .h5,
.kd-footer h2,
.kd-footer .h5,
.kd-footer-heading {
    font-family: var(--bs-headings-font-family, inherit);
    font-size: 1.15rem;
}

.kd-footer-newsletter .tp-newsletter-box .h5 {
    font-size: 1.6rem;
}

.kd-footer-newsletter .tp-newsletter-form input[type="text"],
.kd-footer-newsletter .tp-newsletter-form input[type="email"],
.kd-footer-newsletter .tp-newsletter-form input[type="submit"],
.kd-footer-newsletter .tp-newsletter-form button {
    border-radius: 999px;
}

.kd-social a {
    border-radius: 50%;
}

/* ---- Product page ------------------------------------------------------------------------------ */
.kd-gallery-slide img,
.kd-gallery-stage img {
    border-radius: 1.5rem;
}

.kd-product-media,
.kd-buybox,
.kd-product-section,
.kd-keyspecs {
    border-radius: 2rem;
}

.kd-buybox-price {
    font-family: var(--bs-headings-font-family, inherit);
    font-weight: 800;
}

.kd-product-brand {
    border-radius: 999px;
    font-family: var(--bs-headings-font-family, inherit);
}

.kd-keyspec {
    font-weight: 600;
}

.kd-product-section-title {
    font-size: 1.5rem;
}

/* V566: the comparison tick in a card is a plain text button. The page cleaner gives every button in the shop's
   markup "btn btn-primary", and the round button with its "step" shadow must not apply to it. */
.kd-site .kd-compare,
.kd-site .kd-compare:hover,
.kd-site .kd-compare:focus,
.kd-site .kd-compare:active {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--kd-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: none;
    transform: none;
}

.kd-site .kd-compare {
    align-self: flex-start;
    justify-self: start;
}

.kd-site .kd-compare:hover {
    color: var(--fs-primary-ink);
}

.kd-site .kd-compare[aria-pressed="true"] {
    color: var(--kd-ink);
}

.kd-site .kd-compare:focus-visible {
    outline: 2px solid var(--kd-accent);
    outline-offset: 2px;
}

/* V566: the search button sits inside the field: a small step shadow, lifted so that it and its shadow stay
   inside the field's border. */
.kd-site .kd-search-submit {
    bottom: calc(0.3rem + 2px);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--fs-primary), #000 22%);
}

.kd-site .kd-search-submit:active {
    box-shadow: none;
    transform: translateY(2px);
}

/* V566: "Compare" and "Wishlist" on the product page are white buttons: a light step, not the primary colour one. */
.kd-site .kd-product .kd-action {
    box-shadow: 0 3px 0 var(--kd-line);
}

.kd-site .kd-product .kd-action:hover,
.kd-site .kd-product .kd-action[aria-pressed="true"] {
    box-shadow: 0 3px 0 color-mix(in srgb, var(--kd-accent) 45%, var(--kd-surface));
}

.kd-site .kd-product .kd-action:active {
    box-shadow: none;
    transform: translateY(3px);
}

/*
 * 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; the word mark's mark in that colour with
 * its sign cut out (the footer's background).
 */
.kd-footer {
    --fs-logo-tone: var(--kd-footer-color);
    --fs-logo-plate: #ffffff;
    --fs-logo-plate-padding: 0.4rem 0.65rem;
}

.kd-footer .kd-wordmark-mark {
    background: var(--fs-logo-tone, var(--kd-footer-color));
    color: var(--kd-footer-bg);
}

/* 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). */
.kd-logo img {
    max-height: 2.35rem;
}

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

.kd-footer .kd-wordmark {
    font-size: 1.5rem;
}

.kd-footer .kd-wordmark-mark {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
}

/* V680: the text logo lines up — the mark's icon centred as a glyph (not in 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 mark's middle. */
.kd-wordmark-mark i {
    --fa-width: auto;
    line-height: 1;
}

.kd-wordmark-text {
    text-box: trim-both cap alphabetic;
}

/* ---- V699: a slide or banner with an AI-placed photo that is not calm and light (data-fs-tone="dark") — light words on
   a shade over the picture (wide screens; phones show the slide's words above the picture). ----------------------- */
@media (min-width: 768px) {
    .kd-slide:has(> img[data-fs-tone="dark"]),
    .kd-banner:has(> img[data-fs-tone="dark"]) {
        color: #ffffff;
    }

    .kd-slide:has(> img[data-fs-tone="dark"]) .kd-slide-content,
    .kd-banner:has(> img[data-fs-tone="dark"]) .kd-banner-content {
        background: linear-gradient(90deg, rgba(10, 17, 32, 0.78) 0%, rgba(10, 17, 32, 0.4) 50%, rgba(10, 17, 32, 0) 80%);
    }

    .kd-slide:has(> img[data-fs-tone="dark"]) .kd-slide-text,
    .kd-banner:has(> img[data-fs-tone="dark"]) .kd-banner-link {
        color: rgba(255, 255, 255, 0.9);
    }

    .kd-hero-main:has(.carousel-item.active img[data-fs-tone="dark"]) .carousel-indicators [data-bs-target] {
        background-color: #ffffff;
    }

    .kd-hero-main:has(.carousel-item.active img[data-fs-tone="dark"]) .carousel-control-prev-icon,
    .kd-hero-main:has(.carousel-item.active img[data-fs-tone="dark"]) .carousel-control-next-icon {
        filter: none;
    }
}