:root {
    --fs-primary: #3b7ddd;
    --fs-primary-rgb: 59, 125, 221;
    /* V574: text on the primary colour and the primary colour as text; Design::css() sets them per design
       (dark text and a darker "ink" only for very light primaries such as yellow). */
    --fs-on-primary: #ffffff;
    --fs-primary-ink: var(--fs-primary);
    --fs-radius: 0.75rem;
    --fs-space: 1.5rem;
    --bs-primary: var(--fs-primary);
    --bs-primary-rgb: var(--fs-primary-rgb);
    --bs-link-color: var(--fs-primary-ink);
    --bs-link-color-rgb: var(--fs-primary-rgb);
    --bs-body-bg: #f5f7fb;
    --bs-body-color: #263445;
    --bs-border-color: #e5e9ef;
    --bs-border-radius: var(--fs-radius);
    --bs-font-sans-serif: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* V385: jumps and scrollIntoView() (e.g. the checkout's step messages) stop below a sticky site
   header; site.js sets --fs-header-height (0 without a sticky header). */
html {
    scroll-padding-top: calc(var(--fs-header-height, 0px) + 1rem);
}

/* V514: not while typing in the sticky header (its search): the browser keeps the caret in view below
   the padding, so every letter scrolled the page up a step. */
html:has(:not(html)[data-fs-header] :focus, .md-header :focus) {
    scroll-padding-top: 0;
}

body {
    min-width: 280px;
}

/* V497: the headings font and weight of the design theme (headings-font-family / -weight);
   Bootstrap has no variables for them. Without the theme values: the text font, weight 500. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--bs-headings-font-family, inherit);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: var(--bs-headings-font-weight, 500);
}
.fs-site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.fs-site > main {
    flex: 1;
}
.fs-section {
    padding-block: calc(var(--fs-space) * 1.5);
}
.card {
    --bs-card-border-radius: var(--fs-radius);
    --bs-card-spacer-x: var(--fs-space);
    --bs-card-spacer-y: var(--fs-space);
    --bs-card-bg: #fff;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 10px #22334404;
}
.btn {
    --bs-btn-border-radius: calc(var(--fs-radius) * 0.7);
    font-weight: 500;
}
.btn-primary {
    --bs-btn-color: var(--fs-on-primary);
    --bs-btn-hover-color: var(--fs-on-primary);
    --bs-btn-active-color: var(--fs-on-primary);
    --bs-btn-disabled-color: var(--fs-on-primary);
    --bs-btn-bg: var(--fs-primary);
    --bs-btn-border-color: var(--fs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--fs-primary), #000 12%);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg);
}
.btn-outline-primary {
    --bs-btn-color: var(--fs-primary-ink);
    --bs-btn-hover-color: var(--fs-on-primary);
    --bs-btn-active-color: var(--fs-on-primary);
    --bs-btn-border-color: var(--fs-primary);
    --bs-btn-hover-bg: var(--fs-primary);
    --bs-btn-hover-border-color: var(--fs-primary);
    --bs-btn-active-bg: var(--fs-primary);
    --bs-btn-active-border-color: var(--fs-primary);
}
.form-control,
.form-select {
    border-radius: calc(var(--fs-radius) * 0.7);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--fs-primary-rgb), 0.15);
}
.page-link {
    color: var(--fs-primary-ink);
}
.active > .page-link {
    background: var(--fs-primary);
    border-color: var(--fs-primary);
    color: var(--fs-on-primary);
}
.fs-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4/3;
    background: #eef2f7;
    border-radius: var(--fs-radius) var(--fs-radius) 0 0;
    text-decoration: none;
    color: #91a2b7;
    font-size: 3rem;
    overflow: hidden;
}
.fs-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.fs-richtext img {
    max-width: 100%;
    height: auto;
}
.fs-richtext table {
    max-width: 100%;
}
.fs-price .product-Old-Price,
.fs-price .productOldPrice {
    text-decoration: line-through;
    font-weight: 400;
    color: #788391;
}
a,
button,
input,
select {
    touch-action: manipulation;
}

.fs-native-controls form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.fs-native-controls select,
.fs-native-controls input:not([type='hidden']),
.fs-native-controls button {
    max-width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: calc(var(--fs-radius) * 0.7);
    background: #fff;
    color: inherit;
}
.fs-native-controls input[type='submit'],
.fs-native-controls button {
    background: var(--fs-primary);
    color: var(--fs-on-primary);
}
.fs-native-pagination .pagination {
    flex-wrap: wrap;
    gap: 0.3rem;
}
.fs-native-pagination .pagination a,
.fs-native-pagination .pagination span {
    display: block;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: calc(var(--fs-radius) * 0.5);
    background: #fff;
    text-decoration: none;
}
.fs-native-pagination .pagination .active > * {
    background: var(--fs-primary);
    color: var(--fs-on-primary);
}

/* V655: the security code (plugins/system/captcha): title, explanation, then the picture beside the field.
   The picture's own size (inline style) is removed by the HTML cleaning: 100 × 40 as the plugin draws it
   (V659: drawn 200 × 80, shown 100 × 40). */
.fs-captcha {
    display: grid;
    gap: 0.4rem;
    margin: 0.25rem 0 1rem;
}
.fs-captcha .captchatitle {
    margin: 0;
    font-weight: 600;
}
.fs-captcha .captchalegend {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    line-height: 1.4;
}
.fs-captcha-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}
.fs-captcha .captchaimagecontainer {
    flex: none;
    width: 100px;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: calc(var(--fs-radius) * 0.5);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* V659: the picture is drawn 2 × larger (sharp); a click draws a new one. */
.fs-captcha .captchaimagecontainer:hover {
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--fs-primary-rgb), 0.15);
}
.fs-captcha .captchaimagecontainer img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fs-captcha .captchainputbox {
    flex: 1 1 0;
    min-width: 0;
    max-width: 16rem;
}

.fs-native fieldset {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--fs-radius);
}
.fs-native .form-control,
.fs-native .form-select {
    width: auto;
    max-width: 100%;
    display: inline-block;
}
.fs-native .form_row,
.fs-native .form_element {
    margin-bottom: 0.75rem;
}
.fs-native .inputboxquantity {
    width: 6rem;
}
.fs-native .quantity_box_button {
    min-width: 2.5rem;
}
.fs-native .product_children select {
    width: 100%;
}
.fs-native img {
    max-width: 100%;
    height: auto;
}
.fs-native {
    overflow-wrap: anywhere;
    overflow-x: auto;
}
.fs-native .table > :not(caption) > * > * {
    padding: 0.75rem;
}

/* Cart drawer: the "cart drawer" layout of mod_fs_cartlink (V277). */
.fs-cart-toggle {
    position: relative;
    padding: 0.25rem 0.5rem;
    color: inherit;
    font-size: 1.25rem;
    text-decoration: none;
}

.fs-cart-toggle .fs-cart-count {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(25%, -25%);
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.65rem;
}

.fs-cart-drawer {
    --bs-offcanvas-width: min(400px, 100vw);
}

/* V685: a side column that is a panel at every width (Boutique's "Filters": .offcanvas, not .offcanvas-lg) stays a
   panel. The packs' ".tp-browse-sidebar { position: sticky }" (992 px and more) is for the column beside the products;
   on such a panel — moved to the end of <body> by site.js — it put the hidden panel into the page flow: its whole height
   became an empty space below the footer. The column's "align-self: start" would make the panel only as tall as its
   content (a fixed box with top and bottom) — the panel is as tall as the window. */
.tp-browse-sidebar.offcanvas,
[data-fs-sticky-side].offcanvas {
    position: fixed;
    align-self: stretch;
}

.fs-cart-drawer .offcanvas-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.fs-cart-drawer.is-loading .offcanvas-body,
.fs-cart-drawer.is-loading .fs-cart-footer {
    opacity: 0.6;
    pointer-events: none;
}

.fs-cart-footer {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.fs-cart-footer > :empty {
    display: none;
}

.fs-cart-empty {
    padding: 3rem 1rem;
    text-align: center;
}

.fs-cart-empty .fa-cart-shopping {
    margin-bottom: 1rem;
    color: var(--bs-tertiary-color);
    font-size: 4rem;
}

.fs-cart-drawer .fs-section {
    padding-block: 0;
}

.fs-cart-drawer .fs-native {
    overflow: visible;
}

.fs-cart-drawer .cart_white_line {
    display: none;
}

/* Native cart rows from the cart view (form_cart_products). */
.fs-cart-drawer .mega_cart_product_row {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.fs-cart-drawer .mega_cart_product_row.is-updating {
    opacity: 0.5;
}

.fs-cart-drawer .mega_cart_product_row .product_row_body {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
        "image name remove"
        "image quantity remove";
    column-gap: 0.75rem;
    row-gap: 0.25rem;
}

.fs-cart-drawer .mega_cart_product_row .product_row_body > .data:first-child {
    display: contents;
}

.fs-cart-drawer .mega_cart_product_row .product_image {
    grid-area: image;
}

.fs-cart-drawer .mega_cart_product_row .product_image img {
    width: 64px;
    height: auto;
}

.fs-cart-drawer .mega_cart_product_row .product_data {
    grid-area: name;
}

.fs-cart-drawer .mega_cart_product_row .product_data h4 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.fs-cart-drawer .mega_cart_product_row .product_data h4 a {
    color: inherit;
    text-decoration: none;
}

.fs-cart-drawer .mega_cart_product_row .atributes span {
    display: block;
    color: var(--bs-secondary-color);
}

.fs-cart-drawer .mega_cart_product_row .product_row_body > .data:nth-child(2) {
    display: flex;
    grid-area: quantity;
    align-items: center;
    gap: 0.75rem;
}

.fs-cart-drawer .mega_cart_product_row .actions {
    grid-area: remove;
}

.fs-cart-drawer .qty_body {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--bs-border-color);
}

.fs-cart-drawer .qty_body .cart_button_minus,
.fs-cart-drawer .qty_body .cart_button_plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}

.fs-cart-drawer .qty_body .cart_button_minus::before {
    content: "\2212";
}

.fs-cart-drawer .qty_body .cart_button_plus::before {
    content: "+";
}

.fs-cart-drawer .qty_body .form-control {
    width: 2.75rem;
    padding: 0.2rem;
    border-block: 0;
    border-radius: 0;
    text-align: center;
}

.fs-cart-drawer .mega_cart_product_row .price_body {
    color: var(--bs-primary);
    font-weight: 600;
}

/* Remove: an icon; the translated value stays for screen readers and as the tooltip. */
.mega_cart_product_row .delete_button {
    width: 1.75rem;
    height: 1.75rem;
    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.75rem no-repeat;
    color: transparent;
    font-size: 0;
    cursor: pointer;
}

.mega_cart_product_row .delete_button:hover,
.mega_cart_product_row .delete_button:focus-visible {
    background-color: var(--bs-secondary-bg);
}

/* Native totals (form_cart_totals) in the drawer footer. */
.fs-cart-totals .product_row_body {
    display: flex;
}

.fs-cart-totals .product_row_body > .data:first-child {
    display: none;
}

.fs-cart-totals .product_row_body > .data {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.fs-cart-totals .cart_bottom .product_row:last-child {
    font-size: 1.15rem;
    font-weight: 600;
}

.fs-cart-totals .cart_bottom .product_row:last-child .price_body:last-child {
    color: var(--bs-primary);
}

.fs-cart-totals .form_right,
.fs-cart-totals .next_button,
.fs-cart-totals input.checkout {
    width: 100%;
}

.fs-cart-totals input.checkout {
    margin-top: 0.75rem;
}

/* Free shipping progress: the "progress bar" layout of mod_vm_freeshipping. */
.fs-freeshipping-text {
    margin-bottom: 0.5rem;
}

.fs-freeshipping-progress {
    display: block;
    width: 100%;
    height: 0.5rem;
    overflow: hidden;
    border: 0;
    border-radius: min(1rem, calc(var(--fs-radius) * 2));
    background: var(--bs-secondary-bg);
    appearance: none;
}

.fs-freeshipping-progress::-webkit-progress-bar {
    background: var(--bs-secondary-bg);
}

.fs-freeshipping-progress::-webkit-progress-value {
    background-color: var(--bs-primary);
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

.fs-freeshipping-progress::-moz-progress-bar {
    background-color: var(--bs-primary);
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

/* Horizontal scroller for any design ([data-fs-scroller], V279). */
.fs-scroller {
    position: relative;
    --fs-scroller-item: 220px;
    --fs-scroller-gap: 1rem;
}

.fs-scroller-track {
    display: flex;
    gap: var(--fs-scroller-gap);
    overflow-x: auto;
    /* overflow-x: auto would make the other axis scrollable too: a card 1-2px taller than the
       track then moved with the mouse wheel. The padding keeps hover shadows visible inside the
       clipping box, the negative margin keeps the layout where it was (V308). */
    overflow-y: hidden;
    padding: 0.75rem 0.5rem 1.5rem;
    margin: -0.75rem -0.5rem -1.5rem;
    scroll-padding-inline: 0.5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.fs-scroller-track::-webkit-scrollbar {
    display: none;
}

.fs-scroller-track > * {
    flex: 0 0 var(--fs-scroller-item);
    scroll-snap-align: start;
}

.fs-scroller > .fs-scroller-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: #fff;
    color: var(--bs-body-color);
    font-size: 0.9rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    transform: translateY(-50%);
    transition: opacity 0.2s;
}

.fs-scroller > .fs-scroller-btn:hover {
    background: var(--fs-primary);
    border-color: var(--fs-primary);
    color: var(--fs-on-primary);
}

.fs-scroller > .fs-scroller-btn:disabled,
.fs-scroller.is-static > .fs-scroller-btn {
    opacity: 0;
    pointer-events: none;
}

.fs-scroller > .fs-scroller-btn[data-fs-scroll="-1"] {
    left: -3.25rem;
}

.fs-scroller > .fs-scroller-btn[data-fs-scroll="1"] {
    right: -3.25rem;
}

@media (max-width: 1499.98px) {
    .fs-scroller > .fs-scroller-btn[data-fs-scroll="-1"] {
        left: -2rem;
    }

    .fs-scroller > .fs-scroller-btn[data-fs-scroll="1"] {
        right: -2rem;
    }
}

@media (max-width: 1399.98px) {
    .fs-scroller > .fs-scroller-btn[data-fs-scroll="-1"] {
        left: -0.75rem;
    }

    .fs-scroller > .fs-scroller-btn[data-fs-scroll="1"] {
        right: -0.75rem;
    }
}

/*
 * Phones: the arrows would cover the items, so the track is swiped and a short bar under it
 * shows the visible part (site.js sets --fs-scroller-from / --fs-scroller-to, V293).
 */
@media (max-width: 767.98px) {
    .fs-scroller > .fs-scroller-btn {
        display: none;
    }

    .fs-scroller:not(.is-static) {
        padding-bottom: 1.25rem;
    }

    .fs-scroller:not(.is-static)::after {
        position: absolute;
        bottom: 0.25rem;
        left: 50%;
        width: 4rem;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(
            90deg,
            var(--bs-border-color) var(--fs-scroller-from, 0%),
            var(--fs-primary) var(--fs-scroller-from, 0%),
            var(--fs-primary) var(--fs-scroller-to, 50%),
            var(--bs-border-color) var(--fs-scroller-to, 50%)
        );
        content: "";
        transform: translateX(-50%);
    }
}

/* Price slider of VirtueMart Filters ([data-fs-price-range], V296). */
.vmfilter_slider {
    padding: 0.35rem 0.1rem 0;
}

.vmfilter_slider_track {
    position: relative;
    height: 1.5rem;
}

.vmfilter_slider_track::before,
.vmfilter_slider_fill {
    position: absolute;
    top: calc(50% - 2px);
    height: 4px;
    border-radius: 2px;
    content: "";
}

.vmfilter_slider_track::before {
    right: 0;
    left: 0;
    background: var(--bs-border-color);
}

.vmfilter_slider_fill {
    right: 0;
    left: 0;
    background: var(--fs-primary);
}

.vmfilter_slider_track input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.vmfilter_slider_track input[type="range"]::-webkit-slider-runnable-track {
    background: none;
}

.vmfilter_slider_track input[type="range"]::-webkit-slider-thumb {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--fs-primary);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}

.vmfilter_slider_track input[type="range"]::-moz-range-thumb {
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid var(--fs-primary);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    pointer-events: auto;
}

.vmfilter_slider_track input[type="range"]::-moz-range-track {
    background: none;
}

.vmfilter_slider_track input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.12);
}

.vmfilter_slider_values {
    margin-top: 0.35rem;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

/* Product attribute values as links / colour swatches (V301, V303). */
a[data-fs-attr-index] {
    display: inline-flex;
    min-width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    margin: 0 0.4rem 0.4rem 0;
    padding: 0 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--fs-radius);
    background: #fff;
    color: inherit;
    text-decoration: none;
    vertical-align: middle;
}

a[data-fs-attr-index]:hover,
a[data-fs-attr-index].selected {
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 1px var(--fs-primary);
    color: inherit;
}

.fs-attr-swatch[data-fs-attr-index] {
    width: 2.25rem;
    min-width: 0;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #fff;
}

.fs-attr-swatch[data-fs-attr-index].selected,
.fs-attr-swatch[data-fs-attr-index]:hover {
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--fs-primary);
}

/* V505: every value is shown; one no variant has with the other chosen values looks crossed out
   (choosing it clears those). */
a[data-fs-attr-index].is-unavailable {
    background-image: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--bs-border-color) 50%, transparent calc(50% + 0.5px));
    color: var(--bs-secondary-color);
}

.fs-attr-swatch[data-fs-attr-index].is-unavailable,
.fs-attr-radio.is-unavailable {
    opacity: 0.45;
}

/* V499: embedded maps (site.js puts the frame into [data-fs-map], which has the height): the frame
   fills the box; without a height of its own it stayed at the browser's 150 px. */
[data-fs-map] iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* V496: product card colour swatches (data-fs-swatch, painted by site.js); a design may restyle them. */
.fs-swatch {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    vertical-align: middle;
}

.vm_attr_choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    margin-bottom: 0.75rem;
}

.fs-attr-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 1.1rem 0.4rem 0;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
}

.fs-attr-radio input {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--fs-primary);
}

/* V504: the chosen value after the attribute's name (site.js), and a link beside the name (size chart). */
.fs-attr-chosen {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

.fs-attr-chosen:not(:empty)::before {
    content: ": ";
}

.fs-attr-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.fs-attr-name-row > label {
    margin-bottom: 0.5rem;
}

/* Attribute name above its values: the native label, or the one an attribute plugin writes. */
.product_children .form_item.label label,
[id^="attr"] > label:not(.fs-attr-radio) {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* System footer logo: designs mark the footer background they put it on. */
.fs-footer-on-dark #solution img {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.fs-footer-on-light #solution img {
    filter: grayscale(1);
    opacity: 0.7;
}

#solution img {
    max-height: 1.1rem;
    width: auto;
    vertical-align: -0.2em;
}


/* V413: the courier's own address form (standard shipping, checkout step 2): space above its
   "Save" button, as under the billing / ship-to forms. */
#checkout_accordiation .shipping_rate_terminals .form_item.buttons {
    margin-top: 1rem;
}

/* V417: the selected payment method's details (e.g. the total to pay) under all the methods. */
#checkout_accordiation .payment_method_rates_list {
    margin-top: 0.75rem;
}

/* V418: the details as a card; no dashed line and less indent inside it. */
#checkout_accordiation .payment_method_rates_list .payment_method_rates {
    padding: 0.75rem 1rem;
    border: 1px solid var(--md-line, #dee2e6);
    border-radius: min(0.75rem, var(--fs-radius));
    background: #fff;
}

#checkout_accordiation .payment_method_rates_list .payment_method_rates .rates {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

#checkout_accordiation .payment_method_rates_list .form_row,
#checkout_accordiation .payment_method_rates_list .form_item {
    margin-bottom: 0;
}

#checkout_accordiation .payment_method_rates_list .payment_rate_terminals:not(:empty) {
    padding: 0;
}

/* V419: spinner while the selected method's details load. */
#checkout_accordiation .fs-rates-loading {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
    color: var(--md-green, #6c757d);
}

/* ==========================================================================================
   V481: native Joomla / FREESHOP modules shown with their base layout (section.fs-native), in
   every design. The native markup stays as it is; only its look follows Bootstrap.
   ========================================================================================== */

/* Link lists: articles, sections, archive, manufacturers, category and main menus. */
.fs-native > ul.latestnews,
.fs-native > ul.mostread,
.fs-native > ul.sections,
.fs-native > ul:not([class]),
.fs-native > ul.menu,
.fs-native .manufacturers ul.menu,
.fs-native .categorymenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fs-native > ul.latestnews > li,
.fs-native > ul.mostread > li,
.fs-native > ul.sections > li,
.fs-native > ul:not([class]) > li,
.fs-native > ul.menu > li,
.fs-native .manufacturers ul.menu > li,
.fs-native .categorymenu > ul > li {
    border-bottom: 1px solid var(--bs-border-color);
}

.fs-native > ul.latestnews > li:last-child,
.fs-native > ul.mostread > li:last-child,
.fs-native > ul.sections > li:last-child,
.fs-native > ul:not([class]) > li:last-child,
.fs-native > ul.menu > li:last-child,
.fs-native .manufacturers ul.menu > li:last-child,
.fs-native .categorymenu > ul > li:last-child {
    border-bottom: 0;
}

.fs-native > ul.latestnews a,
.fs-native > ul.mostread a,
.fs-native > ul.sections a,
.fs-native > ul:not([class]) a,
.fs-native > ul.menu a,
.fs-native .manufacturers ul.menu a,
.fs-native .categorymenu ul a {
    display: block;
    padding: 0.45rem 0;
    color: var(--bs-body-color);
    text-decoration: none;
}

.fs-native > ul.latestnews a:hover,
.fs-native > ul.mostread a:hover,
.fs-native > ul.sections a:hover,
.fs-native > ul:not([class]) a:hover,
.fs-native > ul.menu a:hover,
.fs-native .manufacturers ul.menu a:hover,
.fs-native .categorymenu ul a:hover,
.fs-native > ul.menu li.active > a,
.fs-native .manufacturers ul.menu li.active > a,
.fs-native .categorymenu li.current > a,
.fs-native .categorymenu li.active > a {
    color: var(--fs-primary-ink);
}

.fs-native > ul.menu li.active > a,
.fs-native .categorymenu li.current > a {
    font-weight: 600;
}

/* Submenus: indented, without their own lines (mod_mainmenu_fs, mod_fs_mainmenu columns,
   the category menu). The dropdown menu's inline "display: none" is removed with the style. */
.fs-native > ul.menu ul,
.fs-native .categorymenu ul ul {
    margin: 0 0 0.35rem;
    padding: 0 0 0 1rem;
    list-style: none;
}

.fs-native > ul.menu ul a,
.fs-native .categorymenu ul ul a {
    padding-block: 0.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.925em;
}

.fs-native > ul.menu .panelsubmenu,
.fs-native > ul.menu .column_content {
    padding-left: 0;
}

.fs-native > ul.menu .panelsubmenu {
    padding-left: 1rem;
}

.fs-native .categorymenu .prod_count {
    color: var(--bs-secondary-color);
    font-size: 0.85em;
}

.fs-native .categorymenu .toggle {
    display: none;
}

/* Forms of the modules: labels above full-width fields, one full-width button. */
.fs-native .currencies label,
.fs-native .manufacturers label,
.fs-native .login .form_label label,
.fs-native #form-login p > label:first-child {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.fs-native .currencies select,
.fs-native .manufacturers select,
.fs-native .login .form_field input,
.fs-native #form-login input[type="text"],
.fs-native #form-login input[type="password"],
.fs-native .extendedsearch .inputbox {
    display: block;
    width: 100%;
}

.fs-native .clr,
.fs-native .row_separator {
    display: none;
}

.fs-native .login .elements,
.fs-native .extendedsearch .elements {
    display: grid;
    gap: 0.6rem;
}

.fs-native .login .form_element {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.fs-native .login .buttons,
.fs-native .extendedsearch .buttons {
    margin-top: 0.9rem;
}

.fs-native .login .buttons .button,
.fs-native .extendedsearch .buttons .button,
.fs-native #form-login fieldset > .button {
    width: 100%;
}

.fs-native ul.login_tools,
.fs-native #form-login > ul {
    display: grid;
    gap: 0.25rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.fs-native ul.login_tools a,
.fs-native #form-login > ul a {
    text-decoration: none;
}

/* Joomla login (mod_login): the section already frames it, so the fieldset only groups. */
.fs-native #form-login fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.fs-native #form-login p {
    margin: 0 0 0.6rem;
}

.fs-native #form-login p br {
    display: none;
}

.fs-native #form-login #form-login-remember {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
}

.fs-native #form-login #form-login-remember label {
    margin: 0;
    color: inherit;
}

/* Joomla search: the field and the button in one row. */
.fs-native .search {
    display: flex;
    gap: 0.5rem;
}

.fs-native .search br {
    display: none;
}

.fs-native .search .inputbox {
    flex: 1;
    min-width: 0;
}

/* Link to the advanced search: a light button with a magnifier. */
.fs-native .searchlink .link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: calc(var(--fs-radius) * 0.7);
    background: #fff;
    color: var(--bs-body-color);
    text-decoration: none;
}

.fs-native .searchlink .link a::before {
    content: "\f002";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
}

.fs-native .searchlink .link a:hover {
    border-color: var(--fs-primary);
    color: var(--fs-primary-ink);
}

/* A–Z search: letters as small square buttons. */
.fs-native .azsearch .links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.fs-native .azsearch .links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: calc(var(--fs-radius) * 0.5);
    background: #fff;
    color: var(--bs-body-color);
    font-weight: 500;
    text-decoration: none;
}

.fs-native .azsearch .links a:hover,
.fs-native .azsearch .links a.activekeyword {
    border-color: var(--fs-primary);
    background: var(--fs-primary);
    color: var(--fs-on-primary);
}

/* Tag cloud (mod_fs_cloud prints bare links with a title): tags as pills. */
.fs-native:has(> a[title]) {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.4rem;
}

.fs-native:has(> a[title]) > h2 {
    flex-basis: 100%;
}

.fs-native > a[title] {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 50rem;
    background: #fff;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    text-decoration: none;
}

.fs-native > a[title]:hover {
    border-color: var(--fs-primary);
    color: var(--fs-primary-ink);
}

/* One manufacturer (mod_vm_manufacturer): logo beside the name and the description. */
.fs-native .manufacturer_inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.fs-native .manufacturer_image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    padding: 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: calc(var(--fs-radius) * 0.7);
    background: #fff;
}

.fs-native .manufacturer_image img {
    max-height: 100%;
    object-fit: contain;
}

.fs-native .manufacturer_data {
    flex: 1;
    min-width: 0;
}

.fs-native .manufacturer_title {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.fs-native .manufacturer_title a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.fs-native .manufacturer_desc {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.fs-native .manufacturer_desc .more_link {
    display: inline-block;
    margin-top: 0.25rem;
}

/* Comparison list (mod_fs_prodcompare): product rows, then the two actions. */
.fs-native .prod_compare .product {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: auto !important;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.fs-native .prod_compare .product_title {
    flex: 1;
    min-width: 0;
}

.fs-native .prod_compare .product_title a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.fs-native .prod_compare .product_price {
    font-weight: 600;
    white-space: nowrap;
}

/* The remove button is an image input whose picture came from the old template: a drawn cross. */
.fs-native .delete_from_compare input[type="image"] {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: #fff;
    color: transparent;
    font-size: 0;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%236c757d' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    vertical-align: middle;
    cursor: pointer;
}

.fs-native .prod_compare .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.fs-native .prod_compare .buttons a {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--fs-primary);
    border-radius: calc(var(--fs-radius) * 0.7);
    color: var(--fs-primary-ink);
    text-decoration: none;
}

.fs-native .prod_compare .buttons a:first-child {
    background: var(--fs-primary);
    color: var(--fs-on-primary);
}

/* Contacts (mod_fs_contactus): phone and e-mail with icons. */
.fs-native .contactus {
    display: grid;
    gap: 0.4rem;
}

.fs-native .contactus .phone,
.fs-native .contactus .email {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fs-native .contactus .phone::before,
.fs-native .contactus .email::before {
    width: 1.1rem;
    color: var(--fs-primary-ink);
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    text-align: center;
}

.fs-native .contactus .phone::before {
    content: "\f095";
}

.fs-native .contactus .email::before {
    content: "\f0e0";
}

.fs-native .contactus .phone span {
    font-weight: 600;
}

/* News flash (mod_newsflash): the native tables as a title and a text. */
.fs-native > table.contentpaneopen,
.fs-native > table.contentpaneopen td {
    display: block;
    width: auto !important;
    padding: 0;
    border: 0;
}

.fs-native > table.contentpaneopen tbody,
.fs-native > table.contentpaneopen tr {
    display: block;
}

.fs-native > table.contentpaneopen .contentheading {
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.fs-native > table.contentpaneopen .contentheading a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.fs-native > table.contentpaneopen p:last-child {
    margin-bottom: 0.4rem;
}

/* RSS link (mod_syndicate) and the Joomla footer lines (mod_footer). */
.fs-native > a:not([title]):has(> img) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

.fs-native > div:not([class]) + div:not([class]) {
    margin-top: 0.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

/* Language selection (mod_jflanguageselection): the flags (V481: flag-icons SVG) in one row. */
.fs-native #jflanguageselection ul,
.fs-native #jflanguageselection .rawimages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fs-native #jflanguageselection a,
.fs-native #jflanguageselection li > img,
.fs-native #jflanguageselection span > img {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem;
    border: 1px solid transparent;
    border-radius: calc(var(--fs-radius) * 0.5);
    color: var(--bs-body-color);
    text-decoration: none;
}

.fs-native #jflanguageselection img {
    width: 1.75rem;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    object-fit: cover;
}

.fs-native #jflanguageselection a:hover {
    border-color: var(--bs-border-color);
    background: #fff;
}

.fs-native #jflanguageselection #active_language > a {
    border-color: var(--fs-primary);
    background: #fff;
}

.fs-native #jflanguageselection .opaque {
    opacity: 0.5;
}

/* ==========================================================================================
   V481: VirtueMart advanced search (page=shop.search). The native page prints a table of
   unlabelled fields; here it becomes a two-row form: words and the operator, then the category,
   where to search and the button. Only the look changes.
   ========================================================================================== */
.fs-site .componentheading:has(+ .component_content > form[name="adv_search"]) {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 700;
}

.fs-site .component_content:has(> form[name="adv_search"]) > a {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--fs-primary-ink);
    text-decoration: none;
}

.fs-site form[name="adv_search"] fieldset,
.fs-site .component_content:has(> form[name="adv_search"]) > fieldset {
    margin: 0 0 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--fs-radius);
    background: #fff;
}

.fs-site .component_content:has(> form[name="adv_search"]) > fieldset {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.fs-site .component_content:has(> form[name="adv_search"]) > fieldset p:last-child {
    margin-bottom: 0;
}

.fs-site form[name="adv_search"] table,
.fs-site form[name="adv_search"] tr,
.fs-site form[name="adv_search"] td {
    display: block;
    width: auto;
    padding: 0;
}

.fs-site form[name="adv_search"] tbody {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.fs-site form[name="adv_search"] tr {
    grid-column: span 12;
}

/* The native markup has a stray <tr>: an empty row takes no place. */
.fs-site form[name="adv_search"] tr:not(:has(td)) {
    display: none;
}

.fs-site form[name="adv_search"] .clr {
    display: none;
}

.fs-site form[name="adv_search"] .inputbox {
    display: block;
    width: 100%;
    min-height: 2.6rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: calc(var(--fs-radius) * 0.7);
    background-color: #fff;
    color: var(--bs-body-color);
    font: inherit;
}

.fs-site form[name="adv_search"] .inputbox:focus {
    border-color: var(--fs-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--fs-primary-rgb), 0.2);
}

.fs-site form[name="adv_search"] .button {
    width: 100%;
    min-height: 2.6rem;
    padding: 0 1.25rem;
    border: 1px solid var(--fs-primary);
    border-radius: calc(var(--fs-radius) * 0.7);
    background: var(--fs-primary);
    color: var(--fs-on-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.fs-site form[name="adv_search"] .button:hover {
    background: color-mix(in srgb, var(--fs-primary), #000 12%);
}

@media (min-width: 768px) {
    .fs-site form[name="adv_search"] tr:has(input[name="keyword1"]),
    .fs-site form[name="adv_search"] tr:has(input[name="keyword2"]),
    .fs-site form[name="adv_search"] tr:has(select[name="search_category"]) {
        grid-column: span 5;
    }

    .fs-site form[name="adv_search"] tr:has(select[name="search_op"]) {
        grid-column: span 2;
    }

    .fs-site form[name="adv_search"] tr:has(select[name="search_limiter"]) {
        grid-column: span 4;
    }

    .fs-site form[name="adv_search"] tr:has(.button) {
        grid-column: span 3;
    }
}

/* V518: VirtueMart review stars in every design: the native .rating.ratingN (an empty box that the old
   themes filled with a picture) shows five Font Awesome stars, N of them filled. A design may change the
   colours (--fs-rating-on / --fs-rating-off) or restyle it in its own CSS. */
.fs-site .rating {
    display: inline-block;
    width: auto;
    height: auto;
    background: none !important;
    font-size: 0;
    line-height: 1;
    vertical-align: middle;
}

.fs-site .rating::before {
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--fs-rating-on, #f5a524) calc(var(--fs-rating, 0) * 20%),
        var(--fs-rating-off, var(--bs-border-color)) 0
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    content: "\f005\f005\f005\f005\f005";
    font-family: "Font Awesome 7 Free";
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.12em;
    /* V521: taller than the glyph, so the text-clipped background covers the star tips (line-height 1 cut them). */
    line-height: 1.35;
}

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

/* A review's rating: the label and the stars on one line. */
.fs-site .product_rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.fs-site .product_rating .clr {
    display: none;
}

/* The review form's rating: the native table (six columns of stars over radio buttons, wider than a
   narrow form) as a grid of options, three per row (two on the narrowest screens), each one the radio
   button with its stars beside it. */
.fs-site .review_rating_table {
    display: block;
    width: auto;
    margin: 0.25rem 0 1.25rem;
}

.fs-site .review_rating_table tbody {
    display: grid;
    grid-template-columns: repeat(3, auto minmax(0, 1fr));
    align-items: center;
    gap: 0.7rem 0.5rem;
}

.fs-site .review_rating_table tr {
    display: contents;
}

.fs-site .review_rating_table th,
.fs-site .review_rating_table td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    text-align: left !important;
}

.fs-site .review_rating_table tr:first-child > :nth-child(1) { grid-area: 1 / 2; }
.fs-site .review_rating_table tr:first-child > :nth-child(2) { grid-area: 1 / 4; }
.fs-site .review_rating_table tr:first-child > :nth-child(3) { grid-area: 1 / 6; }
.fs-site .review_rating_table tr:first-child > :nth-child(4) { grid-area: 2 / 2; }
.fs-site .review_rating_table tr:first-child > :nth-child(5) { grid-area: 2 / 4; }
.fs-site .review_rating_table tr:first-child > :nth-child(6) { grid-area: 2 / 6; }
.fs-site .review_rating_table tr:last-child > :nth-child(1) { grid-area: 1 / 1; }
.fs-site .review_rating_table tr:last-child > :nth-child(2) { grid-area: 1 / 3; }
.fs-site .review_rating_table tr:last-child > :nth-child(3) { grid-area: 1 / 5; }
.fs-site .review_rating_table tr:last-child > :nth-child(4) { grid-area: 2 / 1; }
.fs-site .review_rating_table tr:last-child > :nth-child(5) { grid-area: 2 / 3; }
.fs-site .review_rating_table tr:last-child > :nth-child(6) { grid-area: 2 / 5; }

.fs-site .review_rating_table label {
    display: block;
    margin: 0;
    cursor: pointer;
}

.fs-site .review_rating_table input[type="radio"] {
    display: block;
    margin: 0;
}

/* The chosen rating stands out; the other options fade a little. */
.fs-site .review_rating_table:has(input:checked) .rating {
    opacity: 0.5;
}

.fs-site .review_rating_table:has(#user_rating0:checked) label[for="user_rating0"] .rating,
.fs-site .review_rating_table:has(#user_rating1:checked) label[for="user_rating1"] .rating,
.fs-site .review_rating_table:has(#user_rating2:checked) label[for="user_rating2"] .rating,
.fs-site .review_rating_table:has(#user_rating3:checked) label[for="user_rating3"] .rating,
.fs-site .review_rating_table:has(#user_rating4:checked) label[for="user_rating4"] .rating,
.fs-site .review_rating_table:has(#user_rating5:checked) label[for="user_rating5"] .rating {
    opacity: 1;
}

.fs-site .review_rating_table .rating::before {
    font-size: 0.8rem;
}

/* The characters counter under the review form: a quiet number, not a full-width field. */
.fs-site input[name="counter"] {
    display: inline-block;
    width: 4.5rem;
    min-height: 0;
    padding: 0.2rem 0.5rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--bs-secondary-color);
}

@media (max-width: 399.98px) {
    .fs-site .review_rating_table tbody {
        grid-template-columns: repeat(2, auto minmax(0, 1fr));
    }

    .fs-site .review_rating_table tr:first-child > :nth-child(3) { grid-area: 2 / 2; }
    .fs-site .review_rating_table tr:first-child > :nth-child(4) { grid-area: 2 / 4; }
    .fs-site .review_rating_table tr:first-child > :nth-child(5) { grid-area: 3 / 2; }
    .fs-site .review_rating_table tr:first-child > :nth-child(6) { grid-area: 3 / 4; }
    .fs-site .review_rating_table tr:last-child > :nth-child(3) { grid-area: 2 / 1; }
    .fs-site .review_rating_table tr:last-child > :nth-child(4) { grid-area: 2 / 3; }
    .fs-site .review_rating_table tr:last-child > :nth-child(5) { grid-area: 3 / 1; }
    .fs-site .review_rating_table tr:last-child > :nth-child(6) { grid-area: 3 / 3; }
}

/* V519: the site width (Look switch "width"): "boxed" keeps the whole site (header, content, footer)
   1400px wide in the middle of the window; the page background shows at the sides. Pictures that reach
   the window edges (100vw) stop at the site's edges. Fixed panels and bars still use the window. */
[data-fs-width="boxed"] .fs-site:not(.fs-component) {
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: clip;
}

/* V659: "framed" — the fixed width in a frame: the site on its own surface (the page background) with a
   border, a soft shadow and rounded corners, a gap above and below; outside it a background in the
   design's colours (the page background with a little of the text and the brand colour; dark tone —
   darker). --fs-frame-page / --fs-frame-line may be set by a design's own CSS. Under 992px — as "full".
   html gets the background too: the site's top gap is outside <body>'s box. */
@media (min-width: 992px) {
    html[data-fs-width="framed"],
    html[data-fs-width="framed"] body {
        background: var(--fs-frame-page, color-mix(in srgb, var(--fs-primary) 7%, color-mix(in srgb, var(--bs-body-bg) 93%, var(--bs-body-color))));
    }

    html[data-fs-width="framed"][data-fs-tone="dark"],
    html[data-fs-width="framed"][data-fs-tone="dark"] body {
        background: var(--fs-frame-page, color-mix(in srgb, var(--fs-primary) 6%, color-mix(in srgb, var(--bs-body-bg) 70%, #000)));
    }

    [data-fs-width="framed"] .fs-site:not(.fs-component) {
        max-width: min(1400px, calc(100% - 3rem));
        min-height: calc(100vh - 3rem);
        margin: 1.5rem auto;
        overflow: clip;
        border: 1px solid var(--fs-frame-line, var(--bs-border-color));
        border-radius: calc(var(--fs-radius) * 1.5);
        box-shadow: 0 0.75rem 2.5rem rgba(var(--bs-body-color-rgb), 0.1), 0 0.125rem 0.375rem rgba(var(--bs-body-color-rgb), 0.06);
    }

    /* The site's own surface: the page background; a pack that paints its root (Classic: .md-site white)
       keeps its colour (the same weight, the pack's CSS comes later). */
    :where(html[data-fs-width="framed"]) .fs-site:where(:not(.fs-component)) {
        background: var(--bs-body-bg);
    }

    /* The customizer's "full page" frame measures the page: no 100vh there (V560). */
    html[data-fs-customizer-full][data-fs-width="framed"] .fs-site:not(.fs-component) {
        min-height: 0;
    }
}

@media print {
    html[data-fs-width="framed"],
    html[data-fs-width="framed"] body {
        background: none;
    }

    [data-fs-width="framed"] .fs-site:not(.fs-component) {
        max-width: none;
        min-height: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* V522: PDF (body.fs-pdf, wkhtmltopdf) of an order or invoice in every design: without the tools row
   ("All orders", "PDF", "Print"). wkhtmltopdf draws the screen styles, so Bootstrap's .d-print-none does
   not hide it there. Plain selectors: the PDF engine is an old WebKit. */
.fs-pdf .d-print-none,
.fs-pdf .md-print-hide,
.fs-pdf [data-fs-print] {
    display: none !important;
}

/* V523: comparison page (.tp-comparison-table: Tech, Fashion, System, Template): every product column
   is equally wide (fixed table layout); the parameter names column keeps the design's width (12rem if
   the design sets none). With more products than fit, each keeps 13rem (10.5rem on phones) and the
   table scrolls sideways. */
.fs-site .tp-comparison-table {
    --fs-compare-label: 12rem;
    --fs-compare-column: 13rem;
    table-layout: fixed;
}

:where(.fs-site .tp-comparison-table thead tr) > :first-child {
    width: var(--fs-compare-label);
}

.fs-site .tp-comparison-table:has(thead th:nth-child(3)) { min-width: calc(var(--fs-compare-label) + 2 * var(--fs-compare-column)); }
.fs-site .tp-comparison-table:has(thead th:nth-child(4)) { min-width: calc(var(--fs-compare-label) + 3 * var(--fs-compare-column)); }
.fs-site .tp-comparison-table:has(thead th:nth-child(5)) { min-width: calc(var(--fs-compare-label) + 4 * var(--fs-compare-column)); }
.fs-site .tp-comparison-table:has(thead th:nth-child(6)) { min-width: calc(var(--fs-compare-label) + 5 * var(--fs-compare-column)); }
.fs-site .tp-comparison-table:has(thead th:nth-child(7)) { min-width: calc(var(--fs-compare-label) + 6 * var(--fs-compare-column)); }
.fs-site .tp-comparison-table:has(thead th:nth-child(8)) { min-width: calc(var(--fs-compare-label) + 7 * var(--fs-compare-column)); }
.fs-site .tp-comparison-table:has(thead th:nth-child(9)) { min-width: calc(var(--fs-compare-label) + 8 * var(--fs-compare-column)); }

.fs-site .tp-comparison-table td {
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .fs-site .tp-comparison-table {
        --fs-compare-label: 7.5rem;
        --fs-compare-column: 10.5rem;
    }
}

/* V517: printing (the order's "Print" button, any page) keeps only the page content: the design's
   frame around <main> (top bar, header, menus, newsletter, footer) and its panels are left out, as
   are the breadcrumbs and the account menu beside the account pages. */
@media print {
    .fs-site > :not(main),
    body > .offcanvas,
    body > .offcanvas-backdrop,
    [data-fs-buybar],
    .fs-site .breadcrumb,
    .tp-account-aside,
    .mf-account-aside,
    .te-account-aside {
        display: none !important;
    }

    .tp-account-page,
    .mf-account-page,
    .te-account-page {
        display: block !important;
    }

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

/* V549: the age check (com_freeshop ageverification, a page of its own): a card in the middle of the screen; "No"
   is the checkbox .fs-age-toggle — checked, the question gives way to the "sorry" text. */
.fs-age {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: grid;
    overflow-y: auto;
    place-items: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--bs-body-color) 6%, var(--bs-body-bg));
}

.fs-age-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fs-age-card {
    width: min(100%, 28rem);
    padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
    border-radius: var(--fs-radius);
    background: var(--bs-body-bg);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.08);
    text-align: center;
}

.fs-age-eyebrow {
    margin-bottom: 0.75rem;
    color: color-mix(in srgb, var(--bs-body-color) 60%, var(--bs-body-bg));
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fs-age-text {
    margin-bottom: 1.5rem;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
}

.fs-age-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.fs-age-buttons .btn {
    min-width: 7rem;
}

.fs-age-sorry {
    display: none;
    margin: 0;
    font-size: 1.125rem;
}

.fs-age-toggle:checked + .fs-age-card .fs-age-ask {
    display: none;
}

.fs-age-toggle:checked + .fs-age-card .fs-age-sorry {
    display: block;
}

/* V550: prices only for logged-in customers — the log-in link that replaces a price (ps_perm::pricesLoginLink). */
.fs-price-login {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border: 1px solid currentColor;
    border-radius: var(--bs-border-radius, .375rem);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.fs-price-login:hover {
    text-decoration: underline;
}

/* V559: a catalogue shop — "Ask for the price" (ps_perm::priceAskLink) where the price would be. */
.fs-price-ask {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.fs-price-ask:hover {
    text-decoration: underline;
}

/* V582: manufacturers A–Z page — letters, then a card per letter. */
.fs-az-title {
    margin-bottom: 1rem;
}

.fs-az-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: var(--fs-space);
}

.fs-az-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: calc(var(--fs-radius) * 0.6);
    background: var(--bs-body-bg);
    color: var(--fs-primary-ink);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

a.fs-az-letter:hover,
a.fs-az-letter:focus-visible {
    border-color: var(--fs-primary);
    background: var(--fs-primary);
    color: var(--fs-on-primary);
}

.fs-az-letter.is-empty {
    border-color: transparent;
    background: transparent;
    color: var(--bs-secondary-color);
    opacity: 0.45;
}

.fs-az-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1rem;
}

.fs-az-group {
    padding: 1rem 1.25rem 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--fs-radius);
    background: var(--bs-body-bg);
    scroll-margin-top: 6rem;
}

.fs-az-group:target {
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-primary) 18%, transparent);
}

.fs-az-symbol {
    margin: 0 0 0.5rem;
    color: var(--fs-primary-ink);
    font-size: 1.5rem;
    line-height: 1;
}

.fs-az-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fs-az-list li + li {
    margin-top: 0.3rem;
}

.fs-az-list a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.fs-az-list a:hover {
    color: var(--fs-primary-ink);
    text-decoration: underline;
}

/* V584: gift card — the design, inscription and its position on the product page, with a preview of the printable
   card (FreeshopHelperGiftcards::fields(); the same fonts as the PDF). */
@font-face {
  font-family: 'FS Giftcard Script';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../../../../media/freeshop/giftcards/fonts/Lora-Italic.ttf) format('truetype');
}
@font-face {
  font-family: 'FS Giftcard Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../../../../media/freeshop/giftcards/fonts/Poppins-Medium.ttf) format('truetype');
}
@font-face {
  font-family: 'FS Giftcard Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../../../media/freeshop/giftcards/fonts/Poppins-Bold.ttf) format('truetype');
}
.fs-giftcard {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.25rem;
}
.fs-giftcard__preview {
  container-type: inline-size;
  display: flex;
  aspect-ratio: 1748 / 1240;
  overflow: hidden;
  border-radius: var(--fs-radius, .5rem);
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .14);
  background: #fbf8f3;
}
.fs-giftcard__art {
  position: relative;
  display: flex;
  flex: 0 0 66.4%;
  align-items: center;
  justify-content: center;
  padding: 7cqw 5cqw;
  background: linear-gradient(180deg, #b08d57, #3c3028) center / cover no-repeat;
  color: #fff;
  text-align: center;
}
.fs-giftcard__art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 70%);
  opacity: 0;
  transition: opacity .2s;
}
.fs-giftcard__preview[data-position='top'] .fs-giftcard__art { align-items: flex-start; }
.fs-giftcard__preview[data-position='bottom'] .fs-giftcard__art { align-items: flex-end; }
.fs-giftcard__preview[data-position='top'] .fs-giftcard__art::before { background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 60%); }
.fs-giftcard__preview[data-position='bottom'] .fs-giftcard__art::before { background: linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 60%); }
.fs-giftcard__preview:has(.fs-giftcard__inscription:not(:empty)) .fs-giftcard__art::before { opacity: 1; }
.fs-giftcard__inscription {
  position: relative;
  max-width: 100%;
  font: italic 400 5.2cqw/1.3 'FS Giftcard Script', Georgia, serif;
  overflow-wrap: anywhere;
  text-shadow: 0 .2cqw .4cqw rgba(0, 0, 0, .45);
}
.fs-giftcard__stub {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6cqw;
  padding: 3cqw;
  border-left: .2cqw dashed #d9d0c2;
  color: #211c18;
  font-family: 'FS Giftcard Sans', system-ui, sans-serif;
  text-align: center;
}
.fs-giftcard__vendor {
  color: #786e64;
  font-size: 1.5cqw;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.fs-giftcard__title {
  font-size: 1.9cqw;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fs-giftcard__value {
  font-size: 6.5cqw;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.fs-giftcard__code {
  padding: 1cqw 2cqw;
  border: .2cqw dashed #b08d57;
  font-size: 2cqw;
  font-weight: 700;
  letter-spacing: .12em;
}
.fs-giftcard__group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.fs-giftcard__group legend,
.fs-giftcard__label {
  display: block;
  margin: 0 0 .4rem;
  font-size: .95rem;
  font-weight: 600;
}
.fs-giftcard__note {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--bs-secondary-color, #6c757d);
}
.fs-giftcard__designs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: .5rem;
}
.fs-giftcard__design,
.fs-giftcard__position {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.fs-giftcard__design input,
.fs-giftcard__position input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fs-giftcard__design img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: var(--fs-radius, .5rem);
  outline: 1px solid var(--bs-border-color, #dee2e6);
  transition: border-color .15s, transform .15s;
}
.fs-giftcard__design span {
  display: block;
  margin-top: .25rem;
  font-size: .8rem;
  line-height: 1.2;
  text-align: center;
}
.fs-giftcard__design:hover img { transform: translateY(-2px); }
.fs-giftcard__design input:checked + img { border-color: var(--fs-primary, var(--bs-primary)); outline-color: transparent; }
.fs-giftcard__design input:focus-visible + img,
.fs-giftcard__position input:focus-visible + span { box-shadow: 0 0 0 .2rem rgba(var(--fs-primary-rgb, 13, 110, 253), .35); }
.fs-giftcard__positions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--fs-radius, .5rem);
  overflow: hidden;
}
.fs-giftcard__position span {
  display: block;
  padding: .45rem .25rem;
  font-size: .85rem;
  text-align: center;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.fs-giftcard__position + .fs-giftcard__position span { border-left: 1px solid var(--bs-border-color, #dee2e6); }
.fs-giftcard__position input:checked + span {
  background: var(--fs-primary, var(--bs-primary));
  color: var(--fs-on-primary, #fff);
}

/* V605: the return pages (com_freeshop view=returns; form controls come from the design). */
.fs-returns { padding: 0.5rem 0 1.5rem; }
.fs-returns h2 { margin: 1.75rem 0 0.75rem; font-size: 1.25rem; }
.fs-returns .fs-returns-lead { margin: 0 0 1rem; opacity: 0.8; }
.fs-returns .fs-returns-muted { font-size: 0.875rem; opacity: 0.7; }
.fs-returns .fs-returns-note { padding: 0.85rem 1rem; margin: 0 0 1rem; border-left: 4px solid var(--fs-primary, #2563eb); background: rgba(var(--fs-primary-rgb, 37, 99, 235), 0.07); border-radius: var(--fs-radius, 6px); }
.fs-returns .fs-returns-warning { border-left-color: #d97706; background: #fff7ed; }
.fs-returns .fs-returns-card { padding: 1rem 1.25rem; margin: 0 0 1rem; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--fs-radius, 6px); }
.fs-returns .fs-returns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; align-items: end; }
.fs-returns .fs-returns-field { margin: 0 0 1rem; }
.fs-returns .fs-returns-num { text-align: right; white-space: nowrap; }
.fs-returns td select { width: auto; min-width: 4.5rem; display: inline-block; }
.fs-returns .fs-returns-status { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: rgba(0, 0, 0, 0.07); }
.fs-returns .fs-returns-status-refunded, .fs-returns .fs-returns-status-received { background: #dcfce7; color: #166534; }
.fs-returns .fs-returns-status-approved { background: #dbeafe; color: #1e40af; }
.fs-returns .fs-returns-status-rejected, .fs-returns .fs-returns-status-cancelled { background: #fee2e2; color: #991b1b; }
.fs-returns .fs-returns-button { margin-top: 0.5rem; }

/* ---- V618: the category grid of the front page (layout set "Category grid", <pack>_category_grid) ----------------
   Cards (the default) or circles — the design switch "categories" (data-fs-categories on <html>). The pack's section
   head gives the title; the pack may restyle .fs-catgrid-* with its own tokens. */
.fs-catgrid {
    --fs-catgrid-bg: #fff;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
    gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-fs-tone="dark"] .fs-catgrid {
    --fs-catgrid-bg: rgba(255, 255, 255, 0.04);
}

.fs-catgrid > li {
    min-width: 0;
}

.fs-catgrid-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--fs-radius);
    background: var(--fs-catgrid-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.fs-catgrid-item:hover,
.fs-catgrid-item:focus-visible {
    border-color: var(--fs-primary);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
    color: var(--bs-body-color);
}

.fs-catgrid-picture {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(var(--fs-primary-rgb), 0.08);
    color: var(--fs-primary-ink);
    font-size: 2.25rem;
}

.fs-catgrid-picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.fs-catgrid-item:hover .fs-catgrid-picture img {
    transform: scale(1.05);
}

.fs-catgrid-name {
    padding: 0.75rem 1rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Circles: a round picture with the name under it, no card. */
[data-fs-categories="circles"] .fs-catgrid {
    grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 40%), 1fr));
    row-gap: 1.5rem;
}

[data-fs-categories="circles"] .fs-catgrid-item {
    align-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: center;
}

[data-fs-categories="circles"] .fs-catgrid-item:hover,
[data-fs-categories="circles"] .fs-catgrid-item:focus-visible {
    box-shadow: none;
}

[data-fs-categories="circles"] .fs-catgrid-picture {
    width: 100%;
    max-width: 10rem;
    aspect-ratio: 1;
    border: 3px solid transparent;
    border-radius: 50%;
    transition: border-color 0.2s;
}

[data-fs-categories="circles"] .fs-catgrid-item:hover .fs-catgrid-picture,
[data-fs-categories="circles"] .fs-catgrid-item:focus-visible .fs-catgrid-picture {
    border-color: var(--fs-primary);
}

[data-fs-categories="circles"] .fs-catgrid-name {
    padding: 0.6rem 0.25rem 0;
}

@media (max-width: 575.98px) {
    .fs-catgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-fs-categories="circles"] .fs-catgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fs-catgrid-name {
        padding: 0.6rem 0.75rem;
        font-size: 0.9rem;
    }
}

/*
 * V675: a picture logo toned to its place (site.js initLogoTone(): the place's --fs-logo-tone, e.g. Tech's footer) —
 * the picture keeps its size and text but is not seen; its shape (--fs-logo-mask) is painted in the tone over it.
 * A picture that has no shape to take keeps its colours on the place's plate (--fs-logo-plate; none — nothing).
 */
.fs-logo-toned {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}

.fs-logo-toned > img {
    opacity: 0;
}

.fs-logo-toned::after {
    content: "";
    position: absolute;
    inset: 0;
    /* V681: a header's logo lost on its background — the header's text colour (site.js). */
    background-color: var(--fs-logo-auto-tone, var(--fs-logo-tone));
    -webkit-mask: var(--fs-logo-mask) center / 100% 100% no-repeat;
    mask: var(--fs-logo-mask) center / 100% 100% no-repeat;
    pointer-events: none;
}

.fs-logo-plate {
    display: inline-block;
    padding: var(--fs-logo-plate-padding, 0);
    border-radius: var(--fs-logo-plate-radius, 0.5rem);
    background: var(--fs-logo-plate, transparent);
    line-height: 0;
}

/* V755: the price rules next to a price (common/price.tpl.php) — the unit price ("1,99 € / kg") and Omnibus (the
   lowest price of the 30 days before the reduction): each on its own line, small and muted, in every design. */
.unit_price,
.lowest_price {
    display: block;
    flex-basis: 100%;
    width: 100%;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
    white-space: normal;
}

/* V756: the GDPR pages (com_gdpr: the request form, "check your e-mail", the data, the erasure). */
.fs-gdpr {
    max-width: 56rem;
}

.fs-gdpr-form {
    max-width: 32rem;
}

.fs-gdpr-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.fs-gdpr-form input[type="email"] {
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
}

.fs-gdpr-muted {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875rem;
}

.fs-gdpr-note {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--bs-primary, #2673b4);
    background: var(--bs-tertiary-bg, #f4f6f8);
}

.fs-gdpr-note p:last-child {
    margin-bottom: 0;
}

.fs-gdpr-warning {
    border-left-color: var(--bs-danger, #c0392b);
}

.fs-gdpr-record {
    margin-bottom: 1rem;
}

.fs-gdpr-record th {
    width: 35%;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

.fs-gdpr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

/* V758: the EU notice on the legal guarantee (FreeshopHelperLegal::guarantee) — a sentence that opens the
   Commission's artwork; the reviews' "Bought this product" and the note on how reviews are checked. */
.fs-guarantee {
    margin: 0.75rem 0;
    font-size: 0.875rem;
}

.fs-guarantee > summary {
    display: inline-block;
    color: var(--bs-link-color, #2673b4);
    text-decoration: underline;
    cursor: pointer;
}

.fs-guarantee-body {
    margin-top: 0.5rem;
    max-width: 36rem;
}

.fs-guarantee-notice {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.review_bought {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.reviews_note {
    margin-bottom: 0.75rem;
}

/* V759: the product's legal information (GPSR, food, take-back) — FreeshopHelperLegal::productInfo */
.fs-product-legal {
    margin-top: 1.5rem;
    font-size: 0.875rem;
}

.fs-product-legal-table {
    max-width: 48rem;
}

.fs-product-legal-table th {
    width: 35%;
    font-weight: 600;
    vertical-align: top;
}

.fs-product-weee {
    max-width: 48rem;
    color: var(--bs-secondary-color, #6c757d);
}