/*
 * Additions to the Helendo theme (assets/css). The theme is used as it ships; this file only holds what
 * the theme has no markup for: messages from the server, form elements standing where the theme expects
 * a link, and the trimmed-down header and footer.
 */

/* Form fields ------------------------------------------------------------------------------------ */

/* The theme turns the text of a field to its accent colour while the field has the focus; that gold is not
   readable as text. The border keeps the accent, the text stays dark. The selectors repeat the theme's own so
   this rule outweighs it. */
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=range]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
textarea:focus,
select:focus {
    color: #222;
}

/* Header and footer ------------------------------------------------------------------------------ */

.logo img,
.footer-logo img {
    height: 36px;
    width: auto;
}

/* The logo of the header; on a phone it is smaller, so the cart and the menus beside it keep their room. */
.logo img.site-logo {
    height: 48px;
    max-width: 100%;
}

@media only screen and (max-width: 575px) {
    .logo img.site-logo {
        height: 34px;
    }
}

.footer-copyright-area--standalone {
    padding-top: 40px;
}

/* The newsletter above the menus of the footer: a title, a line, and the email beside its button. */
.footer-newsletter {
    margin-bottom: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid #eee;
}

.footer-newsletter__title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
}

.footer-newsletter__text {
    margin: 0 0 16px;
    color: #777;
    font-size: 14px;
}

.footer-newsletter__form {
    display: flex;
    gap: 10px;
}

.footer-newsletter__form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #222;
}

.footer-newsletter__form .btn {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 24px;
}

@media only screen and (max-width: 575px) {
    .footer-newsletter__form {
        flex-direction: column;
    }
}

.mobile-navigation-close-icon {
    cursor: pointer;
}

/* Header menus (language, account) ------------------------------------------------------------------ */

.header-menu {
    position: relative;
}

.header-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: #000;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.header-menu__toggle .icon-chevron-down {
    font-size: 11px;
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.header-menu__toggle[aria-expanded="true"] .icon-chevron-down {
    transform: rotate(180deg);
}

/* The account menu opens from the icon the theme gives every entry of the header's right side. */
.header-menu__toggle .icon-user {
    font-size: 24px;
}

.header-menu__list {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 1000;
    min-width: 180px;
    margin: 0;
    padding: 8px 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
    text-align: left;
}

.header-menu__list[hidden] {
    display: none;
}

/* The theme sizes every link of the header's right side as an icon (24px); the entries are links, so the
   selector has to outweigh that rule. */
.header-menu .header-menu__list .header-menu__item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 8px 20px;
    color: #666;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Signing out is a form; its button looks like the links around it. */
.header-menu__list form {
    margin: 0;
}

.header-menu__list button.header-menu__item {
    border: 0;
    background: none;
    cursor: pointer;
}

.header-menu__item:hover,
.header-menu__item:focus-visible,
.header-menu__item[aria-current="true"] {
    color: #000;
}

.header-menu__item[aria-current="true"] {
    font-weight: 500;
}

/*
 * Dropdown entries (account and language menus, submenus of the main menu). The highlight of the pointer, the
 * keyboard and the current entry has no background: a short bar in the accent colour grows at the left edge and the
 * text, nudged towards it, turns into a deeper tone of the accent that stays readable on white (4.6:1).
 */
.header-menu .header-menu__list .header-menu__item,
.site-menu .submenu > li > a {
    position: relative;
    transition: color 0.25s ease, padding-left 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.site-menu .submenu > li > a {
    color: #666;
}

.header-menu .header-menu__list .header-menu__item::before,
.site-menu .submenu > li > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 18px;
    margin-top: -9px;
    border-radius: 0 2px 2px 0;
    background-color: #dcb14a;
    transform: scaleY(0);
    transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.header-menu .header-menu__list .header-menu__item:hover,
.header-menu .header-menu__list .header-menu__item:focus-visible,
.header-menu .header-menu__list .header-menu__item[aria-current="true"],
.site-menu .submenu > li > a:hover,
.site-menu .submenu > li > a:focus-visible {
    background-color: transparent;
    color: #916f1c;
}

.header-menu .header-menu__list .header-menu__item:hover,
.header-menu .header-menu__list .header-menu__item:focus-visible {
    padding-left: 24px;
}

.site-menu .submenu > li > a:hover,
.site-menu .submenu > li > a:focus-visible {
    padding-left: 34px;
}

.header-menu .header-menu__list .header-menu__item:hover::before,
.header-menu .header-menu__list .header-menu__item:focus-visible::before,
.header-menu .header-menu__list .header-menu__item[aria-current="true"]::before,
.site-menu .submenu > li > a:hover::before,
.site-menu .submenu > li > a:focus-visible::before {
    transform: scaleY(1);
}

.header-menu .header-menu__list .header-menu__item:focus-visible,
.site-menu .submenu > li > a:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .header-menu .header-menu__list .header-menu__item,
    .header-menu .header-menu__list .header-menu__item::before,
    .site-menu .submenu > li > a,
    .site-menu .submenu > li > a::before {
        transition: none;
    }
}

.header-menu__code {
    min-width: 22px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* A one-off confirmation carried over a redirect ("Your details have been saved.") --------------- */

/* Messages: one stack of toasts in the bottom right corner of every page. It lies above the window of the
   control panel, so a message about the form in that window is not hidden behind it. */

.toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(440px, calc(100vw - 40px));
    pointer-events: none;
}

/* While that window is open the stack sits above its bar of buttons, so the button that saves stays free. */
.modal-open .toast-stack {
    bottom: 120px;
}

.site-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #cfe3d1;
    border-left: 4px solid #2e7d32;
    background-color: #f2f9f3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    color: #222;
    text-align: left;
    pointer-events: auto;
    animation: site-toast-in 0.25s ease-out;
}

.site-toast--error {
    border-color: #f0cfd2;
    border-left-color: #b3261e;
    background-color: #fdf1f2;
}

.site-toast__text {
    flex: 1 1 auto;
}

.site-toast__close {
    flex: 0 0 auto;
    padding: 0 2px;
    border: 0;
    background: none;
    color: #666;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.site-toast__close:hover,
.site-toast__close:focus-visible {
    color: #222;
}

.site-toast.is-leaving {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.25s, transform 0.25s;
}

@keyframes site-toast-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-toast {
        animation: none;
    }

    .site-toast.is-leaving {
        transition: none;
    }
}

/* Sign-in box: every field carries its label above it ---------------------------------------------- */

.account-form-box .single-input label {
    display: block;
    margin-bottom: 6px;
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

/* Placeholders ------------------------------------------------------------------------------------ */

/* The theme hides the placeholder of an input in a form while it has the focus (form input:focus::placeholder). A
   placeholder often says what to type - the form of a code, an IBAN, a size - so it stays until something is typed,
   in the colour the browser gives it, on every form of the site and of the panel. */
form input:focus::placeholder {
    color: revert;
}

/* Validation -------------------------------------------------------------------------------------- */

.field-error {
    display: block;
    margin-top: 6px;
    color: #b02a37;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
}

.field-error:empty,
.field-validation-valid,
.validation-summary-valid {
    display: none;
}

input.input-validation-error {
    border-color: #dc3545 !important;
}

.field-hint {
    display: block;
    margin-top: 6px;
    color: #777;
    font-size: 13px;
    line-height: 1.4;
}

/*
 * Inside the sign-in box the theme turns every span into a checkbox label (padding, pointer and a tick
 * icon). The messages and hints placed there are spans too and must stay plain text.
 */
.myaccount-box-wrapper .content-modal-box span.field-error,
.myaccount-box-wrapper .content-modal-box span.field-hint {
    display: block;
    padding: 0;
    cursor: default;
    line-height: 1.4;
}

.myaccount-box-wrapper .content-modal-box span.field-error::before,
.myaccount-box-wrapper .content-modal-box span.field-hint::before {
    content: none;
}

.myaccount-box-wrapper .content-modal-box span.field-error:empty,
.myaccount-box-wrapper .content-modal-box span.field-validation-valid {
    display: none;
}

/* The same goes for the parts of a checkbox and a switch (see "Shared form controls" below). */
.myaccount-box-wrapper .content-modal-box .switch-field span {
    padding: 0;
    line-height: 1.4;
}

.myaccount-box-wrapper .content-modal-box .switch-field span::before {
    content: none;
}

/* Sign-in box: text under and above the form ---------------------------------------------------- */

.account-form-box .form-intro {
    margin: 10px 0 0;
    color: #666;
    line-height: 1.6;
}

.account-form-box .form-after {
    margin: 20px 0 0;
    font-size: 14px;
    text-align: center;
}

.account-form-box .form-after a {
    color: #000;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.account-form-box .form-after a:hover,
.account-form-box .form-after a:focus-visible {
    color: #dcb14a;
}

/* Signing in with Google or Apple: a line with "or", then a button a service, drawn as the outlined buttons are. */
.external-logins {
    margin-top: 20px;
}

.external-logins__or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    color: #999;
    font-size: 13px;
}

.external-logins__or::before,
.external-logins__or::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid #e5e5e5;
}

.external-logins__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    border: 1px solid #222;
    background-color: #fff;
    color: #222;
}

.external-logins__button:hover,
.external-logins__button:focus-visible {
    background-color: #222;
    color: #fff;
}

/* The setup of an authenticator app: the QR code beside the key to type in. */
.two-factor-setup {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin: 16px 0 20px;
}

.two-factor-setup__qr {
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
    image-rendering: pixelated;
}

.two-factor-setup__key {
    display: flex;
    flex: 1 1 200px;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.two-factor-setup__secret {
    padding: 8px 10px;
    border: 1px solid #eee;
    background-color: #fafafa;
    color: #222;
    font-size: 15px;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
    user-select: all;
}

/* The recovery codes, shown once, two to a row. */
.two-factor-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
    margin: 16px 0 0;
    padding: 16px 16px 16px 36px;
    border: 1px solid #eee;
    background-color: #fafafa;
}

.two-factor-codes code {
    color: #222;
    font-size: 15px;
    letter-spacing: 0.06em;
    user-select: all;
}

/* Password field with its show/hide button ---------------------------------------------------------- */

.password-field {
    position: relative;
}

/* Room for the button; the selector has to outweigh the theme's own padding rule for these inputs. */
.myaccount-box-wrapper .content-modal-box .account-form-box .single-input .password-field input {
    padding-right: 48px;
}

.myaccount-content .password-field input {
    padding-right: 48px;
}

.myaccount-content .password-field--copyable input {
    padding-right: 92px;
}

.password-field__toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    padding: 0;
    border: 0;
    background: none;
    color: #666;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.password-field__toggle[hidden] {
    display: none;
}

.password-field__toggle:hover,
.password-field__toggle:focus-visible,
.password-field__toggle[aria-pressed="true"] {
    color: #000;
}

.password-field__copy {
    position: absolute;
    top: 0;
    right: 46px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    padding: 0;
    border: 0;
    background: none;
    color: #666;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.password-field__copy[hidden] {
    display: none;
}

.password-field__copy:hover,
.password-field__copy:focus-visible {
    color: #000;
}

.password-generator__trigger {
    padding: 0;
    border: 0;
    background: none;
    color: #222;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.password-generator__trigger:hover,
.password-generator__trigger:focus-visible {
    color: #dcb14a;
}

.account-form-box button.btn {
    cursor: pointer;
}

/* Shared form controls ---------------------------------------------------------------------------- */

/*
 * The selection list, the date and time field, the number field, the slider, the checkbox and the switch of the site. Each is
 * rendered by a tag helper of its own (select-field, datetime-field, number-field, range-field and switch-field, in the TagHelpers
 * folder), so no view draws one itself and they look alike wherever they stand. The real form element stays
 * in the page for the post, the keyboard and screen readers; what is seen is drawn here.
 */

/* Selection list: a select in the look of a text field. Once the script has run, a button stands in its place
   and opens a list drawn by the site (site.js). */

.select-field,
.datetime-field {
    position: relative;
    display: block;
    width: 100%;
}

/* The number field: the input in a frame like the other fields, between a minus and a plus of the site; the arrows
   the browser draws in a number input are hidden. A field without buttons keeps the frame alone, a small one is the
   field of a row of a table or of a tool. */
.number-field {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid #ddd;
    background: #fff;
    transition: border-color 0.2s;
}

.number-field:focus-within {
    border-color: #dcb14a;
}

.number-field:has(.input-validation-error) {
    border-color: #dc3545;
}

/* The theme frames every input of the forms of the panel, and the bar of a list frames its own; inside the number
   field the frame is the field's, so these selectors name those places to outweigh them. */
.myaccount-content form .single-input-item .number-field input.number-field__input,
.cp-content .cp-filters .single-input-item .number-field input.number-field__input,
.number-field input.number-field__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 12px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #222;
    font-size: 14px;
    line-height: inherit;
    -moz-appearance: textfield;
    appearance: textfield;
}

.myaccount-content form .single-input-item .number-field input.number-field__input:focus,
.cp-content .cp-filters .single-input-item .number-field input.number-field__input:focus,
.number-field input.number-field__input:focus {
    border: 0;
    outline: 0;
}

/* In the bar of a list the field has the rounded frame of the other fields of the bar. */
.cp-content .cp-filters .number-field {
    height: 48px;
    border-color: #e2e2e2;
    border-radius: 8px;
    overflow: hidden;
}

.cp-content .cp-filters .number-field:focus-within {
    border-color: #dcb14a;
}

.number-field input.number-field__input::-webkit-outer-spin-button,
.number-field input.number-field__input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.number-field__step {
    flex: 0 0 40px;
    padding: 0;
    border: 0;
    background: none;
    color: #555;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}

.number-field__step:hover {
    background: #f7f7f7;
    color: #000;
}

.number-field__step:disabled,
.number-field:has(.number-field__input:disabled) .number-field__step {
    background: none;
    color: #bbb;
    cursor: default;
}

.number-field--small {
    display: inline-flex;
    width: auto;
}

.number-field--small input.number-field__input {
    flex: 0 0 64px;
    width: 64px;
    padding: 6px 8px;
}

.number-field--small .number-field__step {
    flex-basis: 30px;
}

/* The slider keeps the browser's step marks, touch interaction and keyboard controls in the site's accent colour. */
.myaccount-content form .single-input-item input.range-field,
.cp-content .cp-filters .single-input-item input.range-field,
input.range-field {
    display: block;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    accent-color: #dcb14a;
    appearance: auto;
    cursor: pointer;
}

.myaccount-content form .single-input-item input.range-field:focus-visible,
.cp-content .cp-filters .single-input-item input.range-field:focus-visible,
input.range-field:focus-visible {
    box-shadow: 0 0 0 2px #dcb14a;
}

input.range-field:disabled {
    opacity: 0.5;
    cursor: default;
}

/* The file field: a button like the other fields with the name of the chosen file, the icon on its right; a file
   dragged over it marks it. */
.file-field {
    position: relative;
    display: block;
    width: 100%;
}

.file-field__name {
    display: block;
    overflow: hidden;
    color: #777;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-field.has-file .file-field__name {
    color: #222;
}

.file-field__button > i {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
}

.file-field.is-dragover button.file-field__button,
button.file-field__button:focus {
    border-color: #dcb14a;
    outline: 0;
}

.file-field.is-dragover button.file-field__button {
    background: #fffaf0;
}

.file-field.input-validation-error button.file-field__button {
    border-color: #dc3545;
}

/* The select and the button look the same while the list is closed, and the button of a date and time field
   looks like them. The selectors name the elements so these rules outweigh the theme's own for a select and
   a button. */
select.select-field__native,
button.select-field__button,
button.datetime-field__button,
button.file-field__button {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 12px 40px 12px 10px;
    border: 1px solid #ddd;
    border-radius: 0;
    background: #fff;
    color: #222;
    font-size: 14px;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* The theme greys a list while it has the focus and insists on it. */
select.select-field__native:focus {
    background: #fff !important;
}

/* Like a text field, the list shows the focus by its border, however the focus came to it. */
select.select-field__native:focus,
button.select-field__button:focus,
button.datetime-field__button:focus,
.select-field.is-open button.select-field__button,
.datetime-field.is-open button.datetime-field__button {
    border-color: #dcb14a;
    outline: 0;
}

select.select-field__native.input-validation-error,
select.input-validation-error ~ button.select-field__button,
input.input-validation-error ~ button.datetime-field__button {
    border-color: #dc3545;
}

select.select-field__native:disabled,
button.select-field__button:disabled,
button.datetime-field__button:disabled {
    background-color: #f4f5f7;
    color: #777;
    cursor: default;
}

/* The arrow at the right edge; it turns while the list is open. */
.select-field::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 1.5px solid #222;
    border-bottom: 1.5px solid #222;
    pointer-events: none;
    transform: rotate(45deg);
    transition: transform 0.2s, margin-top 0.2s;
}

.select-field.is-open::after {
    margin-top: -2px;
    transform: rotate(225deg);
}

/* A list of several choices: a field around its button holds what is ticked as chips (site.js), as the colours of the
   product form do; the rest of the field opens the list, and the cross at its end, where the arrow was, takes them all
   out. The chips and the cross share their look with those of the colours. */
.select-field__field {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 6px 44px 6px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
}

.select-field.is-open .select-field__field,
.select-field__field:focus-within {
    border-color: #dcb14a;
}

select.input-validation-error ~ .select-field__field {
    border-color: #dc3545;
}

.select-field__chips {
    display: contents;
}

.select-field__field button.select-field__button,
.select-field__field button.select-field__button:disabled {
    flex: 1 1 40px;
    align-self: stretch;
    width: auto;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
}

.select-field--multiple.has-value::after {
    display: none;
}

/* Behind the button the select stays where it is, unseen: it still takes the focus a label sends it and
   hands it on to the button. The input of a date and time field does the same. */
.select-field.is-enhanced .select-field__native,
.datetime-field.is-enhanced .datetime-field__native {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.select-field__value,
.datetime-field__value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: none;
}

/* An option without a text keeps the height of the button. */
.select-field__value:empty::before {
    content: "\00a0";
}

/* The choice that stands for "nothing chosen" (an option with an empty value) is toned down, and so is the
   invitation an empty date and time field shows. */
.select-field__button.is-empty .select-field__value,
.datetime-field__button.is-empty .datetime-field__value {
    color: #777;
}

/* The open list is placed by the script and lies above the window of the control panel (1055), below the
   toasts. */
.select-field__list {
    position: fixed;
    z-index: 1070;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #e5e5e5;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    color: #222;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    animation: field-panel-in 0.12s ease-out;
}

.select-field__list[hidden] {
    display: none;
}

/* A long list stands in a panel with its search box above it: the panel is placed and framed, the list scrolls
   inside it. The panel lies at the end of the page while it is open, so the field styles of a form do not reach the
   box; it has its own. */
.select-field__panel {
    position: fixed;
    z-index: 1070;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    color: #222;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    animation: field-panel-in 0.12s ease-out;
}

.select-field__panel[hidden],
.select-field__search[hidden],
.select-field__no-match[hidden],
.select-field__option[hidden],
.select-field__group[hidden] {
    display: none;
}

.select-field__panel .select-field__list {
    position: static;
    border: 0;
    box-shadow: none;
    animation: none;
}

.select-field__search {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.select-field__panel .select-field__search-input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fff;
    color: #222;
    font-size: 14px;
    line-height: 1.4;
}

.select-field__panel .select-field__search-input:focus {
    border-color: #dcb14a;
    color: #222;
    outline: 0;
}

/* Said when the search leaves no option */
.select-field__no-match {
    padding: 12px 14px;
    color: #777;
}

.select-field__option {
    position: relative;
    padding: 10px 40px 10px 14px;
    overflow-wrap: anywhere;
    cursor: pointer;
}

/* The option under the pointer or reached with the arrow keys */
.select-field__option.is-active {
    background-color: #f6f1e3;
}

/* The option that is chosen carries a tick. */
.select-field__option[aria-selected="true"] {
    font-weight: 500;
}

.select-field__option[aria-selected="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 17px;
    width: 6px;
    height: 11px;
    margin-top: -7px;
    border: solid #a67c1e;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.select-field__option[aria-disabled="true"] {
    color: #aaa;
    cursor: default;
}

/* The heading of a group of options (optgroup) and the options under it */
.select-field__group-label {
    padding: 10px 14px 4px;
    color: #777;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.select-field__group .select-field__option {
    padding-left: 26px;
}

@keyframes field-panel-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Date and time field: an input in the look of a text field. Once the script has run, a button stands in its
   place and opens a calendar with a column each for the hour and the minute (site.js). What is chosen is
   marked in the accent colour of the site, today by a frame in it. */

input.datetime-field__native {
    display: block;
    width: 100%;
    padding: 12px 10px;
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fff;
    color: #222;
    font-size: 14px;
    line-height: inherit;
    accent-color: #dcb14a;
}

input.datetime-field__native:focus {
    border-color: #dcb14a;
}

.datetime-field__icon {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    pointer-events: none;
}

/* The open panel is placed by the script and lies where the list of a selection list does. */
.datetime-field__panel {
    position: fixed;
    z-index: 1070;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    color: #222;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    outline: 0;
    animation: field-panel-in 0.12s ease-out;
}

.datetime-field__panel[hidden] {
    display: none;
}

/* Every part that can be pressed is a button; the theme's own look and slow transition of a button give way. */
.datetime-field__panel button {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.datetime-field__body {
    display: flex;
}

.datetime-field__calendar {
    padding: 20px 24px 24px;
}

/* The month on display and the two arrows that turn to its neighbours */
.datetime-field__header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}

.datetime-field__panel .datetime-field__title {
    margin: 0 auto 0 -8px;
    padding: 6px 8px;
    font-size: 16px;
    font-weight: 500;
}

/* A small arrow after the title says that it opens something: the months of the year. */
.datetime-field__title::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 2px 3px 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.datetime-field__title[aria-expanded="true"]::after {
    margin-bottom: 0;
    transform: rotate(225deg);
}

.datetime-field__step {
    position: relative;
    width: 36px;
    height: 36px;
}

.datetime-field__step::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -2px;
    border-bottom: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.datetime-field__step--next::before {
    margin-left: -6px;
    transform: rotate(225deg);
}

.datetime-field__weekdays,
.datetime-field__days {
    display: grid;
    grid-template-columns: repeat(7, 40px);
    gap: 6px;
}

.datetime-field__weekdays {
    margin-bottom: 6px;
    color: #777;
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
}

.datetime-field__weekdays[hidden] {
    display: none;
}

.datetime-field__day,
.datetime-field__time {
    height: 40px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* The days of the neighbouring months that fill the first and the last week */
.datetime-field__panel .datetime-field__day.is-outside {
    color: #aaa;
}

/* The months of a year take the place of the weekdays and the days and fill it. */
.datetime-field__days.is-months {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 316px;
    height: 304px;
}

.datetime-field__month {
    text-transform: capitalize;
}

.datetime-field__panel .datetime-field__title:hover,
.datetime-field__panel .datetime-field__step:hover,
.datetime-field__panel .datetime-field__day:hover,
.datetime-field__panel .datetime-field__month:hover,
.datetime-field__panel .datetime-field__time:hover {
    background-color: #f6f1e3;
}

.datetime-field__panel .is-today {
    border-color: #dcb14a;
}

.datetime-field__panel [aria-pressed="true"],
.datetime-field__panel [aria-pressed="true"]:hover,
.datetime-field__panel .datetime-field__day.is-outside[aria-pressed="true"] {
    border-color: #dcb14a;
    background-color: #dcb14a;
    color: #222;
    font-weight: 500;
}

/* The columns of the hour and the minute are as tall as the calendar beside them and scroll inside it. */
.datetime-field__times {
    display: flex;
    gap: 8px;
    padding: 20px 20px 24px;
    border-left: 1px solid #eee;
}

.datetime-field__column {
    display: flex;
    flex-direction: column;
    width: 56px;
}

.datetime-field__unit {
    min-height: 36px;
    margin-bottom: 14px;
    color: #777;
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 36px;
    text-align: center;
    text-transform: uppercase;
}

.datetime-field__track {
    position: relative;
    flex: 1 1 auto;
}

.datetime-field__scroll {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.datetime-field__scroll::-webkit-scrollbar {
    display: none;
}

.datetime-field__panel .datetime-field__time {
    display: block;
    width: 100%;
    margin-bottom: 6px;
}

.datetime-field__panel .datetime-field__time:last-child {
    margin-bottom: 0;
}

/* Below the calendar: empty the field, go to today, and the button that closes the panel */
.datetime-field__footer {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 24px;
    border-top: 1px solid #eee;
}

.datetime-field__panel .datetime-field__link {
    padding: 6px 0;
    color: #666;
}

.datetime-field__panel .datetime-field__link:hover {
    color: #222;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.datetime-field__panel .datetime-field__done {
    margin-left: auto;
    padding: 8px 24px;
    border-color: #222;
    background-color: #222;
    color: #fff;
    font-weight: 500;
}

.datetime-field__panel .datetime-field__done:hover {
    border-color: #dcb14a;
    background-color: #dcb14a;
}

/* In a narrow window the columns stand under the calendar. */
@media (max-width: 575px) {
    .datetime-field__body {
        flex-direction: column;
    }

    .datetime-field__calendar {
        padding: 16px;
    }

    .datetime-field__weekdays,
    .datetime-field__days {
        grid-template-columns: repeat(7, minmax(0, 40px));
        justify-content: center;
    }

    .datetime-field__days.is-months {
        width: auto;
    }

    .datetime-field__times {
        justify-content: center;
        height: 220px;
        padding: 12px 16px 16px;
        border-top: 1px solid #eee;
        border-left: 0;
    }

    .datetime-field__unit {
        margin-bottom: 6px;
    }

    .datetime-field__footer {
        padding: 12px 16px;
    }
}

/* A time field has the columns only: they get the height the calendar would give them, and no line beside or above. */
.datetime-field__panel--time .datetime-field__times {
    height: 300px;
    border-top: 0;
    border-left: 0;
}

/* Checkbox and switch: a label with the real checkbox, the mark drawn in its place and the text */

/* The theme gives every label a margin below; the spacing classes of a view (mt-10, mb-3) stay in force. */
.switch-field {
    position: relative;
    display: inline-flex;
    gap: 10px;
    margin-bottom: 0;
    cursor: pointer;
}

.switch-field {
    align-items: center;
}

/* The real checkbox keeps its place in the page, unseen. The selectors name the elements so these rules
   outweigh the ones the theme has for the inputs of its forms. */
label.switch-field input.switch-field__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.switch-field__track {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    background-color: #bbb;
    transition: background-color 0.2s;
}

.switch-field__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    transition: transform 0.2s;
}

.switch-field__input:checked + .switch-field__track {
    background-color: #222;
}

.switch-field__input:checked + .switch-field__track::after {
    transform: translateX(18px);
}

.switch-field__input:focus-visible + .switch-field__track {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

.switch-field__input:disabled ~ span {
    opacity: 0.5;
    cursor: default;
}

/* The checkbox: a box that is ticked when it is checked, and filled with a line while a "select all" stands for
   only some of its rows (indeterminate). */
.checkbox-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    cursor: pointer;
}

label.checkbox-field input.checkbox-field__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.checkbox-field__box {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1px solid #999;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.2s, border-color 0.2s;
}

.checkbox-field__input:checked + .checkbox-field__box,
.checkbox-field__input:indeterminate + .checkbox-field__box {
    border-color: #222;
    background-color: #222;
}

.checkbox-field__input:checked + .checkbox-field__box::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-field__input:indeterminate + .checkbox-field__box::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 4px;
    width: 10px;
    height: 2px;
    background-color: #fff;
}

.checkbox-field__input:focus-visible + .checkbox-field__box {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

/* The radio button: a ring with a dot once it is chosen, one choice of a group; each stands on a line of its own, its
   text beside the ring, wrapping under itself. */
.radio-field {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
    cursor: pointer;
}

label.radio-field input.radio-field__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.radio-field__mark {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1px solid #999;
    border-radius: 50%;
    background-color: #fff;
    transition: border-color 0.2s;
}

.radio-field__input:checked + .radio-field__mark {
    border-color: #222;
}

.radio-field__input:checked + .radio-field__mark::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background-color: #222;
}

.radio-field__input:focus-visible + .radio-field__mark {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

.radio-field__input:disabled ~ span {
    opacity: 0.5;
    cursor: default;
}

.radio-field__text {
    min-width: 0;
    line-height: 20px;
}

/* The palette of the color field (color-fields.js): one panel at the end of the page, under the button that opened it.
   A swatch of a field without a color is striped. */
.color-field__panel {
    position: fixed;
    z-index: 11000;
    width: 230px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
}

.color-field__palette {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
    margin-bottom: 10px;
}

.color-field__palette button {
    width: 21px;
    height: 21px;
    padding: 0;
    border: 1px solid #bbb;
    border-radius: 3px;
    cursor: pointer;
}

.color-field__palette button:focus-visible {
    outline: 2px solid #dcb14a;
    outline-offset: 1px;
}

.color-field__panel input {
    width: 100%;
    height: 32px;
    padding: 4px 8px;
    border: 1px solid #bbb;
}

.color-field__swatch--empty {
    background-color: #fff;
    background-image: repeating-linear-gradient(45deg, #e5e5e5 0, #e5e5e5 4px, #fff 4px, #fff 8px);
}

@media (prefers-reduced-motion: reduce) {
    .select-field::after,
.switch-field__track,
.switch-field__track::after,
.checkbox-field__box,
.radio-field__mark {
        transition: none;
    }

    .select-field__list,
    .select-field__panel,
    .datetime-field__panel {
        animation: none;
    }

    .datetime-field__panel button,
    .datetime-field__title::after {
        transition: none;
    }
}

/* Footer: the working hours ------------------------------------------------------------------------- */

/* The days on the left, their hours on the right; the block keeps to the side of its column on wider screens. */
.footer-hours {
    display: inline-block;
    min-width: 220px;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
}

.footer-hours__title,
.footer-hours__subtitle {
    margin: 0 0 6px;
    color: #222;
    font-size: 15px;
    font-weight: 600;
}

.footer-hours__subtitle {
    margin-top: 12px;
    font-size: 14px;
}

/* Whether the company is open at this moment: written by the script of the site, by the clock of the visitor. */
.footer-hours__status {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
}

/* The clock keeps its own colour, whichever the answer is. */
.footer-hours__status i {
    margin-right: 6px;
    color: #cd995c;
    font-size: 16px;
    vertical-align: -2px;
}

.footer-hours__status.is-open {
    color: #1a7f37;
}

.footer-hours__status.is-closed {
    color: #b42318;
}

.footer-hours__list {
    margin: 0;
}

.footer-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.footer-hours__row dt {
    color: #777;
    font-weight: 400;
}

.footer-hours__row dd {
    margin: 0;
    color: #222;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/*
 * Signing out is a form post, not a link, so the last entry of the account menu is a button made to
 * look like the links above it.
 */
.myaccount-tab-menu form {
    margin: 0;
}

.myaccount-tab-menu a {
    text-transform: none;
}

.myaccount-tab-menu button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    background: transparent;
    color: #222;
    font-weight: 500;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.myaccount-tab-menu button:hover,
.myaccount-tab-menu button:focus-visible {
    background-color: #dcb14a;
    border-color: #dcb14a;
    color: #fff;
}

.myaccount-tab-menu a i,
.myaccount-tab-menu button i {
    display: inline-block;
    width: 25px;
    text-align: center;
}

/* The theme pulls a form up by 20px to meet its heading; the second form on the page has no heading. */
.myaccount-content form + form {
    margin-top: 0;
}

.myaccount-content form .single-input-item input[readonly] {
    background-color: #f4f5f7;
    color: #777;
}

.myaccount-content .welcome .link-button {
    padding: 0;
    border: 0;
    background: none;
    color: #222;
    font: inherit;
    cursor: pointer;
}

.myaccount-content .welcome .link-button:hover {
    color: #dcb14a;
}

.myaccount-content .welcome form {
    display: inline;
    margin: 0;
}

/* Keyboard focus, which the theme leaves to the browser default in some places and removes in others */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

/* Header menu: the theme sizes its navigation for a full-width header row; here it shares the row with the logo */

.site-menu > ul {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-menu > ul > li {
    margin: 0 24px 0 0;
}

.site-menu > ul > li > a {
    padding: 12px 2px;
}

.site-menu .submenu {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
    min-width: 220px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
    z-index: 20;
}

/* The theme opens a submenu on hover only; the keyboard needs it as well */

.site-menu > ul > li.has-children:focus-within > .submenu {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

/* A menu heading without a link, in the panel of small screens */

.offcanvas-navigation__heading {
    display: block;
    padding-top: 18px;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

/* Content pages: the theme resets the spacing of the elements an editor produces */

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
    margin: 1.4em 0 0.6em;
}

.page-content p,
.page-content ul,
.page-content ol,
.page-content table {
    margin-bottom: 1em;
}

.page-content ul,
.page-content ol {
    padding-left: 1.4em;
}

.page-content ul {
    list-style: disc;
}

.page-content ol {
    list-style: decimal;
}

.page-content img {
    max-width: 100%;
    height: auto;
}

.page-content a {
    text-decoration: underline;
}

/* Control panel: the account page's frame with forms, tables and lists of its own */

.cp-content form {
    margin-top: 0;
}

.cp-content .title {
    margin-bottom: 20px;
}

.cp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.cp-toolbar .title {
    margin-bottom: 0;
}

.cp-subtitle {
    margin: 40px 0 10px;
}

/* Tabs: a row of plain labels on one line; the open tab is the one that is underlined */

.cp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    margin-bottom: 24px;
    border-bottom: 1px solid #ddd;
}

.cp-tabs a {
    margin-bottom: -1px;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
    color: #666;
    font-weight: 500;
}

.cp-tabs a:hover,
.cp-tabs a:focus-visible {
    color: #222;
}

.cp-tabs a.active,
.cp-tabs a[aria-current="page"] {
    border-bottom-color: #222;
    color: #222;
}

/* A tab of a form that holds a refused field */
.cp-tabs a.has-error,
.cp-tabs a.has-error.active {
    color: #b3261e;
}

.cp-tabs a.has-error.active {
    border-bottom-color: #b3261e;
}

.cp-tabs a.has-error::after {
    content: " !";
    font-weight: 700;
}

/* The foot of a list (_ControlPanelPager): what the list found on the left; the number of rows a page and the way
   through the pages on the right, the page typed in between the arrows. A narrow screen stacks them. */
.cp-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebebeb;
}

.cp-pager__info {
    margin: 0;
    color: #555;
    font-size: 14px;
}

.cp-pager__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.cp-pager__group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.cp-pager__button,
.cp-pager__input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background-color: #fff;
    color: #222;
    font-size: 14px;
    line-height: 1;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cp-pager__button i {
    font-size: 16px;
}

a.cp-pager__button:hover,
a.cp-pager__button:focus-visible {
    border-color: #222;
    color: #222;
}

.cp-pager__button.is-active {
    border-color: #f0f0f0;
    background-color: #f0f0f0;
    font-weight: 600;
}

.cp-pager__button[aria-disabled="true"] {
    color: #c4c4c4;
    cursor: default;
}

.cp-pager__input {
    width: 64px;
    padding: 0 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cp-pager__input:focus {
    border-color: #222;
    outline: none;
}

@media (max-width: 767.98px) {
    .cp-pager,
    .cp-pager__controls {
        flex-direction: column;
        align-items: flex-start;
    }
}

.cp-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: #222;
    text-decoration: underline;
}

.cp-link-button:hover {
    color: #b3261e;
}

/* Working hours (the settings of the panel): the rows of hours of the chosen grouping and the closed periods. A row
   is a box with its name on the left and its fields on the right; in a narrow window the fields go under the name. */
.working-hours__group,
.working-hours__period {
    display: grid;
    gap: 12px 16px;
    align-items: end;
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
}

.working-hours__group {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

.working-hours__period {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

/* The button of the poster of the hours, its note beside it. */
.working-hours__poster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.working-hours__group[hidden],
.working-hours__period[hidden],
.working-hours__empty[hidden] {
    display: none;
}

.working-hours__name {
    align-self: center;
}

.working-hours__name strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

/* The labels of a row are those of every other field of the panel. */
.working-hours__field label,
.working-hours__closed > label {
    display: block;
    margin-bottom: 4px;
}

/* The switch of a closed day and the remove button stand at the height of the fields beside them. */
.working-hours__switch,
.working-hours__remove {
    min-height: 46px;
}

.working-hours__switch {
    display: flex;
    align-items: center;
}

/* A closed day has no hours: its fields are greyed out. */
.working-hours__group.is-closed .working-hours__field {
    opacity: 0.45;
}

.working-hours__mode {
    max-width: 320px;
    margin-bottom: 16px;
}

.working-hours__add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 18px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #222;
    cursor: pointer;
}

.working-hours__add:hover,
.working-hours__add:focus-visible {
    border-color: #222;
}

.working-hours__remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid #f0c4c1;
    background-color: #fff;
    color: #b3261e;
    cursor: pointer;
}

.working-hours__remove:hover,
.working-hours__remove:focus-visible {
    border-color: #b3261e;
}

.working-hours__empty {
    padding: 20px;
    border: 1px dashed #ddd;
    color: #777;
}

/* The rows follow the width of their group, not of the window: in a narrow group the name (or the title of a closed
   period) takes a line of its own and the fields stand two by two below it. */
.working-hours__rows {
    container-type: inline-size;
}

@container (max-width: 640px) {
    .working-hours__group,
    .working-hours__period {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .working-hours__name,
    .working-hours__period > .working-hours__field:first-child {
        grid-column: 1 / -1;
    }
}

/* The actions of a row of a list: an icon each. The name of the action is the tooltip and what a screen reader says. */
.cp-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background-color: #fff;
    color: #222;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cp-icon-button:hover,
.cp-icon-button:focus-visible {
    border-color: #dcb14a;
    color: #7a5c0f;
}

.cp-icon-button--danger:hover,
.cp-icon-button--danger:focus-visible {
    border-color: #b3261e;
    color: #b3261e;
}

/* An action that cannot be taken here: faded, with the reason in its title, which the pointer still shows. */
.cp-icon-button[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
}

.cp-icon-button[aria-disabled="true"]:hover {
    border-color: #e2e2e2;
    color: #222;
}

/* The theme styles text inputs of the account page only; the panel's forms have text areas as well. Lists,
   checkboxes and switches are the shared form controls. */

.cp-form .single-input-item textarea {
    width: 100%;
    padding: 12px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

.cp-form .single-input-item textarea:focus {
    border-color: #dcb14a;
}

.cp-form label.required::after {
    content: " *";
    color: #b3261e;
}

.cp-form fieldset {
    margin: 28px 0 10px;
}

/* The space above a group is the margin of the group alone; the theme gives its heading one too. */
.cp-form legend {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 500;
}

/* The first group of a form starts at its top, in a page as in the window of the panel. */
.cp-form > fieldset:first-of-type {
    margin-top: 0;
}

/* The first group of a tab starts right under the tabs, whose margin is the space between them; the groups after it
   keep theirs. */
.cp-form .tab-pane > fieldset:first-child,
.cp-form .tab-pane > div:first-child > fieldset:first-child,
.cp-form .tab-pane > fieldset:first-child > legend,
.cp-form .tab-pane > div:first-child > fieldset:first-child > legend {
    margin-top: 0;
}

/* A field whose text is copied with the button beside it (the key of an integration, shown once). */
.cp-copy-field {
    display: flex;
    gap: 8px;
}

.cp-copy-field input {
    flex: 1 1 auto;
    min-width: 0;
}

/* An example to copy: what a program sends, as it is written. */
.cp-example {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    background-color: #fafafa;
    color: #222;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
}

/* A form of one button that sits in a line of text. */
.cp-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* A sentence under the heading of a group of fields that says what the group is for */
.cp-form .cp-fieldset-hint {
    margin: -4px 0 16px;
}

/* Room for the button that shows what was typed into a secret field */
.cp-form .single-input-item .password-field input {
    padding-right: 48px;
}

/* The page assistant: the box in the page form from which Gemini is asked to write or to translate the texts of
   a tab. What it does stands on the left or on top, the button that asks at the right edge; while Gemini is at
   work the button says so and cannot be pressed again. */

.cp-assistant {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 24px;
    padding: 16px 20px;
    border: 1px solid #eadfbf;
    border-left: 4px solid #dcb14a;
    background-color: #fbf8ef;
}

.cp-assistant--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cp-assistant__text strong,
.cp-assistant__text .field-hint {
    display: block;
}

.cp-assistant__text strong {
    font-weight: 500;
}

.cp-assistant__text .field-hint {
    margin-top: 2px;
}

.cp-assistant__text a {
    color: #222;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cp-assistant__row {
    display: flex;
    gap: 12px;
}

.cp-assistant__row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-size: 14px;
}

.cp-assistant .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.cp-assistant .btn:disabled {
    opacity: 0.75;
    cursor: progress;
}

/* A small ring turns in front of the text of the button while the answer is awaited. */
.cp-assistant .btn.is-busy::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 10px -2px 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cp-assistant-turn 0.8s linear infinite;
}

@keyframes cp-assistant-turn {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 767px) {
    .cp-assistant--inline,
    .cp-assistant__row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-assistant .btn.is-busy::before {
        animation: none;
    }
}

/* An on/off of a form that stands on a line of its own (the "Active" of a tab, of a page or of a menu item): every
   on/off of the site is a switch; the site has no checkboxes. */
.cp-form .cp-toggle {
    display: flex;
    width: fit-content;
    margin-bottom: 20px;
}

/* The "Closed" of a row of working hours sits in the row. */
.working-hours__closed .switch-field {
    margin: 0;
}

/* The editor of a content field (CKEditor 5) */

.cp-form .ck-editor__editable_inline {
    min-height: 320px;
    max-height: 60vh;
}

/* The theme strips lists of their markers everywhere; in written content, in the editor and on the site, a list
   looks like one. */
.ck-content ul,
.ck-content ol {
    margin: 0 0 1em;
    padding-left: 1.6em;
}

.ck-content ul {
    list-style: disc;
}

.ck-content ol {
    list-style: decimal;
}

/* The editor puts its balloons and dropdowns at the end of the page; they have to lie above the window of the
   control panel (1055) and stay below the toasts. */
body {
    --ck-z-panel: 1080;
}

/* The way back from a form that is a page of its own */

.cp-back {
    margin-bottom: 16px;
}

.cp-back a {
    color: #666;
}

.cp-back a:hover,
.cp-back a:focus-visible {
    color: #222;
    text-decoration: underline;
}

/* One row of the settings page, a switch laid out the other way round: what the setting does on the left, the
   switch at the right edge */

.switch-field.cp-setting {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}

.cp-setting strong,
.cp-setting .field-hint {
    display: block;
}

.cp-setting strong {
    font-weight: 500;
}

/* The window of the add and edit forms */

.cp-modal .modal-header {
    padding: 16px 24px;
}

.cp-modal .modal-title {
    margin: 0;
}

/* The body borrows the field styles of the panel's content area, not its frame. */
.cp-modal .modal-body {
    padding: 24px;
    border: 0;
}

/* The button that saves stays in sight while a long form scrolls */
.cp-modal .cp-form__actions {
    position: sticky;
    bottom: -24px;
    margin: 10px -24px -24px;
    padding: 14px 24px;
    border-top: 1px solid #eee;
    background-color: #fff;
}

/* Form buttons sit at the right edge, the action that saves last */

.cp-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 24px;
    margin-top: 10px;
}

/* User avatar controls share the control panel buttons and spacing. The avatar is a square with rounded corners, as
   every picture of the panel is; it opens large like them (lightbox.js). */
.user-avatar { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.user-avatar__preview { border-radius: 8px; object-fit: cover; }
.user-avatar__preview[hidden] { display: none; }
.user-avatar [data-avatar-filename] { overflow-wrap: anywhere; max-width: 100%; }

/* Control panel: the hero ------------------------------------------------------------------------------------- */

/* A row of the slide list: the picture, then the title. */
.cp-hero-slide {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
}

.cp-hero-slide__picture {
    flex: 0 0 96px;
    width: 96px;
    height: 54px;
    object-fit: cover;
    background-color: #f1f1f1;
}

.cp-hero-slide__title {
    white-space: normal;
}

.cp-hero-period {
    white-space: nowrap;
}

/* The arrows of a row: the first slide does not go up, the last not down. */
.cp-icon-button:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* The picture an address field holds, under the field. */
.media-url-preview {
    display: block;
    max-width: 320px;
    max-height: 180px;
    margin-top: 8px;
    border: 1px solid #eee;
    object-fit: cover;
}

.media-url-preview[hidden] {
    display: none;
}

/* Home page: the hero ------------------------------------------------------------------------------------------ */

.hero {
    position: relative;
    overflow: hidden;
    background-color: #111;
}

/* The heights: the whole window below the header (90 pixels), or a large or medium band. */
.hero--full {
    height: calc(100vh - 90px);
    min-height: 480px;
}

.hero--large {
    height: 640px;
}

.hero--medium {
    height: 460px;
}

@media (max-width: 991px) {
    .hero--large {
        height: 520px;
    }

    .hero--medium {
        height: 400px;
    }
}

@media (max-width: 767px) {
    .hero--full,
    .hero--large {
        height: 480px;
        min-height: 0;
    }

    .hero--medium {
        height: 360px;
    }
}

/* "Slide": the slides stand side by side and the track moves. "Fade": they lie over one another. */
.hero__track {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease;
}

.hero__slide {
    position: relative;
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    height: 100%;
}

.hero--fade .hero__track {
    position: relative;
    display: block;
    transition: none;
}

.hero--fade .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero--fade .hero__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The layer that darkens the picture, so the texts on it can be read. */
.hero__overlay {
    position: absolute;
    inset: 0;
    background-color: #000;
    opacity: 0;
}

.hero__overlay--10 { opacity: 0.1; }
.hero__overlay--20 { opacity: 0.2; }
.hero__overlay--30 { opacity: 0.3; }
.hero__overlay--40 { opacity: 0.4; }
.hero__overlay--50 { opacity: 0.5; }
.hero__overlay--60 { opacity: 0.6; }
.hero__overlay--70 { opacity: 0.7; }
.hero__overlay--80 { opacity: 0.8; }

.hero__content {
    position: relative;
    z-index: 1;
}

.hero__text {
    max-width: 860px;
    padding: 0 56px;
}

.hero__slide--center .hero__text {
    margin: 0 auto;
    text-align: center;
}

.hero__slide--right .hero__text {
    margin-left: auto;
    text-align: right;
}

/* Hero typography; the home page loads the regular and bold font weights. */
.hero__title,
.hero__subtitle {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    opacity: 0.9;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    overflow-wrap: anywhere;
}

.hero__title {
    margin-bottom: 22px;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.hero__subtitle {
    margin-bottom: 28px;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    white-space: pre-line;
    text-wrap: pretty;
}

@media (max-width: 991px) {
    .hero__title {
        font-size: 60px;
    }

    .hero__subtitle {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .hero__text {
        padding: 0 24px;
    }

    .hero__title {
        margin-bottom: 16px;
        font-size: clamp(36px, 9vw, 44px);
    }

    .hero__subtitle {
        font-size: clamp(24px, 6vw, 28px);
    }
}

/* Light texts on a dark picture, dark texts on a light one. */
.hero__slide--light .hero__title,
.hero__slide--light .hero__subtitle {
    color: #fff;
}

.hero__slide--dark .hero__title,
.hero__slide--dark .hero__subtitle {
    color: #111;
}

.hero__slide--light .hero__button {
    background-color: #fff;
    color: #111;
}

.hero__slide--dark .hero__button {
    background-color: #111;
    color: #fff;
}

.hero__slide .hero__button:hover,
.hero__slide .hero__button:focus-visible {
    background-color: #dcb14a;
    color: #fff;
}

/* The arrows at the sides and, at the bottom, the pause button and a dot for every slide. */
.hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: #111;
    font-size: 18px;
    line-height: 44px;
    text-align: center;
    transform: translateY(-50%);
}

.hero__arrow--previous {
    left: 16px;
}

.hero__arrow--next {
    right: 16px;
}

.hero__controls {
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hero__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.55);
}

.hero__dot.is-active {
    background-color: #dcb14a;
}

.hero__pause {
    padding: 0 4px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

.hero__arrow:hover,
.hero__arrow:focus-visible,
.hero__pause:hover,
.hero__pause:focus-visible,
.hero__dot:hover,
.hero__dot:focus-visible {
    opacity: 0.85;
}

.hero__arrow:focus-visible,
.hero__pause:focus-visible,
.hero__dot:focus-visible,
.hero__button:focus-visible {
    outline: 2px solid #dcb14a !important;
    outline-offset: 2px;
}

@media (max-width: 575px) {
    .hero__arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__track,
.hero--fade .hero__slide {
        transition: none;
    }
}

/* Forms: a part that waits for a choice of another field (data-show-when) is out of the way while hidden. */
[data-show-when][hidden] {
    display: none !important;
}

/* An address field with two buttons: the upload and the library. */
.media-url-field {
    flex-wrap: wrap;
}

video.media-url-preview {
    background-color: #111;
}

/* Control panel: the shared texts of the hero, and the marks of a row of its list */
.cp-hero-shared__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cp-hero-slide__media {
    position: relative;
    flex: 0 0 96px;
}

.cp-hero-slide__badge {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 2px 4px;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.cp-hero-slide__shared {
    color: #777;
    font-style: italic;
}

/* Home page: the video of a slide covers it as a picture does; the shared texts stand above the slides. */
video.hero__image {
    background-color: #111;
}

.hero__shared {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.hero.is-shared .hero__shared {
    opacity: 1;
    visibility: visible;
}

/* Only the texts take a press; the rest of the layer lets it through to the slide. */
.hero.is-shared .hero__shared .hero__text {
    pointer-events: auto;
}

.hero__shared .hero__content {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .hero__shared {
        transition: none;
    }
}

/* Control panel: the list of heroes */
.cp-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.cp-row-actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
}

.cp-row-actions form {
    display: inline;
}

/* Control panel: the form of a hero */
.cp-tabs__count {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: #eee;
    font-size: 12px;
    text-align: center;
}

.cp-conflict {
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid #e0a800;
    background-color: #fff8e1;
}

.cp-conflict__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* A language strip: one language of a block at a time. */
.cp-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e5e5;
}

.cp-langs__tab {
    padding: 6px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: #555;
    font-size: 14px;
}

.cp-langs__tab.is-active {
    border-bottom-color: currentColor;
    color: #111;
    font-weight: 600;
}

.cp-langs__tab.has-error {
    color: #c62828;
}

.cp-langs__pane[hidden] {
    display: none !important;
}

/* The cards of the slides */
.cp-slides-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.cp-slides-toolbar > .cp-icon-button {
    width: auto;
    gap: 6px;
    padding: 0 12px;
    font-size: 14px;
}

.cp-slides {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-slide {
    border: 1px solid #ddd;
    background-color: #fff;
}

.cp-slide.is-open {
    border-color: #999;
}

.cp-slide__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}

.cp-slide__toggle {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

.cp-slide__thumb {
    display: flex;
    flex: 0 0 96px;
    align-items: center;
    justify-content: center;
    height: 54px;
    overflow: hidden;
    background-color: #f1f1f1;
    color: #888;
    font-size: 22px;
}

.cp-slide__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cp-slide__summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-slide__badge {
    display: none;
    padding: 1px 6px;
    background-color: #777;
    color: #fff;
    font-size: 12px;
}

.cp-slide__active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
}

.cp-slide__tools {
    display: inline-flex;
    gap: 2px;
}

.cp-slide__body {
    padding: 16px;
    border-top: 1px solid #eee;
}

/* A card that is switched off: kept, in grey, and not shown on the site. */
.cp-slide.is-inactive .cp-slide__thumb {
    filter: grayscale(1);
    opacity: 0.55;
}

.cp-slide.is-inactive .cp-slide__summary {
    color: #888;
}

.cp-slide.is-inactive .cp-slide__badge {
    display: inline-block;
}

/* Home page: a slide written in Html, over its colour and picture */
.hero__backdrop {
    position: absolute;
    inset: 0;
    background-color: #222;
}

.hero__html {
    max-width: 760px;
    color: #fff;
}

.hero__html :last-child {
    margin-bottom: 0;
}

.hero__html img {
    max-width: 100%;
    height: auto;
}

/* Home page: the band of a preview */
.hero-preview-band {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 20px;
    background-color: #fff8e1;
    border-bottom: 1px solid #e0a800;
    font-size: 14px;
}

/* The dialogs of the control panel's questions (SweetAlert2): the type, colours and square corners of the site.
   The icon is made smaller with the library's own zoom; a transform would fight the transform of its animation. */
.swal2-popup.emrekiral-dialog {
    --swal2-icon-zoom: 0.75;
    width: min(440px, calc(100vw - 32px));
    padding: 28px 24px 24px;
    border-radius: 0;
    font-family: inherit;
}

.emrekiral-dialog .swal2-icon {
    margin: 4px auto 16px;
}

.emrekiral-dialog .swal2-html-container {
    margin: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.55;
}

.emrekiral-dialog__actions {
    gap: 8px;
    margin-top: 24px;
}

.emrekiral-dialog__actions .btn {
    min-width: 110px;
}

/* A menu button of the site: its list is placed on the screen by the script, so no scrolling box cuts it off. */
.cp-menu-button {
    display: inline-block;
}

.cp-menu-button.is-open > [data-menu-toggle] {
    border-color: #111;
}

.cp-menu-button__list {
    position: fixed;
    z-index: 1080;
    min-width: 240px;
    padding: 6px 0;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cp-menu-button__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    border: 0;
    background: none;
    color: #222;
    font-size: 15px;
    text-align: left;
}

.cp-menu-button__item:hover:not(:disabled),
.cp-menu-button__item:focus-visible {
    background-color: #f3f3f3;
    outline: none;
}

.cp-menu-button__item:disabled {
    color: #999;
    cursor: not-allowed;
}

.cp-menu-button__note {
    margin: 4px 16px 4px;
    color: #888;
    font-size: 12px;
    line-height: 1.4;
}

/* A hero of more than one slide is drawn with the mouse or a finger; the page keeps the moves up and down. */
.hero--draggable {
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.hero--draggable img,
.hero--draggable a {
    -webkit-user-drag: none;
}

.hero.is-dragging {
    cursor: grabbing;
}

/* While it is drawn the track follows the pointer at once; let go, it glides again. */
.hero.is-dragging .hero__track {
    transition: none;
}

.hero--draggable .hero__arrow,
.hero--draggable .hero__dot,
.hero--draggable .hero__pause,
.hero--draggable .hero__button {
    cursor: pointer;
}

/* The cookie notice sits 15 pixels inside the bottom corner of the footer. While it is open the script gives the footer
   room for it below its own content (--cookie-notice-room), so it covers neither the working hours nor the copyright. */
.footer-area-wrapper {
    position: relative;
}

.footer-area-wrapper.has-cookie-notice {
    padding-bottom: var(--cookie-notice-room, 0px);
}

.cookie-notice {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 2;
    width: min(420px, calc(100% - 30px));
    margin: 0;
    padding: 24px 26px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background-color: #fff;
    color: #555;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-notice.is-shown {
    opacity: 1;
    transform: none;
}

.cookie-notice--bottomleft {
    right: auto;
    left: 15px;
}

.cookie-notice--bar {
    left: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: auto;
}

.cookie-notice__text {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.6;
}

.cookie-notice--bar .cookie-notice__text {
    max-width: 760px;
    margin: 0;
}

.cookie-notice__link {
    margin-left: 4px;
    color: inherit;
    text-decoration: underline;
}

/* Both answers are buttons of the same size: rejecting is as easy as accepting. */
.cookie-notice__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cookie-notice--bar .cookie-notice__actions {
    flex: 0 0 auto;
    min-width: 320px;
}

.cookie-notice__button {
    padding: 12px 16px;
    border: 1px solid #111;
    border-radius: 4px;
    background-color: #fff;
    color: #111;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cookie-notice__button--reject:hover {
    background-color: #f2f2f2;
}

.cookie-notice__button--accept {
    border-color: #000;
    background-color: #000;
    color: #fff;
}

.cookie-notice__button--accept:hover {
    background-color: #333;
}

.cookie-notice__button:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

.cookie-notice--dark {
    border-color: #1b1b1b;
    background-color: #1b1b1b;
    color: #ddd;
}

.cookie-notice--dark .cookie-notice__button--reject {
    border-color: #fff;
    background-color: transparent;
    color: #fff;
}

.cookie-notice--dark .cookie-notice__button--reject:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.cookie-notice--dark .cookie-notice__button--accept {
    border-color: #fff;
    background-color: #fff;
    color: #000;
}

.cookie-notice--dark .cookie-notice__button--accept:hover {
    background-color: #e6e6e6;
}

.cookie-notice--dark .cookie-notice__button:focus-visible {
    outline-color: #fff;
}

@media (max-width: 767px) {
    .cookie-notice,
    .cookie-notice--bottomleft,
    .cookie-notice--bar {
        right: 15px;
        left: 15px;
        display: block;
        width: auto;
        padding: 18px 16px;
    }

    .cookie-notice__text,
    .cookie-notice--bar .cookie-notice__text {
        margin-bottom: 16px;
        font-size: 15px;
    }

    .cookie-notice--bar .cookie-notice__actions {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-notice {
        transform: none;
        transition: none;
    }
}

/* The footer link that opens the cookie notice again */
.footer-cookie-link {
    display: block;
    margin: 12px auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 14px;
    text-decoration: underline;
}

/* The popup window of the site: the picture or video on top, the texts below; as wide as its picture allows, never
   wider than the screen. */
.popup-window__dialog {
    max-width: min(560px, calc(100% - 32px));
    margin-right: auto;
    margin-left: auto;
}

.popup-window__content {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.popup-window__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 16px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Translucent black reads on any picture; under the pointer or the keyboard it takes the primary color of the theme,
   with a dark cross, which reads on that gold. */
.popup-window__close:hover,
.popup-window__close:focus-visible {
    background-color: #dcb14a;
    color: #111;
}

.popup-window__close:focus-visible {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .popup-window__close {
        transition: none;
    }
}

.popup-window__media {
    display: block;
    background-color: #f2f2f2;
}

.popup-window__image,
.popup-window__video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: cover;
}

.popup-window__body {
    padding: 28px 32px 32px;
    text-align: center;
}

.popup-window__title {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.25;
}

.popup-window__text {
    color: #555;
    font-size: 16px;
    line-height: 1.6;
}

.popup-window__text > :last-child {
    margin-bottom: 0;
}

.popup-window__button {
    margin-top: 20px;
    padding: 12px 28px;
}

@media (max-width: 575px) {
    .popup-window__body {
        padding: 22px 20px 24px;
    }

    .popup-window__title {
        font-size: 22px;
    }
}

/* The preview of the control panel opens over the form, which may be a window itself: it and its dark background come
   above that window and its own. */
.popup-window.is-preview {
    z-index: 1065;
}

.modal-backdrop ~ .modal-backdrop {
    z-index: 1060;
}

/* The form of a popup: its languages as switches in a row, a tab of a language it does not open in greyed. */
.cp-popup-languages {
    padding: 18px 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.cp-popup-languages legend {
    float: none;
    width: auto;
    padding: 0 6px;
    font-size: 15px;
    font-weight: 600;
}

.cp-popup-languages__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-bottom: 8px;
}

.cp-tabs a.is-muted {
    color: #aaa;
    text-decoration: line-through;
}

.cp-popup-renew {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 32px;
    padding: 18px 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

/* The control panel: a page of its own - the menu down the left, a bar on top with the title of the page, and the
   content in the rest of the screen. Below 992 pixels the menu is a drawer that slides in from the left. */
.cp-body {
    background-color: #fff;
}

.cp-shell {
    display: flex;
    min-height: 100vh;
}

/* The menu stands still: it is fixed to the left of the window, so the scrolling of the page does not move it.
   Its top (the logo) and its foot (back to the site, sign out) stay in sight; only the links between them scroll
   when they do not fit, and without a scrollbar. */
.cp-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 264px;
    overflow: hidden;
    border-right: 1px solid #ebebeb;
    background-color: #fff;
}

.cp-sidebar__brand {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 24px;
    border-bottom: 1px solid #ebebeb;
}

.cp-sidebar__logo img {
    width: auto;
    height: 36px;
}

.cp-sidebar__close,
.cp-topbar__menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    font-size: 18px;
}

.cp-nav {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 12px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.cp-nav::-webkit-scrollbar {
    display: none;
}

/* The two workspaces side by side at the top of the menu: the one open is raised on a light track. */
.cp-workspace-switch {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 14px 12px 0;
    padding: 4px;
    border-radius: 10px;
    background-color: #f3f1ea;
}

.cp-workspace-switch__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 6px;
    border-radius: 7px;
    color: #5f5f5f;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.cp-workspace-switch__item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-workspace-switch__item:hover,
.cp-workspace-switch__item:focus-visible {
    color: #222;
}

.cp-workspace-switch__item.is-active {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    color: #7a5c0f;
}

.cp-workspace-switch__item:focus-visible {
    outline: 2px solid #b8901f;
    outline-offset: 1px;
}

/* The field that finds a page of the menu by its name. */
.cp-nav-search {
    flex: 0 0 auto;
    margin: 10px 12px 0;
}

.cp-nav-search .cp-search > i {
    left: 12px;
    font-size: 13px;
}

.cp-nav-search__input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background-color: #fafafa;
    color: #222;
    font-size: 14px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cp-nav-search__input:focus {
    border-color: #b8901f;
    background-color: #fff;
    outline: none;
}

/* A group of the menu: a heading with its icon that opens and closes the links under it, which hang from a thin line.
   The group of the page shown has its heading in the primary tone of the theme. */
.cp-nav__block {
    margin-bottom: 2px;
}

.cp-nav__home {
    margin-bottom: 8px;
}

.cp-nav__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #2b2b2b;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cp-nav__heading:hover,
.cp-nav__heading:focus-visible {
    background-color: #f5f5f5;
}

.cp-nav__heading-icon {
    flex: 0 0 18px;
    color: #8a8a8a;
    font-size: 15px;
    text-align: center;
}

.cp-nav__block.is-current > .cp-nav__heading,
.cp-nav__block.is-current > .cp-nav__heading .cp-nav__heading-icon {
    color: #7a5c0f;
}

.cp-nav__heading[aria-expanded="true"] .cp-nav__chevron {
    transform: rotate(180deg);
}

.cp-nav__links {
    margin: 0 0 6px 21px;
    padding-left: 8px;
    border-left: 1px solid #ececec;
}

/* Inside a group the links are its words alone; the heading carries the icon. */
.cp-nav__links .cp-nav__link > i:first-child {
    display: none;
}

.cp-nav__links .cp-nav__link {
    padding: 7px 10px;
    font-size: 13.5px;
}

.cp-nav__links .cp-nav__link.is-active {
    box-shadow: inset 2px 0 0 #b8901f;
}

/* While the menu is searched, every group shows what it keeps. */
.cp-nav.is-searching .collapse {
    display: block !important;
    height: auto !important;
}

.cp-nav.is-searching .cp-nav__chevron {
    visibility: hidden;
}

/* A tab of a page the search found: its name, the name of its page under it. */
.cp-nav__part-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cp-nav__part-of {
    color: #999;
    font-size: 11.5px;
    font-weight: 400;
}

.cp-nav__empty {
    margin: 8px 12px;
    color: #888;
    font-size: 13px;
}

.cp-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 1px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #444;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cp-nav__link > i:first-child {
    flex: 0 0 18px;
    color: #999;
    font-size: 15px;
    text-align: center;
}

.cp-nav__link:hover,
.cp-nav__link:focus-visible {
    background-color: #f5f5f5;
    color: #111;
}

/* The page being shown, in a light tone of the primary color of the theme, with a line of it on the left. */
.cp-nav__link.is-active,
.cp-nav__group.is-current {
    background-color: #faf3e1;
    box-shadow: inset 3px 0 0 #b8901f;
    color: #7a5c0f;
    font-weight: 600;
}

.cp-nav__link.is-active > i:first-child,
.cp-nav__group.is-current > i:first-child {
    color: #b8901f;
}

.cp-nav__chevron {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.cp-nav__group[aria-expanded="true"] .cp-nav__chevron {
    transform: rotate(180deg);
}

.cp-nav__group.is-current:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
}

.cp-nav__children {
    padding-left: 16px;
}

.cp-sidebar__foot {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid #ebebeb;
}

.cp-frame {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    margin-left: 264px;
}

.cp-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding: 0 32px;
    border-bottom: 1px solid #ebebeb;
    background-color: #fff;
}

.cp-topbar__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 24px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-topbar__end {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 20px;
}

/* The menu of the account: the name of who is signed in opens it; the profile and signing out are in it. */
.cp-topbar .cp-user-menu .cp-topbar__user {
    gap: 8px;
    color: #555;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
}

.cp-topbar .cp-user-menu .cp-topbar__user:hover,
.cp-topbar .cp-user-menu .cp-topbar__user[aria-expanded="true"] {
    color: #111;
}

.cp-topbar .cp-user-menu .cp-topbar__user .icon-user {
    font-size: 18px;
}

.cp-user-menu .header-menu__list .header-menu__item {
    align-items: center;
}

.cp-user-menu .header-menu__item i {
    flex: 0 0 auto;
    width: 16px;
    font-size: 15px;
    text-align: center;
}

/* The theme takes the border off every button, so a secondary button of the panel (btn-outline-dark) was bare text
   until the pointer came over it; it keeps a frame in the color of the primary button and a white face. */
.cp-body .btn-outline-dark {
    border: 1px solid #212529;
    background-color: #fff;
    color: #212529;
}

.cp-body .btn-outline-dark:hover,
.cp-body .btn-outline-dark:focus-visible,
.cp-body .btn-outline-dark:active {
    border-color: #212529;
    background-color: #212529;
    color: #fff;
}

.cp-body .btn-outline-dark:disabled,
.cp-body .btn-outline-dark.disabled {
    border-color: #c8c8c8;
    background-color: #fff;
    color: #888;
}

/* The menus of the bar (the language, the notifications and the account) are those of the header of the site; the bar spaces them. */
.cp-topbar .header-right-items {
    margin-left: 0;
}

.cp-topbar .header-menu__toggle {
    color: #333;
    font-size: 14px;
}

.cp-topbar .header-menu__toggle:hover {
    color: #111;
}

/* The bell, with the number of the notifications not seen yet. */
.cp-notifications__toggle {
    position: relative;
    padding: 6px;
}

.cp-notifications__toggle .icon-alarm {
    font-size: 20px;
}

.cp-notifications__badge {
    position: absolute;
    top: -2px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: #b42318;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 18px;
    text-align: center;
}

.cp-notifications__badge[hidden] {
    display: none;
}

.cp-notifications__list {
    width: 380px;
    max-width: calc(100vw - 32px);
    padding: 0;
    overflow: hidden;
}

.cp-notifications__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.cp-notifications__head form {
    margin: 0;
}

.cp-notifications__title {
    color: #111;
    font-size: 14px;
    font-weight: 600;
}

.cp-notifications__mark {
    padding: 0;
    border: 0;
    background: none;
    color: #916f1c;
    font-size: 13px;
    cursor: pointer;
}

.cp-notifications__mark:hover,
.cp-notifications__mark:focus-visible {
    text-decoration: underline;
}

[data-cp-notifications-items] {
    max-height: 360px;
    overflow-y: auto;
}

.header-menu .header-menu__list .cp-notifications__item {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 16px 10px 30px;
    border-bottom: 1px solid #f5f5f5;
    color: #444;
    font-size: 13px;
    line-height: 1.45;
}

.header-menu .header-menu__list .cp-notifications__item:hover,
.header-menu .header-menu__list .cp-notifications__item:focus-visible {
    padding-left: 30px;
    background-color: #fafafa;
}

/* A notification not seen yet has a dot before it. */
.cp-notifications__item.is-unread::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #1d4ed8;
}

.cp-notifications__item.is-unread .cp-notifications__text {
    color: #111;
    font-weight: 500;
}

.cp-notifications__item.cp-notifications__item--error .cp-notifications__text {
    color: #b42318;
}

.cp-notifications__item.cp-notifications__item--warning .cp-notifications__text {
    color: #8a6410;
}

.cp-notifications__time {
    color: #999;
    font-size: 12px;
}

.cp-notifications__empty {
    margin: 0;
    padding: 20px 16px;
    color: #888;
    font-size: 13px;
}

.header-menu .header-menu__list .cp-notifications__all,
.header-menu .header-menu__list .cp-notifications__all:hover {
    justify-content: center;
    padding: 12px 16px;
    color: #111;
    font-weight: 500;
}

/* On a phone the menu of notifications takes the width of the screen under the bar. */
@media (max-width: 575px) {
    .cp-notifications {
        position: static;
    }

    .cp-notifications__list {
        position: absolute;
        top: 100%;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}

/* The page of the notifications: one row each, the newest first. */
.cp-notification-list {
    margin: 0 0 20px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
    list-style: none;
}

.cp-notification-list__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
}

.cp-notification-list__item:first-child {
    border-top: 0;
}

.cp-notification-list__marker {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cp-notification-list__item.is-unread .cp-notification-list__marker {
    background-color: #1d4ed8;
}

.cp-notification-list__body {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-notification-list__text {
    margin: 0 0 2px;
    color: #444;
    font-size: 14px;
}

.cp-notification-list__item.is-unread .cp-notification-list__text {
    color: #111;
    font-weight: 500;
}

.cp-notification-list__item.cp-notification-list__item--error .cp-notification-list__text {
    color: #b42318;
}

.cp-notification-list__item.cp-notification-list__item--warning .cp-notification-list__text {
    color: #8a6410;
}

.cp-notification-list__time {
    color: #999;
    font-size: 12px;
}

.cp-notification-list__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.cp-notification-list__actions form {
    margin: 0;
}

.cp-main {
    flex: 1 1 auto;
    padding: 32px;
}

/* The content keeps the field styles the theme gives the account page (myaccount-content), without its framed box:
   the page itself is the frame here. */
.cp-main > .myaccount-content {
    padding: 0;
    border: 0;
}

/* The head of a page of the panel, now that its title is in the bar: a link back stays on the left, a button that
   adds goes to the right. */
.cp-toolbar > .btn:last-child,
.cp-list-head > .btn:last-child {
    margin-left: auto;
}

.cp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background-color: rgba(0, 0, 0, 0.4);
}

@media (max-width: 991px) {
    .cp-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        width: min(300px, 86vw);
        height: auto;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    /* The drawer lies over the page; the page has the whole width. */
    .cp-frame {
        margin-left: 0;
    }

    .cp-shell.is-drawer-open .cp-sidebar {
        transform: none;
    }

    .cp-sidebar__close,
    .cp-topbar__menu {
        display: flex;
    }

    .cp-topbar {
        gap: 12px;
        min-height: 64px;
        padding: 0 16px;
    }

    .cp-topbar__title {
        font-size: 20px;
    }

    .cp-main {
        padding: 24px 16px;
    }
}

@media (max-width: 575px) {
    .cp-topbar__user span {
        display: none;
    }

    .cp-topbar__end {
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-sidebar,
    .cp-nav__link,
    .cp-nav__heading,
    .cp-nav__chevron,
    .cp-workspace-switch__item {
        transition: none;
    }
}

/* The page list of the control panel: the pages the settings require, above the table, each a button that opens
   a form. A red border marks one that is not written yet, a green one a page that is. */
.cp-required-pages {
    margin-bottom: 24px;
    padding: 20px 24px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
}

.cp-required-pages__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0 0 12px;
    color: #222;
    font-size: 15px;
    font-weight: 600;
}

.cp-required-pages__count {
    color: #b42318;
    font-size: 13px;
    font-weight: 400;
}

.cp-required-pages__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cp-required-pages__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}

.cp-required-pages__link--missing {
    border-color: #e5484d;
    color: #b42318;
}

.cp-required-pages__link--missing:hover,
.cp-required-pages__link--missing:focus-visible {
    background-color: #fdecec;
    color: #b42318;
}

.cp-required-pages__link--written {
    border-color: #2f9e5b;
    color: #1e7a3c;
}

.cp-required-pages__link--written:hover,
.cp-required-pages__link--written:focus-visible {
    background-color: #e6f6ec;
    color: #1e7a3c;
}

/* The same buttons above the marketplace accounts: grey for a marketplace that has no account yet, with the number of
   accounts in a small circle on a green one. */
.cp-required-pages__link--idle {
    border-color: #c8c8c8;
    color: #555;
}

.cp-required-pages__link--idle:hover,
.cp-required-pages__link--idle:focus-visible {
    background-color: #f4f4f4;
    color: #222;
}

/* A field with its button beside it (the search of a marketplace): the button is as tall as the field. */
.cp-field-action {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.cp-field-action > input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.cp-field-action > .btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 0;
}

.cp-required-pages__link--current {
    border-color: #222;
    background-color: #222;
    color: #fff;
}

.cp-required-pages__link--current:hover,
.cp-required-pages__link--current:focus-visible {
    color: #fff;
}

.cp-required-pages__badge {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: #2f9e5b;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

/*
 * Tables (<data-table>, DataTableTagHelper): a plain table in a frame with rounded corners that scrolls sideways when it
 * is wider than the page, so the buttons at the end of a row are never cut off. Headings are short and stay on one
 * line, rows are separated by a line and lit under the pointer, cells are compact. The first cell names the row - a
 * small picture, the name, a quiet second line - the pills say where it stands, and the actions stand on the right.
 * Below 768 pixels a table in the card mode (the default) shows every row as a card; mobile="table" keeps the table.
 */
.cp-table-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    background-color: #fff;
}

/* The cell that names the row keeps room for the name: a list of many columns never squeezes it to a letter a line. */
@media (min-width: 768px) {
    .cp-table__main {
        min-width: 15rem;
    }
}

.cp-table {
    width: 100%;
    margin: 0;
    caption-side: bottom;
    border-collapse: collapse;
    color: #333;
    font-size: 14px;
    line-height: 1.45;
}

.cp-table thead tr {
    border-bottom: 1px solid #ebebeb;
}

.cp-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s ease;
}

.cp-table tbody tr:last-child {
    border-bottom: 0;
}

.cp-table tbody tr:hover {
    background-color: #fafafa;
}

/* A row that is chosen, or whose part is open. */
.cp-table tbody tr[aria-selected="true"],
.cp-table tbody tr[data-state="selected"],
.cp-table tbody tr:has([aria-expanded="true"]) {
    background-color: #f5f5f5;
}

.cp-table th {
    height: 40px;
    padding: 0 8px;
    color: #111;
    font-weight: 500;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.cp-table td {
    padding: 8px;
    vertical-align: middle;
}

/* The frame keeps a little room before the first cell and after the last. */
.cp-table th:first-child,
.cp-table td:first-child {
    padding-left: 16px;
}

.cp-table th:last-child,
.cp-table td:last-child {
    padding-right: 16px;
}

.cp-table tfoot {
    border-top: 1px solid #ebebeb;
    background-color: #fafafa;
    font-weight: 500;
}

.cp-table tfoot tr:last-child {
    border-bottom: 0;
}

.cp-table caption {
    margin-top: 16px;
    color: #888;
    font-size: 14px;
}

/* The picture of a row stays small, so the rows stay low. */
.cp-table .cp-entity__thumb.cp-product-thumb {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
}

/* The box of a row is small. */
.cp-table .checkbox-field__box,
.cp-table label.checkbox-field input.checkbox-field__input {
    width: 16px;
    height: 16px;
}

.cp-table .checkbox-field__input:checked + .checkbox-field__box::after {
    top: 1px;
    left: 5px;
    width: 5px;
    height: 9px;
}

.cp-table .checkbox-field__input:indeterminate + .checkbox-field__box::after {
    top: 6px;
    left: 3px;
    width: 8px;
}

/* While a wide table scrolls sideways (sticky, the default), the cells that name a row stay at its start - the box,
   then the first cell after it, or the first cell - and its buttons at its end. Each keeps the colour of its row; a
   shadow marks the edge the other cells pass under (site.js: is-scrolled, is-scrollable). A card (below) turns all of
   it off through its custom properties. */
.cp-table-wrap--sticky {
    --cp-sticky-position: sticky;
    --cp-sticky-background: #fff;
    --cp-sticky-hover: #fafafa;
    --cp-sticky-selected: #f5f5f5;
    --cp-sticky-shadow-start: 6px 0 6px -6px rgba(0, 0, 0, 0.18);
    --cp-sticky-shadow-end: -6px 0 6px -6px rgba(0, 0, 0, 0.18);
}

.cp-table-wrap--sticky .cp-table__check,
.cp-table-wrap--sticky .cp-table__check + :is(th, td),
.cp-table-wrap--sticky :is(th, td):first-child,
.cp-table-wrap--sticky .cp-table__actions {
    position: var(--cp-sticky-position);
    z-index: 1;
    background-color: var(--cp-sticky-background);
}

.cp-table-wrap--sticky :is(th, td):first-child {
    left: 0;
}

.cp-table-wrap--sticky .cp-table__check + :is(th, td) {
    left: 40px;
}

.cp-table-wrap--sticky .cp-table__actions {
    right: 0;
}

.cp-table-wrap--sticky tbody tr:hover > :is(.cp-table__check, .cp-table__check + th, .cp-table__check + td, :first-child, .cp-table__actions) {
    background-color: var(--cp-sticky-hover);
}

.cp-table-wrap--sticky tbody tr:is([aria-selected="true"], [data-state="selected"], :has([aria-expanded="true"])) > :is(.cp-table__check, .cp-table__check + th, .cp-table__check + td, :first-child, .cp-table__actions) {
    background-color: var(--cp-sticky-selected);
}

.cp-table-wrap--sticky.is-scrolled :is(.cp-table__check + th, .cp-table__check + td, th:first-child:not(.cp-table__check), td:first-child:not(.cp-table__check)) {
    box-shadow: var(--cp-sticky-shadow-start);
}

.cp-table-wrap--sticky.is-scrollable .cp-table__actions {
    box-shadow: var(--cp-sticky-shadow-end);
}

.cp-table__muted {
    color: #888;
}

/* The category of a product: the categories above it quiet, the category itself a link to its products. */
.cp-category-path {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
}

.cp-category-path__above {
    color: #888;
    font-size: 14px;
}

/* Under the name of a row, the path is a quiet line like the others. */
.cp-entity__sub .cp-category-path__above {
    font-size: inherit;
}

.cp-entity__sub .cp-category-path a {
    color: #555;
}

.cp-entity__sub .cp-category-path a:hover {
    color: #7a5c0f;
}

.cp-table__actions,
.cp-table__order {
    width: 1%;
    white-space: nowrap;
}

.cp-table__actions {
    text-align: right;
}

.cp-table__actions .cp-row-actions {
    justify-content: flex-end;
}

.cp-order {
    display: inline-flex;
    gap: 4px;
}

.cp-order form {
    display: inline;
}

/* The cell that names the row. */
.cp-entity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* A review in the list of the panel: the stars and the customer, the text, and the pictures under it. */
.cp-review {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 520px;
}

.cp-review__head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cp-review__text {
    margin: 0;
    color: #444;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.cp-review__photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-entity__thumb {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f4f5f7;
    color: #999;
    font-size: 18px;
}

.cp-entity__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cp-entity__thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

/* The one standard of the panel: a picture that opens large (Fancybox, lightbox.js) says so with the pointer and shows
   where the keyboard is - the thumbnails of the lists and the previews under the picture fields alike. */
a[data-lightbox],
img[data-lightbox-image] {
    cursor: zoom-in;
}

a[data-lightbox]:focus-visible,
img[data-lightbox-image]:focus-visible {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

/* The initials of a user who has no avatar, in the same square as the avatars of the others. */
.cp-entity__thumb--initials {
    color: #555;
    font-size: 14px;
    font-weight: 600;
}

.cp-entity__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cp-entity__text--child {
    position: relative;
    padding-left: 26px;
}

.cp-entity__text--child::before {
    content: "\21B3";
    position: absolute;
    top: 0;
    left: 4px;
    color: #aaa;
}

.cp-entity__name {
    color: #111;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cp-entity__name:hover {
    color: #7a5c0f;
}

.cp-entity__sub {
    margin-top: 2px;
    color: #888;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.cp-entity__sub--error {
    color: #b42318;
}

/* The "Record" cell at the end of every list: who created the row, and under it, quieter, when. */
.cp-record {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.cp-record__by {
    color: #333;
    white-space: nowrap;
}

.cp-record__at {
    color: #999;
    font-size: 13px;
    white-space: nowrap;
}

/* The pills: tinted by what they say (ControlPanelTones). */
.cp-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: #f1f1f1;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.cp-pill--green {
    background-color: #e6f6ec;
    color: #1e7a3c;
}

.cp-pill--amber {
    background-color: #fdf3d7;
    color: #8a6410;
}

.cp-pill--blue {
    background-color: #e8f0fd;
    color: #1d4ed8;
}

.cp-pill--red {
    background-color: #fdecec;
    color: #b42318;
}

/* A pill in a column of texts keeps its own width instead of spanning the column. */
/* Several pills side by side in a cell, wrapping on a narrow screen. */
.cp-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* The questions of the customers: the text of a question kept short in the list, the answer under it, the ready
   answers as chips that put their text into the answer, and the earlier answers about the same product. */
.cp-question__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
}

.cp-question__answer {
    color: #1e6b34;
}

.cp-question__asked {
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid #c9a227;
    background-color: #faf7ee;
    white-space: pre-line;
}

.cp-question__answer-text {
    margin: 0;
    white-space: pre-line;
}

.cp-question__templates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-chip {
    padding: 3px 10px;
    border: 1px solid #ccc;
    border-radius: 999px;
    background-color: #fff;
    color: #333;
    font-size: 13px;
    line-height: 1.6;
    cursor: pointer;
}

.cp-chip:hover,
.cp-chip:focus-visible {
    border-color: #333;
}

.cp-question__past {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-question__past li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-top: 1px solid #eee;
}

.cp-entity__text > .cp-pill {
    align-self: flex-start;
    margin-top: 4px;
}

/* A text with small marks after it, wrapping under it when the row is narrow. */
.cp-entity__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

/* A small mark next to a text, such as who chose a mapping. */
.cp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px 1px 7px;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    background-color: #f7f7f7;
    color: #555;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

.cp-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.cp-badge--green {
    border-color: #bfe6cc;
    background-color: #f1faf4;
    color: #1e7a3c;
}

.cp-badge--amber {
    border-color: #f1dc9e;
    background-color: #fffaeb;
    color: #8a6410;
}

.cp-badge--blue {
    border-color: #c9d8fb;
    background-color: #f3f7fe;
    color: #1d4ed8;
}

.cp-badge--red {
    border-color: #f5c2c0;
    background-color: #fef5f5;
    color: #b42318;
}

/* A badge that is a link opens what it names; it looks the same, with a line under it on hover. */
a.cp-badge:hover,
a.cp-badge:focus-visible {
    text-decoration: underline;
}

/* The line a page shows about a job of a marketplace in the background: waiting or running, done, or failed. */
.cp-job {
    margin: 0 0 6px;
    font-size: 14px;
    color: #555;
}

.cp-job--busy {
    color: #1d4ed8;
}

.cp-job--busy::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: cp-job-spin 0.9s linear infinite;
}

.cp-job--warn {
    color: #8a6410;
}

.cp-job--error {
    color: #b42318;
}

@keyframes cp-job-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-job--busy::before {
        animation: none;
    }
}

/* A swatch beside a name in a sentence. */
.cp-swatch--inline {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -3px;
}

/* The form that leaves a row out of the automatic matching sits under the form that saves, set apart. */
.cp-skip-form {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed #e2e2e2;
}

/* The codes of the languages a row is shown or translated in. */
.cp-codes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* The keywords a text may hold, over the tabs of the form of an email. */
.cp-placeholders {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 16px;
}

.cp-placeholders .cp-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    user-select: all;
}

/* A keyword is a button: pressed, it goes where the cursor of the text is, or to the clipboard (placeholder-keywords.js). */
.cp-placeholders button.cp-code {
    background-color: #fff;
    cursor: pointer;
    line-height: 1.6;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cp-placeholders button.cp-code:hover {
    border-color: #bdbdbd;
    background-color: #f7f7f7;
}

.cp-placeholders button.cp-code.is-copied {
    border-color: #2f7a43;
    color: #2f7a43;
}

.cp-code {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* The jobs of a mapping page of a marketplace in one frame across the page: each on a row, what it did on the left and
   its buttons on the right. */
.cp-jobs {
    margin-bottom: 24px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
}

.cp-jobs__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 18px 24px;
}

.cp-jobs__row + .cp-jobs__row {
    border-top: 1px solid #f0f0f0;
}

.cp-jobs__text {
    flex: 1 1 320px;
    min-width: 0;
}

.cp-jobs__title {
    margin: 0 0 4px;
    color: #222;
    font-size: 15px;
    font-weight: 600;
}

.cp-jobs__text > :last-child {
    margin-bottom: 0;
}

.cp-jobs__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.cp-jobs__actions form {
    margin: 0;
}

/* A file to read and the button that reads it, side by side and of one height (the lists of products and prices read
   from a file); on a narrow screen the button goes under the file. */
.cp-jobs__file {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px 24px;
}

.cp-jobs__file > .file-field {
    flex: 1 1 280px;
    width: auto;
    min-width: 0;
}

.cp-jobs__file > .btn {
    flex: 0 0 auto;
    height: auto;
}

@media (max-width: 767px) {
    .cp-jobs__row {
        flex-wrap: wrap;
        padding: 16px;
    }

    .cp-jobs__actions {
        justify-content: flex-start;
    }
}

/* Choices as buttons, any number of them chosen (the marketplaces of a block rule): drawn as the buttons that switch
   the marketplace of a list, black when chosen. The checkbox is kept for the keyboard and the form post. */
.cp-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.cp-choice {
    position: relative;
    margin: 0;
    cursor: pointer;
}

/* The box stays in the page for the post and the keyboard, unseen and out of the way; the selector names the element
   so it outweighs the theme's rule for every checkbox, which gives it room of its own. */
.cp-choice input.cp-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.cp-choice__text {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #c8c8c8;
    border-radius: 999px;
    color: #555;
    font-size: 14px;
    line-height: 1.4;
    user-select: none;
}

.cp-choice:hover .cp-choice__text {
    background-color: #f4f4f4;
    color: #222;
}

.cp-choice__input:checked + .cp-choice__text {
    border-color: #222;
    background-color: #222;
    color: #fff;
}

.cp-choice__input:focus-visible + .cp-choice__text {
    outline: 2px solid #222;
    outline-offset: 2px;
}

/* The actions on the chosen rows of a list, above it; they rest while no row is chosen. */
.cp-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

/* The box that chooses a row, in a narrow first column. */
/* The box that chooses a row: a narrow column of a fixed width (with its room, the box sizes of the site count it),
   so the cell after it knows where it starts. */
.cp-table th.cp-table__check,
.cp-table td.cp-table__check {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    padding: 0 8px 0 16px;
}

/* What a row keeps folded, such as the reasons behind a pill; the pill or the text is what opens it. */
.cp-details > summary {
    cursor: pointer;
    list-style: none;
}

.cp-details > summary::-webkit-details-marker {
    display: none;
}

.cp-details__list {
    margin: 6px 0 0;
    padding-left: 18px;
    color: #555;
    font-size: 13px;
}

.cp-details__list li + li {
    margin-top: 2px;
}

/* The bar above a list: the search and the filters side by side (on as many lines as they need), and on the right the
   button that adds. */
.cp-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.cp-filters__field {
    flex: 0 1 200px;
    min-width: 150px;
    margin: 0;
}

.cp-filters__field--grow {
    flex: 1 1 280px;
    max-width: 420px;
}

/* On the mapping pages of the marketplaces the search takes the width the filter leaves. */
.cp-filters--wide .cp-filters__field--grow {
    max-width: none;
}

.cp-filters__field--narrow {
    flex: 0 1 130px;
    min-width: 110px;
}

.cp-filters__field--wide {
    flex: 0 1 240px;
}

.cp-filters .cp-filters__label {
    display: block;
    margin-bottom: 6px;
    color: #777;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Above the field styles the theme gives every form of the content (.myaccount-content form ...): the bar keeps its
   own fields and does not move up as the theme moves its forms. */
.cp-content form.cp-filters {
    margin-top: 0;
}

.cp-content .cp-filters .single-input-item input {
    width: 100%;
    height: 48px;
    padding: 10px 12px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
}

.cp-content .cp-filters .single-input-item input:focus {
    border-color: #dcb14a;
}

.cp-search {
    position: relative;
    display: block;
}

.cp-search > i {
    position: absolute;
    top: 50%;
    left: 14px;
    color: #999;
    transform: translateY(-50%);
    pointer-events: none;
}

.cp-content .cp-filters .cp-search input {
    padding-left: 40px;
}

.cp-filters__buttons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cp-filters__add {
    margin-left: auto;
}

/* A button of the panel that opens a menu of choices (the formats of an export) under its right edge. */
.cp-menu-button .icon-chevron-down {
    margin-left: 4px;
    font-size: 10px;
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.cp-menu-button[aria-expanded="true"] .icon-chevron-down {
    transform: rotate(180deg);
}

.cp-menu-button + .header-menu__list {
    top: calc(100% + 4px);
    min-width: 100%;
    white-space: nowrap;
}

/* Cards of counts over a list (the products): a number with what it counts. A card that is a link narrows the list to
   what it counts; the one in place is framed, and amber marks a gap that is not empty. */
.cp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.cp-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
    color: #222;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cp-stat__label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 13px;
}

.cp-stat__value {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

a.cp-stat:hover,
a.cp-stat:focus-visible {
    border-color: #bbb;
    color: #222;
}

.cp-stat--warn .cp-stat__label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #e0a526;
}

.cp-stat--warn .cp-stat__value {
    color: #8a6410;
}

.cp-stat.is-active {
    border-color: #222;
    background-color: #fafafa;
}

.cp-table-count {
    margin: -6px 0 12px;
    color: #888;
    font-size: 14px;
}

/* An order: its facts in a frame as the audit log has them, then a frame a package with its lines. */
.cp-order {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cp-order .alert {
    margin: 0;
}

.cp-order__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 16px 20px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
}

.cp-order__fact--wide {
    grid-column: span 2;
}

.cp-order__fact dt {
    margin-bottom: 4px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cp-order__fact dd {
    margin: 0;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.cp-order__line {
    display: block;
}

.cp-order__muted {
    color: #888;
    font-size: 13px;
    font-weight: 400;
}

.cp-order__fact .cp-order__muted {
    display: block;
}

.cp-order__package {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-order__package-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.cp-order__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.cp-order__amount {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The tracking of the shipment of an order and its label, side by side. */
.cp-order__shipment-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* What an order of the site allows where it stands: a row of buttons, each its own form. */
.cp-order__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cp-order__actions form {
    display: block;
    margin: 0;
}

.cp-order__ship {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
}

.cp-order__ship .cp-form {
    display: block;
    margin: 0;
}

@media (max-width: 767px) {
    .cp-order__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* An entry of the audit log (a page, or the window over its list): the facts in a frame, then the fields it changed. */
.cp-audit {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cp-audit__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 16px 20px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
}

.cp-audit__fact dt {
    margin-bottom: 4px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cp-audit__fact dd {
    margin: 0;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.cp-audit__muted,
.cp-audit__none {
    color: #999;
    font-weight: 400;
}

.cp-audit__title {
    margin: 0 0 -8px;
    font-size: 16px;
    font-weight: 600;
}

.cp-audit__changes {
    table-layout: fixed;
}

.cp-audit__changes thead th:first-child {
    width: 24%;
}

.cp-audit__changes tbody td {
    vertical-align: top;
}

.cp-audit__field {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* A value as the log wrote it: a list or an object is indented over several lines. */
.cp-audit__value {
    display: block;
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cp-audit__value--old {
    color: #777;
}

.cp-audit__raw {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.cp-audit__raw-side {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
}

.cp-audit__raw-title {
    margin: 0 0 6px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cp-audit__json {
    max-height: 18rem;
    margin: 0;
    overflow: auto;
    font-size: 13px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cp-audit__empty {
    margin: 0;
    padding: 28px 16px;
    border: 1px dashed #ddd;
    border-radius: 12px;
    color: #888;
    text-align: center;
}

@media (max-width: 767px) {
    .cp-audit__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* On a card the value stands under its heading, read from the left like the rest of it. */
    .cp-table-wrap--cards .cp-audit__changes tbody td[data-label] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        text-align: left;
    }
}

@media (max-width: 767px) {
    /* The card mode: the frame gives way to a card a row, the headings stand in front of the values. */
    .cp-table-wrap--cards {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .cp-table-wrap--cards .cp-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .cp-table-wrap--cards .cp-table,
    .cp-table-wrap--cards .cp-table tbody {
        display: block;
    }

    .cp-table-wrap--cards .cp-table tbody tr,
    .cp-table-wrap--cards .cp-table tbody tr:last-child {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        padding: 14px 16px;
        border: 1px solid #ebebeb;
        border-radius: 12px;
        background-color: #fff;
    }

    .cp-table-wrap--cards .cp-table tbody tr:hover {
        background-color: #fff;
    }

    .cp-table-wrap--cards .cp-table tbody td,
    .cp-table-wrap--cards .cp-table tbody td:first-child,
    .cp-table-wrap--cards .cp-table tbody td:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: auto;
        padding: 6px 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }

    /* The heading of the cell, in front of its value. */
    .cp-table-wrap--cards .cp-table tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #888;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-align: left;
        text-transform: uppercase;
    }

    .cp-table-wrap--cards .cp-table tbody td.cp-table__main {
        order: -1;
        display: block;
        margin-bottom: 6px;
        padding: 0 0 12px;
        border-bottom: 1px solid #f0f0f0;
        text-align: left;
    }

    .cp-table-wrap--cards .cp-record {
        align-items: flex-end;
    }

    .cp-table-wrap--cards .cp-table tbody td.cp-table__actions {
        order: 99;
        justify-content: flex-end;
        padding-top: 10px;
    }

    /* A card holds its cells in its own order: nothing in it stays in place. */
    .cp-table-wrap--cards {
        --cp-sticky-position: static;
        --cp-sticky-background: transparent;
        --cp-sticky-hover: transparent;
        --cp-sticky-selected: transparent;
        --cp-sticky-shadow-start: none;
        --cp-sticky-shadow-end: none;
    }

    .cp-table-wrap--cards .cp-table :is(th, td) {
        max-width: none;
    }

    .cp-filters__field,
    .cp-filters__field--grow,
    .cp-filters__field--narrow,
    .cp-filters__field--wide {
        flex: 1 1 100%;
        max-width: none;
    }

    .cp-filters__add {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-table tbody tr {
        transition: none;
    }
}

/* A table whose rows are dragged into their order (data-sort-rows, row-sort.js): the handle in the first cell, the row
   itself greyed while it is dragged, the line of the place it would take and the copy that follows the pointer. */
.cp-sort-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #9a9a9a;
    line-height: 1;
    cursor: grab;
    touch-action: none;
}

.cp-sort-handle svg {
    fill: currentColor;
}

.cp-sort-handle:hover,
.cp-sort-handle:focus-visible {
    background-color: #f2f2f2;
    color: #222;
}

/* Nothing is moved while a move waits for the server. */
[data-sort-rows][aria-busy="true"] .cp-sort-handle {
    cursor: progress;
    opacity: 0.5;
}

.cp-table tbody tr.is-dragging {
    opacity: 0.4;
}

.cp-sort-indicator {
    position: fixed;
    z-index: 1081;
    height: 2px;
    border-radius: 2px;
    background-color: #dcb14a;
    pointer-events: none;
}

.cp-sort-indicator::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    border: 2px solid #dcb14a;
    border-radius: 50%;
    background-color: #fff;
}

.cp-sort-indicator[hidden] {
    display: none;
}

.cp-sort-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1080;
    table-layout: fixed;
    background-color: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    opacity: 0.96;
    pointer-events: none;
}

html.cp-sort-dragging,
html.cp-sort-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

/* Below 768 pixels the rows are cards, and the copy of one is a card as well, without a frame of its own. */
@media (max-width: 767px) {
    .cp-sort-ghost {
        background: none;
        box-shadow: none;
    }

    .cp-sort-ghost tbody tr {
        margin-bottom: 0;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    }
}

/* Control panel: a list the form saves as a whole (data-item-list): the bank accounts and the required pages of the
   settings. The fields of a new item stand on top, each with its label above it, and the switch and the button beside
   them are level with the inputs (the error of the fields has a line of its own, so the bottoms meet); the items are
   listed below, a line each. The checkboxes, "select all" and the button of the selected items show from two items on
   (item-list--many, set by site.js). */
.item-list__entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto auto;
    gap: 12px 16px;
    align-items: end;
}

/* A list of one field, such as the codes of the required pages: the button stays beside the field. The list spans
   the form like every other field, so it ends where the buttons of the form do. */
.item-list--single .item-list__entry {
    grid-template-columns: minmax(0, 1fr) auto;
}

.item-list__field label {
    display: block;
    margin-bottom: 4px;
}

.item-list__field input {
    height: 50px;
}

/* As tall as the input. */
.item-list__entry .item-list__switch,
.item-list__entry .item-list__add {
    min-height: 50px;
}

/* The Add button and the Delete button of an item show their icon alone, their name being their label and title.
   They are as wide as each other, so the switches beside them stand in one column. */
.item-list__add,
.item-list__item .item-list__delete {
    justify-content: center;
    width: 50px;
    padding: 0;
}

.item-list__add {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
}

.item-list__entry .item-list__error {
    grid-column: 1 / -1;
    margin-top: 0;
}

.item-list__head {
    display: none;
    margin-top: 16px;
}

.item-list__items {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

/* An item is a line between two rules, from the left edge of the form to its right edge, like the fields above. */
.item-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
}

.item-list__item:first-child {
    border-top: 1px solid #e5e5e5;
}

.item-list .item-list__select {
    display: none;
}

.item-list--many .item-list__head {
    display: block;
}

.item-list--many .item-list__select {
    display: inline-flex;
}

.item-list__text {
    display: flex;
    flex: 1 1 160px;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 16px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.item-list__primary {
    color: #222;
    font-weight: 500;
}

.item-list__secondary {
    color: #555;
    font-variant-numeric: tabular-nums;
}

.item-list__text .field-error {
    flex-basis: 100%;
    margin-top: 0;
}

.item-list__delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid #f0c4c1;
    background-color: #fff;
    color: #b3261e;
    cursor: pointer;
}

.item-list__delete:hover,
.item-list__delete:focus-visible {
    border-color: #b3261e;
}

.item-list__delete-selected {
    margin-top: 12px;
}

.item-list__delete-selected[hidden] {
    display: none;
}

.item-list__empty {
    margin: 16px 0 0;
    color: #777;
}

.item-list__empty[hidden] {
    display: none;
}

/* A list of two fields without a switch, such as the steps of the shipping fees: the button stays beside them. */
.item-list--pair .item-list__entry {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

/* Checkboxes of a choice of several, one under the other (the channels of an import). */
.cp-check-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.item-list--triple .item-list__entry {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

/* The amount a unit of dimensional weight above the start of a step, shown only while it has one. */
.item-list__per:has(.item-list__value:empty) {
    display: none;
}

/* A value of an item followed by its unit; a value left empty shows the text it stands for, without the unit. */
.item-list__value:empty::before {
    content: attr(data-empty-text);
}

.item-list__value:empty + .item-list__unit {
    display: none;
}

/* A narrow screen stacks the fields on top, with the switch and the button under them; a list of one field keeps its
   button beside the field. */
@media (max-width: 767px) {
    .item-list:not(.item-list--single) .item-list__entry {
        grid-template-columns: minmax(0, 1fr);
    }

    .item-list:not(.item-list--single) .item-list__entry .item-list__switch {
        min-height: 0;
    }

    .item-list:not(.item-list--single) .item-list__entry .item-list__add {
        justify-self: start;
    }
}

/* Footer: the pages of the company on the social networks, under the logo. */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.footer-social a {
    color: #777;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    color: #222;
}

/* Footer: the QR code of the ETBIS registration, under the social links, with a line under it. The picture is drawn
   larger than it is shown, so its modules stay sharp. */
.footer-etbis {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: #777;
    font-size: 12px;
}

.footer-etbis img {
    width: 72px;
    height: 72px;
    image-rendering: pixelated;
}

.footer-etbis:hover,
.footer-etbis:focus-visible {
    color: #222;
}

/*
 * Sticky header: a white bar with a soft shadow below it. It slides away while the page is scrolled down and comes
 * back as soon as it is scrolled up, staying until the very top of the page; there it settles into its place and its
 * white surface fades out (site.js toggles is-hidden and is-settling). The slide replaces the theme's fade-in.
 */
.header-area.header-sticky.is-sticky {
    background-color: #fff;
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(0, 0, 0, 0.04);
    animation: none;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 0.3s ease;
}

.header-area.header-sticky.is-sticky.is-hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

/* Set for one frame while the header becomes sticky, so it takes its first position without sliding. */
.header-area.header-sticky.is-sticky--instant {
    transition: none;
}

/* Back in its place at the top: the white surface, the shadow and the colours of the bar fade into those of the page. */
.header-area.header-sticky.is-settling {
    transition: background-color 0.6s ease, box-shadow 0.6s ease;
}

.header-area.header-sticky.is-settling .logo img {
    transition: filter 0.6s ease;
}

.header-area.header-sticky.is-settling .header-menu__toggle,
.header-area.header-sticky.is-settling .mobile-navigation-icon,
.header-area.header-sticky.is-settling .navigation-menu > ul > li > a {
    transition: color 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .header-area.header-sticky.is-sticky,
    .header-area.header-sticky.is-settling,
    .header-area.header-sticky.is-settling * {
        transition: none;
    }
}

/* Hero-specific topbar styles; sticky and dropdown surfaces retain their normal appearance. */
.header-area--default.site-topbar--transparent {
    position: absolute;
    inset: 0 0 auto;
    z-index: 100;
    background: transparent;
}

.site-topbar--transparent > .header-area:not(.is-sticky) {
    background: transparent;
    box-shadow: none;
}

.site-topbar--inverted:not(.site-topbar--transparent),
.site-topbar--inverted:not(.site-topbar--transparent) > .header-area:not(.is-sticky) {
    background: #111;
}

.site-topbar--inverted > .header-area:not(.is-sticky) .logo img {
    filter: invert(1);
}

.site-topbar--inverted > .header-area:not(.is-sticky) .header-menu__toggle,
.site-topbar--inverted > .header-area:not(.is-sticky) .mobile-navigation-icon,
.site-topbar--inverted > .header-area:not(.is-sticky) .navigation-menu > ul > li > a {
    color: #fff;
}

.site-topbar--transparent ~ #main-wrapper .hero--full {
    height: 100vh;
    height: 100svh;
}

.site-topbar--transparent ~ #main-wrapper .hero__content {
    padding-top: 90px;
}

/* Control panel: the tree of the categories -------------------------------------------------------------------- */

/* A frame with rounded corners around the tree, like the tables of the other lists. */
.cp-tree {
    position: relative;
    padding: 10px 12px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
}

.cp-tree__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A level under a category is set in, with a quiet line along it. */
.cp-tree__list .cp-tree__list {
    margin-left: 22px;
    padding-left: 10px;
    border-left: 1px solid #ececec;
}

/* Once the script has run, a closed row hides the categories under it; while a search is typed, the rows that lead
   to a match stand open. */
.cp-tree.is-ready .cp-tree__item:not(.is-open) > .cp-tree__list {
    display: none;
}

.cp-tree.is-ready.is-searching .cp-tree__item.is-search-open > .cp-tree__list {
    display: block;
}

.cp-tree__item[hidden] {
    display: none;
}

/* One line of the tree: the handle, the arrow, the name, how many categories are under it, its status and its actions. */
.cp-tree__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.cp-tree__row:hover {
    background-color: #fcfbf7;
}

.cp-tree__handle,
.cp-tree__toggle {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #9a9a9a;
    line-height: 1;
}

/* The handle takes the press itself: a finger that holds it drags the row instead of scrolling the page. */
.cp-tree__handle {
    cursor: grab;
    touch-action: none;
}

.cp-tree__handle svg {
    fill: currentColor;
}

.cp-tree__handle:hover,
.cp-tree__handle:focus-visible,
.cp-tree__toggle:hover,
.cp-tree__toggle:focus-visible {
    background-color: #f2f2f2;
    color: #222;
}

.cp-tree__toggle {
    color: #444;
    font-size: 13px;
    cursor: pointer;
}

.cp-tree__toggle i {
    transition: transform 0.15s ease;
}

.cp-tree__item.is-open > .cp-tree__row .cp-tree__toggle i,
.cp-tree.is-searching .cp-tree__item.is-search-open > .cp-tree__row .cp-tree__toggle i {
    transform: rotate(90deg);
}

/* A category without categories under it keeps the place of the arrow, so the names of a level stand in line. */
.cp-tree__toggle.is-leaf {
    visibility: hidden;
}

.cp-tree__thumb {
    display: block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 6px;
    background-color: #f4f5f7;
}

.cp-tree__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cp-tree__name {
    flex: 1 1 auto;
    min-width: 0;
    color: #111;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.cp-tree__name:hover,
.cp-tree__name:focus-visible {
    color: #7a5c0f;
}

.cp-tree__count {
    flex: 0 0 auto;
    min-width: 18px;
    color: #888;
    font-size: 14px;
    text-align: right;
}

.cp-tree__count[hidden] {
    display: none;
}

/* The status pill of a row starts with a dot in its colour. */
.cp-tree__status {
    flex: 0 0 auto;
}

.cp-tree__status::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

/* The actions of a row show their frame only under the pointer, so a long tree stays quiet. */
.cp-tree__actions {
    flex: 0 0 auto;
}

.cp-tree__actions .cp-icon-button {
    border-color: transparent;
    background-color: transparent;
}

.cp-tree__actions .cp-icon-button[aria-disabled="true"]:hover {
    border-color: transparent;
}

/* How many products a category holds, a link to them in the product list. */
.cp-tree__meta.cp-tree__products {
    color: #7a5c0f;
    text-decoration: none;
}

.cp-tree__meta.cp-tree__products:hover,
.cp-tree__meta.cp-tree__products:focus-visible {
    color: #7a5c0f;
    text-decoration: underline;
}

/* What the search found. */
.cp-tree__item.is-match > .cp-tree__row .cp-tree__name {
    margin: 0 -4px;
    padding: 0 4px;
    border-radius: 4px;
    background-color: #fdf3d7;
}

/* Nothing is moved while a search narrows the tree, or while a move waits for the server. */
.cp-tree.is-searching .cp-tree__handle {
    visibility: hidden;
}

.cp-tree[aria-busy="true"] .cp-tree__handle {
    cursor: progress;
    opacity: 0.5;
}

.cp-tree__empty {
    margin: 12px 8px;
    color: #888;
}

.cp-tree__empty[hidden] {
    display: none;
}

/* While a row is dragged: the row itself greyed, the line of the place it would take (red where it may not go), the
   row it would go under, and the copy that follows the pointer. */
.cp-tree__item.is-dragging {
    opacity: 0.4;
}

.cp-tree__indicator {
    position: absolute;
    z-index: 2;
    height: 2px;
    border-radius: 2px;
    background-color: #dcb14a;
    pointer-events: none;
}

.cp-tree__indicator::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    border: 2px solid #dcb14a;
    border-radius: 50%;
    background-color: #fff;
}

.cp-tree__indicator.is-invalid,
.cp-tree__indicator.is-invalid::before {
    border-color: #b3261e;
    background-color: #b3261e;
}

.cp-tree__indicator.is-invalid::before {
    background-color: #fff;
}

.cp-tree__indicator[hidden] {
    display: none;
}

.cp-tree__item.is-drop-target > .cp-tree__row {
    background-color: #fdf3d7;
    box-shadow: inset 0 0 0 2px #dcb14a;
}

.cp-tree.is-blocked .cp-tree__item.is-drop-target > .cp-tree__row {
    background-color: #fdecec;
    box-shadow: inset 0 0 0 2px #b3261e;
}

.cp-tree.is-dragging .cp-tree__row:hover {
    background-color: transparent;
}

.cp-tree__ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1080;
    background-color: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    opacity: 0.96;
    pointer-events: none;
}

html.cp-tree-dragging,
html.cp-tree-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

@media (max-width: 767px) {
    .cp-tree {
        padding: 6px;
    }

    .cp-tree__list .cp-tree__list {
        margin-left: 14px;
        padding-left: 6px;
    }

    .cp-tree__row {
        gap: 6px;
        padding: 6px 4px;
    }

    .cp-tree__actions .cp-icon-button {
        width: 32px;
        height: 32px;
    }
}

/* On a phone the status is its dot alone; its word stays for screen readers. */
@media (max-width: 575px) {
    .cp-tree__status {
        width: 22px;
        height: 22px;
        padding: 0;
        justify-content: center;
        overflow: hidden;
        font-size: 0;
    }

    .cp-tree__status::before {
        width: 8px;
        height: 8px;
        margin-right: 0;
    }

    .cp-tree__thumb {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-tree__row,
    .cp-tree__toggle i {
        transition: none;
    }
}

/* Control panel: a quiet second text of a row of a tree (how a menu shows its links, where a menu item leads). */
.cp-tree__meta {
    flex: 0 1 auto;
    max-width: 40%;
    overflow: hidden;
    color: #888;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Control panel: the tree of the menus. A menu heads its items: it has no handle, as it is not moved, its name stands
   out, and a line parts it from the menu above. */
.cp-tree__handle-space {
    flex: 0 0 28px;
    width: 28px;
}

.cp-tree__item--menu + .cp-tree__item--menu {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}

.cp-tree__item--menu > .cp-tree__row .cp-tree__name,
.cp-tree__item--menu > .cp-tree__row .cp-tree__name:hover {
    color: #111;
    font-weight: 600;
}

/* A menu without links, which the site does not show: the row says so, instead of its hint, until it has a link. */
.cp-tree__empty-note {
    color: #9a6b00;
}

.cp-tree__item.has-children > .cp-tree__row .cp-tree__empty-note,
.cp-tree__item--menu:not(.has-children) > .cp-tree__row .cp-tree__meta:not(.cp-tree__empty-note) {
    display: none;
}

@media (max-width: 767px) {
    .cp-tree__meta {
        display: none;
    }
}

/* Header: the menu right of the logo stands before the language and the account. */
.header-right-menus {
    margin-right: 24px;
    vertical-align: middle;
}

/* Footer: a link with links under it heads them; the groups stand one under the other. */
.footer-menu__group {
    display: block;
    margin-bottom: 12px;
}

.footer-menu__heading {
    display: block;
    margin-bottom: 6px;
    color: #000;
    font-weight: 600;
}

.footer-menu__sublist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-menu__sublist > li {
    margin-bottom: 4px;
}

/* Products: an amount field carries its unit (TL, %) inside its right edge; the code is written in capitals, as it is
   saved; the list shows the sale price with the list price struck through after it, and the form what a piece costs in
   the cart while the prices are typed. */
.cp-amount {
    position: relative;
    display: block;
}

.cp-form .single-input-item .cp-amount input {
    padding-right: 48px;
    font-variant-numeric: tabular-nums;
}

.cp-amount__unit {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: #888;
    font-size: 14px;
    pointer-events: none;
}

.cp-product-code {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

input.cp-product-code {
    text-transform: uppercase;
}

/* A hint in the empty field is a sentence, not a code. */
input.cp-product-code::placeholder {
    text-transform: none;
}

.cp-price {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cp-price__sale {
    font-weight: 600;
}

/* The picture of a product in its list, a little larger than the thumbnails of the other lists: it is how a product is
   found. It opens its pictures large; the number on it says how many there are. */
.cp-entity__thumb.cp-product-thumb {
    position: relative;
    flex-basis: 64px;
    width: 64px;
    height: 64px;
}

.cp-product-thumb__count {
    position: absolute;
    right: 4px;
    bottom: 4px;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* A count in a list (the colours and the stock of a product) */
.cp-table .cp-table__number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cp-price__list {
    color: #888;
    font-size: 13px;
}

.cp-form .cp-cart-price {
    margin: 4px 0 0;
    color: #444;
}

.cp-form .cp-cart-price strong {
    font-variant-numeric: tabular-nums;
}

/* The discount field carries the choice of percent or lira inside its right edge: the selection list of the site,
   narrowed to a box that shares the border of the field. */
.cp-form .single-input-item .cp-amount--choice input {
    padding-right: 92px;
}

.cp-amount--choice .select-field {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 76px;
}

.cp-amount--choice select.select-field__native,
.cp-amount--choice button.select-field__button {
    height: 100%;
    padding: 0 30px 0 14px;
    border: 0;
    border-left: 1px solid #e5e5e5;
    background: #fafafa;
    color: #444;
}

.cp-amount--choice select.select-field__native:focus,
.cp-amount--choice button.select-field__button:focus,
.cp-amount--choice .select-field.is-open button.select-field__button {
    border-left-color: #dcb14a;
    background: #fff;
}

.cp-amount--choice .select-field::after {
    right: 13px;
    width: 7px;
    height: 7px;
}

.cp-product-code-note {
    margin: 4px 0 0;
}

/* Colors: the swatch of a color in the list, with a striped one for a color no single value stands for (a pattern, a
   mix), and the field of its hex code (the color field typed into, see "Shared form controls"). */
.cp-swatch {
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.cp-swatch--none {
    background-color: #fff;
    background-image: repeating-linear-gradient(45deg, #e5e5e5 0, #e5e5e5 4px, #fff 4px, #fff 8px);
}

/* The color field typed into (color-field text="true"): the swatch button that opens the palette sits inside the
   left edge of the field. */
.color-field--text {
    position: relative;
    display: block;
}

.cp-form .single-input-item .color-field--text input.color-field__text {
    padding-left: 60px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.color-field--text .color-field__button {
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: 1;
    width: 38px;
    height: 30px;
    padding: 3px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transform: translateY(-50%);
}

.color-field--text .color-field__swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

.color-field--text .color-field__button:focus-visible {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

/* Products: the "Variants" tab of the form (product-colors.js), laid out like the product form of the shop's sample.
   On top a box with the list of colours: its field holds the chosen ones (one as it is, more as chips) and opens a
   list with a tick at every chosen colour. Below it the card of the open variant and, with more than one variant, the
   list of them beside it, dragged into their order by their handles. The title of a card is the colour (or the name of
   the product) with a line under it in the colour. */
.cp-variants__setup {
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
}

.cp-variants__setup-title {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.cp-variants__setup .field-hint {
    margin: 8px 0 0;
}

.cp-variant-swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 50%;
}

.cp-variant-swatch--small {
    width: 14px;
    height: 14px;
}

.cp-color-picker__field {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 6px 44px 6px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
}

.cp-color-picker.is-open .cp-color-picker__field,
.cp-color-picker__field:focus-within {
    border-color: #dcb14a;
}

.cp-color-picker__values {
    display: contents;
}

.cp-color-picker__value,
.select-field__chosen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
}

.cp-color-chip,
.select-field__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 14rem;
    padding: 3px 4px 3px 8px;
    border-radius: 4px;
    background-color: #f1f1f1;
    font-size: 13px;
    line-height: 1.4;
    cursor: default;
}

/* The count of the colours past the first three; it opens the list like the rest of the field. */
.cp-color-chip--more,
.select-field__chip--more {
    padding: 3px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;
}

.cp-color-chip__name,
.select-field__chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-color-chip__remove,
.select-field__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: none;
    color: #555;
    font-size: 10px;
    line-height: 1;
}

.cp-color-chip__remove:hover,
.cp-color-chip__remove:focus-visible,
.select-field__chip-remove:hover,
.select-field__chip-remove:focus-visible {
    background-color: #e2e2e2;
    color: #b3261e;
}

/* The rest of the field opens the list: the prompt while nothing is chosen, an empty strip after the chips. */
.cp-color-picker__toggle {
    flex: 1 1 40px;
    align-self: stretch;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: #777;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.cp-color-picker__toggle:focus-visible {
    outline: 0;
}

.cp-color-picker__clear,
.select-field__clear {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #555;
    font-size: 12px;
    transform: translateY(-50%);
}

.cp-color-picker__clear:hover,
.cp-color-picker__clear:focus-visible,
.select-field__clear:hover,
.select-field__clear:focus-visible {
    background-color: #f1f1f1;
    color: #b3261e;
}

.cp-color-picker__clear[hidden],
.select-field__clear[hidden] {
    display: none;
}

/* The arrow at the right edge, as on the selection lists; it turns while the list is open. */
.cp-color-picker__field::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 1.5px solid #222;
    border-bottom: 1.5px solid #222;
    pointer-events: none;
    transform: rotate(45deg);
    transition: transform 0.2s, margin-top 0.2s;
}

.cp-color-picker.is-open .cp-color-picker__field::after {
    margin-top: -2px;
    transform: rotate(225deg);
}

.cp-color-picker.has-value .cp-color-picker__field::after {
    display: none;
}

/* The foot of the open list: choose every colour, or take every chosen one out. */
.cp-color-picker__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border-top: 1px solid #eee;
}

.cp-color-picker__all,
.cp-color-picker__none {
    padding: 2px 0;
    border: 0;
    background: none;
    color: #777;
    font-size: 12px;
}

.cp-color-picker__all:hover:not(:disabled),
.cp-color-picker__none:hover,
.cp-color-picker__all:focus-visible,
.cp-color-picker__none:focus-visible {
    color: #222;
}

.cp-color-picker__all:disabled {
    opacity: 0.5;
    cursor: default;
}

.cp-color-picker__none[hidden] {
    display: none;
}

.cp-color-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cp-color-option__name {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-color-option__code {
    flex: 0 0 auto;
    color: #888;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* The list beside the cards takes a column of its own while there is more than one variant. */
.cp-variants__body.is-many {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.cp-variants__nav {
    max-height: 26rem;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #e5e5e5;
    background-color: #fff;
}

.cp-variants__restore {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 4px;
    padding: 6px 8px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #222;
    font-size: 13px;
    text-align: left;
}

.cp-variants__restore:hover:not(:disabled),
.cp-variants__restore:focus-visible {
    background-color: #f6f1e3;
}

.cp-variants__restore:disabled {
    color: #aaa;
    cursor: default;
}

.cp-variants__nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-variants__nav-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cp-variants__nav-row .cp-sort-handle {
    flex: 0 0 auto;
    width: 24px;
    height: 32px;
}

.cp-variants__nav-item {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #222;
    font-size: 14px;
    text-align: left;
}

.cp-variants__nav-item:hover,
.cp-variants__nav-item:focus-visible {
    background-color: #f7f4ec;
}

.cp-variants__nav-row.is-active .cp-variants__nav-item {
    background-color: #f6f1e3;
    font-weight: 500;
}

.cp-variants__nav-row.has-error .cp-variants__nav-name {
    color: #b3261e;
}

.cp-variants__nav-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-variants__nav-count {
    flex: 0 0 auto;
    color: #888;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.cp-variants__nav-row.is-dragging {
    opacity: 0.5;
}

/* The card of a variant */
.cp-variant {
    padding: 16px 20px 4px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
}

.cp-variant[hidden] {
    display: none;
}

.cp-variant.has-error {
    border-color: #b3261e;
}

.cp-variant__heading {
    margin-bottom: 18px;
}

.cp-form .cp-variant__title {
    margin: 0;
    overflow: hidden;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-variant__facts {
    margin: 4px 0 0;
    color: #777;
    font-size: 13px;
}

.cp-variant__facts strong {
    color: #222;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* The address of the page of a saved colour, quiet under its facts. */
.cp-variant__slug {
    margin: 2px 0 0;
    overflow: hidden;
    color: #999;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The size group of the category, named beside the title of the sizes. */
.cp-variants__group {
    margin-left: 4px;
    color: #999;
    font-weight: 400;
}

.cp-variants__group:empty {
    display: none;
}

.cp-variants__no-sizes {
    margin: 4px 0 0;
}

/* Three pixels in the colour with a hairline around them, so a white colour still reads as a line; dashed for a colour
   without a hex code, and the ordinary divider for the colourless variant. */
.cp-variant__rule {
    height: 3px;
    margin-top: 12px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.cp-variant__rule--blank {
    height: 0;
    border-top: 3px dashed #c8c8c8;
    border-radius: 0;
    box-shadow: none;
}

.cp-variant__rule--none {
    height: 0;
    border-top: 1px solid #e5e5e5;
    border-radius: 0;
    box-shadow: none;
}

.cp-variant__active {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.cp-variant__active .switch-field {
    margin: 0;
}

/* The line under the prices of a card: the sizes chosen for the product as the toggles of this colour on the left, the
   state of the colour at the right edge. A size switched off for the colour is dashed and struck through. */
.cp-variant__line {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.cp-variant__line .cp-variant__active {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    min-height: 26px;
    align-items: center;
}

.cp-size-toggles {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.cp-size-toggles[hidden] {
    display: none;
}

.cp-size-toggle {
    padding: 2px 10px;
    border: 1px solid #dcb14a;
    border-radius: 999px;
    background-color: rgba(220, 177, 74, 0.12);
    color: #8a6a1c;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.cp-size-toggle:hover {
    background-color: rgba(220, 177, 74, 0.24);
}

.cp-size-toggle.is-off {
    border-style: dashed;
    border-color: #c8c8c8;
    background-color: transparent;
    color: #999;
    font-weight: 400;
    text-decoration: line-through;
}

.cp-size-toggle.is-off:hover {
    background-color: #f5f5f5;
}

.cp-size-toggles__hint {
    flex-basis: 100%;
    color: #888;
    font-size: 11px;
}

/* The colours and the sizes side by side at the top of the tab; the button beside the sizes switches the sizes the
   colours left out back on. */
.cp-variants__axes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.cp-variants__axis[hidden] {
    display: none;
}

.cp-variants__axis-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-variants__axis-row .cp-color-picker {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-variants__reset:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Products: the "Price and stock" tab - every colour in every size, with its codes, price and stock in one row. */
.cp-price-grid__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cp-price-grid__toolbar .field-hint {
    margin: 0;
}

/* The buttons of the toolbar side by side on its right. */
.cp-price-grid__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The list of the variants: the rows edited and not saved yet are marked, and a row whose product or colour is off is
   greyed, as it is not sold. The 44px thumbnail of the lists stays as it is. */
.cp-variant-list .cp-price-grid__row.is-changed {
    background-color: rgba(220, 177, 74, 0.1);
    box-shadow: inset 3px 0 0 #b8901f;
}

.cp-variant-list .cp-price-grid__row.is-muted .cp-entity__name,
.cp-variant-list .cp-price-grid__row.is-muted .cp-entity__thumb {
    opacity: 0.55;
}

.cp-variant-list .cp-table__main {
    min-width: 15rem;
    white-space: normal;
}

.cp-variant-off {
    color: #b02a37;
}

.cp-price-grid__selected {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 4px;
    background-color: rgba(220, 177, 74, 0.18);
    font-size: 12px;
}

.cp-price-grid__selected[hidden] {
    display: none;
}

.cp-price-grid__wrap {
    overflow-x: auto;
}

.cp-price-grid__table {
    white-space: nowrap;
}

.cp-price-grid__table td,
.cp-price-grid__table th {
    vertical-align: middle;
}

.cp-price-grid__table input[type="text"],
.cp-price-grid__table input:not([type]) {
    width: 9rem;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #ddd;
    font-size: 13px;
}

.cp-price-grid__table input.cp-price-grid__wide {
    width: 12rem;
}

.cp-price-grid__table input.cp-price-grid__narrow {
    width: 5.5rem;
}

/* An amount is shorter than a code. */
.cp-price-grid__table .cp-amount--small:not(.cp-amount--choice) input {
    width: 7.5rem;
}

.cp-price-grid__variant {
    font-weight: 500;
}

.cp-price-grid__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cp-price-grid__size {
    color: #888;
    font-weight: 400;
}

.cp-price-grid__active .switch-field {
    margin: 0;
}

.cp-price-grid__row.has-error {
    background-color: rgba(220, 53, 69, 0.05);
}

.cp-price-grid__row .field-error {
    display: block;
    white-space: normal;
}

.cp-amount--small input {
    padding-right: 32px;
}

.cp-amount--small .cp-amount__unit {
    right: 10px;
    font-size: 12px;
}

/* The bulk window of the grid: a label and a field a line. */
.cp-bulk {
    text-align: left;
}

.cp-bulk__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cp-bulk__row > span:first-child {
    flex: 0 0 8rem;
}

.cp-bulk__row input,
.cp-bulk__row select,
.cp-bulk__row .cp-amount {
    flex: 1 1 auto;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #ddd;
}

.cp-bulk__row .cp-amount {
    padding: 0;
    border: 0;
}

.cp-bulk__switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

/* A list of the bulk window is drawn as those of the site, at the height of its fields. */
.cp-bulk__row > .select-field {
    flex: 1 1 auto;
    width: 100%;
}

.cp-bulk__row > .select-field button.select-field__button {
    height: 38px;
    padding: 0 40px 0 10px;
}

.cp-bulk__row .cp-amount--choice input {
    padding-right: 84px;
}

.cp-bulk__row .cp-amount--choice .select-field {
    width: 72px;
}

.cp-bulk__row .cp-amount--choice select.select-field__native,
.cp-bulk__row .cp-amount--choice button.select-field__button {
    padding: 0 26px 0 10px;
}

.cp-bulk__row .cp-amount--choice .select-field::after {
    right: 10px;
}

/* The custom prices and stock of a marketplace: a price or a stock with its kind inside the right edge of the field,
   and the prices before a discount struck through. */
.cp-pricing-grid .cp-table__main {
    min-width: 15rem;
}

.cp-price-grid__table .cp-amount--choice {
    display: inline-block;
    width: 9.5rem;
    vertical-align: middle;
}

.cp-price-grid__table .cp-amount--choice input {
    width: 100%;
    padding-right: 70px;
}

.cp-price-grid__table .cp-amount--choice .select-field {
    width: 60px;
}

.cp-price-grid__table .cp-amount--choice select.select-field__native,
.cp-price-grid__table .cp-amount--choice button.select-field__button {
    padding: 0 22px 0 9px;
    font-size: 12px;
}

.cp-price-grid__table .cp-amount--choice .select-field::after {
    right: 9px;
    width: 6px;
    height: 6px;
}

.cp-price-grid__table .cp-amount--count input {
    padding-right: 90px;
}

.cp-price-grid__table .cp-amount--count .select-field {
    width: 78px;
}

.cp-bulk__row .cp-amount--count input {
    padding-right: 106px;
}

.cp-bulk__row .cp-amount--count .select-field {
    width: 94px;
}

.cp-pricing__price {
    white-space: nowrap;
}

.cp-pricing__old {
    margin-left: 6px;
    color: #999;
    font-size: 12px;
}

/* The prices of the competitors: a row not read any more is toned down, the move of a price is marked by its way (a
   fall of a competitor is a warning for the shop), and the history shows the steps of the price above its readings. */
.cp-table tr.is-muted .cp-entity__name,
.cp-table tr.is-muted .cp-entity__thumb {
    opacity: 0.55;
}

.cp-price-move {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cp-price-move--down {
    color: #b02a37;
}

.cp-price-move--up {
    color: #1e7a3c;
}

.cp-price-history__title {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    font-weight: 500;
}

.cp-price-history__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0 0 16px;
}

.cp-price-history__facts dt {
    color: #888;
    font-size: 12px;
    font-weight: 400;
}

.cp-price-history__facts dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cp-price-history__chart {
    margin-bottom: 16px;
    padding: 16px 16px 6px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    background-color: #fff;
}

.cp-price-history__chart .cp-chart__frame {
    --cp-chart-height: 180px;
}

/* What is said about the shop: an entry not read yet stands out by its title; the text of an entry shows its first
   lines only, the window of a reply shows it whole, above the draft. */
.cp-table tr.is-unread .cp-entity__name {
    font-weight: 600;
}

.cp-table tr .cp-pill + .cp-entity__name {
    margin-left: 6px;
}

.cp-reputation__excerpt {
    display: -webkit-box;
    max-width: 640px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* The outfits: the products an outfit is made of, each with its small picture; its sizes with their stock, a size that
   has none toned down; the sizes of its form. A field of a size of an outfit is read-only: it comes from its parts. */
.cp-outfit-parts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-outfit-parts li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-outfit-parts li.is-off {
    color: #999;
    text-decoration: line-through;
}

.cp-outfit-parts__thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
}

.cp-outfit-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-outfit-sizes__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}

.cp-outfit-sizes__item.is-empty {
    color: #999;
}

.cp-outfit-sizes__item .icon-lock {
    color: #b8901f;
    font-size: 11px;
}

.cp-outfit-grid .select-field {
    min-width: 120px;
}

/* The pieces of each product of a package, and the number before a product in the list */
.cp-outfit-parts__pieces {
    margin-right: 4px;
}

.cp-outfit-pieces {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

.cp-outfit-pieces li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

.cp-outfit-pieces label,
.cp-outfit-pieces__name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.cp-form .single-input-item .cp-outfit-pieces input {
    flex: 0 0 90px;
    width: 90px;
    margin: 0;
    text-align: right;
}

/* Its product made from the products chosen, set apart from the choice of an existing one */
.cp-outfit-new-product {
    padding: 14px 16px;
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    background-color: #fcfcfc;
}

/* The search of the form of a rule of the products off sale: what to look for, where, and the button, on one line
   while there is room. The theme stacks what a field of a form holds (.myaccount-content form .single-input-item);
   this field lays its parts side by side. */
.cp-sale-block-search,
.myaccount-content form .single-input-item.cp-sale-block-search {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}

.cp-sale-block-search__text {
    flex: 1 1 260px;
    min-width: 0;
}

.cp-form .cp-sale-block-search .cp-search input {
    padding-left: 40px;
}

.cp-sale-block-search__in {
    flex: 0 1 240px;
    min-width: 180px;
}

.cp-sale-block-search > .btn {
    flex: 0 0 auto;
    min-width: 96px;
}

/* On a phone the text takes a line, and where to look and the button share the next one. */
@media (max-width: 575.98px) {
    .cp-sale-block-search__in {
        flex: 1 1 0;
    }
}

/* What the search found: a line each, with the button that adds it */
.cp-sale-block-results {
    padding: 12px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.cp-sale-block-results__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.cp-sale-block-results__list {
    max-height: 360px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.cp-sale-block-results__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid #f0f0f0;
}

/* Its small picture, or the icon of its kind without one */
.cp-sale-block-results__media {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 6px;
    background-color: #fafafa;
    color: #999;
    font-size: 18px;
}

.cp-sale-block-results__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cp-sale-block-results__text {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    min-width: 0;
}

/* The button that adds it, or the mark that it is added, keeps its size beside a long name */
.cp-sale-block-results__list .cp-icon-button,
.cp-sale-block-results__list .cp-pill {
    flex: 0 0 auto;
}

/* What it is - a product, a brand, a category... - on the right, before its button */
.cp-sale-block-results__kind {
    flex: 0 0 auto;
    color: #777;
    font-size: 13px;
    white-space: nowrap;
}

.cp-sale-block-results__name,
.cp-sale-block-results__text .field-hint {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cp-sale-block-results__name {
    font-weight: 500;
}

/* What a rule of the products off sale names: a line for each kind, with its chips */
.cp-sale-block-chosen {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-sale-block-chosen__label {
    display: block;
    margin-bottom: 6px;
    color: #555;
    font-size: 13px;
    font-weight: 600;
}

.cp-sale-block-chosen__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-sale-block-chosen .cp-color-chip {
    max-width: 24rem;
}

/* The products a rule of the products off sale matches as its form stands */
.cp-sale-block-preview {
    padding: 14px 16px;
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    background-color: #fcfcfc;
}

.cp-sale-block-preview__list {
    margin: 0 0 6px;
    padding: 0;
    font-size: 14px;
    list-style: none;
}

.cp-sale-block-preview__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
}

/* The small picture of something a rule of the products off sale names, or the icon of its kind without one: on its
   chip, and larger beside a product it matches */
.cp-sale-block-thumb {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    overflow: hidden;
    border-radius: 4px;
    background-color: #fff;
    color: #999;
    font-size: 13px;
}

.cp-sale-block-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cp-sale-block-chip {
    padding-left: 3px;
}

.cp-sale-block-preview__list .cp-sale-block-thumb {
    width: 36px;
    height: 36px;
    border: 1px solid #eee;
    font-size: 15px;
}

.cp-price-grid input[readonly],
.cp-table input[readonly] {
    background-color: #f4f5f7;
    color: #777;
}

.cp-suggestion__reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cp-reputation__entry {
    padding: 14px 16px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    background-color: #fcfcfc;
    white-space: pre-line;
}

.cp-variant__images {
    margin-bottom: 16px;
}

.cp-variant__images-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.cp-variant__images-title {
    font-weight: 500;
}

.cp-variant__images-head .btn {
    padding: 6px 14px;
    font-size: 14px;
}

/* The drop zone of a variant holds its pictures, and its message under them: a click on the zone outside the pictures
   chooses files. Pictures dropped, chosen or pasted on it wait there until the form is saved. Without pictures the
   message fills the zone; with them it is one line under them. */
.cp-dropzone {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
    padding: 14px;
    border: 1px dashed #cfcfcf;
    border-radius: 10px;
    background-color: #fafafa;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cp-dropzone:hover,
.cp-dropzone.is-over {
    border-color: #dcb14a;
    background-color: #fbf7ec;
}

.cp-dropzone:not(.has-pictures) .cp-gallery {
    display: none;
}

.cp-dropzone__message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 150px;
    padding: 10px;
    border-radius: 8px;
    color: #444;
    text-align: center;
}

.cp-dropzone__message:focus-visible {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

.cp-dropzone__icon {
    color: #b5b5b5;
    font-size: 28px;
    line-height: 1;
}

.cp-dropzone__prompt {
    font-size: 15px;
}

.cp-dropzone__hint {
    color: #888;
    font-size: 13px;
}

.cp-dropzone.has-pictures .cp-dropzone__message {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 14px;
    min-height: 0;
    padding: 6px;
}

.cp-dropzone.has-pictures .cp-dropzone__icon {
    font-size: 18px;
}

.cp-dropzone.has-pictures .cp-dropzone__prompt {
    font-size: 14px;
}

/* The pictures of a variant, in their order; the first is the main picture and carries a frame of the accent. */
.cp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}

.cp-gallery__item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background-color: #f5f5f5;
    cursor: zoom-in;
    touch-action: none;
}

.cp-gallery__item:first-child {
    border-color: #dcb14a;
    box-shadow: 0 0 0 1px #dcb14a;
}

.cp-gallery__item:focus-visible {
    outline: 2px solid #222;
    outline-offset: 2px;
}

.cp-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* The button of a picture in its top right corner, which removes it: see-through, its white cross carrying a shadow
   that keeps it seen on a light picture, and red under the pointer. */
.cp-gallery__actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 4px;
}

.cp-gallery__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cp-gallery__action:hover,
.cp-gallery__action:focus-visible {
    background-color: rgba(0, 0, 0, 0.35);
}

.cp-gallery__action--remove:hover,
.cp-gallery__action--remove:focus-visible {
    background-color: rgba(179, 38, 30, 0.85);
    text-shadow: none;
}

.cp-gallery__action:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.cp-gallery__item.is-dragging {
    opacity: 0.4;
}

/* A picture that waits for the save carries an upload icon in its corner (its title says what it means); one the
   library refused is framed in red. */
.cp-gallery__badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #dcb14a;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.cp-gallery__item.is-failed {
    border-color: #b3261e;
    box-shadow: 0 0 0 2px #b3261e;
}

html.cp-form-sorting,
html.cp-form-sorting * {
    cursor: grabbing !important;
    user-select: none !important;
}

/* On a narrow screen the list of variants stands above the open card. */
@media (max-width: 767px) {
    .cp-variants__body.is-many {
        grid-template-columns: minmax(0, 1fr);
    }

    .cp-variants__nav {
        max-height: 14rem;
    }
}

@media (max-width: 575px) {
    .cp-variant {
        padding: 14px 12px 4px;
    }

    .cp-gallery {
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    }
}

/* The attributes a category asks its products for (attributes.js): what it inherits, read-only in a dashed frame, and
   the rows it declares itself, dragged into their order, each with its "Required" switch; the list under them adds one. */
.cp-inherited {
    margin-bottom: 14px;
}

.cp-inherited__title {
    margin: 0 0 6px;
    color: #777;
    font-size: 13px;
    font-weight: 500;
}

.cp-inherited__list {
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
    border: 1px dashed #d6d6d6;
    border-radius: 8px;
}

.cp-inherited__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px 4px 12px;
}

.cp-inherited__row:not([hidden]) ~ .cp-inherited__row:not([hidden]) {
    border-top: 1px dashed #e4e4e4;
}

.cp-inherited__icon {
    flex: 0 0 auto;
    color: #a0a0a0;
}

.cp-inherited__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.cp-inherited__source {
    margin-left: 6px;
    color: #888;
    font-size: 12px;
}

.cp-inherited__state {
    flex: 0 0 auto;
    color: #777;
    font-size: 12px;
    white-space: nowrap;
}

.cp-inherited .cp-icon-button,
.cp-attribute-row .cp-icon-button {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-color: transparent;
    font-size: 14px;
}

.cp-attribute-rows {
    margin-bottom: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.cp-attribute-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    border-radius: 8px;
    background-color: #fff;
}

.cp-attribute-row + .cp-attribute-row {
    border-top: 1px solid #eee;
    border-radius: 0;
}

.cp-attribute-row.is-dragging {
    opacity: 0.4;
}

.cp-attribute-row__name {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.cp-attribute-row.has-error [data-attribute-name] {
    color: #b3261e;
}

.cp-attribute-row__note {
    color: #8a6100;
    font-size: 12px;
}

.cp-attribute-row__name .field-error {
    flex-basis: 100%;
}

.cp-form .cp-attribute-row__required {
    flex: 0 0 auto;
    margin: 0;
}

.cp-attribute-add {
    max-width: 360px;
}

/* The "Attributes" tab of the product form: the questions of the category two by two, why an inherited one is asked
   beside its name, and the answers kept to attributes the category no longer asks for. */
.cp-attribute-answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
}

.cp-attribute-answer {
    margin-bottom: 16px;
}

.cp-attribute-answer__required {
    color: #b3261e;
}

.cp-attribute-answer__source {
    margin-left: 6px;
    color: #888;
    font-size: 12px;
    font-weight: 400;
}

.cp-product-attributes__error {
    display: block;
    margin-bottom: 10px;
}

.cp-product-attributes[aria-busy="true"] [data-product-attributes-body] {
    opacity: 0.5;
    pointer-events: none;
}

.cp-kept-answers {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px dashed #d6d6d6;
    border-radius: 8px;
}

.cp-kept-answers__title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 500;
}

.cp-kept-answers__list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.cp-kept-answers__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.cp-kept-answers__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cp-kept-answers__row .cp-icon-button {
    width: 32px;
    height: 32px;
    border-color: transparent;
    font-size: 14px;
}

/* A gap of a product in its list: the required attributes it leaves unanswered, named. */
.cp-gap {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 1px 6px;
    border: 1px solid rgba(181, 130, 20, 0.4);
    border-radius: 4px;
    background-color: rgba(220, 177, 74, 0.12);
    color: #7a5600;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .cp-attribute-answers {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The setup of the catalogue: the offer on the first page of the panel, the kinds of shop to choose from, and the
   preview - the categories as a tree of switches, the sizes, values and colors as chips that are struck through
   while they are off. */
.cp-setup-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 30px;
    padding: 24px;
    border: 1px solid #e5e5e5;
    background-color: #fafafa;
}

.cp-setup-card__text h2 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 500;
}

.cp-setup-card__text p {
    margin: 0;
    color: #666;
}

.cp-setup-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cp-setup-sectors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px 24px;
}

.cp-setup-tree {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-setup-tree .cp-setup-tree {
    margin: 10px 0 0 20px;
    padding-left: 24px;
    border-left: 1px dashed #ddd;
}

.cp-setup-tree > li {
    margin-bottom: 10px;
}

.cp-setup-group {
    margin-bottom: 22px;
}

.cp-setup-group__categories {
    display: block;
    margin: 2px 0 0 52px;
}

.cp-setup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-setup-group .cp-setup-chips {
    margin: 10px 0 0 52px;
}

.cp-form label.cp-setup-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 2px 10px;
    border: 1px solid #dcb14a;
    border-radius: 999px;
    background-color: rgba(220, 177, 74, 0.12);
    color: #8a6a1c;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.cp-form label.cp-setup-chip:hover {
    background-color: rgba(220, 177, 74, 0.24);
}

/* The checkbox keeps its place for the keyboard, unseen; the chip shows its state. */
.cp-form label.cp-setup-chip input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}

.cp-form label.cp-setup-chip:has(input:not(:checked)),
.cp-form label.cp-setup-chip:has(input:disabled) {
    border-style: dashed;
    border-color: #c8c8c8;
    background-color: transparent;
    color: #999;
    font-weight: 400;
    text-decoration: line-through;
}

.cp-form label.cp-setup-chip:has(input:disabled) {
    opacity: 0.6;
    cursor: default;
}

.cp-form label.cp-setup-chip:has(input:focus-visible) {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

.cp-setup-chip__swatch {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* A small ring turns in front of the text of a busy button of the setup. */
[data-setup-form] .btn.is-busy::before,
[data-setup-proposal] .btn.is-busy::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 10px -2px 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cp-assistant-turn 0.8s linear infinite;
}

@media (max-width: 575px) {
    .cp-setup-group__categories,
    .cp-setup-group .cp-setup-chips {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-setup-form] .btn.is-busy::before,
    [data-setup-proposal] .btn.is-busy::before {
        animation: none;
    }
}

/* The form of a color: a row a hex code - its handle, its field with the picker, its cross - up to three, and the
   colors it is made of as chips. With one code there is nothing to drag or take out. */
.cp-hex-codes {
    display: grid;
    gap: 8px;
}

.cp-hex-code {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #fff;
}

.cp-hex-code .color-field {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-hex-code .cp-icon-button {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-color: transparent;
    font-size: 14px;
}

.cp-hex-code:only-child .cp-sort-handle,
.cp-hex-code:only-child [data-hex-code-remove] {
    visibility: hidden;
}

.cp-hex-code.is-dragging {
    opacity: 0.4;
}

.cp-hex-codes__add {
    margin-top: 8px;
    font-size: 13px;
}

.cp-hex-codes__add[hidden] {
    display: none;
}

.cp-color-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-color-parts:not(:empty) {
    margin-bottom: 8px;
}

.cp-color-part {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 2px 8px;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    background-color: #fff;
    font-size: 13px;
    line-height: 22px;
}

.cp-color-part__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #888;
    font-size: 10px;
    cursor: pointer;
}

.cp-color-part__remove:hover {
    background-color: #f2f2f2;
    color: #b3261e;
}

[data-color-part-picker][hidden] {
    display: none;
}

/* Shop: the search, the favourites and the cart of the header --------------------------------------------------- */

/* The theme spaces every entry of the right side of the header by 40px; the shop adds three, so they stand closer. */
.header-right-side .header-right-items.header-shop-link {
    margin-left: 28px;
}

.header-shop-link__icon {
    position: relative;
    display: inline-flex;
    color: #000;
}

.header-shop-link__icon:hover,
.header-shop-link__icon:focus-visible {
    color: #916f1c;
}

/* The number of pieces in the cart: the badge of the theme, its figure readable on the gold. */
.header-cart .item-counter {
    color: #000;
    font-weight: 600;
}

.header-cart .item-counter[hidden] {
    display: none;
}

.header-area.header-sticky.is-settling .header-shop-link__icon {
    transition: color 0.6s ease;
}

.site-topbar--inverted > .header-area:not(.is-sticky) .header-shop-link__icon {
    color: #fff;
}

/* A phone has the logo beside five entries: they stand closer still, and the account loses the arrow of its menu (the
   language keeps its own, under its code); on the narrowest phones both arrows go. */
@media only screen and (max-width: 575px) {
    .header-right-side .header-right-items,
    .header-right-side .header-right-items.header-shop-link {
        margin-left: 12px;
    }

    .header-menu__toggle .icon-user ~ .icon-chevron-down {
        display: none;
    }
}

@media only screen and (max-width: 359px) {
    .header-right-side .header-right-items,
    .header-right-side .header-right-items.header-shop-link {
        margin-left: 8px;
    }

    .header-right-side .header-menu__toggle .icon-chevron-down {
        display: none;
    }
}

/* Shop: the search of the header ---------------------------------------------------------------------------------- */

/* The overlay of the theme (.search-overlay) slides up over the page. It is seen as soon as it starts to open, so its
   field takes the focus at once, and hidden once it has slid away. The products it suggests can be more than a screen
   holds, so it scrolls. */
.search-overlay {
    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s linear 0.4s;
}

.search-overlay.active {
    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s;
}

/* The theme moves every property of the inside of the overlay and of its field, the visibility they take from the
   overlay too; without that the field is seen at once and can take the focus. */
.search-overlay__inner {
    overflow-y: auto;
    transition: none;
}

.search-overlay__header {
    padding: 30px 0;
}

/* The title and the cross stand over the edges of the field. */
.search-overlay__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.search-overlay__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.search-overlay__close {
    margin-right: -8px;
    padding: 8px;
    border: 0;
    background: none;
    color: #222;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.search-overlay__close:hover,
.search-overlay__close:focus-visible {
    color: #916f1c;
}

.search-overlay__form input[type="search"] {
    height: auto;
    padding: 15px 50px 15px 0;
    color: #222;
    font-size: 28px;
    transition: border-color 0.4s, color 0.4s;
    -webkit-appearance: none;
    appearance: none;
}

.search-overlay__form input[type="search"]:focus {
    border-color: #222;
    outline: 0;
}

/* The cross the browser draws in a search field is left out: Escape and the cross of the overlay clear the search. */
.search-overlay__form input[type="search"]::-webkit-search-cancel-button,
.shop-search__text::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.search-overlay__form .submit-button {
    top: 50%;
    color: #222;
    transform: translateY(-50%);
}

.search-overlay__form .submit-button:hover,
.search-overlay__form .submit-button:focus-visible {
    color: #916f1c;
}

.search-overlay__results {
    max-width: 1200px;
    margin: 30px auto 60px;
    padding: 0 15px;
}

.search-suggestions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px 30px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.search-suggestion {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #222;
}

.search-suggestion__media {
    display: flex;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    height: 80px;
    overflow: hidden;
    background-color: #fff;
    color: #bbb;
    font-size: 20px;
}

.search-suggestion__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-suggestion__text {
    min-width: 0;
}

.search-suggestion__name {
    display: block;
    font-weight: 500;
    line-height: 1.4;
}

.search-suggestion:hover .search-suggestion__name,
.search-suggestion:focus-visible .search-suggestion__name {
    color: #916f1c;
}

.search-suggestion__price {
    display: block;
    margin-top: 4px;
    color: #555;
    font-size: 14px;
}

.search-suggestion__price del {
    margin-left: 6px;
    color: #999;
}

.search-suggestions__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #916f1c;
    font-weight: 500;
    text-decoration: underline;
}

.search-suggestions__none {
    margin: 0;
    color: #777;
}

@media only screen and (max-width: 767px) {
    .search-overlay__header {
        padding: 20px 0;
    }

    .search-overlay__form input[type="search"] {
        font-size: 22px;
    }
}

/* Shop: the cards of the products ------------------------------------------------------------------------------- */

.shop-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background-color: #f6f6f6;
}

.shop-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* The second picture shows while the pointer is over the card; a screen without a pointer keeps the first. */
.shop-card__image--hover {
    opacity: 0;
}

@media (hover: hover) {
    .shop-card:hover .shop-card__image--hover {
        opacity: 1;
    }

    .shop-card:hover .shop-card__image {
        transform: scale(1.03);
    }
}

.shop-card__placeholder,
.shop-gallery__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4c4c4;
    font-size: 40px;
}

.single-product-item .product-thumbnail .ribbon {
    font-size: 12px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: 0.04em;
}

.shop-card .product-content {
    margin-top: 14px;
}

.shop-card__brand,
.shop-product__brand,
.shop-line__brand {
    margin: 0 0 2px;
    color: #999;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.single-product-item.shop-card .product-content .prodect-title {
    margin-bottom: 2px;
    font-size: 15px;
    line-height: 1.4;
}

.shop-card .prodect-title a {
    display: -webkit-box;
    overflow: hidden;
    color: #222;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.shop-card__color {
    margin: 0 0 6px;
    color: #777;
    font-size: 13px;
}

/* The stars of a rating: full, half and empty ones in the warm colour of the shop. */
.shop-stars {
    display: inline-flex;
    gap: 2px;
    color: #e0a100;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
}

/* The stars of a product on its card, with how many reviews there are. */
.shop-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 12px;
}

.shop-card__reviews {
    color: #777;
}

.shop-card__image[hidden],
.shop-card__placeholder[hidden],
.shop-card .ribbon[hidden],
.shop-price__cart[hidden] {
    display: none;
}

/* The colours on the card of a product, while the lists show a product once: a press shows one on the card. */
.shop-card__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.shop-card__swatch {
    display: block;
    width: 24px;
    height: 24px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 50%;
}

.shop-card__swatch:hover {
    border-color: #bbb;
}

.shop-card__swatch.is-current {
    border-color: #111;
}

.shop-card__swatch .shop-swatch,
.shop-card__swatch img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: top;
}

.shop-card__swatch img {
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* A price: what it is sold for, the list price struck through while it is discounted, and what it costs in the cart. */
.shop-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}

.shop-price .shop-price__now,
.single-product-item .product-content .prodect-price .shop-price__now {
    color: #111;
    font-size: 16px;
    font-weight: 600;
}

.shop-price__was {
    color: #999;
    font-size: 13px;
}

.shop-price__was[hidden] {
    display: none;
}

/* How much less than the list price, beside the price of a product page; the size chosen changes it (shop.js). */
.shop-price__off {
    align-self: center;
    padding: 2px 8px;
    border-radius: 3px;
    background-color: #f14705;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}

.shop-price__off[hidden] {
    display: none;
}

.shop-price__cart {
    margin: 4px 0 0;
    color: #1e7e34;
    font-size: 13px;
    font-weight: 500;
}

/* The heart of a card stands in the top left corner of its picture, the ribbon in the right one. */
.shop-favorite {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    margin: 0;
}

.shop-favorite__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: #222;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.shop-favorite__button:hover,
.shop-favorite__button:focus-visible {
    color: #c62828;
}

.shop-favorite__button[aria-pressed="true"] {
    background-color: #c62828;
    color: #fff;
}

.shop-favorite__button:disabled {
    opacity: 0.6;
}

.shop-favorite--large {
    position: static;
    flex: 0 0 auto;
}

.shop-favorite--large .shop-favorite__button {
    width: 48px;
    height: 48px;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: none;
    font-size: 22px;
}

.shop-favorite--large .shop-favorite__button[aria-pressed="true"] {
    border-color: #c62828;
    background-color: #c62828;
    color: #fff;
}

/* Shop: the lists ------------------------------------------------------------------------------------------------ */

.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.shop-toolbar__count {
    margin: 0;
    color: #777;
    font-size: 14px;
}

.shop-toolbar__sort {
    display: flex;
    gap: 8px;
    width: 230px;
    margin: 0;
}

.shop-toolbar__sort select.select-field__native,
.shop-toolbar__sort button.select-field__button {
    padding-top: 9px;
    padding-bottom: 9px;
}

.shop-page__intro {
    margin-bottom: 40px;
}

.shop-sidebar {
    margin-bottom: 30px;
}

.shop-sidebar__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #222;
    font-weight: 500;
}

@media only screen and (max-width: 991px) {
    .shop-sidebar__panel {
        padding-top: 20px;
    }
}

.shop-sidebar .shop-widget {
    margin-bottom: 24px;
    padding-bottom: 24px;
}

.shop-widget__title {
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 600;
}

.shop-filters__list li,
.shop-sidebar__categories li {
    margin-bottom: 8px;
}

.shop-filters__list--sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.shop-filters__list--sizes li {
    margin-bottom: 0;
}

.shop-sidebar__categories a {
    color: #444;
}

.shop-sidebar__categories a:hover,
.shop-sidebar__categories a:focus-visible {
    color: #916f1c;
}

/* A colour drawn from its hex codes (ColorSwatch); one without a code is striped. */
.shop-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    background: repeating-linear-gradient(45deg, #e8e8e8 0 3px, #fff 3px 6px);
    vertical-align: -3px;
}

.shop-filters__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

/* The script sends the filters as soon as one is ticked; the button is for a page without it. */
.shop-filters.is-live .shop-filters__apply {
    display: none;
}

.shop-filters__clear {
    color: #916f1c;
    font-size: 14px;
    text-decoration: underline;
}

/* The prices of the filters: the lowest and the highest side by side, and the button that sends them. */
.shop-filters__prices {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.shop-filters__prices .number-field {
    flex: 1 1 0;
    min-width: 0;
}

.shop-filters__dash {
    align-self: center;
    color: #999;
}

.shop-filters__price-apply {
    flex: 0 0 44px;
    border: 1px solid #222;
    background-color: #222;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.shop-filters__price-apply:hover,
.shop-filters__price-apply:focus-visible {
    border-color: #916f1c;
    background-color: #916f1c;
}

/* The search of the page of a search: the text searched, to change. */
.shop-search {
    position: relative;
    max-width: 640px;
    margin: 0 auto 40px;
}

.shop-search .shop-search__text {
    width: 100%;
    height: 52px;
    padding: 12px 56px 12px 16px;
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fff;
    color: #222;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}

.shop-search .shop-search__text:focus {
    border-color: #dcb14a;
    outline: 0;
}

.shop-search__button {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 52px;
    border: 0;
    background: none;
    color: #222;
    font-size: 20px;
    cursor: pointer;
}

.shop-search__button:hover,
.shop-search__button:focus-visible {
    color: #916f1c;
}

.shop-empty {
    padding: 60px 20px;
    color: #777;
    text-align: center;
}

.shop-empty > i {
    display: block;
    margin-bottom: 14px;
    color: #ccc;
    font-size: 48px;
}

.shop-empty p {
    margin-bottom: 20px;
}

.shop-pager {
    margin-top: 40px;
}

.shop-pager ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 0;
    margin: 0;
    padding: 0;
}

.page-pagination li .page-numbers.shop-pager__gap {
    background: none;
}

/* Shop: the categories as tiles ----------------------------------------------------------------------------------- */

.shop-tile {
    position: relative;
    display: block;
    overflow: hidden;
    margin-top: 30px;
    border: 1px solid #eee;
    background-color: #fff;
    color: #222;
}

.shop-tile__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: #fff;
}

.shop-tile__image {
    position: absolute;
    inset: 0;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 12px;
    object-fit: contain;
    object-position: center;
}

.shop-tile__name {
    display: block;
    padding: 18px 20px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.shop-tile:hover,
.shop-tile:focus-visible {
    border-color: #dcb14a;
    color: #222;
}

.shop-tile:focus-visible {
    outline: 2px solid #dcb14a;
    outline-offset: 3px;
}

.shop-tile--plain .shop-tile__media {
    background-color: #f4f1ea;
}

.shop-categories__children {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.shop-categories__children a {
    color: #666;
    font-size: 14px;
}

.shop-categories__children a:hover {
    color: #916f1c;
}

.shop-home__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

.shop-home__title {
    margin: 0;
    font-size: 28px;
}

.shop-home__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.shop-home__more:hover,
.shop-home__more:focus-visible {
    color: #916f1c;
}

/* Shop: the page of a product ------------------------------------------------------------------------------------- */

.breadcrumb-list.shop-product__trail {
    margin: 0 0 30px;
    padding: 0;
    font-size: 12px;
}

.shop-product__trail li {
    font-size: 12px;
    letter-spacing: 1px;
}

/* The gallery anchors the pane of the zoom, which reaches over the words beside it. */
.shop-gallery {
    position: relative;
}

.shop-gallery__main {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background-color: #f6f6f6;
}

.shop-gallery__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The lens over the part of the picture the pane shows larger: a pale wash with a thin dark line inset, so the
   outline sits on the picture rather than beside it. It follows the pointer at once: the theme animates every link,
   button, picture and span ("transition: all"), which would make it trail behind. */
.shop-gallery__lens {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    transition: none;
    will-change: transform;
}

.shop-gallery__lens[hidden] {
    display: none;
}

/* The pane: square, over the words beside the gallery while the pointer is over the picture (shop.js places it from
   the column beside). Closed, it takes no room, so a pane placed for a wider window never widens the page. */
.shop-gallery__pane {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 30px);
    z-index: 5;
    width: 0;
    height: 0;
    border: 1px solid #e5e5e5;
    background-color: #f6f6f6;
    background-repeat: no-repeat;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.shop-gallery__pane.is-open {
    display: block;
    animation: shop-pane-in 0.2s ease;
}

@keyframes shop-pane-in {
    from {
        opacity: 0;
    }
}

/* While the pane is open the small pictures fade back, so the eye stays on the part being read. */
.shop-gallery.is-zooming .shop-gallery__thumbs {
    opacity: 0.3;
}

@media only screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .shop-gallery__main[data-shop-zoom] {
        cursor: crosshair;
    }
}

@media only screen and (max-width: 767px), (hover: none) {
    .shop-gallery__lens,
    .shop-gallery__pane {
        display: none;
    }
}

.shop-gallery__thumbs {
    display: flex;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0 0 4px;
    overflow-x: auto;
    list-style: none;
    transition: opacity 0.3s ease;
}

.shop-gallery__thumb {
    display: block;
    flex: 0 0 72px;
    width: 72px;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border: 1px solid transparent;
    background-color: #f6f6f6;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s;
}

.shop-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-gallery__thumb:hover,
.shop-gallery__thumb.is-current {
    opacity: 1;
}

.shop-gallery__thumb.is-current {
    border-color: #222;
}

.shop-product__details {
    padding-left: 20px;
}

@media only screen and (max-width: 767px) {
    .shop-product__details {
        margin-top: 30px;
        padding-left: 0;
    }
}

.shop-product__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.shop-product__title {
    margin: 0 0 16px;
    font-size: 28px;
    line-height: 1.3;
}

.shop-price--large .shop-price__now {
    font-size: 26px;
}

.shop-price--large .shop-price__was {
    font-size: 16px;
}

.shop-product__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    color: #1e7e34;
    font-size: 14px;
}

.shop-product__label {
    float: none;
    width: auto;
    margin: 0 0 10px;
    color: #555;
    font-size: 14px;
}

.shop-product__label strong {
    color: #222;
    font-weight: 500;
}

.shop-product__colors {
    margin-top: 24px;
}

.shop-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-color {
    display: block;
    width: 56px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border: 1px solid #e5e5e5;
    background-color: #f6f6f6;
}

.shop-color img,
.shop-color .shop-swatch {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
}

.shop-color:hover {
    border-color: #999;
}

.shop-color.is-current {
    border: 2px solid #222;
}

.shop-color.is-out {
    opacity: 0.45;
}

.shop-sizes {
    margin: 24px 0 0;
    padding: 0;
    border: 0;
}

.shop-sizes__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* A size is a radio button drawn as a box; one sold out is struck through and cannot be chosen. */
.shop-size {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.shop-size input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.shop-size span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.shop-size:hover span {
    border-color: #222;
}

.shop-size input:checked + span {
    border-color: #222;
    background-color: #222;
    color: #fff;
}

.shop-size input:focus-visible + span {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

.shop-size.is-out,
.shop-size.is-out input {
    cursor: not-allowed;
}

.shop-size.is-out span,
.shop-size.is-out:hover span {
    border-color: #e5e5e5;
    background: linear-gradient(to top left, transparent calc(50% - 1px), #ddd, transparent calc(50% + 1px));
    color: #bbb;
}

/* A size the products off sale list only: muted and not chosen, but not struck through as one sold out. */
.shop-size.is-off,
.shop-size.is-off input {
    cursor: not-allowed;
}

.shop-size.is-off span,
.shop-size.is-off:hover span {
    border-color: #e5e5e5;
    color: #bbb;
}

.shop-product__stock {
    margin: 14px 0 0;
    color: #1e7e34;
    font-size: 14px;
}

.shop-product__stock.is-out {
    color: #b3261e;
}

/* Before a size is chosen the line only asks for one; few pieces left are told in the warm tone of a warning. */
.shop-product__stock.is-hint {
    color: #777;
}

.shop-product__stock.is-low {
    color: #b45309;
}

.shop-cart-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

/* The pieces: a number field between a minus and a plus. */
.shop-quantity {
    display: inline-flex;
    align-items: stretch;
    height: 52px;
    border: 1px solid #ddd;
    background-color: #fff;
}

.shop-quantity input {
    width: 52px;
    padding: 0;
    border: 0;
    color: #222;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}

.shop-quantity input::-webkit-outer-spin-button,
.shop-quantity input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.shop-quantity__step {
    width: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: #555;
    font-size: 12px;
    cursor: pointer;
}

.shop-quantity__step:hover,
.shop-quantity__step:focus-visible {
    color: #000;
}

.shop-quantity--small {
    height: 40px;
}

.shop-quantity--small input {
    width: 40px;
}

.shop-quantity--small .shop-quantity__step {
    width: 30px;
}

.btn.shop-cart-form__add {
    display: inline-flex;
    flex: 1 1 200px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 24px;
    line-height: 1;
}

.btn.shop-cart-form__add:disabled {
    background-color: #888;
    cursor: not-allowed;
}

/* A sold-out size: a line that opens the form leaving an email, to be told once it is back. */
.shop-alert {
    margin-top: 18px;
}

.shop-alert__open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #222;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    list-style: none;
}

.shop-alert__open::-webkit-details-marker {
    display: none;
}

.shop-alert__open:hover,
.shop-alert__open:focus-visible {
    color: #000;
}

.shop-alert__form {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid #eee;
    background-color: #fafafa;
}

.shop-alert__size {
    margin: 0 0 10px;
    font-size: 14px;
}

.shop-alert__form .select-field {
    margin-bottom: 12px;
}

.shop-alert__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.shop-alert__row input {
    flex: 1 1 200px;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #222;
}

.shop-alert__row .btn {
    height: 48px;
    padding: 0 22px;
}

.shop-alert .field-hint {
    margin: 8px 0 0;
}

.shop-product__facts {
    margin: 24px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #eee;
    font-size: 14px;
    list-style: none;
}

.shop-product__facts li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
}

.shop-product__facts li span:first-child {
    color: #777;
}

/* The day an order leaves, in green: it is what a visitor looks for. */
.shop-product__facts .shop-product__ships span:last-child {
    color: #1e7e34;
    font-weight: 600;
}

.shop-product__more {
    margin-top: 60px;
}

.shop-product__section {
    margin-bottom: 30px;
}

.shop-product__section-title {
    margin-bottom: 16px;
    font-size: 20px;
}

.shop-product__attributes {
    margin: 0;
}

/* The questions of the members on a product page, with the answers of the shop. */
/* The reviews of a product: the average and how many gave each number of stars beside it, then the reviews. */
.shop-product__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #222;
    font-size: 14px;
}

.shop-product__rating:hover .shop-product__reviews,
.shop-product__rating:focus-visible .shop-product__reviews {
    text-decoration: underline;
}

.shop-product__reviews {
    color: #777;
}

.shop-reviews__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    align-items: center;
    margin-bottom: 24px;
}

.shop-reviews__average {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.shop-reviews__average .shop-stars {
    font-size: 16px;
}

.shop-reviews__score {
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
}

.shop-reviews__bars {
    flex: 1 1 260px;
    max-width: 420px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-reviews__bar {
    display: grid;
    grid-template-columns: 72px 1fr 36px;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
    color: #555;
    font-size: 13px;
}

.shop-reviews__track {
    height: 6px;
    border-radius: 3px;
    background-color: #eee;
    overflow: hidden;
}

.shop-reviews__fill {
    display: block;
    height: 100%;
    background-color: #e0a100;
}

.shop-reviews__number {
    text-align: right;
}

.shop-reviews {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-reviews__item {
    padding: 18px 0;
    border-top: 1px solid #eee;
}

.shop-reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.shop-reviews__variant {
    margin: 6px 0 0;
    color: #777;
    font-size: 13px;
}

.shop-reviews__text {
    margin: 8px 0 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.shop-reviews__photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.shop-reviews__photo img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid #eee;
}

.shop-reviews__pager {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.shop-questions {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.shop-questions__item {
    padding: 12px 0;
    border-top: 1px solid #eee;
}

.shop-questions__asked,
.shop-questions__answer {
    margin: 0 0 4px;
    white-space: pre-line;
}

.shop-questions__answer {
    color: #444;
}

.shop-questions__by {
    margin: 0;
    color: #888;
    font-size: 13px;
}

.shop-questions__form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.shop-questions__form textarea {
    width: 100%;
}

.shop-product__attributes div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.shop-product__attributes dt {
    color: #555;
    font-weight: 500;
}

.shop-product__attributes dd {
    margin: 0;
    color: #222;
    text-align: right;
    overflow-wrap: anywhere;
}

/* What the description holds stays in its column: a wide table or picture scrolls inside it, not the page. */
.shop-product__description {
    overflow-x: auto;
    overflow-wrap: break-word;
}

.shop-product__description img {
    max-width: 100%;
    height: auto;
}

/* The installments of the card programs on a product page: a table a program, side by side while there is room. */
.shop-installments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    align-items: start;
    gap: 16px;
    margin-bottom: 12px;
}

.shop-installments__note {
    color: #777;
    font-size: 13px;
}

.shop-installments__table {
    width: 100%;
    border: 1px solid #eee;
    border-collapse: collapse;
    font-size: 14px;
}

.shop-installments__table caption {
    caption-side: top;
    padding: 8px 12px;
    background: #f6f6f6;
    color: #222;
    font-weight: 600;
}

.shop-installments__table th,
.shop-installments__table td {
    padding: 6px 10px;
    border-top: 1px solid #eee;
    text-align: right;
    font-weight: 400;
    white-space: nowrap;
}

.shop-installments__table th:first-child {
    text-align: left;
}

.shop-installments__table thead th {
    color: #777;
    font-size: 13px;
}

/* The installments of the payment page: a choice a line, the total it makes at the end of the line. */
.shop-payment__installments legend {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
}

.shop-payment__program {
    margin: 12px 0 6px;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.shop-payment__amount {
    margin-left: 8px;
    color: #777;
}

/* Shop: the cart -------------------------------------------------------------------------------------------------- */

.shop-cart__notice {
    margin-bottom: 24px;
    padding: 12px 16px;
    border: 1px solid #f0d58c;
    background-color: #fff8e6;
    font-size: 14px;
}

.shop-cart__lines {
    margin: 0;
    padding: 0;
    border-top: 1px solid #eee;
    list-style: none;
}

.shop-line {
    display: flex;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.shop-line__image {
    display: flex;
    flex: 0 0 90px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    align-self: flex-start;
    background-color: #f6f6f6;
    color: #c4c4c4;
    font-size: 24px;
}

.shop-line__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-line.has-issue .shop-line__image {
    opacity: 0.6;
}

/* A line: its names, the price of a piece, the pieces, the total and the button that takes it out; on a phone the
   price, the pieces and the total stand under the names. */
.shop-line__body {
    display: grid;
    flex: 1 1 auto;
    grid-template-areas: "names price quantity total remove";
    grid-template-columns: minmax(0, 1fr) 120px auto 110px 36px;
    align-items: center;
    gap: 10px 16px;
    min-width: 0;
}

.shop-line__names {
    display: flex;
    flex-direction: column;
    grid-area: names;
    gap: 2px;
    min-width: 0;
}

.shop-line__name {
    color: #222;
    font-weight: 500;
}

.shop-line__variant {
    color: #777;
    font-size: 13px;
}

/* A delivered product of an order of a member: the link to its review. */
.shop-line__review {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: #222;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The form of a review: the product it is of, and the stars to choose, drawn as stars, the fifth on the right. */
.shop-review-form__product {
    margin-bottom: 20px;
    list-style: none;
}

.shop-stars-field {
    margin: 0;
    padding: 0;
    border: 0;
}

.shop-stars-field legend {
    float: none;
    width: auto;
    font-size: inherit;
}

.shop-stars-field__choices {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.shop-stars-field__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.shop-stars-field__star {
    padding: 2px;
    color: #ccc;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease;
}

/* The chosen star and those before it, or those up to the one under the pointer. */
.shop-stars-field__input:checked ~ .shop-stars-field__star,
.shop-stars-field__star:hover,
.shop-stars-field__star:hover ~ .shop-stars-field__star {
    color: #e0a100;
}

.shop-stars-field__choices:hover .shop-stars-field__input:checked ~ .shop-stars-field__star:not(:hover):not(:hover ~ .shop-stars-field__star) {
    color: #ccc;
}

.shop-stars-field__input:focus-visible + .shop-stars-field__star {
    outline: 2px solid #222;
    outline-offset: 2px;
}

.shop-line__issue {
    margin-top: 4px;
    color: #b3261e;
    font-size: 13px;
    font-weight: 500;
}

.shop-line__price {
    display: flex;
    flex-direction: column;
    grid-area: price;
}

.shop-line__price .shop-price__now {
    font-size: 15px;
    font-weight: 500;
}

.shop-line__quantity {
    grid-area: quantity;
    margin: 0;
}

.shop-line__update {
    margin-left: 8px;
    border: 0;
    background: none;
    color: #916f1c;
    font-size: 13px;
    text-decoration: underline;
}

.shop-line__total {
    grid-area: total;
    color: #111;
    font-weight: 600;
    text-align: right;
}

.shop-line__remove {
    grid-area: remove;
    justify-self: end;
    margin: 0;
}

.shop-line__remove button {
    padding: 6px;
    border: 0;
    background: none;
    color: #888;
    font-size: 18px;
    cursor: pointer;
}

.shop-line__remove button:hover,
.shop-line__remove button:focus-visible {
    color: #b3261e;
}

@media only screen and (max-width: 767px) {
    .shop-line__body {
        grid-template-areas:
            "names remove"
            "price price"
            "quantity total";
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .shop-line__price {
        flex-direction: row;
        gap: 10px;
    }
}

.shop-cart__continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 30px;
    color: #222;
    font-size: 14px;
}

.shop-cart__continue:hover {
    color: #916f1c;
}

.grand-total-wrap.shop-cart__summary {
    position: sticky;
    top: 110px;
    padding-bottom: 24px;
}

.shop-cart__title {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
}

.grand-total-wrap .grand-total-content ul li.shop-cart__discount span {
    color: #1e7e34;
}

/* What the order comes to paid another way (bank transfer), under the total. */
.grand-total-wrap .grand-total-content ul li.shop-cart__offer,
.grand-total-wrap .grand-total-content ul li.shop-cart__offer span {
    color: #1e7e34;
    font-weight: 600;
}

.grand-total-wrap .grand-total-content ul li.shop-cart__total {
    font-size: 17px;
}

.grand-total-wrap .grand-total-content ul li.shop-cart__total span {
    font-weight: 700;
}

.shop-cart__soon {
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed #ccc;
    background-color: #fff;
    color: #555;
    font-size: 14px;
    text-align: center;
}

.shop-cart__warning {
    margin: 12px 0 0;
    color: #b3261e;
    font-size: 14px;
}

/* The boxes of the cart: every line, and each line in the order or left out of it (faded). */
.shop-cart__select-all {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 14px;
}

.shop-cart__selected {
    color: #777;
}

.shop-line__select {
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
}

.shop-line.is-left-out .shop-line__image,
.shop-line.is-left-out .shop-line__names,
.shop-line.is-left-out .shop-line__price,
.shop-line.is-left-out .shop-line__total {
    opacity: 0.55;
}

.shop-cart__checkout {
    margin-top: 18px;
}

.shop-cart__checkout:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.shop-cart__summary .shop-cart__soon {
    margin-top: 12px;
}

/* The coupon of the cart: a field and its button in a row, or the code typed with a button that takes it out. */
.shop-coupon {
    margin-top: 18px;
}

.shop-coupon__form {
    display: flex;
    gap: 8px;
}

.shop-coupon__form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-size: 14px;
    text-transform: uppercase;
}

.shop-coupon__form input::placeholder {
    text-transform: none;
}

.shop-coupon__form .btn {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 18px;
    line-height: 44px;
}

.shop-coupon__applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed #1e7e34;
    background-color: #fff;
}

.shop-coupon__code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.shop-coupon__applied form {
    margin: 0;
}

.shop-coupon__remove {
    padding: 4px;
    border: 0;
    background: none;
    color: #777;
    line-height: 1;
}

.shop-coupon__remove:hover {
    color: #b3261e;
}

.shop-coupon__note {
    margin: 8px 0 0;
    color: #b3261e;
    font-size: 13px;
}

/* Shop: the addresses of the account page and the checkout ------------------------------------------------------- */

.shop-addresses {
    row-gap: 20px;
    margin-bottom: 24px;
}

.shop-address {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 16px 18px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
}

.shop-address__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #111;
    font-weight: 600;
}

.shop-address__badge {
    padding: 1px 8px;
    border-radius: 999px;
    background-color: #f1f1f1;
    color: #555;
    font-size: 12px;
    font-weight: 500;
}

.shop-address__line {
    color: #444;
}

.shop-address__invoice {
    margin-top: 6px;
    color: #777;
    font-size: 13px;
}

.shop-address__actions {
    display: flex;
    gap: 18px;
    margin-top: auto;
    padding-top: 12px;
}

.shop-address__actions a,
.shop-address__actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #222;
    font-size: 13px;
}

.shop-address__actions form {
    margin: 0;
}

.shop-address__actions a:hover,
.shop-address__actions button:hover {
    color: #916f1c;
}

/* An address chosen in the checkout: the card is the label of its radio button, framed in black once chosen. */
.shop-address--choice {
    position: relative;
    padding-left: 46px;
    cursor: pointer;
}

/* The radio button itself stays in the page unseen; the site draws its mark (as it draws its checkboxes). */
.shop-address__radio {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    opacity: 0;
}

.shop-address__mark {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 18px;
    height: 18px;
    border: 1px solid #999;
    border-radius: 50%;
    background-color: #fff;
}

.shop-address__radio:checked + .shop-address__mark {
    border-color: #111;
}

.shop-address__radio:checked + .shop-address__mark::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background-color: #111;
}

.shop-address__radio:focus-visible + .shop-address__mark {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

.shop-address--choice:has(.shop-address__radio:checked) {
    border-color: #111;
    box-shadow: inset 0 0 0 1px #111;
}

.shop-address__edit {
    display: inline-block;
    margin-top: 6px;
    color: #777;
    font-size: 13px;
}

.shop-address-form textarea {
    min-height: 80px;
}

.shop-address-form__defaults {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 6px 0 24px;
}

.shop-address-form__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Shop: the checkout ----------------------------------------------------------------------------------------------- */

.shop-checkout__section {
    margin-bottom: 36px;
}

.shop-checkout__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.shop-checkout__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.shop-checkout__add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #222;
    font-size: 14px;
}

.shop-checkout__add:hover {
    color: #916f1c;
}

.shop-checkout__empty {
    padding: 16px;
    border: 1px dashed #ccc;
    color: #555;
    font-size: 14px;
}

.shop-checkout__billing {
    margin-top: 16px;
}

/* The checkout without an account: whom the invoice is made out to, under the billing address. */
.shop-checkout__invoice {
    margin-top: 16px;
}

.shop-checkout__lines {
    margin: 0;
    padding: 0;
    border-top: 1px solid #eee;
    list-style: none;
}

.shop-checkout__line {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}

.shop-checkout__line .shop-line__image {
    flex-basis: 60px;
}

.shop-checkout__names {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* A payment method of the checkout: a card like an address, its name with an icon and one line about it. */
.shop-method__name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #111;
    font-weight: 600;
}

.shop-method__name i {
    font-size: 18px;
}

.shop-method__hint {
    color: #666;
    font-size: 13px;
}

/* What a way of paying takes off, under its words. */
.shop-method__offer {
    display: inline-block;
    margin-top: 6px;
    color: #1e7e34;
    font-weight: 600;
}

/* Shop: the payment and the page that thanks for an order ------------------------------------------------------- */

.grand-total-wrap.shop-payment__box {
    padding-bottom: 24px;
}

.grand-total-wrap .grand-total-content ul.shop-payment__facts,
.shop-payment__facts {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.shop-payment__facts li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #e5e5e5;
    font-size: 15px;
}

.shop-payment__facts li span {
    color: #111;
    font-weight: 600;
    text-align: right;
}

.shop-payment__facts li.shop-cart__total {
    font-size: 17px;
}

.shop-payment__form {
    margin-top: 12px;
}

/* The page of a payment company shown inside the site: as wide as the box, tall enough for its card form. */
.shop-payment__frame {
    display: block;
    width: 100%;
    height: 640px;
    border: 0;
    background-color: #fff;
}

.shop-payment__subtitle {
    margin: 24px 0 10px;
    font-size: 16px;
    font-weight: 600;
}

.shop-payment__accounts {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.shop-payment__accounts li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    font-size: 14px;
}

.shop-payment__accounts li + li {
    margin-top: 8px;
}

/* An IBAN is read and copied in one piece; the space keeps its letters apart. */
.shop-payment__iban {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    user-select: all;
    overflow-wrap: anywhere;
}

/* Shop: the orders of a member --------------------------------------------------------------------------------------- */

/* Where an order stands, as a small coloured label. */
.shop-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.shop-pill--blue {
    background-color: #e8f0fe;
    color: #1a4fa0;
}

.shop-pill--amber {
    background-color: #fdf3dc;
    color: #8a5a00;
}

.shop-pill--green {
    background-color: #e6f4ea;
    color: #1e6b34;
}

.shop-pill--red {
    background-color: #fdecea;
    color: #a3261e;
}

.shop-orders {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-orders__item {
    border: 1px solid #e5e5e5;
}

.shop-orders__item + .shop-orders__item {
    margin-top: 12px;
}

.shop-orders__link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    color: #222;
}

.shop-orders__link:hover {
    color: #222;
    background-color: #fafafa;
}

.shop-orders__link .shop-line__image {
    flex-basis: 56px;
}

.shop-orders__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.shop-orders__number {
    color: #111;
    font-weight: 600;
}

.shop-orders__sub {
    overflow: hidden;
    color: #777;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-orders__side {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.shop-orders__pay {
    display: block;
    padding: 8px 16px;
    border-top: 1px solid #e5e5e5;
    color: #916f1c;
    font-size: 14px;
    font-weight: 600;
}

.shop-orders__pay:hover {
    color: #111;
}

@media (max-width: 575px) {
    .shop-orders__link {
        flex-wrap: wrap;
    }

    .shop-orders__side {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}

.shop-order__shipping {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 12px 0 0;
    font-size: 14px;
}

.shop-order__shipping a {
    color: #916f1c;
    font-weight: 600;
}

.shop-order__notice {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid #f0dfb4;
    background-color: #fdf8ec;
    font-size: 14px;
}

.shop-order__notice p {
    margin-bottom: 10px;
}

/* Shop: the returns of a member ---------------------------------------------------------------------------------------- */

/* The returns of an order on its page, one a row. */
.shop-order__returns {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.shop-order__returns li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 0;
    border-top: 1px solid #eee;
}

.shop-order__returns a {
    color: #916f1c;
    font-weight: 600;
}

/* A line of the order on the return form: the product, then how many, why and what instead. */
.shop-return__lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-return__line {
    padding: 14px 0;
    border-top: 1px solid #eee;
}

.shop-return__line:first-child {
    border-top: 0;
}

.shop-return__line .shop-checkout__line {
    margin-bottom: 10px;
    border: 0;
    padding: 0;
}

.shop-return__line.is-off {
    opacity: 0.6;
}

/* The code the parcel is given to the shipping company with: read and copied in one piece. */
.shop-return__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.06em;
    user-select: all;
}

.shop-return__photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The advice on a product whose sizes run small or large, over its sizes. */
.shop-product__fit {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: #8a5a00;
}

.shop-order__address {
    margin: 0;
    color: #444;
    font-size: 14px;
    font-style: normal;
    line-height: 1.7;
}

.grand-total-wrap .grand-total-content ul.shop-order__payment {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e5e5;
}

/* Shop: the shelves under a product page ------------------------------------------------------------------------- */

.shop-shelves {
    padding-bottom: 60px;
}

.shop-shelf {
    margin-bottom: 40px;
}

.shop-shelf .shop-home__head {
    margin-bottom: 24px;
}

.shop-shelf .shop-home__title {
    font-size: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .shop-card__image,
    .shop-tile__image,
    .shop-favorite__button,
    .shop-size span,
    .shop-gallery__thumb,
    .shop-gallery__thumbs {
        transition: none;
    }

    .shop-gallery__pane.is-open {
        animation: none;
    }
}
[data-package-fields][hidden] {
    display: none !important;
}


/* The first page of the control panel: the span it counts over above the figures, the figures of the span, the charts
   of its days, what waits for the shop, where the orders stand, their sources and the products sold most. One accent
   colour carries the marks of the charts; the numbers stay in the colours of the text. */
.cp-dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 20px;
}

.cp-dash-head__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.cp-dash-head__title i {
    color: #9c7a17;
    font-size: 20px;
}

.cp-dash-head__range {
    margin: 4px 0 0;
    color: #777;
    font-size: 14px;
}

/* The spans side by side on a light track, the one shown raised. */
.cp-range {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background-color: #f3f1ea;
}

.cp-range__item {
    padding: 7px 14px;
    border-radius: 7px;
    color: #5f5f5f;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.cp-range__item:hover,
.cp-range__item:focus-visible {
    color: #222;
}

.cp-range__item.is-active {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    color: #7a5c0f;
}

.cp-dash-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    padding: 24px;
    border: 1px dashed #d9d2bf;
    border-radius: 12px;
    background-color: #fbfaf6;
}

.cp-dash-empty > i {
    color: #9c7a17;
    font-size: 30px;
}

.cp-dash-empty > div {
    flex: 1 1 260px;
}

.cp-dash-empty h3 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
}

.cp-dash-empty p {
    margin: 0;
    color: #666;
}

/* The figures of the span: a value, and under it its change from the days before, with an arrow as well as a colour. */
.cp-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.cp-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
}

.cp-kpi__label {
    color: #666;
    font-size: 13px;
    font-weight: 500;
}

.cp-kpi__value {
    overflow: hidden;
    color: #1d1d1d;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-kpi__change {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    color: #888;
    font-size: 12.5px;
}

.cp-kpi__change i {
    margin-top: 3px;
    font-size: 11px;
}

.cp-kpi__change.is-up {
    color: #1e7a34;
}

.cp-kpi__change.is-down {
    color: #b3261e;
}

.cp-dash-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.cp-dash-grid--charts {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.cp-dash-grid--three {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* A card of the first page: its title and its figure on one line, what it shows under them. */
.cp-card {
    min-width: 0;
    margin-bottom: 14px;
    padding: 18px 20px 20px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
}

.cp-dash-grid > .cp-card {
    margin-bottom: 0;
}

.cp-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cp-card__title {
    margin: 0;
    color: #222;
    font-size: 15px;
    font-weight: 600;
}

.cp-card__figure {
    color: #444;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.cp-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 13px;
}

.cp-card__more:hover,
.cp-card__more:focus-visible {
    color: #7a5c0f;
}

.cp-card__empty {
    margin: 8px 0 0;
    color: #888;
    font-size: 14px;
}

/* A chart: the scale on the left, the plot with its hairlines, a few labels under it. The plot is the target of the
   pointer and of the keys; a thin line and the tooltip follow the point under them. */
.cp-chart {
    margin: 0;
}

.cp-chart__frame {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: var(--cp-chart-height, 220px) 24px;
    column-gap: 10px;
}

.cp-chart__ticks {
    position: relative;
    min-width: 36px;
}

.cp-chart__tick {
    position: absolute;
    right: 0;
    bottom: var(--y);
    color: #8a8a8a;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(50%);
}

.cp-chart__plot {
    position: relative;
    min-width: 0;
    border-bottom: 1px solid #d9d9d9;
    outline: none;
    touch-action: pan-y;
}

.cp-chart__plot:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9c7a17;
    border-radius: 4px;
}

.cp-chart__grid {
    position: absolute;
    right: 0;
    bottom: var(--y);
    left: 0;
    border-top: 1px solid #f0f0f0;
}

.cp-chart__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cp-chart__area {
    fill: rgba(156, 122, 23, 0.1);
}

.cp-chart__line {
    fill: none;
    stroke: #9c7a17;
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.cp-chart__dot {
    position: absolute;
    bottom: var(--y);
    left: var(--x);
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #9c7a17;
    transform: translate(-50%, 50%);
    pointer-events: none;
}

.cp-chart__dot--hover {
    z-index: 2;
}

.cp-chart__bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
}

.cp-chart__bar {
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    padding: 0 1px;
}

.cp-chart__fill {
    width: 72%;
    min-width: 2px;
    max-width: 24px;
    height: var(--y);
    min-height: 0;
    border-radius: 4px 4px 0 0;
    background-color: #9c7a17;
    transition: background-color 0.15s ease;
}

.cp-chart__bar.is-active .cp-chart__fill {
    background-color: #c19a2b;
}

.cp-chart__hits {
    position: absolute;
    inset: 0;
    display: flex;
}

.cp-chart__hit {
    flex: 1 1 0;
}

.cp-chart__cross {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--x);
    border-left: 1px solid #c9c9c9;
    pointer-events: none;
}

.cp-chart__tip {
    position: absolute;
    top: 4px;
    left: var(--x);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    margin-left: 12px;
    padding: 9px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.cp-chart__tip.is-left {
    margin-left: -12px;
    transform: translateX(-100%);
}

.cp-chart__tip-value {
    color: #1d1d1d;
    font-size: 15px;
    font-weight: 600;
}

.cp-chart__tip-title,
.cp-chart__tip-detail {
    color: #666;
    font-size: 12.5px;
    white-space: nowrap;
}

.cp-chart__labels {
    position: relative;
}

.cp-chart__label {
    position: absolute;
    top: 6px;
    left: var(--x);
    color: #8a8a8a;
    font-size: 11.5px;
    white-space: nowrap;
    transform: translateX(-50%);
}

.cp-chart__label--start {
    transform: translateX(-25%);
}

.cp-chart__label--end {
    transform: translateX(-75%);
}

/* Rows of bars: what a row counts and its value on one line, its bar under them on a light track. */
.cp-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-bars__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: baseline;
}

.cp-bars__text {
    overflow: hidden;
    color: #333;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.cp-bars__text:hover,
a.cp-bars__text:focus-visible {
    color: #7a5c0f;
}

.cp-bars__value {
    color: #222;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cp-bars__track {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 4px;
    background-color: #f2efe6;
}

.cp-bars__fill {
    display: block;
    width: var(--share);
    height: 100%;
    border-radius: 4px;
    background-color: #9c7a17;
}

.cp-bars__detail {
    grid-column: 1 / -1;
    color: #888;
    font-size: 12.5px;
}

/* What waits for the shop: a row a list, the count on the right, amber while something waits. */
.cp-tasks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-tasks__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #444;
    transition: background-color 0.15s ease;
}

.cp-tasks__item:hover,
.cp-tasks__item:focus-visible {
    background-color: #f7f5ef;
    color: #222;
}

.cp-tasks__icon {
    flex: 0 0 18px;
    color: #9a9a9a;
    font-size: 15px;
    text-align: center;
}

.cp-tasks__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
}

.cp-tasks__count {
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #f2f2f2;
    color: #777;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cp-tasks__item.is-due .cp-tasks__icon {
    color: #8a6410;
}

.cp-tasks__item.is-due .cp-tasks__count {
    background-color: #fcefd2;
    color: #7a560a;
}

/* The settings of the home page: the hero it shows now in a band above the form, and a row for each section under it,
   its switch with how many it shows. */
.cp-home-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    margin-bottom: 28px;
    padding: 18px 20px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fbfaf6;
}

.cp-home-hero__thumb {
    display: grid;
    flex: 0 0 120px;
    place-items: center;
    height: 68px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #efece3;
    color: #9c7a17;
    font-size: 24px;
}

.cp-home-hero__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cp-home-hero__text {
    flex: 1 1 240px;
    min-width: 0;
}

.cp-home-hero__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}

.cp-home-hero__text p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #444;
}

.cp-home-hero__meta {
    margin-top: 4px !important;
    color: #888 !important;
    font-size: 13px;
}

.cp-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cp-home-section {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.cp-home-section:last-child {
    border-bottom: 0;
}

.cp-home-section .switch-field.cp-setting {
    flex: 1 1 280px;
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

.cp-home-section__count {
    flex: 0 0 140px;
    margin: 0;
}

@media (max-width: 575px) {
    .cp-kpis {
        gap: 10px;
    }

    .cp-kpi {
        padding: 14px;
    }

    .cp-kpi__value {
        font-size: 21px;
    }

    .cp-chart__frame {
        --cp-chart-height: 180px;
    }

    .cp-range {
        width: 100%;
    }

    .cp-range__item {
        flex: 1 1 0;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-chart__fill,
    .cp-tasks__item,
    .cp-range__item {
        transition: none;
    }
}

/* Shop: the documents of the checkout --------------------------------------------------------------------------------- */

/* Above the button that places the order: the box that accepts the documents, the obligation to pay and the notice
   about personal data. The text of the box wraps beside the box, its links underlined. */
.shop-checkout__consent {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.5;
}

.shop-checkout__consent .checkbox-field {
    align-items: flex-start;
}

.shop-checkout__consent .checkbox-field__text {
    flex: 1 1 auto;
    min-width: 0;
}

.shop-checkout__consent a,
.page-notice a,
.shop-order__agreement-list a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.shop-checkout__consent a:hover,
.shop-checkout__consent a:focus-visible,
.page-notice a:hover,
.page-notice a:focus-visible,
.shop-order__agreement-list a:hover,
.shop-order__agreement-list a:focus-visible {
    color: #dcb14a;
}

.shop-checkout__obligation {
    margin: 10px 0 0;
    color: #555;
}

.page-notice {
    margin: 10px 0 0;
    color: #777;
    font-size: 13px;
    line-height: 1.5;
}

/* The window that shows a document of the checkout: a long text that scrolls in the window. */
.agreement-modal__content {
    border: 0;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.agreement-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid #eee;
}

.agreement-modal__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}

.agreement-modal__close {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #f2f2f2;
    color: #111;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.agreement-modal__close:hover,
.agreement-modal__close:focus-visible {
    background-color: #dcb14a;
}

.agreement-modal__close:focus-visible {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

.agreement-modal__body {
    padding: 20px 24px;
}

.agreement-modal__foot {
    display: flex;
    justify-content: flex-end;
    padding: 14px 24px;
    border-top: 1px solid #eee;
}

.agreement-modal__status {
    margin: 0;
    color: #777;
}

@media (prefers-reduced-motion: reduce) {
    .agreement-modal__close {
        transition: none;
    }
}

@media (max-width: 575px) {
    .agreement-modal__head,
    .agreement-modal__body,
    .agreement-modal__foot {
        padding-right: 16px;
        padding-left: 16px;
    }
}

/* A document with an order written in: the order and when it was accepted, then its text with its tables. */
.agreement-document__meta {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    color: #555;
    font-size: 14px;
}

.agreement-document__content {
    overflow-wrap: anywhere;
}

.agreement-document__content table {
    max-width: 100%;
}

/* On a narrow screen a wide table of the document scrolls on its own rather than widening the page. */
@media (max-width: 575px) {
    .agreement-document__content table {
        display: block;
        overflow-x: auto;
    }
}

/* A document on a page of its own, to read or print. */
.agreement-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.agreement-page__title {
    margin-bottom: 18px;
    font-size: 28px;
}

/* The documents an order keeps, under its summary. */
.shop-order__agreements {
    margin-top: 24px;
}

.shop-order__agreement-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-order__agreement-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.shop-order__agreement-list li:last-child {
    border-bottom: 0;
}

.shop-order__agreement-list i {
    margin-right: 8px;
}

/* A document is printed without the parts of the site around it. */
@media print {
    .header-area,
    .footer-area-wrapper,
    .agreement-page__actions button,
    .agreement-page__back,
    .cp-sidebar,
    .cp-topbar,
    .cp-back,
    .cookie-notice {
        display: none !important;
    }

    .agreement-page {
        padding: 0 !important;
    }
}

/* The keywords a document of the checkout can hold, under the type of its page in the form of the page. */
.cp-keywords {
    padding: 12px 16px;
    border: 1px solid #e5e5e5;
    background-color: #fafafa;
}

.cp-keywords summary {
    font-weight: 600;
    cursor: pointer;
}

.cp-keywords__list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 10px 0 0;
    font-size: 13px;
}

.cp-keywords__list dt {
    font-weight: 400;
}

.cp-keywords__list dd {
    margin: 0;
    color: #555;
}

@media (max-width: 575px) {
    .cp-keywords__list {
        grid-template-columns: 1fr;
    }

    .cp-keywords__list dd {
        margin-bottom: 6px;
    }
}

/* Product image task chips reuse the setup controls. */
.cp-image-tasks { border: 0; border-top: 1px solid var(--cp-border, #e5e5e5); margin: 24px 0 0; padding: 20px 0 0; min-width: 0; }
.cp-image-tasks legend { float: none; width: auto; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.cp-image-tasks .field-hint { margin: 8px 0 0; }
.cp-image-tasks__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.cp-image-tasks__list[hidden] { display: none; }
.cp-image-tasks__job { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--cp-border, #e5e5e5); }
.cp-image-tasks__job img { width: 44px; height: 56px; object-fit: contain; background: #f6f6f6; }
.cp-image-tasks__job > div { flex: 1; min-width: 0; }
.cp-image-tasks__job strong, .cp-image-tasks__job span { display: block; font-size: 12px; overflow-wrap: anywhere; }
.cp-image-tasks__job span { margin-top: 3px; color: #666; }
.cp-image-tasks__job[data-status="Failed"] span { color: #a52b2b; }