/* Site-wide font: Roboto (Google Fonts, with Greek) — must be the first line */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

/* ==========================================================================
   CHECKOUT — Split-screen design (codePresta by Nextpointer)
   --------------------------------------------------------------------------
   Desktop: white on the left with the checkout in a narrow column, beige panel
   on the right at full height with the cart (sticky). Steps without cards,
   separated by thin lines. Square fields with floating labels, dark buttons.

   Safety rules:
   • The theme's templates, hooks and JS are NOT changed. Only CSS + the small
     assets/js/custom.js that marks filled fields (.cp-filled).
   • Everything is under body#checkout → no other page is affected.
   • Content that modules add to hooks is not hidden.
   • Generic elements (fields, buttons, radios) are inside :where() → zero
     specificity, so module styles always win.
   • Colours / sizes are in the variables of section 1.
   ========================================================================== */


/* ==========================================================================
   0. MAIN COLOUR (primary) — WHOLE THEME
   You change ONLY --cp-primary here and it changes everywhere: checkout, buttons,
   links, selections, progress bar, and the modules that support it
   (invoicestep, cppostcodes). The shades are derived automatically.
   ========================================================================== */
:root {
    --cp-primary: #1c3673;
    --cp-primary-hover: color-mix(in srgb, var(--cp-primary) 85%, #000);
    --cp-primary-active: color-mix(in srgb, var(--cp-primary) 72%, #000);
    --cp-primary-soft: color-mix(in srgb, var(--cp-primary) 6%, #fff);

    /* site-wide font (for a different one: also change the @import on the 1st line) */
    --cp-font: 'Roboto', sans-serif;
}

/* Roboto everywhere (the theme uses Manrope). Icons (Material Icons etc.)
   keep their own font, because it is set in their own class. */
html,
body,
.tooltip,
.popover {
    font-family: var(--cp-font);
}

button,
input,
select,
optgroup,
textarea,
.btn,
.form-control {
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
body#checkout {
    --cp-dark: var(--cp-primary);   /* main colour: buttons, selected items, focus */
    --cp-dark-hover: var(--cp-primary-hover);
    --cp-ink: #1f1f1f;              /* dark neutral: tooltip, quantity badge */
    --cp-text: #1f1f1f;
    --cp-muted: #6b7280;
    --cp-faint: #a3a8b0;
    --cp-line: #ececec;             /* divider lines */
    --cp-field: #cfd4da;            /* field border */
    --cp-panel: #f5f5f5;            /* light grey cart panel */
    --cp-bg: #ffffff;
    --cp-danger: #e0244d;
    --cp-ok: #2f8f5b;
    --cp-field-h: 50px;
    --cp-content: min(720px, calc(60vw - 216px)); /* checkout column width: up to 720px, as much as fits with the progress bar on the left */
    --cp-summary: 450px;            /* cart width */

    background: var(--cp-bg);
    color: var(--cp-text);
}


/* --------------------------------------------------------------------------
   2. Header (logo in the centre)
   -------------------------------------------------------------------------- */
body#checkout #header {
    position: relative;
    z-index: 5;
    background: #fff;
    box-shadow: none;
    border-bottom: 1px solid var(--cp-line);
}

body#checkout #header .header-nav {
    margin: 0;
    padding: 14px 0;
    max-height: none;
    border: 0;
}

body#checkout #header .header-nav .row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
}

body#checkout #header #_desktop_logo {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    text-align: center;
}

body#checkout #header .logo {
    max-height: 48px;
    width: auto;
}

/* displayNav1 hook (e.g. contact) on the right */
body#checkout #header #_desktop_logo + div {
    position: absolute;
    right: 15px;
    top: 50%;
    width: auto;
    max-width: 40%;
    transform: translateY(-50%);
    font-size: 13px;
}

body#checkout #footer {
    background: transparent;
    box-shadow: none;
    padding: 18px 0;
    font-size: 12px;
    color: var(--cp-muted);
}


/* --------------------------------------------------------------------------
   3. Split-screen layout (desktop)
   -------------------------------------------------------------------------- */
body#checkout #wrapper {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

@media (min-width: 992px) {
    /* the theme's container becomes full-width so the panel "touches" the edges */
    body#checkout #wrapper > .container {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    body#checkout #wrapper > .container > .row,
    body#checkout #content > .row {
        margin: 0;
    }

    body#checkout #content-wrapper {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    body#checkout #content {
        margin: 0;
    }

    body#checkout #content > .row {
        display: flex;
        align-items: stretch;
        min-height: calc(100vh - 81px);
    }

    /* left: white, content close to the centre */
    body#checkout .cart-grid-body {
        flex: 0 0 60%;
        max-width: 60%;
        padding: 56px 72px 80px max(32px, calc(60% - var(--cp-content) - 72px));
    }

    /* right: beige panel at full height */
    body#checkout .cart-grid-right {
        flex: 1 1 40%;
        max-width: 40%;
        padding: 56px max(32px, calc(40% - var(--cp-summary) - 72px)) 80px 72px;
        background: var(--cp-panel);
    }

    /* the cart stays visible while scrolling */
    body#checkout #js-checkout-summary {
        position: sticky;
        top: 24px;
    }
}


/* --------------------------------------------------------------------------
   4. Steps — one thin line between them, all on the same line
   -------------------------------------------------------------------------- */
body#checkout section.checkout-step {
    margin: 0;
    padding: 22px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--cp-line);
    border-radius: 0;
    box-shadow: none;
}

body#checkout section.checkout-step:first-of-type {
    padding-top: 0;
}

body#checkout section.checkout-step:last-of-type {
    border-bottom: 0;
}

/* title: the theme adds its own padding/lines above and below → we remove them */
body#checkout section.checkout-step .step-title,
body#checkout section.checkout-step.-current + .checkout-step .step-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
    color: var(--cp-text);
}

/* current step: large title */
body#checkout section.checkout-step.-current .step-title {
    margin-bottom: 22px;
    font-size: 24px;
    font-weight: 700;
}

/* next steps: grey */
body#checkout section.checkout-step.-unreachable .step-title {
    color: var(--cp-faint);
    font-weight: 500;
}

/* without the "1. 2. 3." numbering */
body#checkout section.checkout-step .step-number,
body#checkout section.checkout-step.-current .step-number,
body#checkout section.checkout-step.-reachable.-current .step-number {
    display: none;
}

/* completed: ✓ after the title (so all titles start at the same point) */
body#checkout section.checkout-step .step-title .done {
    order: 1;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--cp-dark);
}

body#checkout section.checkout-step.-complete .step-title {
    cursor: pointer;
}

/* "edit" on the right, on the same line */
body#checkout section.checkout-step .step-edit {
    order: 2;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--cp-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body#checkout section.checkout-step .step-edit .edit {
    display: none;
}

body#checkout section.checkout-step .step-edit:hover {
    color: var(--cp-text);
}

body#checkout section.checkout-step .content {
    padding: 0;
    border: 0;
}

/* the theme's instruction texts inside the step */
body#checkout section.checkout-step .content > p {
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cp-muted);
}


/* --------------------------------------------------------------------------
   5. Fields — FLOATING LABELS
   --------------------------------------------------------------------------
   Theme form: .form-group.row > label | .js-input-column | .form-control-comment
   • The label sits inside the field; on focus or when it has a value (.cp-filled from
     custom.js) it moves up, small, to the top side.
   • "Optional" on the right, instructions as a tooltip (ⓘ).
   -------------------------------------------------------------------------- */

/* 2-column grid (First name | Last name …) */
body#checkout .js-address-form .form-fields,
body#checkout #customer-form > div:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 16px;
}

body#checkout .js-address-form .form-fields > *,
body#checkout #customer-form > div:first-child > * {
    grid-column: 1 / -1;
    margin: 0;
}

body#checkout .js-address-form .form-fields > .form-group.row:has(> .js-input-column > .form-control),
body#checkout #customer-form > div:first-child > .form-group.row:has(> .js-input-column > .form-control) {
    grid-column: auto;
}

body#checkout .form-group.row:has(> .js-input-column .form-control) {
    position: relative;
    display: block;
    margin-left: 0;
    margin-right: 0;
}

body#checkout .form-group.row:has(> .js-input-column .form-control) > .js-input-column {
    position: relative;
    float: none;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* label inside the field */
body#checkout .form-group.row:has(> .js-input-column .form-control) > .form-control-label {
    position: absolute;
    top: calc(var(--cp-field-h) / 2);
    left: 16px;
    z-index: 3;
    width: auto;
    max-width: calc(100% - 80px);
    margin: 0;
    padding: 0;
    float: none;
    overflow: hidden;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cp-muted);
    transform: translateY(-50%);
    pointer-events: none;
    transition: none; /* enabled only with data-cp-ready (section 18) */
}

/* label on top (focus / has a value) — same :has for higher specificity */
body#checkout .form-group.row.cp-filled:has(> .js-input-column .form-control) > .form-control-label,
body#checkout .form-group.row:has(> .js-input-column .form-control):focus-within > .form-control-label {
    top: 13px;
    font-size: 11px;
    color: var(--cp-muted);
}

/* required asterisk */
body#checkout .form-group.row > .form-control-label.required::after {
    content: "*";
    margin-left: 1px;
}

/* "Optional" on the right inside the field, at the top */
body#checkout .form-group.row:has(> .js-input-column .form-control) > .form-control-comment {
    position: absolute;
    top: 6px;
    right: 12px;
    z-index: 3;
    width: auto;
    max-width: 40%;
    margin: 0;
    padding: 0;
    float: none;
    overflow: hidden;
    font-size: 10px;
    line-height: 14px;
    text-overflow: ellipsis;
    text-transform: lowercase;
    white-space: nowrap;
    color: var(--cp-faint);
    pointer-events: none;
}

body#checkout .form-group.row:has(> .js-input-column .form-control) > .form-control-comment:empty {
    display: none;
}

/* the field */
body#checkout :where(.form-control) {
    min-height: var(--cp-field-h);
    padding: 20px 16px 6px;
    font-size: 14px;
    color: var(--cp-text);
    background-color: #fff;
    border: 1px solid var(--cp-field);
    border-radius: 0;
    box-shadow: none;
    transition: border-color .15s ease;
}

body#checkout :where(.form-control):hover {
    border-color: #9aa1a9;
}

body#checkout :where(.form-control):focus {
    outline: none;
    box-shadow: none;
    border-color: var(--cp-dark);
}

body#checkout :where(select.form-control) {
    padding-top: 18px;
    padding-bottom: 4px;
}

body#checkout :where(textarea.form-control) {
    min-height: 110px;
    padding-top: 24px;
}

body#checkout :where(.form-control[readonly], .form-control:disabled) {
    background-color: #f3f4f6;
}

/* placeholder only on focus (otherwise it overlaps the label) */
body#checkout .form-group.row:has(> .js-input-column .form-control) .form-control::placeholder {
    opacity: 0;
}

body#checkout .form-group.row:has(> .js-input-column .form-control) .form-control:focus::placeholder {
    opacity: 1;
    color: var(--cp-faint);
}

/* password "Show" button */
body#checkout .js-input-column .input-group-btn .btn {
    min-height: var(--cp-field-h);
    border-radius: 0;
    background: var(--cp-ink);
}

/* instructions below a field → ⓘ tooltip */
body#checkout .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment {
    position: absolute;
    top: calc(var(--cp-field-h) / 2);
    right: 12px;
    z-index: 4;
    display: block;
    width: 18px;
    height: 18px;
    margin: -9px 0 0;
    overflow: visible;
    font-size: 0;
    color: transparent;
    cursor: help;
}

body#checkout .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment::before {
    content: "i";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--cp-field);
    border-radius: 50%;
    background: #fff;
    color: var(--cp-muted);
    font: italic 700 11px/1 Georgia, serif;
}

body#checkout .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment:hover {
    right: 0;
    width: 240px;
    height: auto;
    margin: 14px 0 0;
    padding: 10px 12px;
    background: var(--cp-ink);
    font-size: 12px;
    line-height: 1.45;
    color: #fff;
}

body#checkout .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment:hover::before {
    display: none;
}

body#checkout .form-group.row:has(> .js-input-column > .form-control-comment) .form-control {
    padding-right: 40px;
}

/* errors: red border + ⚠ text below */
body#checkout .form-group.row.has-error .form-control,
body#checkout :where(.has-error .form-control) {
    border-color: var(--cp-danger);
}

body#checkout :where(.help-block) {
    margin: 6px 0 0;
}

body#checkout :where(.help-block ul) {
    margin: 0;
    padding: 0;
    list-style: none;
}

body#checkout :where(.help-block .alert-danger, .has-error .help-block li) {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    color: var(--cp-danger);
}

body#checkout :where(.help-block .alert-danger)::before {
    content: "\26A0";
    font-size: 12px;
}

/* form-level error (e.g. "Authentication failed"), not below a field:
   subtle box with comfortable padding */
body#checkout .help-block:not(.js-input-column .help-block) li.alert-danger {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #fde2e2;
    border-radius: 12px;
    background: #fff7f7;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #b42318;
}

body#checkout .help-block:not(.js-input-column .help-block) li.alert-danger::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}

body#checkout .help-block:not(.js-input-column .help-block) ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* rows with a checkbox (terms, newsletter, "same address" etc.) */
body#checkout .form-group.row:not(:has(.form-control)) {
    margin-left: 0;
    margin-right: 0;
}

body#checkout .form-group.row:not(:has(.form-control)) > .form-control-label {
    flex: 0 0 0;
    max-width: 0;
    padding: 0;
}

body#checkout .form-group.row:not(:has(.form-control)) > .js-input-column {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
}

body#checkout .form-group.row:not(:has(.form-control)) > .form-control-comment {
    padding: 0;
}


/* --------------------------------------------------------------------------
   6. Buttons (dark, square, uppercase)
   -------------------------------------------------------------------------- */
body#checkout :where(.btn) {
    border-radius: 0;
    box-shadow: none;
}

body#checkout :where(.btn-primary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 12px 32px;
    border: 1px solid var(--cp-dark);
    border-radius: 3px;
    background-color: var(--cp-dark);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    transition: background-color .15s ease;
}

/* continue buttons: text on the left, arrow › on the right */
body#checkout section.checkout-step :where(.continue, #payment-confirmation .btn) {
    justify-content: space-between;
}

body#checkout section.checkout-step :where(.continue, #payment-confirmation .btn)::after {
    content: "\203A";
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

body#checkout :where(.btn-primary):hover,
body#checkout :where(.btn-primary):focus {
    border-color: var(--cp-dark-hover);
    background-color: var(--cp-dark-hover);
    color: #fff;
    box-shadow: none;
}

body#checkout :where(.btn-primary.disabled, .btn-primary:disabled) {
    opacity: .4;
}

body#checkout :where(.btn-secondary, .btn-tertiary) {
    border: 1px solid var(--cp-dark);
    background: #fff;
    color: var(--cp-dark);
}

/* "Continue": full width of the column */
body#checkout section.checkout-step :where(.continue) {
    width: 100%;
    margin-top: 24px;
}

body#checkout section.checkout-step :where(.continue.float-xs-right) {
    float: none !important;
}

body#checkout #payment-confirmation {
    margin-top: 22px;
}

body#checkout #payment-confirmation :where(.btn) {
    width: 100%;
    min-height: 56px;
}


/* --------------------------------------------------------------------------
   7. Radio / checkbox
   -------------------------------------------------------------------------- */
body#checkout :where(.custom-radio) {
    width: 18px;
    height: 18px;
    border: 1px solid var(--cp-field);
    background: #fff;
}

body#checkout :where(.custom-radio:has(input:checked)) {
    border-color: var(--cp-dark);
}

body#checkout :where(.custom-radio input[type="radio"]:checked + span) {
    width: 10px;
    height: 10px;
    top: 3px;
    left: 3px;
    background-color: var(--cp-dark);
}

body#checkout :where(.custom-checkbox input[type="checkbox"] + span) {
    width: 18px;
    height: 18px;
    border: 1px solid var(--cp-field);
    border-radius: 0;
    background: #fff;
}

body#checkout :where(.custom-checkbox input[type="checkbox"]:checked + span) {
    border-color: var(--cp-dark);
    background: var(--cp-dark);
}

body#checkout :where(.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked) {
    margin: 0;
    font-size: 14px;
    color: #fff;
}


/* --------------------------------------------------------------------------
   8. Personal information (Guest / Sign in) as underlined tabs
   -------------------------------------------------------------------------- */
body#checkout #checkout-personal-information-step .nav.nav-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0 0 26px !important;
    padding: 0;
    border-bottom: 1px solid var(--cp-line);
}

body#checkout #checkout-personal-information-step .nav-inline .nav-item {
    margin: 0;
}

body#checkout #checkout-personal-information-step .nav-inline .nav-link {
    display: block;
    margin-bottom: -1px;
    padding: 0 0 10px;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--cp-muted);
}

body#checkout #checkout-personal-information-step .nav-inline .nav-link.active {
    border-bottom-color: var(--cp-dark);
    color: var(--cp-text);
}

body#checkout #checkout-personal-information-step .nav-separator {
    display: none; /* the "|" between the tabs (decorative) */
}

body#checkout #checkout-personal-information-step .identity {
    font-size: 14px;
}


/* --------------------------------------------------------------------------
   9. Addresses
   -------------------------------------------------------------------------- */
body#checkout .address-selector {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 20px;
    border-top: 1px solid var(--cp-line);
}

body#checkout .address-selector .address-item {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--cp-line);
    border-radius: 0;
    box-shadow: none;
}

body#checkout .address-selector .address-item.selected {
    background: #f7fbfa;
}

body#checkout .address-item header.h4 {
    padding: 16px 0;
}

body#checkout .address-item .address-alias {
    font-size: 14px;
    font-weight: 700;
}

body#checkout .address-item .address {
    margin: 6px 0 0 28px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cp-muted);
}

body#checkout .address-item .address-footer {
    padding: 0 0 14px 28px;
    border: 0;
}

body#checkout .address-item .address-footer a,
body#checkout .add-address a {
    font-size: 12px;
    font-weight: 600;
    color: var(--cp-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   10. Shipping method / Payment — compact rows
   --------------------------------------------------------------------------
   One row per option: ( ) [logo] Name · time ........ Price
   The theme's bootstrap columns become flex. Same selectors as the theme
   (section.checkout-step .delivery-options …) so that they take precedence.
   -------------------------------------------------------------------------- */
body#checkout section.checkout-step .delivery-options .delivery-option {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    min-height: 0;
    margin: 0 0 8px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--cp-field);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

body#checkout section.checkout-step .delivery-options .delivery-option:hover {
    border-color: #9aa1a9;
}

body#checkout section.checkout-step .delivery-options .delivery-option:has(input[type="radio"]:checked) {
    border-color: var(--cp-dark);
    background: var(--cp-primary-soft);
}

/* radio column */
body#checkout section.checkout-step .delivery-options .delivery-option > .col-sm-1 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

body#checkout section.checkout-step .delivery-options .delivery-option .custom-radio {
    margin: 0;
}

/* label with the carrier's details */
body#checkout section.checkout-step .delivery-options .delivery-option > label {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

body#checkout section.checkout-step .delivery-options .delivery-option > label > .row {
    display: flex;
    align-items: center;
    gap: 6px 14px;
    margin: 0;
}

body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

/* name (+ logo) */
body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier > div,
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier:not(.carrier-hasLogo) > .col-xs-12 {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier-logo {
    flex: 0 0 auto;
}

body#checkout section.checkout-step .delivery-options .delivery-option img {
    display: block;
    width: auto;
    max-width: 48px;
    max-height: 28px;
}

body#checkout section.checkout-step .delivery-options .delivery-option .carrier-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cp-text);
}

/* delivery time: small grey text */
body#checkout section.checkout-step .delivery-options .delivery-option .carrier-delay {
    font-size: 12px;
    color: var(--cp-muted);
}

/* price on the right */
body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div:last-child {
    margin-left: auto;
    text-align: right;
}

body#checkout section.checkout-step .delivery-options .delivery-option .carrier-price {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--cp-text);
}

/* extra carrier content (e.g. pickup point selection from a module) */
body#checkout section.checkout-step .delivery-options .carrier-extra-content {
    margin: -9px 0 8px;
    padding: 14px 16px;
    border: 1px solid var(--cp-dark);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    background: var(--cp-primary-soft);
    font-size: 13px;
}

/* empty: we don't show a box */
body#checkout section.checkout-step .delivery-options .carrier-extra-content:not(:has(*)) {
    display: none !important;
}

body#checkout section.checkout-step .delivery-options > .row:not(.delivery-option) {
    border: 0;
}

body#checkout .order-options {
    margin-top: 22px;
}

/* ── Payment ── */
body#checkout .payment-options .payment-option {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 8px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--cp-field);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

body#checkout .payment-options .payment-option:hover {
    border-color: #9aa1a9;
}

body#checkout .payment-options .payment-option:has(input[type="radio"]:checked) {
    border-color: var(--cp-dark);
    background: var(--cp-primary-soft);
}

body#checkout .payment-options .payment-option .custom-radio {
    margin: 0;
    float: none;
}

body#checkout .payment-option label {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

body#checkout .payment-option label img {
    max-height: 28px;
    width: auto;
    margin-left: auto;
}

body#checkout .additional-information,
body#checkout .js-payment-option-form {
    margin: -9px 0 8px;
    padding: 14px 16px;
    border: 1px solid var(--cp-dark);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    background: var(--cp-primary-soft);
    font-size: 13px;
    color: var(--cp-muted);
}

body#checkout #conditions-to-approve {
    margin-top: 22px;
    font-size: 13px;
}

body#checkout #conditions-to-approve ul {
    margin: 0;
    padding: 0;
}

/* mobile: the price goes below the name if it doesn't fit */
@media (max-width: 575px) {
    body#checkout section.checkout-step .delivery-options .delivery-option > label > .row {
        flex-wrap: wrap;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div:first-child {
        flex-basis: 100%;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div:last-child {
        margin-left: 0;
        text-align: left;
    }
}


/* --------------------------------------------------------------------------
   11. Cart (right panel)
   -------------------------------------------------------------------------- */
body#checkout #js-checkout-summary {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body#checkout #js-checkout-summary .card-block {
    padding: 0;
    border: 0;
}

/* "1 item" → "🛍 Cart" title with icon */
body#checkout #js-checkout-summary .cart-summary-products > p:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 0 16px;
    border-bottom: 1px solid #e2e2e2;
    font-size: 15px;
    font-weight: 600;
}

body#checkout #js-checkout-summary .cart-summary-products > p:first-child::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12H6.2L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* products always open */
body#checkout #js-checkout-summary .cart-summary-products .js-show-details {
    display: none;
}

body#checkout #js-checkout-summary #cart-summary-product-list.collapse {
    display: block;
    height: auto !important;
}

body#checkout #js-checkout-summary .media-list {
    margin: 0;
    padding: 18px 0 2px;
}

body#checkout #js-checkout-summary .media {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    padding: 0 0 16px;
}

body#checkout #js-checkout-summary .media-left {
    flex-shrink: 0;
    padding: 0;
}

body#checkout #js-checkout-summary .media-left img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #fff;
}

body#checkout #js-checkout-summary .media-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

body#checkout #js-checkout-summary .media-body > br {
    display: none;
}

body#checkout #js-checkout-summary .product-name {
    flex: 1 1 55%;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

body#checkout #js-checkout-summary .product-name a {
    color: var(--cp-text);
}

body#checkout #js-checkout-summary .product-price {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    float: none !important;
}

/* quantity: dark badge at the top left of the image */
body#checkout #js-checkout-summary .product-quantity {
    position: absolute;
    top: -9px;
    left: 40px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--cp-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: #fff;
}

body#checkout #js-checkout-summary .product-line-info {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--cp-muted);
}

/* Subtotal / Shipping / module rows (e.g. tax exemption) */
body#checkout #js-checkout-summary .cart-summary-subtotals-container {
    padding: 14px 0 4px;
    border-top: 1px solid #e2e2e2;
}

body#checkout #js-checkout-summary .cart-summary-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}

body#checkout #js-checkout-summary .cart-summary-line::after {
    display: none; /* the theme's clearfix is not needed with flex */
}

body#checkout #js-checkout-summary .cart-summary-line .label,
body#checkout #js-checkout-summary .cart-summary-line .value {
    float: none;
    font-weight: 600;
    color: var(--cp-text);
}

/* TOTAL */
body#checkout #js-checkout-summary .cart-summary-totals {
    padding: 6px 0 18px;
    border: 0;
    background: transparent;
}

body#checkout #js-checkout-summary .cart-summary-line.cart-total {
    margin: 0;
    padding: 0;
    background: none;
}

body#checkout #js-checkout-summary .cart-total .label,
body#checkout #js-checkout-summary .cart-total .value {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* discount code: input + dark button on one line */
body#checkout #js-checkout-summary .block-promo {
    padding: 0 0 8px;
}

body#checkout #js-checkout-summary .block-promo .promo-code {
    padding: 0;
    background: none;
}

body#checkout #js-checkout-summary .block-promo .promo-code form {
    display: flex;
    gap: 8px;
}

body#checkout #js-checkout-summary .block-promo .promo-input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--cp-field);
    border-radius: 0;
    background: #fff;
    font-size: 13px;
}

body#checkout #js-checkout-summary .block-promo form .btn {
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 20px;
}

body#checkout #js-checkout-summary .block-promo a {
    font-size: 12px;
    font-weight: 600;
    color: var(--cp-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* content from the displayReassurance hook, inside the panel */
body#checkout .cart-grid-right > :not(#js-checkout-summary) {
    margin: 24px 0 0;
    padding: 18px 0 0;
    background: transparent;
    border-top: 1px solid #e2e2e2;
    box-shadow: none;
    font-size: 12px;
}


/* --------------------------------------------------------------------------
   12. Notifications
   -------------------------------------------------------------------------- */
body#checkout #notifications {
    margin: 0;
}

body#checkout #notifications :where(.alert) {
    margin: 16px 0 0;
    border-radius: 0;
    box-shadow: none;
}

body#checkout :where(.alert-danger) {
    border: 1px solid #f5c2cf;
    background: #fff5f7;
    color: #a3112f;
}

body#checkout :where(.alert-info) {
    border: 1px solid var(--cp-line);
    background: #f7fbfa;
    color: var(--cp-text);
}

body#checkout :where(.alert-warning) {
    border: 1px solid #f3dfb1;
    background: #fffaf0;
    color: #8a5a00;
}


/* --------------------------------------------------------------------------
   13. Responsive (tablet / mobile: one column, cart panel below)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    body#checkout #wrapper > .container > .row,
    body#checkout #content > .row {
        margin-left: 0;
        margin-right: 0;
    }

    body#checkout #content-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    body#checkout .cart-grid-body {
        padding: 32px 15px 24px;
    }

    body#checkout .cart-grid-right {
        margin: 0 -15px;
        padding: 28px 30px 36px;
        background: var(--cp-panel);
    }
}

@media (max-width: 575px) {
    body#checkout {
        --cp-field-h: 52px;
    }

    body#checkout #wrapper > .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    body#checkout .cart-grid-body {
        padding: 24px 0 16px;
    }

    body#checkout .cart-grid-right {
        margin: 0 -16px;
        padding: 24px 16px 32px;
    }

    body#checkout section.checkout-step.-current .step-title {
        font-size: 22px;
    }

    /* fields in one column */
    body#checkout .js-address-form .form-fields,
    body#checkout #customer-form > div:first-child {
        grid-template-columns: 1fr;
    }

    body#checkout .js-address-form .form-fields > .form-group.row:has(> .js-input-column > .form-control),
    body#checkout #customer-form > div:first-child > .form-group.row:has(> .js-input-column > .form-control) {
        grid-column: 1 / -1;
    }

    body#checkout .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment:hover {
        width: min(240px, 80vw);
    }

    /* iOS: no zoom on focus */
    body#checkout :where(.form-control) {
        font-size: 16px;
    }
}


/* ==========================================================================
   14. Improvements: steps with indicators, buttons, loading, right panel
   ========================================================================== */

/* --- 14.1 Steps: circular indicator on the left ------------------------
   next = grey circle · current = turquoise ring · completed = ✓ */
body#checkout section.checkout-step .step-title {
    gap: 12px;
}

body#checkout section.checkout-step .step-title::before {
    content: "";
    order: -1;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 2px solid #d5d9de;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}

body#checkout section.checkout-step.-current .step-title::before {
    border: 2px solid var(--cp-dark);
    background: radial-gradient(circle, var(--cp-dark) 0 4px, #fff 4.5px);
}

body#checkout section.checkout-step.-complete:not(.-current) .step-title::before {
    border-color: var(--cp-dark);
    background: var(--cp-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 12px;
}

/* the theme's ✓ is not needed (the indicator shows it) */
body#checkout section.checkout-step .step-title .done {
    display: none;
}

body#checkout section.checkout-step.-complete:not(.-current) .step-title {
    font-weight: 600;
    color: var(--cp-text);
}

body#checkout section.checkout-step.-current .step-title {
    font-size: 22px;
}

/* --- 14.2 "Edit" with a pencil icon -------------------------- */
body#checkout section.checkout-step .step-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--cp-muted);
    transition: background-color .15s ease, color .15s ease;
}

body#checkout section.checkout-step .step-edit .edit {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
}

body#checkout section.checkout-step .step-edit:hover {
    background: var(--cp-primary-soft);
    color: var(--cp-dark-hover);
}

/* --- 14.3 "Continue" button: smaller, centred, icon in a circle --- */
body#checkout section.checkout-step :where(.continue) {
    display: flex;
    width: auto;
    min-width: 220px;
    min-height: 48px;
    margin: 28px auto 0;
    padding: 0 9px 0 26px;
    gap: 18px;
    border-radius: 999px;
}

body#checkout section.checkout-step :where(.continue)::after {
    content: "";
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 16px;
    transition: transform .2s ease;
}

body#checkout section.checkout-step :where(.continue):hover::after {
    transform: translateX(3px);
}

/* --- 14.4 Buttons in waiting state (after click, from custom.js) ------------ */
body#checkout .cp-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

body#checkout .cp-btn-loading::after,
body#checkout section.checkout-step :where(.continue).cp-btn-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    flex: none;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    background: none;
    animation: cp-spin .7s linear infinite;
}

/* --- 14.5 Soft loading on areas (carriers, cart) --------------- */
body#checkout .cp-loading {
    position: relative;
    pointer-events: none;
}

body#checkout .cp-loading::before {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: 20;
    background: rgba(255, 255, 255, .65);
    animation: cp-fade .2s ease;
}

body#checkout .cp-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 21;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid color-mix(in srgb, var(--cp-primary) 20%, transparent);
    border-top-color: var(--cp-dark);
    border-radius: 50%;
    animation: cp-spin .7s linear infinite, cp-fade .2s ease;
}

body#checkout section.checkout-step .delivery-options .delivery-option,
body#checkout .payment-options .payment-option {
    transition: border-color .2s ease, background-color .2s ease;
}

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

@keyframes cp-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- 14.6 Carriers with a logo: name next to the logo ------------- */
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier {
    justify-content: flex-start;
}

/* --- 14.7 Password field (input + "Show") --------------------------- */
body#checkout .input-group.focus {
    outline: none;
}

body#checkout .js-input-column .input-group {
    display: flex;
}

body#checkout .js-input-column .input-group:focus-within .form-control {
    border-color: var(--cp-dark);
}

body#checkout .js-input-column .input-group-btn .btn {
    padding: 0 16px;
    border: 1px solid var(--cp-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}

/* "optional" should not overlap the "Show" button */
body#checkout .form-group.row:has(.input-group) > .form-control-comment {
    right: 110px;
}

/* --- 14.8 Order comment / gift message (textarea) ------------------ */
body#checkout label[for="delivery_message"] {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-text);
}

body#checkout #delivery_message,
body#checkout #gift_message {
    display: block;
    width: 100%;
    min-height: 110px;
    padding: 14px 16px;
    border: 1px solid var(--cp-field);
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cp-text);
    resize: vertical;
    transition: border-color .15s ease;
}

body#checkout #delivery_message:focus,
body#checkout #gift_message:focus {
    outline: none;
    border-color: var(--cp-dark);
}

/* --- 14.9 Right panel: background on the row, whole column sticky -------------
   (so whatever is below the cart does not pass under it while scrolling) */
@media (min-width: 992px) {
    body#checkout #content > .row {
        background: linear-gradient(90deg, transparent 57%, var(--cp-panel) 57%);
    }

    body#checkout .cart-grid-right {
        position: sticky;
        top: 0;
        align-self: flex-start;
        background: transparent;
    }

    body#checkout #js-checkout-summary {
        position: static;
    }
}

/* product prices in the cart in a neutral colour (not the theme's blue) */
body#checkout #js-checkout-summary .product-price {
    color: var(--cp-text);
}


/* ==========================================================================
   15. Fixes
   ========================================================================== */

/* --- 15.1 No step number in any state -----------------------
   (the theme has a special rule for "current + completed" that shows it again) */
body#checkout section.checkout-step .step-number,
body#checkout section.checkout-step.-current.-reachable.-complete .step-number {
    display: none !important;
}

/* current + already completed (editing): "current" indicator */
body#checkout section.checkout-step.-current.-complete .step-title::before {
    border: 2px solid var(--cp-dark);
    background: radial-gradient(circle, var(--cp-dark) 0 4px, #fff 4.5px);
}

/* --- 15.2 Buttons: text + icon together in the centre ------------------ */
body#checkout section.checkout-step :where(.continue),
body#checkout section.checkout-step :where(#payment-confirmation .btn) {
    justify-content: center;
    gap: 12px;
}

body#checkout section.checkout-step :where(.continue) {
    padding: 0 10px 0 28px;
}

/* --- 15.3 Whole page: white on the left, grey on the right (also below the content) */
@media (min-width: 992px) {
    body#checkout {
        background: linear-gradient(90deg, #fff 57%, var(--cp-panel) 57%);
    }

    body#checkout #content > .row {
        background: none;
    }

    /* the footer is "transparent" over the same background, without a line */
    body#checkout #footer,
    body#checkout #footer .container,
    body#checkout #footer .footer-container {
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    body#checkout #footer .text-sm-center {
        width: 57%;
        padding: 0 72px 0 max(32px, calc(60% - var(--cp-content) - 72px));
        text-align: left;
    }
}

body#checkout #footer {
    margin: 0;
    padding: 16px 0 24px;
    border: 0;
}

body#checkout #footer:empty,
body#checkout #footer .text-sm-center:empty {
    padding: 0;
}

body#checkout #footer .js-terms a {
    color: var(--cp-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ==========================================================================
   16. Buttons without an outline on click + progress bar
   ========================================================================== */

/* --- 16.1 No outline / ring / border change on focus & active
   (the theme adds a 5px outline and a different colour) */
body#checkout .btn,
body#checkout .btn:focus,
body#checkout .btn:active,
body#checkout .btn.focus,
body#checkout .btn.active,
body#checkout .btn:active:focus,
body#checkout .btn:focus-visible,
body#checkout button:focus,
body#checkout button:focus-visible {
    outline: 0 !important;
    outline-offset: 0;
    box-shadow: none !important;
}

body#checkout .btn-primary:focus,
body#checkout .btn-primary.focus,
body#checkout .btn-primary:active,
body#checkout .btn-primary.active,
body#checkout .btn-primary:active:focus {
    border-color: var(--cp-dark) !important;
    background-color: var(--cp-dark-hover);
    color: #fff;
}

/* --- 16.2 Progress bar (created by custom.js above the steps) --- */
body#checkout .cp-progress {
    margin: 0 0 30px;
}

body#checkout .cp-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--cp-muted);
}

body#checkout .cp-progress-head strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--cp-text);
}

body#checkout .cp-progress-step {
    margin-left: 6px;
    color: var(--cp-faint);
}

body#checkout .cp-progress-bar {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #ececec;
}

body#checkout .cp-progress-bar > span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 999px;
    background: var(--cp-dark);
    transition: width .5s ease;
}

/* step markers on the bar */
body#checkout .cp-progress-bar > i {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #fff;
}


/* ==========================================================================
   17. Progress bar — 3 variants
   • desktop (≥1360px): thin VERTICAL line in the white space on the left
   • tablet / small desktop: thin horizontal bar above the steps
   • mobile: only a 3px line at the top, without text
   custom.js provides: --cp-p (percentage) and --pos (marker position)
   ========================================================================== */

/* fill / markers from the variables */
body#checkout .cp-progress-bar > span {
    width: var(--cp-p, 0%);
}

body#checkout .cp-progress-bar > i {
    left: var(--pos);
}

/* --- desktop: vertical in the white space on the left ----------------------------- */
@media (min-width: 1360px) {
    body#checkout .cart-grid-body {
        position: relative;
    }

    body#checkout .cp-progress {
        position: absolute;
        top: 56px;
        bottom: 80px;
        /* exactly to the left of the checkout column (560px + 72px padding) */
        left: calc(100% - var(--cp-content) - 72px - 112px);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 72px;
        margin: 0;
    }

    body#checkout .cp-progress-head {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin: 0 0 16px;
        text-align: center;
    }

    body#checkout .cp-progress-head strong {
        order: -1;
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
        color: var(--cp-text);
    }

    body#checkout .cp-progress-title {
        display: none;
    }

    body#checkout .cp-progress-step {
        margin: 0;
        font-size: 11px;
        line-height: 1.3;
        color: var(--cp-faint);
    }

    /* the vertical line */
    body#checkout .cp-progress-bar {
        flex: 1 1 auto;
        width: 2px;
        height: auto;
        border-radius: 999px;
        background: #ececec;
        overflow: visible;
    }

    body#checkout .cp-progress-bar > span {
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: var(--cp-p, 0%);
    }

    /* step markers → small dots */
    body#checkout .cp-progress-bar > i {
        top: var(--pos);
        left: 50%;
        bottom: auto;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        border: 2px solid #ececec;
        border-radius: 50%;
        background: #fff;
    }
}

/* --- mobile: only a thin line at the top -------------------------------- */
@media (max-width: 767px) {
    body#checkout .cp-progress {
        margin: -24px -16px 22px;
    }

    body#checkout .cp-progress-head {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap; /* remains only for screen readers */
    }

    body#checkout .cp-progress-bar {
        height: 3px;
        border-radius: 0;
    }

    body#checkout .cp-progress-bar > span {
        border-radius: 0;
    }

    body#checkout .cp-progress-bar > i {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    body#checkout .cp-progress {
        margin: -32px -15px 22px;
    }
}


/* ==========================================================================
   18. Floating label without a "jump" + "Edit" icon only
   ========================================================================== */

/* --- 18.1 The label animation only after custom.js sets the correct
   position (data-cp-ready). In a form that was just rebuilt (country change)
   the labels appear directly in place. */
body#checkout .form-group.row[data-cp-ready]:has(> .js-input-column .form-control) > .form-control-label {
    transition: top .16s ease, font-size .16s ease, color .16s ease;
}

/* --- 18.2 "Edit": icon only in a round button -------------- */
body#checkout section.checkout-step .step-edit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--cp-line);
    border-radius: 50%;
    background: #fff;
    font-size: 0;            /* hides the "edit" text */
    color: transparent;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

/* the theme's icon is not needed */
body#checkout section.checkout-step .step-edit .edit {
    display: none !important;
}

/* pencil */
body#checkout section.checkout-step .step-edit::before {
    content: "";
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5a2.1 2.1 0 0 0-4-4L4 16v4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .15s ease;
}

body#checkout section.checkout-step .step-edit:hover {
    border-color: var(--cp-dark);
    background: var(--cp-primary-soft);
}

body#checkout section.checkout-step .step-edit:hover::before {
    transform: rotate(-8deg);
}

/* steps that haven't been opened yet have nothing to edit */
body#checkout section.checkout-step.-unreachable .step-edit {
    opacity: .35;
    pointer-events: none;
}


/* ==========================================================================
   19. "Edit" in the centre, whole row selectable, simple borders,
       loading inside the carrier row
   ========================================================================== */

/* --- 19.1 Pencil exactly in the centre of the circle -------------------------- */
body#checkout section.checkout-step .step-edit {
    display: none;
    overflow: hidden;
    line-height: 0;
}

body#checkout section.checkout-step .step-edit::before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
}

/* shown only on completed steps that are not currently open */
body#checkout section.checkout-step.-reachable.-complete:not(.-current) .step-edit {
    display: inline-block;
}

/* --- 19.2 The whole carrier / payment row is clickable ------------------- */
body#checkout section.checkout-step .delivery-options .delivery-option,
body#checkout .payment-options .payment-option {
    position: relative;
}

/* the label (for=radio) stretches across the whole row */
body#checkout section.checkout-step .delivery-options .delivery-option > label::after,
body#checkout .payment-options .payment-option label::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* the radio stays on top so it can be clicked normally */
body#checkout section.checkout-step .delivery-options .delivery-option .custom-radio,
body#checkout .payment-options .payment-option .custom-radio {
    position: relative;
    z-index: 2;
}

/* --- 19.3 Simple border with rounded corners --------------------- */
body#checkout section.checkout-step .delivery-options .delivery-option,
body#checkout .payment-options .payment-option {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

body#checkout section.checkout-step .delivery-options .delivery-option:hover,
body#checkout .payment-options .payment-option:hover {
    border-color: #c9ced4;
}

body#checkout section.checkout-step .delivery-options .delivery-option:has(input[type="radio"]:checked),
body#checkout .payment-options .payment-option:has(input[type="radio"]:checked) {
    border-color: var(--cp-dark);
    background: var(--cp-primary-soft);
}

body#checkout section.checkout-step .delivery-options .carrier-extra-content {
    margin: -14px 0 8px;
    padding: 18px 16px 14px;
    border-color: var(--cp-dark);
    border-radius: 0 0 12px 12px;
}

/* --- 19.4 Loading: small spinner in place of the row's price --------- */
body#checkout .delivery-option.cp-option-loading .carrier-price {
    visibility: hidden;
}

body#checkout .delivery-option.cp-option-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    z-index: 3;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border: 2px solid color-mix(in srgb, var(--cp-primary) 25%, transparent);
    border-top-color: var(--cp-dark);
    border-radius: 50%;
    animation: cp-spin .7s linear infinite;
}

/* the list is not clickable while updating (no overlay / height change) */
body#checkout .delivery-options.cp-busy {
    pointer-events: none;
}

/* --- 19.5 Cart: soft "fade out" instead of an overlay ---------------------- */
body#checkout #js-checkout-summary {
    transition: opacity .2s ease;
}

body#checkout #js-checkout-summary.cp-loading {
    opacity: .45;
}

body#checkout #js-checkout-summary.cp-loading::before,
body#checkout #js-checkout-summary.cp-loading::after {
    content: none;
}


/* ==========================================================================
   20. Only one ✓ (the circle), faded titles on completed steps, no needless scroll
   ========================================================================== */

/* --- 20.1 The theme's ✓ after the title: never (only the circle remains) ---- */
body#checkout section.checkout-step .step-title .done {
    display: none !important;
}

/* "Edit" never on a current / unavailable step */
body#checkout section.checkout-step.-current .step-edit,
body#checkout section.checkout-step.-unreachable .step-edit {
    display: none !important;
}

/* --- 20.2 Completed steps: title in soft grey --------------------- */
body#checkout section.checkout-step.-complete:not(.-current) .step-title {
    font-weight: 500;
    color: var(--cp-faint);
    transition: color .15s ease;
}

body#checkout section.checkout-step.-complete:not(.-current) .step-title:hover {
    color: var(--cp-muted);
}

/* --- 20.3 No gaps that create scroll ----------------------------- */
body#checkout #content,
body#checkout .cart-grid,
body#checkout .cart-grid-body {
    margin-bottom: 0;
}

body#checkout #wrapper {
    padding-bottom: 0;
}

@media (min-width: 992px) {
    body#checkout .cart-grid-body,
    body#checkout .cart-grid-right {
        padding-bottom: 48px;
    }
}

/* footer without content: no height */
body#checkout #footer {
    padding: 0;
}

body#checkout #footer .text-sm-center:has(*) {
    padding-top: 16px;
    padding-bottom: 24px;
}

/* --- 20.4 "Edit" always on the same line on the right (all sizes) ---- */
body#checkout section.checkout-step .step-title {
    display: flex;
    align-items: center;
}

body#checkout section.checkout-step .step-title .step-edit {
    flex: 0 0 34px;
    margin: 0 0 0 auto !important;
}

/* --- 20.5 Carriers on mobile: name + time on the left, price on the right ----- */
@media (max-width: 575px) {
    body#checkout section.checkout-step .delivery-options .delivery-option > label > .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 2px 12px;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div:last-child {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-left: 0;
        text-align: right;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option.cp-option-loading::after {
        right: 14px;
    }
}

/* --- 20.6 The label does not "hold" the ::after → it covers the whole row ---- */
body#checkout section.checkout-step .delivery-options .delivery-option > label,
body#checkout .payment-options .payment-option label {
    position: static !important;
}


/* ==========================================================================
   21. Personal information: tabs as a switch, full-width email
   ========================================================================== */

/* --- 21.1 Guest | Sign in: two-option switch ------------------- */
body#checkout #checkout-personal-information-step .nav.nav-inline {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    margin: 0 0 24px !important;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: #f1f3f5;
}

body#checkout #checkout-personal-information-step .nav-inline .nav-item:has(.nav-separator) {
    display: none;
}

body#checkout #checkout-personal-information-step .nav-inline .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
    text-transform: none;
    color: var(--cp-muted);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

body#checkout #checkout-personal-information-step .nav-inline .nav-link:hover {
    color: var(--cp-text);
}

body#checkout #checkout-personal-information-step .nav-inline .nav-link.active {
    border-color: #e5e7eb;
    background: #fff;
    color: var(--cp-text);
}

/* --- 21.2 Full-width e-mail ---------------------------------------- */
body#checkout #customer-form > div:first-child > .form-group.row:has(input[name="email"]) {
    grid-column: 1 / -1 !important;
}

/* --- 21.4 Password: "Show" as plain text inside the field ----------- */
body#checkout .js-input-column .input-group {
    position: relative;
}

body#checkout .js-input-column .input-group > .form-control {
    padding-right: 104px;
}

body#checkout .js-input-column .input-group-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 3;
    width: auto;
    transform: translateY(-50%);
}

body#checkout .js-input-column .input-group-btn .btn {
    min-height: 0;
    height: 36px;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 8px;
    background: transparent !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cp-dark) !important;
}

body#checkout .js-input-column .input-group-btn .btn:hover {
    background: var(--cp-primary-soft) !important;
}

/* --- 21.5 Tabs: no border / outline on click --------------------- */
body#checkout #checkout-personal-information-step .nav-inline .nav-link:focus,
body#checkout #checkout-personal-information-step .nav-inline .nav-link:active,
body#checkout #checkout-personal-information-step .nav-inline .nav-link:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

body#checkout #checkout-personal-information-step .nav-inline .nav-link:not(.active):focus {
    border-color: transparent;
}

body#checkout #checkout-personal-information-step .nav-inline .nav-link.active,
body#checkout #checkout-personal-information-step .nav-inline .nav-link.active:focus {
    border: 1px solid #e5e7eb !important;
}

/* --- 21.6 Password label above the field (the input-group has z-index) */
body#checkout .form-group.row:has(.input-group) > .form-control-label {
    z-index: 5 !important;
}



/* ==========================================================================
   22. Password strength (bar + hints) more subtle, progress bar text
   ========================================================================== */

/* --- 22.1 Strength bar: thin, rounded, soft colours ------------------ */
body#checkout .password-strength-feedback {
    margin-top: 10px !important;
}

body#checkout .password-strength-feedback .progress {
    height: 4px;
    margin: 0 0 8px !important;
    overflow: hidden;
    border-radius: 999px;
    background: #eceef1;
    box-shadow: none;
}

body#checkout .password-strength-feedback .progress-bar {
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease, background-color .3s ease;
}

body#checkout .password-strength-feedback .progress-bar.bg-success { background-color: var(--cp-dark) !important; }
body#checkout .password-strength-feedback .progress-bar.bg-warning { background-color: #f5b041 !important; }
body#checkout .password-strength-feedback .progress-bar.bg-danger  { background-color: #ef6a5a !important; }

body#checkout .password-strength-text {
    font-size: 12px;
    color: var(--cp-muted);
}

/* --- 22.2 Hints: small grey text, small icon ----------------- */
body#checkout .password-requirements p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--cp-muted);
}

body#checkout .password-requirements .material-icons {
    font-size: 14px;
    color: var(--cp-faint);
}

body#checkout .password-requirements .material-icons.text-success {
    color: var(--cp-dark) !important;
}

body#checkout .password-requirements .material-icons.text-danger {
    color: #ef6a5a !important;
}

/* green / red border that the theme puts on the field → ours */
body#checkout #field-password.border-success {
    border-color: var(--cp-dark) !important;
}

/* --- 22.3 Progress bar: "Step 1 of 5" on one line -------------------- */
body#checkout .cp-progress-step {
    white-space: nowrap;
}

@media (max-width: 1359px) {
    body#checkout .cp-progress-step::before {
        content: "· ";
    }
}

/* --- 22.4 The title of the open step is not a "click" target ---------------- */
body#checkout section.checkout-step.-current .step-title {
    cursor: default;
}

/* --- 22.5 Steps open only from the pencil: the title is not a "click" target -- */
body#checkout section.checkout-step .step-title,
body#checkout section.checkout-step.-complete .step-title {
    cursor: default;
}

body#checkout section.checkout-step.-complete:not(.-current) .step-title:hover {
    color: var(--cp-faint);
}

body#checkout section.checkout-step .step-edit {
    cursor: pointer;
}



/* ==========================================================================
   23. The classic theme blue → primary colour (whole site)
   Generated automatically from the theme.css rules that contain #24b9d7 /
   #1d93ab / #18798d. Same selectors, loaded later → takes precedence.
   ========================================================================== */
a {
    color:var(--cp-primary);
}

.btn-primary,
.btn-primary:hover {
    background-color:var(--cp-primary);
}

.btn-primary:hover {
    background-color:var(--cp-primary-hover);
}

.btn-primary.focus,
.btn-primary:focus {
    background-color:var(--cp-primary-hover);
}

.btn-primary.active,
.btn-primary:active,
.open>.btn-primary.dropdown-toggle {
    background-color:var(--cp-primary-hover);
}

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open>.btn-primary.dropdown-toggle.focus,
.open>.btn-primary.dropdown-toggle:focus,
.open>.btn-primary.dropdown-toggle:hover {
    background-color:var(--cp-primary-active);
}

.btn-primary.disabled.focus,
.btn-primary.disabled:focus,
.btn-primary:disabled.focus,
.btn-primary:disabled:focus {
    background-color:var(--cp-primary);
}

.btn-primary.disabled:hover,
.btn-primary:disabled:hover {
    background-color:var(--cp-primary);
}

.btn-outline-primary {
    color:var(--cp-primary);
    border-color:var(--cp-primary);
}

.btn-outline-primary:hover {
    background-color:var(--cp-primary);
    border-color:var(--cp-primary);
}

.btn-outline-primary.focus,
.btn-outline-primary:focus {
    background-color:var(--cp-primary);
    border-color:var(--cp-primary);
}

.btn-outline-primary.active,
.btn-outline-primary:active,
.open>.btn-outline-primary.dropdown-toggle {
    background-color:var(--cp-primary);
    border-color:var(--cp-primary);
}

.btn-outline-primary.active.focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.active:hover,
.btn-outline-primary:active.focus,
.btn-outline-primary:active:focus,
.btn-outline-primary:active:hover,
.open>.btn-outline-primary.dropdown-toggle.focus,
.open>.btn-outline-primary.dropdown-toggle:focus,
.open>.btn-outline-primary.dropdown-toggle:hover {
    background-color:var(--cp-primary-active);
}

.btn-link {
    color:var(--cp-primary);
}

.dropdown-item.active,
.dropdown-item.active:focus,
.dropdown-item.active:hover {
    background-color:var(--cp-primary);
}

.nav-pills .nav-item.open .nav-link,
.nav-pills .nav-item.open .nav-link:focus,
.nav-pills .nav-item.open .nav-link:hover,
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:hover {
    background-color:var(--cp-primary);
}

.card-primary {
    background-color:var(--cp-primary);
    border-color:var(--cp-primary);
}

.card-outline-primary,
.card-outline-secondary {
    border-color:var(--cp-primary);
}

.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover {
    background-color:var(--cp-primary);
    border-color:var(--cp-primary);
}

.page-link {
    color:var(--cp-primary);
}

.tag-primary {
    background-color:var(--cp-primary);
}

.tag-primary[href]:focus,
.tag-primary[href]:hover {
    background-color:var(--cp-primary-hover);
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
    background-color:var(--cp-primary);
    border-color:var(--cp-primary);
}

.bg-primary {
    background-color:var(--cp-primary)!important;
}

a.bg-primary:focus,
a.bg-primary:hover {
    background-color:var(--cp-primary-hover)!important;
}

.text-primary {
    color:var(--cp-primary)!important;
}

a.text-primary:focus,
a.text-primary:hover {
    color:var(--cp-primary-hover)!important;
}

#header .top-menu a[data-depth="0"]:hover,
a:hover {
    color:var(--cp-primary);
}

.block_newsletter form input[type=text]:focus+button .search,
.btn-unstyle:focus .expand-more,
.search-widget form input[type=text]:focus+button .search {
    color:var(--cp-primary);
}

.form-control:focus {
    outline:.1875rem solid var(--cp-primary);
}

.input-group.focus {
    outline:.1875rem solid var(--cp-primary);
}

.bootstrap-touchspin .group-span-filestyle .btn-touchspin,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin,
.group-span-filestyle .btn-default {
    background:var(--cp-primary);
}

.custom-radio input[type=radio]:checked+span {
    background-color:var(--cp-primary);
}

.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i,
.dropdown:hover .expand-more,
.page-my-account #content .links a:hover i,
.search-widget form button[type=submit] .search:hover,
.top-menu .sub-menu a:hover {
    color:var(--cp-primary);
}

.dropdown-item:focus,
.dropdown-item:hover {
    color:var(--cp-primary);
}

.search-widget form input[type=text]:focus {
    outline:3px var(--cp-primary) solid;
}

body#checkout section.checkout-step .address-item.selected {
    border:var(--cp-primary) 3px solid;
}

.product-miniature .highlighted-informations .quick-view:hover {
    color:var(--cp-primary);
}

.brands-sort .select-list:hover,
.products-sort-order .select-list:hover,
.suppliers-sort .select-list:hover {
    background:var(--cp-primary);
}

.facet-dropdown.open>.select-title {
    border:3px solid var(--cp-primary);
}

.facet-dropdown .select-list:hover {
    background:var(--cp-primary);
}

.pagination .current a {
    color:var(--cp-primary);
}

#subcategories ul li .subcategory-name:hover,
.block-categories .arrows .arrow-down:hover,
.block-categories .arrows .arrow-right:hover,
.block-categories .collapse-icons .add:hover,
.block-categories .collapse-icons .remove:hover,
.cart-grid-body a.label:hover {
    color:var(--cp-primary);
}

#subcategories ul li:hover .subcategory-image a {
    border:5px solid var(--cp-primary);
}

.product-price {
    color:var(--cp-primary);
}

.tabs .nav-tabs .nav-link.active {
    color:var(--cp-primary);
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
    border-bottom:var(--cp-primary) 3px solid;
}

#product-modal .modal-content .modal-body .product-images img:hover {
    border:var(--cp-primary) 3px solid;
}

#blockcart-modal .product-name {
    color:var(--cp-primary);
}

.product-images>li.thumb-container .thumb.selected,
.product-images>li.thumb-container .thumb:hover {
    border:var(--cp-primary) 3px solid;
}

.product-flags li.product-flag {
    background:var(--cp-primary);
}

.product-customization .product-message:focus {
    outline:.1875rem solid var(--cp-primary);
}

.block-promo .promo-input+button {
    border:2px solid var(--cp-primary);
}

.block-promo .promo-code-button.cancel-promo {
    color:var(--cp-primary);
}

.account-list a:hover,
.block_newsletter form button[type=submit] .search:hover,
.footer-container li a:hover {
    color:var(--cp-primary);
}

.block-social ul li:hover {
    background-color:var(--cp-primary);
}

.block_newsletter form input[type=text]:focus {
    outline:3px var(--cp-primary) solid;
}

.block_newsletter form input[type=email]:focus {
    border:3px var(--cp-primary) solid;
}

#header a:hover {
    color:var(--cp-primary);
}

#header .header-nav .cart-preview.active {
    background:var(--cp-primary);
}

#header .header-nav .blockcart a:hover {
    color:var(--cp-primary);
}

/* "Edit" pencil with mask → the colour comes from the variables */
body#checkout section.checkout-step .step-edit::before {
    background: var(--cp-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5a2.1 2.1 0 0 0-4-4L4 16v4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5a2.1 2.1 0 0 0-4-4L4 16v4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") no-repeat center / contain;
}

body#checkout section.checkout-step .step-edit:hover::before {
    background: var(--cp-dark);
}


/* ==========================================================================
   24. Smaller / lighter text on checkboxes (privacy, newsletter ...)
       + "Create an account (optional)" above the password
   ========================================================================== */

/* --- 24.1 Explanation below each checkbox: small, light, not italic ---- */
body#checkout .custom-checkbox label {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--cp-text);
}

body#checkout .custom-checkbox label em {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5;
    color: var(--cp-muted);
}

/* --- 24.2 Text above the password, like the theme but cleaner ---- */
body#checkout #customer-form .form-informations {
    margin: 6px 0 -4px;
    font-size: 14px;
    line-height: 1.45;
}

body#checkout #customer-form .form-informations-title {
    font-weight: 500 !important;
    color: var(--cp-text);
}

body#checkout #customer-form .form-informations-option {
    margin-left: 4px;
    font-size: 12px;
    font-style: normal !important;
    font-weight: 300;
    color: var(--cp-muted);
}

body#checkout #customer-form .form-informations-subtitle {
    font-size: 12px;
    font-weight: 300;
    color: var(--cp-muted) !important;
}

/* --- 24.3 Password: white background (even while readonly), eye instead of
       "Show", no "optional" inside the field ---------------------- */
body#checkout .js-input-column .input-group > .form-control,
body#checkout .js-input-column .input-group > .form-control[readonly] {
    background-color: transparent;
    padding-right: 56px;
}

body#checkout .js-input-column .input-group {
    background: #fff;
}

body#checkout .field-password-policy .form-group > .form-control-comment {
    display: none !important;
}

body#checkout .js-input-column .input-group-btn .btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 0 !important;      /* hides "Show / Hide" */
    color: transparent !important;
}

/* eye (password hidden) */
body#checkout .js-input-column .input-group-btn .btn::before {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--cp-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: background-color .15s ease;
}

/* eye with a line through it (password visible) */
body#checkout .js-input-column .input-group:has(> input[type="text"]) .input-group-btn .btn::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 5.1A10.6 10.6 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-2.9 3.9M6.6 6.6C3.9 8.3 2 12 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 5.1A10.6 10.6 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-2.9 3.9M6.6 6.6C3.9 8.3 2 12 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

body#checkout .js-input-column .input-group-btn .btn:hover::before {
    background: var(--cp-dark);
}

/* --- 24.4 The "*" above the required checkboxes (empty label) ------- */
body#checkout .form-group.row:has(.custom-checkbox) > .form-control-label {
    display: none;
}

/* eye exactly in the centre (the button's hidden text took up a second "line") */
body#checkout .js-input-column .input-group-btn .btn {
    position: relative;
    display: block;
}

body#checkout .js-input-column .input-group-btn .btn::before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
}


/* ==========================================================================
   25. Tooltips ⓘ, checkbox "hand" cursor, "Forgot password"
   ========================================================================== */

/* --- 25.1 Tooltip: the icon stays the same, the text appears in a bubble above
       (text from data-cp-tip set by custom.js) ---------------------- */
body#checkout .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment,
body#checkout .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment:hover {
    right: 12px;
    width: 20px;
    height: 20px;
    margin: -10px 0 0;
    padding: 0;
    background: transparent;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: help;
    outline: 0;
}

/* "i" icon in a circle (SVG, takes its colour from a variable) */
body#checkout .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment::before,
body#checkout .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment:hover::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 0;
    background: var(--cp-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.8' r='.6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.8' r='.6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: background-color .15s ease;
}

body#checkout .js-input-column > .form-control-comment:hover::before,
body#checkout .js-input-column > .form-control-comment:focus::before {
    background: var(--cp-dark) !important;
}

/* the bubble */
body#checkout .js-input-column > .form-control-comment[data-cp-tip]::after {
    content: attr(data-cp-tip);
    position: absolute;
    right: -8px;
    bottom: calc(100% + 10px);
    z-index: 30;
    width: max-content;
    max-width: min(260px, 80vw);
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--cp-ink);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

body#checkout .js-input-column > .form-control-comment[data-cp-tip]:hover::after,
body#checkout .js-input-column > .form-control-comment[data-cp-tip]:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- 25.2 Checkbox: "hand" cursor across the whole row (box + text) -------- */
body#checkout .custom-checkbox,
body#checkout .custom-checkbox label,
body#checkout .custom-checkbox input,
body#checkout .custom-checkbox label *,
body#checkout #conditions-to-approve label,
body#checkout #conditions-to-approve input {
    cursor: pointer;
}

body#checkout .custom-checkbox label {
    display: block;
}

/* links inside the checkbox text (e.g. "terms") remain links */
body#checkout .custom-checkbox label a {
    cursor: pointer;
}

/* --- 25.3 "Forgot password": small black text with an icon ------- */
body#checkout .forgot-password {
    margin: -4px 0 18px;
    text-align: left;
}

body#checkout .forgot-password a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--cp-text);
    text-decoration: none;
}

body#checkout .forgot-password a::before {
    content: "";
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
}

body#checkout .forgot-password a:hover {
    color: var(--cp-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "Forgot password": left-aligned on desktop too (the theme sets margin-left 25%), better spacing */
body#checkout .forgot-password {
    width: 100%;
    margin: 12px 0 26px !important;
    padding: 0 2px;
    text-align: left !important;
}

body#checkout .forgot-password a {
    padding: 4px 0;
}


/* ==========================================================================
   26. Addresses: no "...and for the invoice", hint with an icon
   ========================================================================== */

/* --- 26.1 "Use this address for the invoice too": hidden
       (stays checked → same address; the invoice is handled by invoicestep) */
body#checkout #delivery-address .form-group.row:has(#use_same_address) {
    display: none !important;
}

/* --- 26.2 "Enter the shipping address" with a notification icon */
body#checkout #checkout-addresses-step .js-address-form > form > p:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--cp-primary-soft);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--cp-text);
}

body#checkout #checkout-addresses-step .js-address-form > form > p:first-child::before {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: var(--cp-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* ==========================================================================
   27. Address "Alias": always hidden (optional field; PrestaShop
       assigns the address name on its own). In checkout and "My addresses".
   ========================================================================== */
.js-address-form .form-group:has(input[name="alias"]),
#address .form-group:has(input[name="alias"]) {
    display: none !important;
}


/* ==========================================================================
   28. Address editing: "Cancel" + "Save" centred, with icons
   (same style as "Continue"; the order in the HTML remains the theme's)
   ========================================================================== */
body#checkout .js-address-form .form-footer:has(.js-cancel-address) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

/* "Save": dark pill with a save icon (floppy disk) in a circle */
body#checkout .js-address-form .form-footer:has(.js-cancel-address) .btn-primary {
    order: 2;
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: auto;
    min-width: 180px;
    min-height: 48px;
    margin: 0;
    padding: 0 9px 0 26px;
    border-radius: 999px;
}

body#checkout .js-address-form .form-footer:has(.js-cancel-address) .btn-primary:not(.continue)::after {
    content: "";
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h11l4 4v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 1-2z'/%3E%3Cpath d='M7 3v5h8V3'/%3E%3Cpath d='M7 21v-7h10v7'/%3E%3C/svg%3E") no-repeat center / 16px;
}

/* "Cancel": white pill with a thin border and ✕ */
body#checkout .js-address-form .form-footer .js-cancel-address {
    order: 1;
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin: 0;
    padding: 0 22px 0 18px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-text);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

body#checkout .js-address-form .form-footer .js-cancel-address::before {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain;
}

body#checkout .js-address-form .form-footer .js-cancel-address:hover {
    border-color: #c9ced4;
    background: #f9fafb;
    color: var(--cp-text);
}

/* mobile: one below the other, full width */
@media (max-width: 575px) {
    body#checkout .js-address-form .form-footer:has(.js-cancel-address) {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}


/* ==========================================================================
   29. Addresses (cards, when it is not a "single address / form"):
       compact, icons instead of text, plain border
   ========================================================================== */
body#checkout .address-selector {
    gap: 10px;
    border-top: 0;
}

body#checkout section.checkout-step .address-selector .address-item,
body#checkout section.checkout-step .address-selector .address-item.selected {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}

body#checkout section.checkout-step .address-selector .address-item:hover {
    border-color: #c9ced4;
}

body#checkout section.checkout-step .address-selector .address-item.selected {
    border-color: var(--cp-primary);
    background: var(--cp-primary-soft);
}

body#checkout .address-item hr {
    display: none;
}

body#checkout .address-item header.h4 {
    margin: 0;
    padding: 0;
}

body#checkout .address-item .radio-block {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    margin: 0;
    cursor: pointer;
}

body#checkout .address-item .radio-block .custom-radio {
    grid-row: 1 / span 2;
    margin: 1px 0 0;
}

body#checkout .address-item .address-alias {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cp-text);
}

body#checkout .address-item .address {
    margin: 3px 0 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cp-muted);
}

/* Edit / Delete → round icon buttons on the right */
body#checkout .address-item .address-footer {
    display: flex;
    gap: 6px;
    padding: 0;
    border: 0;
}

body#checkout .address-item .address-footer a {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #fff;
    font-size: 0 !important;
    color: var(--cp-muted) !important;
    text-decoration: none !important;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

body#checkout .address-item .address-footer a .material-icons {
    display: none;
}

body#checkout .address-item .address-footer a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    background: currentColor;
}

body#checkout .address-item .address-footer .edit-address::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5a2.1 2.1 0 0 0-4-4L4 16v4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5a2.1 2.1 0 0 0-4-4L4 16v4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") no-repeat center / contain;
}

body#checkout .address-item .address-footer .delete-address::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3C/svg%3E") no-repeat center / contain;
}

body#checkout .address-item .address-footer .edit-address:hover {
    border-color: var(--cp-primary);
    color: var(--cp-primary) !important;
}

body#checkout .address-item .address-footer .delete-address:hover {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #dc2626 !important;
}

/* "+ add new address" → dashed full-width button */
body#checkout .add-address {
    margin: 0 0 14px;
}

body#checkout .add-address a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border: 1px dashed #c9ced4;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-text);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

body#checkout .add-address a:first-letter {
    text-transform: uppercase;
}

body#checkout .add-address a .material-icons {
    font-size: 18px;
}

body#checkout .add-address a:hover {
    border-color: var(--cp-primary);
    background: var(--cp-primary-soft);
    color: var(--cp-primary);
}

/* "The billing address differs..." → small link with an icon */
body#checkout [data-link-action="different-invoice-address"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cp-muted);
    text-decoration: none;
}

body#checkout [data-link-action="different-invoice-address"]::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") no-repeat center / contain;
}

body#checkout [data-link-action="different-invoice-address"]:hover {
    color: var(--cp-primary);
}

/* the theme adds padding to the card's label / header / footer → compact card */
body#checkout section.checkout-step .address-item header.h4,
body#checkout section.checkout-step .address-item .radio-block,
body#checkout section.checkout-step .address-item .address-footer {
    margin: 0 !important;
    padding: 0 !important;
}

body#checkout section.checkout-step .address-item .address-footer {
    align-self: center;
}

body#checkout section.checkout-step .address-item header.h4 {
    min-height: 0 !important;
}

/* --- 29.1 Full-width card (the theme: flex 49%), without "My address" --- */
body#checkout .js-address-selector {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
}

body#checkout section.checkout-step .js-address-selector .address-item {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 12px 12px 12px 16px;
}

body#checkout .address-item .address-alias {
    display: none !important;
}

body#checkout .address-item .radio-block {
    align-items: center;
}

body#checkout .address-item .radio-block .custom-radio {
    grid-row: auto;
    margin: 0;
}

/* two lines (from custom.js): name · and below it address / country / phone */
body#checkout .address-item .address {
    margin: 0;
}

body#checkout .address-item .cp-address-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cp-text);
}

body#checkout .address-item .cp-address-rest {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cp-muted);
}

/* gap below the cards (the theme's hidden "Save" button for no-JS) */
body#checkout .js-address-selector {
    margin-bottom: 12px !important;
}

body#checkout .js-address-selector > p:has(> .ps-hidden-by-js) {
    display: none;
}


/* ==========================================================================
   30. Shipping methods: icon in a square (same pattern as Receipt/Invoice)
   ========================================================================== */
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier {
    align-items: center;
    gap: 12px;
}

/* without logo: delivery truck */
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier:not(.carrier-hasLogo)::before {
    content: "";
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f3f4f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E") no-repeat center / 18px;
    transition: background-color .2s ease;
}

body#checkout section.checkout-step .delivery-options .delivery-option:has(input[type="radio"]:checked) label .carrier:not(.carrier-hasLogo)::before {
    background-color: var(--cp-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
}

/* with logo: the logo in the same square */
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

body#checkout section.checkout-step .delivery-options .delivery-option:has(input[type="radio"]:checked) label .carrier-logo {
    border-color: var(--cp-primary);
}

/* carrier name / time: smaller */
body#checkout section.checkout-step .delivery-options .delivery-option .carrier-name {
    font-size: 14px;
}

/* --- 30.1 Delivery time below the name (all sizes), small light --- */
body#checkout section.checkout-step .delivery-options .delivery-option > label > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 12px;
}

body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div:first-child {
    grid-column: 1;
    grid-row: 1;
}

body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    /* aligned with the name (after the icon square: 32px + 12px) */
    padding-left: 44px;
}

body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-left: 0;
    text-align: right;
}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier {
    min-height: 32px;
}

body#checkout section.checkout-step .delivery-options .delivery-option .carrier-delay {
    display: block;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.3;
    color: var(--cp-muted);
}

/* --- 30.2 Mobile / long names: icon + name always on the same line --- */
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier > .carriere-name-container {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    max-width: none;
    padding: 0 !important;
}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier > .carrier-logo {
    max-width: 32px;
}

body#checkout section.checkout-step .delivery-options .delivery-option .carrier-name {
    display: block;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

/* price: does not wrap, fixed on the right */
body#checkout section.checkout-step .delivery-options .delivery-option .carrier-price {
    white-space: nowrap;
}

@media (max-width: 575px) {
    body#checkout section.checkout-step .delivery-options .delivery-option {
        gap: 10px;
        padding: 12px;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option label .carrier {
        gap: 10px;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div:nth-child(2) {
        padding-left: 42px;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option .carrier-name {
        font-size: 13px;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option .carrier-price {
        font-size: 13px;
    }
}

/* --- 30.3 No radio (the whole card is selected) + everything vertically centred ---
   The icon / logo sits at the centre left (opposite the name + time). */

/* radio: hidden only on mobile (the whole card is selected); on desktop as before */
@media (max-width: 767px) {
    /* radio: hidden but present (form / keyboard work normally) */
    body#checkout section.checkout-step .delivery-options .delivery-option > .col-sm-1 {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    body#checkout section.checkout-step .delivery-options .delivery-option:has(input:focus-visible) {
        outline: 2px solid var(--cp-primary);
        outline-offset: 2px;
    }
}

body#checkout section.checkout-step .delivery-options .delivery-option > label > .row {
    position: relative;
    min-height: 34px;
    padding-left: 46px;
}

/* icon from .carrier → in the row (centre left) */
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier:not(.carrier-hasLogo)::before {
    content: none;
}

body#checkout section.checkout-step .delivery-options .delivery-option > label > .row:not(:has(.carrier-hasLogo))::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border-radius: 9px;
    background: #f3f4f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E") no-repeat center / 18px;
    transition: background-color .2s ease;
}

body#checkout section.checkout-step .delivery-options .delivery-option:has(input[type="radio"]:checked) > label > .row:not(:has(.carrier-hasLogo))::before {
    background-color: var(--cp-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
}

/* carrier logo: in the same position as the icon */
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier > .carrier-logo {
    position: absolute;
    top: 50%;
    left: 0;
    width: 34px !important;
    max-width: 34px;
    height: 34px;
    margin-top: -17px !important;
}

/* time: same alignment as the name (the gap for the icon is now in the row) */
body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div:nth-child(2) {
    padding-left: 0 !important;
}

/* name + time: the whole block vertically centred, the price too */
body#checkout section.checkout-step .delivery-options .delivery-option > label > .row {
    align-content: center;
}

body#checkout section.checkout-step .delivery-options .delivery-option {
    align-items: center;
}

/* logo: position relative to the card (bootstrap columns are position:relative) */
body#checkout section.checkout-step .delivery-options .delivery-option > label > .row > div,
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier,
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier > div:not(.carrier-logo) {
    position: static !important;
}

/* --- 30.4 Icon slot 52×36 (wide logos like ACS / ELTA fit properly) --- */
body#checkout section.checkout-step .delivery-options .delivery-option > label > .row {
    min-height: 36px;
    padding-left: 64px;
}

body#checkout section.checkout-step .delivery-options .delivery-option > label > .row:not(:has(.carrier-hasLogo))::before {
    left: 8px;
    width: 36px;
    height: 36px;
    margin-top: -18px;
}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier > .carrier-logo {
    width: 52px !important;
    max-width: 52px;
    height: 36px;
    margin-top: -18px !important;
    padding: 3px 4px;
}

/* --- 30.5 Order comment: small label, small field with placeholder --- */
body#checkout label[for="delivery_message"] {
    margin: 18px 0 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cp-muted);
}

body#checkout #delivery_message {
    min-height: 64px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    resize: vertical;
}

body#checkout #delivery_message::placeholder {
    font-size: 12px;
    font-weight: 300;
    color: var(--cp-faint);
}


/* ==========================================================================
   31. Payment: terms small / light / centred, "Complete" sticky at the bottom
   ========================================================================== */
body#checkout #conditions-to-approve {
    margin: 18px 0 6px;
    text-align: center;
}

body#checkout #conditions-to-approve li {
    display: flex;
    justify-content: center;
}

body#checkout #conditions-to-approve .float-xs-left {
    float: none !important;
}

body#checkout #conditions-to-approve .condition-label,
body#checkout #conditions-to-approve label {
    margin: 0;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--cp-muted);
    text-align: left;
}

body#checkout #conditions-to-approve label a {
    font-weight: 400;
    color: var(--cp-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

body#checkout #conditions-to-approve li {
    align-items: flex-start;
    gap: 8px;
}

/* "Complete": sticks to the bottom while the customer scrolls the payment step */
body#checkout #payment-confirmation {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 0 -8px;
    padding: 12px 8px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, #fff 75%, rgba(255, 255, 255, 0));
}


/* ==========================================================================
   32. Cart summary (right panel): products (2 + "See all"), amounts in 3 groups,
       VAT exemption rows, promo code always open
   ========================================================================== */

/* --- 32.1 Products --- */
body#checkout #js-checkout-summary #cart-summary-product-list {
    display: block !important;
    height: auto !important;
}

body#checkout #js-checkout-summary .media.cp-extra {
    display: none;
}

body#checkout #js-checkout-summary .cp-show-all .media.cp-extra {
    display: flex;
    animation: invoicestep-ic-in .2s ease;
}

body#checkout #js-checkout-summary .media {
    align-items: center;
    gap: 12px;
}

body#checkout #js-checkout-summary .media-left img {
    width: 52px;
    height: 52px;
    padding: 3px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
}

body#checkout #js-checkout-summary .product-name,
body#checkout #js-checkout-summary .product-name a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--cp-text);
}

body#checkout #js-checkout-summary .product-price {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* "See all (+N)" */
body#checkout #js-checkout-summary .cp-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 4px 0 0;
    padding: 8px 12px;
    border: 1px dashed #c9ced4;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--cp-text);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

body#checkout #js-checkout-summary .cp-show-more::after {
    content: "";
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .2s ease;
}

body#checkout #js-checkout-summary .cp-show-all .cp-show-more::after {
    transform: rotate(180deg);
}

body#checkout #js-checkout-summary .cp-show-more:hover {
    border-color: var(--cp-primary);
    background: var(--cp-primary-soft);
    color: var(--cp-primary);
}

/* --- 32.2 Amounts: clean rows, 3 groups with thin dividers --- */
body#checkout #js-checkout-summary .cart-summary-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 5px 0;
}

body#checkout #js-checkout-summary .cart-summary-line .label,
body#checkout #js-checkout-summary .cart-summary-line .value {
    float: none;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--cp-muted);
}

body#checkout #js-checkout-summary .cart-summary-line .value {
    flex: 0 0 auto;
    font-weight: 500;
    color: var(--cp-text);
    text-align: right;
    white-space: nowrap;
}

body#checkout #js-checkout-summary .cart-summary-subtotals-container {
    padding-top: 14px;
    padding-bottom: 10px;
    border-top: 1px solid var(--cp-line);
}

/* VAT exemption (39a / intra-community): one line, small, green amount */
body#checkout #js-checkout-summary .cp-line-vat_exemption {
    padding: 3px 0;
}

body#checkout #js-checkout-summary .cp-line-vat_exemption .label {
    overflow: hidden;
    min-width: 0;
    font-size: 11px;
    font-weight: 300;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body#checkout #js-checkout-summary .cp-line-vat_exemption .value {
    font-size: 12px;
    color: #059669;
}

/* Net value / VAT */
body#checkout #js-checkout-summary .cart-summary-totals {
    padding-top: 10px;
    border-top: 1px solid var(--cp-line);
}

body#checkout #js-checkout-summary .cp-line-net .label,
body#checkout #js-checkout-summary .cp-line-vat .label,
body#checkout #js-checkout-summary .cp-line-net .value,
body#checkout #js-checkout-summary .cp-line-vat .value {
    font-size: 12px;
}

/* Final amount payable */
body#checkout #js-checkout-summary .cart-summary-line.cart-total {
    margin-top: 10px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--cp-line);
    background: transparent;
}

body#checkout #js-checkout-summary .cart-total .label {
    font-size: 15px;
    font-weight: 700;
    color: var(--cp-primary);
}

body#checkout #js-checkout-summary .cart-total .value {
    font-size: 17px;
    font-weight: 700;
    color: var(--cp-primary);
}

/* --- 32.3 Promo code: always open --- */
body#checkout #js-checkout-summary .promo-code-button.display-promo,
body#checkout #js-checkout-summary .cancel-promo {
    display: none !important;
}

body#checkout #js-checkout-summary #promo-code {
    display: block !important;
    height: auto !important;
}

body#checkout #js-checkout-summary .block-promo .promo-code {
    padding: 4px 0 0;
}

body#checkout #js-checkout-summary .block-promo .promo-code form {
    display: flex;
    gap: 8px;
}

body#checkout #js-checkout-summary .block-promo .promo-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
}

body#checkout #js-checkout-summary .block-promo .promo-input:focus {
    border-color: var(--cp-primary);
    outline: 0;
}

body#checkout #js-checkout-summary .block-promo form .btn {
    flex: 0 0 auto;
    height: 42px;
    min-height: 0;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    text-transform: none;
}

body#checkout #js-checkout-summary .cart-total .label {
    text-transform: none;
    letter-spacing: 0;
}

/* "See all": small pill in the centre */
body#checkout #js-checkout-summary .cp-show-more {
    width: auto;
    min-height: 0;
    height: 32px;
    margin: 6px auto 2px;
    padding: 0 14px;
}


/* --- 32.4 Summary groups: [Net · VAT · Products Value] | [Shipping] | [Total] --- */
body#checkout #js-checkout-summary .cp-summary-group:not(:has(.cart-summary-line)) {
    display: none;
}

body#checkout #js-checkout-summary .cp-summary-group + .cp-summary-group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--cp-line);
}

body#checkout #js-checkout-summary .cp-summary-group .cp-line-net .label,
body#checkout #js-checkout-summary .cp-summary-group .cp-line-net .value,
body#checkout #js-checkout-summary .cp-summary-group .cp-line-vat .label,
body#checkout #js-checkout-summary .cp-summary-group .cp-line-vat .value {
    font-size: 13px;
}

/* only the Total in the totals: one divider line (not two) */
body#checkout #js-checkout-summary .cart-summary-totals:not(:has(.cp-line-net)) {
    padding-top: 0;
    border-top: 0;
}

body#checkout #js-checkout-summary .cart-summary-totals:not(:has(.cp-line-net)) .cart-total {
    margin-top: 0;
}

/* --- 32.5 Product row: image | name + "1 × price" | total, no VAT, delete --- */
body#checkout #js-checkout-summary .media-list .media {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--cp-line);
}

body#checkout #js-checkout-summary .media-list .media:last-child {
    border-bottom: 0;
}

body#checkout #js-checkout-summary .media-left,
body#checkout #js-checkout-summary .media-body {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

body#checkout #js-checkout-summary .media-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* old "x1" on the image: no */
body#checkout #js-checkout-summary .media .product-quantity {
    display: none !important;
}

body#checkout #js-checkout-summary .cp-line-qty {
    font-size: 12px;
    font-weight: 400;
    color: var(--cp-muted);
}

body#checkout #js-checkout-summary .cp-line-side {
    display: grid;
    grid-template-columns: auto 24px;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    justify-items: end;
    text-align: right;
}

body#checkout #js-checkout-summary .cp-line-total {
    grid-column: 1;
    grid-row: 1;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cp-text);
}

body#checkout #js-checkout-summary .cp-line-side .cp-line-net {
    grid-column: 1;
    grid-row: 2;
    font-size: 11px;
    font-weight: 300;
    white-space: nowrap;
    color: var(--cp-muted);
}

/* delete: small round button with ✕ */
body#checkout #js-checkout-summary .cp-line-remove {
    position: relative;
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 24px;
    height: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #fff;
    color: var(--cp-faint);
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

body#checkout #js-checkout-summary .cp-line-remove::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain;
}

body#checkout #js-checkout-summary .cp-line-remove:hover {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #dc2626;
}

body#checkout #js-checkout-summary .media-list .media.cp-removing {
    opacity: .4;
    pointer-events: none;
}

@media (max-width: 400px) {
    body#checkout #js-checkout-summary .media-list .media {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 10px;
    }

    body#checkout #js-checkout-summary .media-left img {
        width: 44px;
        height: 44px;
    }
}

/* the extra products hidden until "See all" (after the row's display:grid) */
body#checkout #js-checkout-summary .media-list .media.cp-extra {
    display: none;
}

body#checkout #js-checkout-summary .cp-show-all .media-list .media.cp-extra {
    display: grid;
}

/* --- 26.3 "Enter the shipping address": no background, small "i", subtle --- */
body#checkout #checkout-addresses-step .js-address-form > form > p:first-child {
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 12px;
    font-weight: 400;
    color: var(--cp-muted);
}

body#checkout #checkout-addresses-step .js-address-form > form > p:first-child::before {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background: var(--cp-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.8' r='.7' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.8' r='.7' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* ==========================================================================
   34. Checkout buttons (Next / Save / Complete): wide pill in the
       primary colour, text centred, WITHOUT icon
   ========================================================================== */
body#checkout section.checkout-step .continue,
body#checkout #invoice-step-form #invoice-continue-btn,
body#checkout .js-address-form .form-footer .btn-primary,
body#checkout #payment-confirmation .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 330px;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    margin: 26px auto 0 !important;
    padding: 0 28px !important;
    float: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--cp-primary) !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #fff !important;
    box-shadow: none !important;
    transition: background-color .15s ease, opacity .15s ease;
}

body#checkout section.checkout-step .continue:hover,
body#checkout #invoice-step-form #invoice-continue-btn:hover,
body#checkout .js-address-form .form-footer .btn-primary:hover,
body#checkout #payment-confirmation .btn:hover {
    background: var(--cp-primary-hover) !important;
}

/* no icon (arrow / floppy disk); the loading spinner stays */
body#checkout section.checkout-step .continue:not(.cp-btn-loading)::after,
body#checkout #invoice-step-form #invoice-continue-btn:not(.cp-btn-loading)::after,
body#checkout .js-address-form .form-footer .btn-primary:not(.cp-btn-loading)::after,
body#checkout #payment-confirmation .btn:not(.cp-btn-loading)::after,
body#checkout section.checkout-step .continue .material-icons,
body#checkout #payment-confirmation .btn .material-icons {
    content: none !important;
    display: none !important;
}

/* disabled (e.g. terms not accepted): same shape, soft */
body#checkout section.checkout-step .continue:disabled,
body#checkout #invoice-step-form #invoice-continue-btn:disabled,
body#checkout #payment-confirmation .btn.disabled,
body#checkout #payment-confirmation .btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Cancel next to Save: same height */
body#checkout .js-address-form .form-footer:has(.js-cancel-address) .btn-primary {
    max-width: 240px;
    margin: 0 !important;
}

body#checkout .js-address-form .form-footer .js-cancel-address {
    min-height: 52px;
}

/* --- 34.1 Same width everywhere (330px, or full width on a small screen), always centred --- */
body#checkout section.checkout-step .continue,
body#checkout #invoice-step-form #invoice-continue-btn,
body#checkout .js-address-form .form-footer .btn-primary,
body#checkout .js-address-form .form-footer:has(.js-cancel-address) .btn-primary,
body#checkout #payment-confirmation .btn {
    flex: 0 0 auto;
    width: 330px !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* button row of the address form: centred (even when "Cancel" is hidden) */
body#checkout .js-address-form .form-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* --- 32.6 VAT exemption: green badge on the product (right) + one clean row in the amounts --- */
body#checkout #js-checkout-summary .cp-line-side {
    grid-template-rows: auto auto auto;
    row-gap: 2px;
}

body#checkout #js-checkout-summary .cp-line-remove {
    grid-row: 1 / span 3;
}

body#checkout #js-checkout-summary .cp-line-exempt {
    grid-column: 1;
    grid-row: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    background: #ecfdf5;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: #047857;
}

/* small ✓ in front */
body#checkout #js-checkout-summary .cp-line-exempt::before {
    content: "";
    width: 10px;
    height: 10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* exemption row in the amounts: same size as the others, green amount */
body#checkout #js-checkout-summary .cp-line-vat_exemption .label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    color: #047857;
}

body#checkout #js-checkout-summary .cp-line-vat_exemption .label::before {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.2-7 10-4-1.8-7-5.5-7-10V6l7-3z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.2-7 10-4-1.8-7-5.5-7-10V6l7-3z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

body#checkout #js-checkout-summary .cp-line-vat_exemption .value {
    font-size: 13px;
    font-weight: 600;
    color: #047857;
}


/* --- 26.4 Unsaved changes in the address (from custom.js) --- */
body#checkout .cp-unsaved-note {
    width: 100%;
    margin: 4px 0 0;
    padding: 12px 16px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    color: #92400e;
}

/* ==========================================================================
   35. Payment methods: same pattern as the carriers
       12px card · icon in a square on the left · info panel joined
       to the card. Icon per module (data-module-name); if the module has
       its own logo, that goes in the same box. CSS only.
   ========================================================================== */
body#checkout .payment-options {
    --cp-pay-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E");
}

body#checkout .payment-options .payment-option {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    margin: 0 0 10px;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s ease, background-color .2s ease;
}

body#checkout .payment-options .payment-option:hover {
    border-color: #c9ced4;
}

body#checkout .payment-options .payment-option:has(input[type="radio"]:checked) {
    border-color: var(--cp-primary);
    background: var(--cp-primary-soft);
}

/* name: on the left, next to the icon */
body#checkout section.checkout-step .payment-options .payment-option label {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    color: var(--cp-text);
}

body#checkout .payment-options .payment-option label > span {
    order: 2;
    min-width: 0;
}

/* icon in a 36×36 square (grey → primary colour when selected):
   the box is the ::before, the shape (mask) goes in as a second background */
body#checkout .payment-options .payment-option label::before {
    content: "";
    order: 1;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #f3f4f6;
    transition: background-color .2s ease;
}

body#checkout .payment-options .payment-option label {
    position: static !important;
}


body#checkout .payment-options .payment-option label > span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--cp-pay-glyph-left, 25px);
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: #1f1f1f;
    -webkit-mask: var(--cp-pay-icon) no-repeat center / contain;
    mask: var(--cp-pay-icon) no-repeat center / contain;
    pointer-events: none;
    transition: background-color .2s ease;
}

body#checkout .payment-options .payment-option:has(input[type="radio"]:checked) label::before {
    background: var(--cp-primary);
}

body#checkout .payment-options .payment-option:has(input[type="radio"]:checked) label > span::after {
    background: #fff;
}

/* icons per module */
body#checkout .payment-options .payment-option:has([data-module-name="ps_wirepayment"]) {
    --cp-pay-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5L12 4l9 5.5'/%3E%3Cpath d='M4.5 9.5h15M6 10v7M10 10v7M14 10v7M18 10v7M4 20h16'/%3E%3C/svg%3E");
}

body#checkout .payment-options .payment-option:has([data-module-name="ps_cashondelivery"]),
body#checkout .payment-options .payment-option:has([data-module-name="cpcod"]) {
    --cp-pay-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 9.5v5M18 9.5v5'/%3E%3C/svg%3E");
}

body#checkout .payment-options .payment-option:has([data-module-name="ps_checkpayment"]) {
    --cp-pay-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M6 10h7M6 14h4M14 15l2-2 3 1'/%3E%3C/svg%3E");
}

/* its own logo from the module: in the same box, without the generic icon */
body#checkout .payment-options .payment-option label:has(img)::before,
body#checkout .payment-options .payment-option label:has(img) > span::after {
    content: none;
}

body#checkout .payment-options .payment-option label img {
    order: 1;
    flex: 0 0 auto;
    width: 52px;
    height: 36px;
    max-height: none;
    margin: 0;
    padding: 3px 4px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #fff;
    object-fit: contain;
}

body#checkout .payment-options .payment-option:has(input[type="radio"]:checked) label img {
    border-color: var(--cp-primary);
}

/* radio: as is on desktop; hidden on mobile (the whole card is selected), like the carriers */
body#checkout .payment-options .payment-option .custom-radio {
    flex: 0 0 auto;
    margin: 0;
}

@media (min-width: 768px) {
    /* the icon starts after the radio (16 padding + 20 radio + 14 gap) */
    body#checkout .payment-options .payment-option {
        --cp-pay-glyph-left: 59px;
    }
}

@media (max-width: 767px) {
    body#checkout .payment-options .payment-option .custom-radio {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    body#checkout .payment-options .payment-option:has(input:focus-visible) {
        outline: 2px solid var(--cp-primary);
        outline-offset: 2px;
    }
}

/* info panel of the selected payment: joined to the card */
body#checkout .payment-options > div:has(.payment-option input:checked):has(+ .additional-information:not([style*="none"])) .payment-option {
    border-bottom-color: transparent;
    border-radius: 12px 12px 0 0;
}

body#checkout .payment-options .additional-information {
    position: relative;
    margin: -10px 0 10px;
    padding: 14px 18px 16px 46px;
    border: 1px solid var(--cp-primary);
    border-top: 1px dashed color-mix(in srgb, var(--cp-primary) 25%, transparent);
    border-radius: 0 0 12px 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--cp-muted);
}

body#checkout .payment-options .additional-information::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 18px;
    width: 16px;
    height: 16px;
    background: var(--cp-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Ccircle cx='12' cy='7.6' r='.6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Ccircle cx='12' cy='7.6' r='.6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}

body#checkout .payment-options .additional-information section,
body#checkout .payment-options .additional-information p:last-of-type {
    margin: 0;
}

/* module form: no box when empty (e.g. bank transfer = only a hidden button) */
body#checkout .payment-options .js-payment-option-form {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* ...with a box when it has real fields (e.g. card details) */
body#checkout .payment-options .js-payment-option-form:has(input:not([type="hidden"]), select, textarea, iframe) {
    margin: -10px 0 10px;
    padding: 14px 16px;
    border: 1px solid var(--cp-primary);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: #fff;
}

@media (max-width: 575px) {
    body#checkout .payment-options .payment-option {
        min-height: 60px;
        padding: 10px 14px;
    }

    body#checkout .payment-options .payment-option label > span::after {
        left: 23px;
    }
}

/* --- 35.1 More compact: smaller / lighter text, no background, small hint text --- */
body#checkout .payment-options .payment-option,
body#checkout .payment-options .payment-option:has(input[type="radio"]:checked) {
    min-height: 54px;
    padding: 9px 14px;
    background: #fff;
}

body#checkout section.checkout-step .payment-options .payment-option label {
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
}

body#checkout .payment-options .payment-option label::before {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

body#checkout .payment-options .payment-option label > span::after {
    left: var(--cp-pay-glyph-left, 22px);
    width: 16px;
    height: 16px;
    margin-top: -8px;
}

@media (min-width: 768px) {
    body#checkout .payment-options .payment-option {
        --cp-pay-glyph-left: 62px;
    }
}

body#checkout .payment-options .additional-information {
    padding: 8px 14px 10px 34px;
    font-size: 11.5px;
    font-weight: 300;
    line-height: 1.45;
}

body#checkout .payment-options .additional-information::before {
    top: 10px;
    left: 14px;
    width: 13px;
    height: 13px;
}

/* --- 35.2 Module fields (e.g. instalments) joined to the info panel --- */
body#checkout .payment-options .additional-information p {
    font-size: inherit;
    line-height: inherit;
}

body#checkout .payment-options .additional-information:has(+ .js-payment-option-form :is(select, input:not([type="hidden"]), textarea, iframe)) {
    margin-bottom: 0;
    border-bottom: 0;
    border-radius: 0;
}

body#checkout .payment-options .additional-information + .js-payment-option-form:has(select, input:not([type="hidden"]), textarea, iframe) {
    margin-top: 0;
    padding: 10px 14px 12px;
    border-top: 1px dashed color-mix(in srgb, var(--cp-primary) 25%, transparent);
}

/* ==========================================================================
   36. Order confirmation: a simple, minimal message in the centre
       (the hooks stay; whatever they show appears subtly below)
   ========================================================================== */
body#order-confirmation #wrapper .breadcrumb {
    display: none;
}

body#order-confirmation .cp-thanks {
    max-width: 560px;
    margin: 40px auto 0;
    padding: 0 16px;
    text-align: center;
    font-family: var(--cp-font);
}

body#order-confirmation .cp-thanks-icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--cp-primary-soft, #eef2fb);
    position: relative;
}

body#order-confirmation .cp-thanks-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    background: var(--cp-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

body#order-confirmation .cp-thanks-title {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
    color: var(--cp-primary);
}

body#order-confirmation .cp-thanks-ref {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--cp-text, #1f2937);
}

body#order-confirmation .cp-thanks-ref strong {
    font-weight: 700;
    letter-spacing: .03em;
}

body#order-confirmation .cp-thanks-mail {
    margin: 0;
    font-size: 12.5px;
    font-weight: 300;
    color: var(--cp-muted, #6b7280);
}

/* whatever the modules add: small, centred, no cards / shadows */
body#order-confirmation #content-hook_payment_return,
body#order-confirmation #content-hook-order-confirmation-footer {
    max-width: 560px;
    margin: 18px auto 0;
    padding: 0 16px;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 13px;
    text-align: center;
    color: var(--cp-muted, #6b7280);
}

body#order-confirmation #content-hook_payment_return:empty,
body#order-confirmation #content-hook-order-confirmation-footer:empty {
    display: none;
}

body#order-confirmation #main .page-content,
body#order-confirmation #content-wrapper {
    box-shadow: none;
}

@media (max-width: 575px) {
    body#order-confirmation .cp-thanks {
        margin-top: 24px;
    }

    body#order-confirmation .cp-thanks-title {
        font-size: 21px;
    }
}

/* --- 36.1 Lots of whitespace + nicer look: large icon with a soft ring, code in a pill --- */
body#order-confirmation .cp-thanks {
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(64px, 12vh, 128px) 16px clamp(48px, 9vh, 96px);
}

body#order-confirmation .cp-thanks-icon {
    width: 92px;
    height: 92px;
    margin-bottom: 32px;
    background: color-mix(in srgb, var(--cp-primary) 12%, #fff);
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--cp-primary) 6%, transparent);
    animation: cp-thanks-pop .5s cubic-bezier(.2, .9, .3, 1.3) both;
}

body#order-confirmation .cp-thanks-icon::before {
    width: 40px;
    height: 40px;
    animation: cp-thanks-check .35s .25s ease-out both;
}

body#order-confirmation .cp-thanks-title {
    margin-bottom: 18px;
    font-size: 32px;
    letter-spacing: -.01em;
}

body#order-confirmation .cp-thanks-ref {
    display: inline-block;
    margin: 0 0 16px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
    font-size: 13.5px;
}

body#order-confirmation .cp-thanks-mail {
    font-size: 13px;
    line-height: 1.6;
}

body#order-confirmation #content-hook_payment_return {
    margin-top: 0;
    padding-bottom: clamp(48px, 9vh, 96px);
}

body#order-confirmation .cp-thanks + #content-hook_payment_return,
body#order-confirmation #content-hook_payment_return:not(:empty) {
    margin-top: -24px;
}

@keyframes cp-thanks-pop {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: none; }
}

@keyframes cp-thanks-check {
    from { opacity: 0; transform: scale(.4) rotate(-12deg); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body#order-confirmation .cp-thanks-icon,
    body#order-confirmation .cp-thanks-icon::before {
        animation: none;
    }
}

@media (max-width: 575px) {
    body#order-confirmation .cp-thanks {
        padding-top: 56px;
        padding-bottom: 48px;
    }

    body#order-confirmation .cp-thanks-icon {
        width: 76px;
        height: 76px;
        margin-bottom: 24px;
    }

    body#order-confirmation .cp-thanks-title {
        font-size: 24px;
    }
}

/* --- 35.3 "Pay in store" icon (payinstore) --- */
body#checkout .payment-options .payment-option:has([data-module-name="payinstore"]) {
    --cp-pay-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5V20h16V9.5'/%3E%3Cpath d='M3 9.5l1.5-5h15L21 9.5c0 1.4-1.1 2.5-2.5 2.5S16 10.9 16 9.5c0 1.4-1.1 2.5-2.5 2.5S11 10.9 11 9.5c0 1.4-1.1 2.5-2.5 2.5S6 10.9 6 9.5C6 10.9 4.9 12 3.5 12'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
}

/* confirmation: one subtle line */
body#order-confirmation .payinstore-return {
    margin: 0;
    font-size: 13px;
    color: var(--cp-muted, #6b7280);
}

/* --- 35.4 Loading on payment selection: same spinner as the carriers (19.4) --- */
body#checkout .payment-options .payment-option.cp-option-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    z-index: 3;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border: 2px solid color-mix(in srgb, var(--cp-primary) 25%, transparent);
    border-top-color: var(--cp-dark);
    border-radius: 50%;
    animation: cp-spin .7s linear infinite;
}

body#checkout .payment-options.cp-busy {
    pointer-events: none;
}

/* ==========================================================================
   37. Loading on every action (custom.js): on a light background (links, delete
       icons, secondary buttons) dark spinner instead of white
   ========================================================================== */
body#checkout .cp-btn-loading.cp-loading-dark::after,
body:not(#checkout) .cp-btn-loading.cp-loading-dark::after {
    border-color: color-mix(in srgb, var(--cp-primary) 22%, transparent);
    border-top-color: var(--cp-primary);
}

/* links / icons: room for the spinner, the icon is hidden */
body:not(#checkout) a.cp-btn-loading,
body#checkout a.cp-btn-loading {
    display: inline-block;
    min-width: 22px;
    min-height: 22px;
}

body:not(#checkout) .cp-btn-loading .material-icons,
body#checkout .cp-btn-loading .material-icons {
    visibility: hidden;
}

/* checkout buttons (34: color #fff !important): the text is hidden while the spinner is shown */
body#checkout section.checkout-step .continue.cp-btn-loading,
body#checkout #invoice-step-form #invoice-continue-btn.cp-btn-loading,
body#checkout .js-address-form .form-footer .btn-primary.cp-btn-loading,
body#checkout #payment-confirmation .btn.cp-btn-loading {
    color: transparent !important;
}

/* ==========================================================================
   38. Carriers: modern cards — white, the selected one with a coloured border
       and soft shadow (no grey background), hover, "Free" as a green pill
   ========================================================================== */
body#checkout section.checkout-step .delivery-options .delivery-option {
    margin: 0 0 10px;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body#checkout section.checkout-step .delivery-options .delivery-option:hover {
    border-color: color-mix(in srgb, var(--cp-primary) 30%, #fff);
    box-shadow: 0 6px 18px rgba(17, 24, 39, .07);
}

body#checkout section.checkout-step .delivery-options .delivery-option:has(input[type="radio"]:checked) {
    border-color: var(--cp-primary);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 12%, transparent), 0 8px 22px rgba(17, 24, 39, .07);
}

/* name / time */
body#checkout section.checkout-step .delivery-options .delivery-option .carrier-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cp-text);
}

body#checkout section.checkout-step .delivery-options .delivery-option .carrier-delay {
    font-size: 12px;
    font-weight: 400;
    color: #9ca3af;
}

/* price */
body#checkout section.checkout-step .delivery-options .delivery-option .carrier-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--cp-text);
}

/* "Free": green pill */
body#checkout section.checkout-step .delivery-options .delivery-option .cp-price-free {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: #ecfdf5;
    font-size: 12.5px;
    font-weight: 700;
    color: #047857;
}

/* icon / logo: cleaner box */
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier > .carrier-logo {
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
}

body#checkout section.checkout-step .delivery-options .delivery-option > label > .row:not(:has(.carrier-hasLogo))::before {
    border-radius: 10px;
}

/* ==========================================================================
   39. Payment methods: same design as the carriers (38) — white cards, the selected one
       with a coloured border and ring; info / fields below, no box
   ========================================================================== */
body#checkout .payment-options .payment-option,
body#checkout .payment-options .payment-option:has(input[type="radio"]:checked) {
    min-height: 64px;
    margin: 0 0 10px;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    transition: border-color .2s ease, box-shadow .2s ease;
}

body#checkout .payment-options .payment-option:hover {
    border-color: color-mix(in srgb, var(--cp-primary) 30%, #fff);
    box-shadow: 0 6px 18px rgba(17, 24, 39, .07);
}

body#checkout .payment-options .payment-option:has(input[type="radio"]:checked),
body#checkout .payment-options > div:has(.payment-option input:checked):has(+ .additional-information:not([style*="none"])) .payment-option {
    border-color: var(--cp-primary);
    border-bottom-color: var(--cp-primary);
    border-radius: 16px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 12%, transparent), 0 8px 22px rgba(17, 24, 39, .07);
}

body#checkout section.checkout-step .payment-options .payment-option label {
    font-size: 14.5px;
    font-weight: 600;
}

body#checkout .payment-options .payment-option label::before {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

/* info of the selected payment: plain text below the card */
body#checkout .payment-options .additional-information,
body#checkout .payment-options .additional-information:has(+ .js-payment-option-form :is(select, input:not([type="hidden"]), textarea, iframe)) {
    margin: 2px 0 14px;
    padding: 6px 6px 0 30px;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.55;
    color: #6b7280;
}

body#checkout .payment-options .additional-information::before {
    top: 8px;
    left: 6px;
    width: 15px;
    height: 15px;
}

/* module fields (instalments etc.): also without a box */
body#checkout .payment-options .js-payment-option-form:has(select, input:not([type="hidden"]), textarea, iframe),
body#checkout .payment-options .additional-information + .js-payment-option-form:has(select, input:not([type="hidden"]), textarea, iframe) {
    margin: -6px 0 14px;
    padding: 0 6px 0 30px;
    border: 0;
    border-radius: 0;
    background: none;
}

/* icon at the centre of the 36×36 square: label start + (36 − 16) / 2 */
body#checkout .payment-options .payment-option {
    --cp-pay-glyph-left: 28px;
}

@media (min-width: 768px) {
    /* with radio: 18 padding + 40 radio / gap + 10 */
    body#checkout .payment-options .payment-option {
        --cp-pay-glyph-left: 68px;
    }
}



/* ==========================================================================
   40. Checkout progress: thin bar with percentage, subtle at the top left of the column
   ========================================================================== */
body#checkout .cp-progress.cp-progress-slim {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: 320px;
    margin: 0 0 28px;
    padding: 0;
}

body#checkout .cp-progress-slim .cp-progress-track {
    position: relative;
    flex: 1 1 auto;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #eceef2;
}

body#checkout .cp-progress-slim .cp-progress-track > span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--cp-p, 0%);
    border-radius: inherit;
    background: var(--cp-primary);
    transition: width .4s ease;
}

body#checkout .cp-progress-slim .cp-progress-pct {
    flex: 0 0 auto;
    min-width: 34px;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    color: #9ca3af;
}

@media (max-width: 767px) {
    body#checkout .cp-progress.cp-progress-slim {
        max-width: none;
        margin: 0 0 20px;
    }
}

/* ==========================================================================
   41. Same pattern everywhere: Receipt / Invoice and addresses like carriers / payments
       (white card, the selected one with a coloured border + ring, not a grey background).
       Info below the payment: indented "detail", like the delivery day.
   ========================================================================== */
body#checkout #invoice-step-form .invoice-card {
    gap: 12px;
    align-items: center;
    min-height: 64px;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    transition: border-color .2s ease, box-shadow .2s ease;
}

body#checkout #invoice-step-form .invoice-option:hover .invoice-card {
    border-color: color-mix(in srgb, var(--cp-primary) 30%, #fff);
    box-shadow: 0 6px 18px rgba(17, 24, 39, .07);
}

body#checkout #invoice-step-form .invoice-option.active .invoice-card,
body#checkout #invoice-step-form .invoice-option:has(input:checked) .invoice-card {
    border-color: var(--cp-primary);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 12%, transparent), 0 8px 22px rgba(17, 24, 39, .07);
}

body#checkout #invoice-step-form .invoice-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #1f1f1f;
}

body#checkout #invoice-step-form .invoice-option.active .invoice-icon,
body#checkout #invoice-step-form .invoice-option:has(input:checked) .invoice-icon {
    background: var(--cp-primary);
    color: #fff;
}

body#checkout #invoice-step-form .checkout-invoice-texts strong {
    font-size: 14.5px;
    font-weight: 600;
}

/* addresses */
body#checkout section.checkout-step .address-selector .address-item,
body#checkout section.checkout-step .address-selector .address-item.selected {
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    transition: border-color .2s ease, box-shadow .2s ease;
}

body#checkout section.checkout-step .address-selector .address-item:hover {
    border-color: color-mix(in srgb, var(--cp-primary) 30%, #fff);
    box-shadow: 0 6px 18px rgba(17, 24, 39, .07);
}

body#checkout section.checkout-step .address-selector .address-item.selected,
body#checkout section.checkout-step .address-selector .address-item:has(input:checked) {
    border-color: var(--cp-primary);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary) 12%, transparent), 0 8px 22px rgba(17, 24, 39, .07);
}

/* info of the selected payment: indent + connector line + dashed frame */
body#checkout .payment-options .additional-information,
body#checkout .payment-options .additional-information:has(+ .js-payment-option-form :is(select, input:not([type="hidden"]), textarea, iframe)) {
    position: relative;
    margin: 12px 0 14px 26px;
    padding: 10px 14px 10px 36px;
    border: 1px dashed color-mix(in srgb, var(--cp-primary) 30%, #fff);
    border-radius: 12px;
    background: color-mix(in srgb, var(--cp-primary) 4%, #fff);
    font-size: 12.5px;
    line-height: 1.55;
    color: #4b5563;
}

body#checkout .payment-options .additional-information::before {
    top: 12px;
    left: 13px;
}

/* connector line to the payment card */
body#checkout .payment-options .additional-information::after {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    width: 12px;
    height: 32px;
    border-left: 2px solid color-mix(in srgb, var(--cp-primary) 22%, #fff);
    border-bottom: 2px solid color-mix(in srgb, var(--cp-primary) 22%, #fff);
    border-bottom-left-radius: 10px;
}

body#checkout .payment-options .additional-information + .js-payment-option-form:has(select, input:not([type="hidden"]), textarea, iframe) {
    margin: -8px 0 14px 26px;
    padding: 0 0 0 2px;
}

/* --- 41.1 Document type: smaller distance to "Next" --- */
body#checkout #invoice-step-form .isaction-next {
    margin-top: 0;
}

body#checkout #invoice-step-form #invoice-continue-btn {
    margin-top: 6px !important;
}

/* ==========================================================================
   40.1 Progress: thin line right below the header, across the full width of the
        white column; the percentage in a small "pill" that follows the fill.
   ========================================================================== */
body#checkout .cart-grid-body {
    position: relative;
}

body#checkout .cp-progress.cp-progress-slim {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 5;
    display: block;
    width: auto;
    max-width: none;
    height: 3px;
    margin: 0;
    padding: 0;
}

body#checkout .cp-progress-slim .cp-progress-track {
    position: absolute;
    inset: 0;
    height: 3px;
    overflow: visible;
    border-radius: 0;
    background: #eef0f4;
}

body#checkout .cp-progress-slim .cp-progress-track > span {
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--cp-primary) 55%, #fff), var(--cp-primary));
    box-shadow: 0 0 10px color-mix(in srgb, var(--cp-primary) 35%, transparent);
}

body#checkout .cp-progress-slim .cp-progress-pct {
    position: absolute;
    top: 10px;
    left: clamp(26px, var(--cp-p, 0%), calc(100% - 26px));
    min-width: 0;
    padding: 2px 9px;
    border: 1px solid #e6e8ee;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .02em;
    text-align: center;
    color: var(--cp-primary);
    transform: translateX(-50%);
    transition: left .4s ease;
}

/* ==========================================================================
   42. Checkout header: logo only + "Secure transactions" (at all widths).
       The rest of the theme header is hidden only here (custom.js builds it).
   ========================================================================== */
body#checkout #header.cp-has-checkout-header > *:not(.cp-checkout-header) {
    display: none !important;
}

body#checkout #header.cp-has-checkout-header {
    position: relative;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid #ececec;
    box-shadow: none;
}

body#checkout .cp-ch-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: 8px 16px;
}

body#checkout .cp-ch-logo {
    position: relative;
}

body#checkout .cp-ch-logo-btn {
    display: block;
    padding: 4px;
    border: 0;
    border-radius: 10px;
    background: none;
    cursor: pointer;
}

body#checkout .cp-ch-logo-btn:focus-visible {
    outline: 2px solid var(--cp-primary);
}

body#checkout .cp-ch-logo-btn img {
    display: block;
    width: auto;
    height: 72px !important;
    max-width: none !important;
    max-height: none !important;
}

body#checkout .cp-ch-secure {
    position: absolute;
    top: 50%;
    right: max(16px, calc(20% - 120px));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #16a34a;
    transform: translateY(-50%);
}

/* logo menu */
body#checkout .cp-ch-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 230px;
    padding: 6px;
    border: 1px solid #e6e8ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    transform: translateX(-50%);
    animation: cpChMenu .15s ease-out;
}

body#checkout .cp-ch-menu[hidden] {
    display: none;
}

@keyframes cpChMenu {
    from { opacity: 0; transform: translate(-50%, -4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

body#checkout .cp-ch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    color: var(--cp-text);
    cursor: pointer;
}

body#checkout .cp-ch-item:hover {
    background: #f4f5f8;
    text-decoration: none;
}

body#checkout .cp-ch-item.is-primary {
    color: #fff;
    background: var(--cp-primary);
}

body#checkout .cp-ch-item.is-primary:hover {
    background: color-mix(in srgb, var(--cp-primary) 88%, #000);
}

@media (max-width: 767px) {
    body#checkout .cp-ch-inner {
        justify-content: space-between;
        min-height: 64px;
        padding: 6px 16px;
    }

    body#checkout .cp-ch-logo-btn img {
        height: 52px !important;
    }

    body#checkout .cp-ch-secure {
        position: static;
        gap: 6px;
        font-size: 11px;
        transform: none;
    }

    body#checkout .cp-ch-menu {
        left: 0;
        transform: none;
        animation: none;
    }
}

/* ==========================================================================
   43. Step titles (modern): numbered indicators
       current = filled circle with number + "ring", large dark title
       completed = soft circle with ✓, faded title
       next = outline with number, very soft title
   ========================================================================== */
body#checkout .cart-grid-body {
    counter-reset: cpstep;
}

body#checkout section.checkout-step {
    counter-increment: cpstep;
}

body#checkout section.checkout-step .step-title {
    gap: 14px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: #a0a7b2;
    transition: color .2s ease;
}

body#checkout section.checkout-step .step-title::before {
    content: counter(cpstep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1.5px solid #d6dbe2;
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #a0a7b2;
    box-sizing: border-box;
    transition: all .2s ease;
}

/* upcoming (and the one immediately after the current) */
body#checkout section.checkout-step.-unreachable .step-title,
body#checkout section.checkout-step.-current + .checkout-step:not(.-complete) .step-title {
    font-size: 16px;
    font-weight: 500;
    color: #a0a7b2;
}

/* completed */
body#checkout section.checkout-step.-complete:not(.-current) .step-title {
    font-weight: 500;
    color: #8b929d;
}

body#checkout section.checkout-step.-complete:not(.-current) .step-title::before {
    content: "";
    border: 0;
    background: #e8ecf5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3673' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 13px;
}

body#checkout section.checkout-step.-complete:not(.-current) .step-title:hover {
    color: #8b929d;
}

/* current (and when a completed one is reopened) */
body#checkout section.checkout-step.-current .step-title,
body#checkout section.checkout-step.-current.-complete .step-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #111827;
}

body#checkout section.checkout-step.-current .step-title::before,
body#checkout section.checkout-step.-current.-complete .step-title::before {
    content: counter(cpstep);
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border: 0;
    background: var(--cp-primary);
    font-size: 14px;
    color: #fff;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cp-primary) 12%, transparent);
}

@media (max-width: 767px) {
    body#checkout section.checkout-step .step-title {
        font-size: 15px;
    }

    body#checkout section.checkout-step.-current .step-title,
    body#checkout section.checkout-step.-current.-complete .step-title {
        font-size: 19px;
    }
}

/* ==========================================================================
   44. Success messages → SweetAlert2 toast (custom.js adds .cp-swal-shown)
   ========================================================================== */
#notifications .alert.cp-swal-shown {
    display: none !important;
}

/* only hidden messages → no empty space either */
#notifications:has(.cp-swal-shown):not(:has(.alert:not(.cp-swal-shown))) {
    display: none !important;
}

.swal2-container .cp-swal-toast {
    padding: 12px 16px !important;
    border: 1px solid #e6e8ee;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14) !important;
    font-family: inherit;
}

.swal2-container .cp-swal-toast .swal2-title {
    margin: 0 0 0 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    color: #1f2937 !important;
    white-space: pre-line;
}

.swal2-container .cp-swal-toast .swal2-timer-progress-bar {
    background: rgba(22, 163, 74, .45);
}

/* ==========================================================================
   45. Order comment with floating label (like the other fields)
       label inside the field · on focus / value it shrinks and moves up ·
       the example (placeholder) shows only on focus
   ========================================================================== */
body#checkout .cp-float-comment {
    position: relative;
    margin-top: 18px;
}

body#checkout .cp-float-comment > label[for="delivery_message"] {
    position: absolute;
    top: 15px;
    left: 13px;
    right: 13px;
    z-index: 1;
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--cp-muted);
    pointer-events: none;
    transition: top .15s ease, font-size .15s ease, color .15s ease;
}

body#checkout .cp-float-comment:focus-within > label[for="delivery_message"],
body#checkout .cp-float-comment.cp-filled > label[for="delivery_message"] {
    top: 7px;
    font-size: 11px;
    color: var(--cp-muted);
}

body#checkout .cp-float-comment #delivery_message {
    display: block;
    width: 100%;
    min-height: 76px;
    padding: 24px 12px 10px;
    font-size: 14px;
}

body#checkout .cp-float-comment #delivery_message::placeholder {
    color: transparent;
    transition: color .15s ease;
}

body#checkout .cp-float-comment #delivery_message:focus::placeholder {
    color: var(--cp-faint);
}

/* ==========================================================================
   46. No black outline on click (whole site)
       The theme adds an outline to every a / button / .btn on :focus, even with a mouse.
       Mouse / touch: nothing. Keyboard (Tab): soft ring in our colour.
   ========================================================================== */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn.focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible),
input[type="button"]:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
    outline: 0 !important;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--cp-primary, #1c3673) 55%, transparent) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   47. "Next" / "Save" on the left (aligned with the fields and titles)
       Mobile: full width. The payment "Complete" stays centred (below the terms).
   ========================================================================== */
@media (min-width: 768px) {
    body#checkout section.checkout-step .continue,
    body#checkout #invoice-step-form #invoice-continue-btn,
    body#checkout .js-address-form .form-footer .btn-primary,
    body#checkout .js-address-form .form-footer:has(.js-cancel-address) .btn-primary {
        width: 300px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    body#checkout .js-address-form .form-footer {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    body#checkout section.checkout-step .continue,
    body#checkout #invoice-step-form #invoice-continue-btn,
    body#checkout .js-address-form .form-footer .btn-primary {
        width: 100% !important;
    }
}

/* ==========================================================================
   49. Header (templates/_partials/header.tpl) · full width, 100% responsive
       logo · MENU · search · login + cart — mega menu in columns
       (desktop) / step-by-step drawer (mobile). White, in our colours.
   ========================================================================== */
body:not(#checkout) #header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: #fff;
    box-shadow: none;
    transition: box-shadow .2s ease;
}

body:not(#checkout) #header.is-scrolled {
    box-shadow: 0 6px 20px rgba(15, 23, 42, .08);
}

.hdr {
    --hdr-primary: var(--cp-primary, #1c3673);
    --hdr-text: #1f2937;
    --hdr-muted: #6b7280;
    --hdr-line: #e8eaee;
    --hdr-soft: #f3f4f6;
    --hdr-pad: clamp(16px, 2.6vw, 40px);
    position: relative;
    background: #fff;
    color: var(--hdr-text);
}

.hdr svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hdr-bar {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "logo menu search actions";
    align-items: center;
    column-gap: clamp(14px, 2vw, 32px);
    min-height: 0;
    padding: 12px var(--hdr-pad);
    border-bottom: 1px solid var(--hdr-line);
    background: #fff;
}

/* ── logo ── */
.hdr-logo {
    grid-area: logo;
}

.hdr-logo h1 {
    margin: 0;
    font-size: inherit;
}

.hdr-logo a {
    display: block;
}

/* theme's #header .logo (height:auto) → more specific rule */
#header .hdr-logo img,
#header .hdr-logo .logo {
    display: block;
    width: auto;
    max-width: 150px;
    height: 48px;
    object-fit: contain;
}

/* ── MENU ── */
.hdr-menu-btn {
    grid-area: menu;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 60px;
    padding: 8px 6px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--hdr-text);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.hdr-menu-btn:hover,
.hdr.is-menu-open .hdr-menu-btn {
    background: var(--hdr-soft);
    color: var(--hdr-primary);
}

.hdr-menu-icon {
    position: relative;
    display: block;
    width: 26px;
    height: 18px;
}

.hdr-menu-icon i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
}

.hdr-menu-icon i:nth-child(1) { top: 0; }
.hdr-menu-icon i:nth-child(2) { top: 8px; }
.hdr-menu-icon i:nth-child(3) { top: 16px; }

.hdr.is-menu-open .hdr-menu-icon i:nth-child(1) { top: 8px; transform: rotate(45deg); }
.hdr.is-menu-open .hdr-menu-icon i:nth-child(2) { opacity: 0; }
.hdr.is-menu-open .hdr-menu-icon i:nth-child(3) { top: 8px; transform: rotate(-45deg); }

.hdr-menu-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}

/* ── search ── */
.hdr-search {
    grid-area: search;
    min-width: 0;
}

.hdr-searchbox {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.hdr-searchbox form {
    position: relative;
    display: flex;
    align-items: center;
}

.hdr-searchbox input[type="text"] {
    width: 100%;
    height: 48px;
    padding: 0 132px 0 50px;
    border: 1px solid var(--hdr-line);
    border-radius: 14px;
    background: var(--hdr-soft);
    font-size: 15px;
    color: var(--hdr-text);
    outline: 0;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.hdr-searchbox input[type="text"]::placeholder {
    color: #6b7280;
}

.hdr-searchbox input[type="text"]:focus {
    border-color: var(--hdr-primary);
    background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hdr-primary) 12%, transparent);
}

.hdr-searchbox-icon {
    position: absolute;
    top: 50%;
    left: 17px;
    width: 21px;
    height: 21px;
    color: #6b7280;
    transform: translateY(-50%);
    pointer-events: none;
}

.hdr-searchbox-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: 6px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--hdr-primary);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter .15s ease;
}

.hdr-searchbox-btn:hover {
    filter: brightness(1.12);
}

/* autocomplete results (ps_searchbar) */
.ui-autocomplete.searchbar-autocomplete {
    z-index: 1300 !important;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #e8eaee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}

.ui-autocomplete.searchbar-autocomplete li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 0 !important;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
}

.ui-autocomplete.searchbar-autocomplete li a.ui-state-focus,
.ui-autocomplete.searchbar-autocomplete li a:hover {
    margin: 0;
    background: #f3f4f6;
}

/* ── login + cart (far right) ── */
.hdr-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hdr-actions .user-info,
.hdr-actions .blockcart {
    margin: 0;
    padding: 0;
    background: none;
}

.hdr-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 68px;
    padding: 5px 6px;
    border-radius: 12px;
    color: var(--hdr-text);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.hdr-icon:hover,
.hdr-icon:focus-visible {
    background: var(--hdr-soft);
    color: var(--hdr-primary);
    text-decoration: none;
}

.hdr-icon-svg {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
}

.hdr-icon-svg svg {
    width: 28px;
    height: 28px;
}

.hdr-icon-label {
    max-width: 96px;
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hdr-icon-dot {
    position: absolute;
    top: 0;
    right: -2px;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #16a34a;
}

.hdr-badge {
    position: absolute;
    top: -7px;
    right: -11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--hdr-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    animation: hdrBump .45s ease;
}

.hdr-badge[hidden] {
    display: none;
}

@keyframes hdrBump {
    40% { transform: scale(1.3); }
}

/* ── mega menu ── */
.hdr-mega {
    position: fixed;
    top: var(--hdr-mega-top, 87px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.hdr-mega[hidden] {
    display: none;
}

.hdr-mega-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    transition: opacity .25s ease;
}

.hdr-mega-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    background: #fff;
    box-shadow: 14px 0 34px rgba(15, 23, 42, .14);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
}

.hdr.is-menu-open .hdr-mega-overlay {
    opacity: 1;
}

.hdr.is-menu-open .hdr-mega-panel {
    opacity: 1;
    transform: none;
}

.hdr-mega-head {
    display: none;
}

.hdr-cols {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* 3 columns always fit: up to 370px each, shrinking on narrower screens (992–1120px) */
.hdr-col {
    flex: 0 0 clamp(260px, 33.333vw, 370px);
    width: clamp(260px, 33.333vw, 370px);
    padding: 24px clamp(18px, 2.2vw, 30px) 36px;
    overflow-y: auto;
    border-right: 1px solid var(--hdr-line);
    overscroll-behavior: contain;
}

.hdr-col[hidden] {
    display: none;
}

.hdr-col[data-col="1"] {
    padding-left: var(--hdr-pad);
}

.hdr-back {
    display: none;
}

.hdr-col-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 6px;
    padding: 4px 0 14px;
    border-bottom: 1px solid var(--hdr-line);
}

.hdr-col-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hdr-text);
}

.hdr-col-all {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--hdr-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hdr-col-title:hover,
.hdr-col-all:hover {
    color: var(--hdr-primary);
}

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

.hdr-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 50px;
    margin: 0 -12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--hdr-text);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.hdr-item.is-top {
    font-weight: 600;
}

.hdr-item:hover,
.hdr-item.is-active {
    background: var(--hdr-soft);
    color: var(--hdr-primary);
    text-decoration: none;
}

.hdr-item.is-active {
    font-weight: 600;
}

.hdr-item.is-page {
    color: var(--hdr-primary);
}

.hdr-chevron {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    stroke-width: 2 !important;
    color: #9ca3af;
    transition: transform .15s ease, color .15s ease;
}

.hdr-item:hover .hdr-chevron,
.hdr-item.is-active .hdr-chevron {
    color: var(--hdr-primary);
    transform: translateX(2px);
}

/* html only: with body { overflow:hidden } (the theme sets height:100%) the page jumped back to the top */
html.hdr-lock {
    overflow: hidden;
}

/* ── tablet / mobile ── */
@media (max-width: 991px) {
    .hdr-bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "menu logo actions"
            "search search search";
        column-gap: 8px;
        row-gap: 10px;
        min-height: 0;
        padding-top: 10px;
        padding-bottom: 12px;
    }

    #header .hdr-logo img,
    #header .hdr-logo .logo {
        max-width: 120px;
        height: 42px;
    }

    .hdr-menu-btn {
        min-width: 48px;
        padding: 6px 4px;
    }

    .hdr-menu-label {
        font-size: 10px;
    }

    .hdr-icon {
        min-width: 46px;
        padding: 6px 4px;
    }

    .hdr-icon-label {
        display: none;
    }

    .hdr-searchbox input[type="text"] {
        height: 48px;
        padding-right: 16px;
        font-size: 16px; /* no zoom on iOS */
    }

    .hdr-searchbox-btn {
        display: none;
    }

    /* menu: drawer from the left, one column at a time */
    .hdr-mega {
        top: 0;
        z-index: 1200;
    }

    .hdr-mega-panel {
        width: min(420px, 100vw);
        transform: translateX(-100%);
        opacity: 1;
        transition: transform .3s cubic-bezier(.22, .8, .3, 1);
    }

    .hdr-mega-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        padding: 14px 14px 14px 20px;
        border-bottom: 1px solid var(--hdr-line);
    }

    .hdr-mega-title {
        font-size: 18px;
        font-weight: 700;
    }

    .hdr-mega-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--hdr-text);
        cursor: pointer;
    }

    .hdr-mega-close svg {
        width: 24px;
        height: 24px;
    }

    .hdr-cols {
        position: relative;
        overflow: hidden;
    }

    .hdr-col,
    .hdr-col[data-col="1"] {
        position: absolute;
        inset: 0;
        width: auto;
        padding: 10px 20px 32px;
        border: 0;
        background: #fff;
        visibility: hidden;
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.22, .8, .3, 1), visibility .28s;
    }

    .hdr-col[hidden] {
        display: block;
    }

    .hdr-col.is-behind {
        visibility: visible;
        transform: translateX(-30%);
    }

    .hdr-col.is-current {
        visibility: visible;
        transform: none;
    }

    .hdr-back {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 0 0 4px -6px;
        padding: 8px 6px;
        border: 0;
        background: none;
        font-size: 14px;
        font-weight: 600;
        color: var(--hdr-primary);
        cursor: pointer;
    }

    .hdr-back svg {
        width: 18px;
        height: 18px;
        stroke-width: 2.2;
    }

    .hdr-item {
        min-height: 52px;
        margin: 0;
        padding: 12px 2px;
        border-bottom: 1px solid #f0f1f4;
        border-radius: 0;
    }

    .hdr-item:hover,
    .hdr-item.is-active {
        background: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hdr-mega-panel,
    .hdr-col,
    .hdr-mega-overlay,
    .hdr-menu-icon i,
    .hdr-badge {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   50. Product card (catalog/_partials/miniatures/product.tpl) + list grid
       White card, soft shadow · image · code · 2-line name · availability
       · large price + cart button. 100% responsive (2 columns on mobile).
   ========================================================================== */
/* the theme has .products.row as flex (with ids on the lists) → !important only here */
.products:has(.pcard) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 0 !important;
    padding: 0;
}

.products:has(.pcard)::before,
.products:has(.pcard)::after {
    display: none;
}

.products > .js-product.product:has(.pcard) {
    flex: none !important;
    float: none;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-miniature.pcard {
    --pc-primary: var(--cp-primary, #1c3673);
    --pc-text: #1f2937;
    --pc-muted: #6b7280;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    margin: 0;
    padding: 12px 16px 14px;
    border: 1px solid #eceef2;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    transition: border-color .2s ease;
}

/* no shadow on hover either; only a slightly darker border */
.product-miniature.pcard:hover {
    border-color: #d5dae3;
    box-shadow: none;
}

/* ── image + labels + wishlist ── */
.product-miniature.pcard .thumbnail-container {
    position: relative;
    height: auto;
    margin: 0 0 10px;
    overflow: visible;
    background: none;
    box-shadow: none;
}

.product-miniature.pcard .pcard-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    aspect-ratio: 1 / 1;
}

.product-miniature.pcard .pcard-img img {
    display: block;
    width: 100%;
    max-width: 240px;
    height: 100%;
    margin: 0 auto;
    object-fit: contain;
    transition: transform .3s ease;
}

.product-miniature.pcard:hover .pcard-img img {
    transform: scale(1.03);
}

.product-miniature.pcard .product-flags {
    top: 0;
    left: 0;
    gap: 4px;
    width: auto;
    max-width: 70%;
}

.product-miniature.pcard .product-flags li.product-flag {
    position: static;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pc-primary) 10%, #fff);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pc-primary);
    text-transform: none;
}

.product-miniature.pcard .product-flags li.product-flag.discount,
.product-miniature.pcard .product-flags li.product-flag.discount-amount,
.product-miniature.pcard .product-flags li.product-flag.discount-percentage,
.product-miniature.pcard .product-flags li.product-flag.on-sale {
    order: 0;
    width: auto;
    background: #fdecef;
    text-align: left;
    color: #c2183c;
}

.product-miniature.pcard .product-flags li.product-flag.out_of_stock {
    background: #f3f4f6;
    color: #4b5563;
}

.product-miniature.pcard .product-flags li.product-flag.online-only {
    display: none;
}

/* wishlist heart (blockwishlist) */
.product-miniature.pcard .wishlist-button-add {
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #eceef2;
    box-shadow: none;
}

/* ── texts ── */
.product-miniature.pcard .pcard-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0;
    background: none;
}

.product-miniature.pcard .pcard-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    min-height: 18px;
}

.product-miniature.pcard .pcard-ref {
    font-size: 12px;
    font-weight: 500;
    color: #8c8c8c;
}

.product-miniature.pcard .comments_note,
.product-miniature.pcard .product-list-reviews {
    margin: 0;
    text-align: left;
}

.product-miniature.pcard .pcard-title {
    margin: 6px 0 8px;
    text-align: left;
    text-transform: none;
}

.product-miniature.pcard .pcard-title a {
    display: -webkit-box;
    min-height: 2.7em;
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--pc-text);
    text-align: left;
    text-decoration: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-miniature.pcard .pcard-title a:hover {
    color: var(--pc-primary);
}

/* availability */
.pcard-stock {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: #2d8f3a;
}

.pcard-stock-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.pcard-stock.is-last_remaining_items {
    color: #c27a06;
}

.pcard-stock.is-unavailable {
    color: #c2410c;
}

/* ── price + cart ── */
.pcard-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.product-miniature.pcard .pcard-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    font-weight: 400;
    text-align: left;
}

.product-miniature.pcard .pcard-price .price {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--pc-text);
}

.pcard-price-old {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.product-miniature.pcard .regular-price {
    font-size: 13px;
    color: #8c8c8c;
}

.product-miniature.pcard .pcard-price .discount-product {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 6px;
    background: #fdecef;
    font-size: 11px;
    font-weight: 700;
    color: #c2183c;
}

.pcard-cart {
    flex: 0 0 auto;
    margin: 0;
}

.pcard-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--cp-primary, #1c3673);
    color: #fff;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

.pcard-cart-btn:hover {
    color: #fff;
    filter: brightness(1.15);
}

.pcard-cart-btn:active {
    transform: scale(.96);
}

.pcard-cart-btn.is-view {
    background: #f3f4f6;
    color: var(--cp-primary, #1c3673);
}

.pcard-cart-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* loading (custom.js adds cp-btn-loading) */
.pcard-cart-btn.cp-btn-loading svg {
    opacity: 0;
}

/* ── mobile: 2 columns, more compact card ── */
@media (max-width: 575px) {
    .products:has(.pcard) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .product-miniature.pcard {
        padding: 10px 10px 12px;
    }

    .product-miniature.pcard .pcard-title a {
        font-size: 13.5px;
    }

    .product-miniature.pcard .pcard-price .price {
        font-size: 18px;
    }

    .pcard-cart-btn {
        width: 42px;
        height: 40px;
        border-radius: 9px;
    }

    .pcard-cart-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   51. List pages (category, search, manufacturer, offers …)
       wider page · 280px filters on the left · 4 products per row ·
       count/sort bar · modern filters (Amazzing Filter) · pagination
   ========================================================================== */
body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) #wrapper > .container {
    width: 100%;
    max-width: 1600px;
    padding-right: clamp(16px, 2.5vw, 40px);
    padding-left: clamp(16px, 2.5vw, 40px);
}

/* desktop: category title across the full width on top, filters + products start at the same height
   (#content-wrapper / #main become "transparent" for the grid — the HTML does not change) */
@media (min-width: 992px) {
    body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) #wrapper > .container > .row:has(#left-column) {
        grid-template-rows: auto auto auto 1fr;
        row-gap: 0;
    }

    /* subcategories: full width, below the title */
    body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) .row:has(#left-column) #main > #subcategories {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) .row:has(#left-column) > #content-wrapper,
    body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) .row:has(#left-column) > #content-wrapper > #main {
        display: contents;
    }

    body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) .row:has(#left-column) #main > * {
        grid-column: 2;
        min-width: 0;
    }

    body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) .row:has(#left-column) #main > #js-product-list-header {
        grid-row: 1;
        grid-column: 1 / -1;
        margin-bottom: 22px;
    }

    body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) .row:has(#left-column) > #left-column {
        grid-row: 3 / span 2;
        grid-column: 1;
    }

    body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) .row:has(#left-column) #main > #products {
        grid-row: 3;
    }
}

body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) #wrapper > .container > .row:has(#content-wrapper) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px 32px;
    margin: 0;
}

body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) #wrapper > .container > .row:has(#left-column) {
    grid-template-columns: 290px minmax(0, 1fr);
}

body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) #wrapper > .container > .row > :is(#left-column, #content-wrapper) {
    flex: none;
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
}

body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) #wrapper {
    padding-top: 18px;
    padding-bottom: 48px;
}

/* 4 products per row on desktop */
#js-product-list .products:has(.pcard) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 1199px) {
    #js-product-list .products:has(.pcard) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales) #wrapper > .container > .row:has(#left-column) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    #js-product-list .products:has(.pcard) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* ── category header ── */
.cp-cat-head {
    margin: 0 0 18px;
}

.cp-cat-head .cp-cat-head-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.cp-cat-head-text {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-cat-title {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: #1f2937;
    text-transform: none;
}

.cp-cat-desc {
    max-width: 90ch;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.65;
    color: #4b5563;
}

.cp-cat-desc p:last-child {
    margin-bottom: 0;
}

.cp-cat-cover {
    flex: 0 0 auto;
    width: min(220px, 30%);
}

.cp-cat-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

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

/* ── count + sort bar ── */
.cp-listbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 0 0 20px;
    padding: 10px 12px 10px 18px;
    border: 1px solid #eceef2;
    border-radius: 14px;
    background: #fff;
}

.cp-listbar-count {
    margin: 0;
    font-size: 14px;
    color: #4b5563;
}

.cp-listbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.cp-listbar-filter,
.cp-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e3e6eb;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cp-listbar-filter:hover,
.cp-sort-btn:hover,
.cp-sort.open .cp-sort-btn {
    border-color: var(--cp-primary, #1c3673);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary, #1c3673) 10%, transparent);
}

.cp-listbar-filter svg,
.cp-sort-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-sort {
    position: relative;
    width: auto;
    padding: 0;
}

/* theme.css sets inline-block on .select-title */
.products-sort-order .cp-sort-btn {
    display: inline-flex;
}

.cp-sort-label {
    color: #6b7280;
}

.cp-sort-value {
    font-weight: 600;
    white-space: nowrap;
}

.cp-sort-caret {
    color: #6b7280;
    transition: transform .2s ease;
}

.cp-sort.open .cp-sort-caret {
    transform: rotate(180deg);
}

.cp-sort .cp-sort-menu {
    right: 0;
    left: auto;
    z-index: 30;
    width: auto;
    min-width: 240px;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid #eceef2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
}

.cp-sort .cp-sort-menu .select-list {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    text-decoration: none;
}

.cp-sort .cp-sort-menu .select-list:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.cp-sort .cp-sort-menu .select-list.current {
    background: color-mix(in srgb, var(--cp-primary, #1c3673) 8%, #fff);
    font-weight: 600;
    color: var(--cp-primary, #1c3673);
}

@media (max-width: 575px) {
    .cp-listbar {
        padding: 10px 12px;
    }

    .cp-listbar-actions,
    .cp-sort {
        flex: 1 1 auto;
    }

    .cp-sort-btn {
        width: 100%;
        min-width: 0;
    }

    .cp-sort-value {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cp-sort .cp-sort-menu {
        right: 0;
        left: 0;
        min-width: 0;
    }

    .cp-sort-label {
        display: none;
    }

    .cp-sort-caret {
        margin-left: auto;
    }
}

/* ── pagination (bottom) · centred, square buttons, arrows as icons ── */
.cp-pagination {
    --pg-size: 52px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 48px 0 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
}

.cp-pagination-summary {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.cp-pagination .cp-pagination-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    list-style: none;
}

.cp-pagination .cp-pagination-list li {
    flex: 0 1 var(--pg-size);
    min-width: 0;
    margin: 0;
    padding: 0;
    float: none;
    background: none;
}

.cp-pagination .cp-pagination-list a,
.cp-pagination .cp-pagination-list .spacer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--pg-size);
    padding: 0;
    border: 1px solid #e8eaee;
    border-radius: 14px;
    background: #fff;
    background-image: none !important;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.cp-pagination .cp-pagination-list .spacer {
    border-color: transparent;
    background: none;
    color: #9ca3af;
}

.cp-pagination .cp-pagination-list a:hover {
    border-color: var(--cp-primary, #1c3673);
    background: #fff;
    color: var(--cp-primary, #1c3673);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary, #1c3673) 10%, transparent);
}

.cp-pagination .cp-pagination-list a:focus-visible {
    outline: 2px solid var(--cp-primary, #1c3673);
    outline-offset: 2px;
}

.cp-pagination .cp-pagination-list li.current a {
    border-color: var(--cp-primary, #1c3673);
    background: var(--cp-primary, #1c3673);
    color: #fff;
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--cp-primary, #1c3673) 70%, transparent);
    pointer-events: none;
}

.cp-pagination .cp-pagination-list a.disabled:not([aria-current]) {
    opacity: .4;
    pointer-events: none;
}

.cp-pagination .cp-pagination-list svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {
    .cp-pagination {
        --pg-size: 46px;
        margin-top: 36px;
    }

    .cp-pagination .cp-pagination-list {
        gap: 6px;
    }

    .cp-pagination .cp-pagination-list a,
    .cp-pagination .cp-pagination-list .spacer {
        border-radius: 12px;
        font-size: 15px;
    }
}

/* phones: arrows, first, last and the pages next to the current one */
@media (max-width: 480px) {
    .cp-pagination .cp-pagination-list li:not(.is-arrow):not(.current):not(:has(+ .current)):not(.current + li):not(:nth-child(2)):not(:nth-last-child(2)) {
        display: none;
    }
}

/* ── pagination (top, in the bar) · subtle ‹ 2 / 41 › ── */
.cp-minipager {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.cp-minipager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-image: none !important;
    color: #4b5563;
    transition: background-color .15s ease, color .15s ease;
}

.cp-minipager-btn:hover {
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-minipager-btn.disabled {
    opacity: .3;
    pointer-events: none;
}

.cp-minipager-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-minipager-now {
    min-width: 52px;
    font-size: 13px;
    color: #8b93a1;
    text-align: center;
    white-space: nowrap;
}

.cp-minipager-now b {
    font-weight: 700;
    color: #1f2937;
}

/* mobile: count + ‹ 2 / 41 › on the first line, filters/sorting below */
@media (max-width: 575px) {
    .cp-listbar:has(.cp-minipager) .cp-listbar-count {
        flex: 1 1 auto;
    }

    .cp-listbar:has(.cp-minipager) .cp-listbar-actions {
        display: contents;
    }

    .cp-listbar:has(.cp-minipager) .cp-listbar-actions > :not(.cp-minipager) {
        flex: 1 1 100%;
        order: 2;
    }

    .cp-minipager {
        order: 1;
        margin-left: auto;
    }
}

/* ── filters (Amazzing Filter) ── */
#amazzing_filter.af {
    --af-primary: var(--cp-primary, #1c3673);
    margin: 0;
    padding: 20px 20px 8px;
    border: 1px solid #eceef2;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}

@media (min-width: 992px) {
    #left-column:has(#amazzing_filter) {
        align-self: start;
        position: sticky;
        top: var(--cp-filters-top, 100px);
    }

    /* only the options scroll: title and card padding stay put */
    #left-column #amazzing_filter.af {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--cp-filters-top, 100px) - 16px);
        padding: 0;
        overflow: hidden;
    }

    #left-column #amazzing_filter .title_block {
        flex: none;
        margin: 0;
        padding: 18px 20px 14px;
    }

    #left-column #amazzing_filter .block_content {
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 20px 8px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

#amazzing_filter .title_block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 4px;
    padding: 0 0 14px;
    border-bottom: 1px solid #eceef2;
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
    text-transform: none;
}

#amazzing_filter .af_filter {
    margin: 0;
    padding: 16px 0;
    border-bottom: 1px solid #f0f1f4;
}

#amazzing_filter .af_filter:last-child {
    border-bottom: 0;
}

#amazzing_filter .af_subtitle {
    position: relative;
    margin: 0 0 12px;
    padding: 0 24px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    text-transform: none;
    cursor: pointer;
}

#amazzing_filter .af_subtitle::after,
#amazzing_filter .af_subtitle::before {
    display: none;
}

#amazzing_filter .af_subtitle.toggle-content::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    display: block;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid #9ca3af;
    border-bottom: 2px solid #9ca3af;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

#amazzing_filter .af_filter.closed .af_subtitle.toggle-content::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}

#amazzing_filter .af_filter ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#amazzing_filter .af_filter li {
    margin: 0;
    padding: 0;
}

#amazzing_filter .af-checkbox-label,
#amazzing_filter .af-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #374151;
    cursor: pointer;
    transition: background-color .15s ease;
}

#amazzing_filter .af-checkbox-label:hover,
#amazzing_filter .af-radio-label:hover {
    background: #f6f7f9;
}

/* checkbox / radio */
#amazzing_filter input[type="checkbox"],
#amazzing_filter input[type="radio"] {
    position: static;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #c9ced6;
    border-radius: 5px;
    background: #fff;
    opacity: 1;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

#amazzing_filter input[type="radio"] {
    border-radius: 50%;
}

#amazzing_filter input[type="checkbox"]:checked,
#amazzing_filter input[type="radio"]:checked {
    border-color: var(--af-primary);
    background: var(--af-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 12px;
}

#amazzing_filter input:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--af-primary) 45%, transparent);
    outline-offset: 2px;
}

#amazzing_filter .af-checkbox-label .name,
#amazzing_filter .af-radio-label .name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#amazzing_filter input:checked ~ .name {
    font-weight: 600;
    color: #1f2937;
}

#amazzing_filter .count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    color: #6b7280;
}

#amazzing_filter li.no-matches,
#amazzing_filter .no-matches .af-checkbox-label {
    opacity: .45;
}

/* "More" */
#amazzing_filter .toggle-more,
#amazzing_filter .af-toggle-more,
#amazzing_filter a.more {
    display: inline-flex;
    margin: 8px 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--af-primary);
    text-decoration: none;
}

/* select */
#amazzing_filter .af-select {
    height: 44px;
    padding: 0 36px 0 12px;
    border: 1px solid #e3e6eb;
    border-radius: 10px;
    background-color: #fff;
    font-size: 14px;
    color: #1f2937;
}

#amazzing_filter .af-select:focus {
    border-color: var(--af-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--af-primary) 12%, transparent);
    outline: 0;
}

/* price range */
#amazzing_filter .af-slider {
    padding: 8px 6px 0;
}

#amazzing_filter .slider-bar {
    height: 4px;
    margin: 8px 0 18px;
    border: 0;
    border-radius: 999px;
    background: #e5e7eb;
}

#amazzing_filter .slider-bar .selected-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--af-primary);
}

#amazzing_filter .slider-bar .pointer {
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--af-primary);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
    cursor: grab;
}

#amazzing_filter .slider-values {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

#amazzing_filter .slider_value {
    display: inline-flex;
    align-items: center;
    min-width: 76px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e3e6eb;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

/* list header: count on the left, selected filters + sorting on the right, no card */
#products:has(> .cp-listbar) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px 20px;
    align-items: center;
}

#products:has(> .cp-listbar) > * {
    grid-column: 1 / -1;
    min-width: 0;
}

#products > .cp-listbar {
    display: contents;
}

#products > .cp-listbar .cp-listbar-count {
    grid-row: 1;
    grid-column: 1;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    color: #1f2937;
}

#products > .cp-listbar .cp-listbar-actions {
    grid-row: 1;
    grid-column: 3;
    justify-content: flex-end;
}

/* filters need the room: the icon and the value are enough for sorting */
#products:has(.selectedFilters:not(.hidden) .cf) .cp-sort-label {
    display: none;
}

/* selected filters (chips) · #main beats the module's classic.css */
#main .selectedFilters.inline:not(.hidden),
#amazzing_filter .selectedFilters.inline:not(.hidden) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    line-height: 1.2;
}

#main .selectedFilters.inline:not(.hidden) {
    grid-row: 1;
    grid-column: 2;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

#amazzing_filter .selectedFilters.inline:not(.hidden) {
    margin: 0 0 14px;
}

.selectedFilters.inline::before,
.selectedFilters.inline::after {
    display: none;
}

/* the count already introduces the row */
.selectedFilters.inline .selected-filters-label {
    display: none;
}

.selectedFilters.inline .cf {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 4px 6px 4px 14px;
    border: 1px solid #e3e6eb;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-primary, #1c3673);
    overflow-wrap: anywhere;
}

.selectedFilters.inline .cf a {
    position: static;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    border-radius: 50%;
    color: inherit;
    opacity: .6;
    transition: background-color .15s ease, opacity .15s ease;
}

.selectedFilters.inline .cf a:hover {
    background: color-mix(in srgb, var(--cp-primary, #1c3673) 10%, #fff);
    opacity: 1;
}

/* clear all: plain link after the chips */
.selectedFilters.inline .clearAll {
    order: 1;
    float: none;
    margin: 0;
    padding: 0;
    background: none;
}

.selectedFilters.inline .clearAll a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    color: #c2183c;
    transition: background-color .15s ease;
}

.selectedFilters.inline .clearAll a:hover {
    background: #fdf0f3;
}

.selectedFilters.inline .clearAll .txt {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
}

/* narrower: count + sorting on the first line, filters below */
@media (max-width: 1399px) {
    #products:has(> .cp-listbar) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #products > .cp-listbar .cp-listbar-actions {
        grid-column: 2;
    }

    #main .selectedFilters.inline:not(.hidden) {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* phones: count + ‹ 2 / 41 ›, then filters, then sorting at full width
   (order, not fixed rows: the filters row is often missing) */
@media (max-width: 575px) {
    #products:has(> .cp-listbar) > * {
        order: 5;
    }

    #products > .cp-listbar .cp-listbar-count {
        grid-row: auto;
        order: 1;
        font-size: 14px;
    }

    #products > .cp-listbar .cp-listbar-actions {
        grid-row: auto;
        grid-column: 1 / -1;
        order: 4;
    }

    #products > .cp-listbar:has(.cp-minipager) .cp-minipager {
        grid-column: 2;
        order: 2;
        margin: 0;
    }

    #products > .cp-listbar:has(.cp-minipager) .cp-listbar-actions > :not(.cp-minipager) {
        grid-column: 1 / -1;
        order: 4;
    }

    #main .selectedFilters.inline:not(.hidden) {
        grid-row: auto;
        order: 3;
    }
}

/* mobile/tablet: fixed "Filters" button at the bottom (built in custom.js) */
.cp-mfilter {
    display: none;
}

/* on main: body has a fixed height, its padding would not extend the page */
.has-compact-filter main {
    padding-bottom: 72px;
}

.has-compact-filter .cp-mfilter {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 890; /* below #header (900), which holds the drawers */
    display: block;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .08);
}

.cp-mfilter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    height: 48px;
    margin: 0 auto;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--cp-primary, #1c3673);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.cp-mfilter-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.cp-mfilter-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    color: var(--cp-primary, #1c3673);
}

.cp-mfilter-count:empty {
    display: none;
}

/* keep the floating buttons above the bar */
.has-compact-filter .btt {
    bottom: 84px;
}

.has-compact-filter #amazzing_filter .compact-toggle.sticky {
    display: none;
}

/* filter panel */
.has-compact-filter #amazzing_filter.af {
    display: flex;
    flex-direction: column;
    max-width: 440px;
    height: 100%;
    height: 100dvh;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.has-compact-filter #amazzing_filter .title_block {
    flex: none;
    margin: 0;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #ececec;
    background: #fff;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-transform: none;
}

.has-compact-filter #amazzing_filter .compact-close {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 -8px 0 0;
    padding: 0;
    border-radius: 50%;
    background: none;
    color: #1f2937;
    transition: background-color .15s ease, transform .2s ease;
}

.has-compact-filter #amazzing_filter .compact-close:hover {
    background: #f3f4f6;
    transform: rotate(90deg);
}

.has-compact-filter #amazzing_filter .compact-close::after {
    display: none;
}

.has-compact-filter #amazzing_filter .compact-close svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.has-compact-filter #amazzing_filter .block_content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 0 24px 16px;
    overscroll-behavior: contain;
}

.has-compact-filter #amazzing_filter .af_subtitle {
    margin: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 15px;
}

.has-compact-filter #amazzing_filter .af_filter:not(.closed) .af_subtitle {
    margin-bottom: 12px;
}

.has-compact-filter #amazzing_filter .af-checkbox-label,
.has-compact-filter #amazzing_filter .af-radio-label {
    min-height: 40px;
}

.has-compact-filter #amazzing_filter .btn-holder {
    position: static;
    display: flex;
    flex: none;
    gap: 10px;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #eceef2;
    background: #fff;
}

.has-compact-filter #amazzing_filter .viewFilteredProducts {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    margin: 0;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
}

.has-compact-filter #amazzing_filter .viewFilteredProducts .af-total-count {
    color: inherit;
    opacity: .85;
}

/* arrows: closed = down, open = up */
.has-compact-filter #amazzing_filter .af_subtitle.toggle-content::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}

.has-compact-filter #amazzing_filter .af_filter.closed .af_subtitle.toggle-content::after {
    margin-top: -6px;
    transform: rotate(45deg);
}

.cp-af-clear {
    display: none;
    flex: none;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #e3e6eb;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #c2183c;
    cursor: pointer;
}

body:has(.selectedFilters:not(.hidden) .cf) .cp-af-clear {
    display: flex;
}

@media (max-width: 767px) {
    .has-compact-filter #amazzing_filter .title_block {
        padding: 16px 16px 14px;
    }

    .has-compact-filter #amazzing_filter .block_content {
        padding: 0 16px 16px;
    }
}

@media (max-width: 575px) {
    .has-compact-filter #amazzing_filter.af {
        max-width: 100%;
    }
}

/* ==========================================================================
   52. Subcategories (catalog/_partials/subcategories.tpl)
       desktop: tiles in a grid · mobile: horizontal scroll (snap)
   ========================================================================== */
#subcategories.cp-subcats {
    margin: 0 0 26px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

#subcategories.cp-subcats .cp-subcats-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #6b7280;
    text-transform: uppercase;
}

#subcategories.cp-subcats .cp-subcats-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#subcategories.cp-subcats .cp-subcats-list li {
    min-width: 0;
    text-align: left;
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
}

.cp-subcat {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 68px;
    padding: 10px 14px 10px 10px;
    border: 1px solid #eceef2;
    border-radius: 14px;
    background: #fff;
    color: #1f2937;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.cp-subcat:hover,
.cp-subcat:focus-visible {
    border-color: color-mix(in srgb, var(--cp-primary, #1c3673) 35%, #fff);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
    color: var(--cp-primary, #1c3673);
    text-decoration: none;
    transform: translateY(-1px);
}

.cp-subcat-media {
    display: inline-flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 12px;
    background: color-mix(in srgb, var(--cp-primary, #1c3673) 7%, #fff);
    color: var(--cp-primary, #1c3673);
}

.cp-subcat-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cp-subcat-media svg,
.cp-subcat-arrow {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-subcat-media svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.7;
}

.cp-subcat-name {
    display: -webkit-box;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cp-subcat-arrow {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: #9ca3af;
    transition: transform .15s ease, color .15s ease;
}

.cp-subcat:hover .cp-subcat-arrow {
    color: var(--cp-primary, #1c3673);
    transform: translateX(2px);
}

/* mobile: horizontal scroll, without "pushing" the page */
@media (max-width: 767px) {
    #subcategories.cp-subcats {
        margin-right: calc(-1 * clamp(16px, 2.5vw, 40px));
        margin-bottom: 18px;
    }

    #subcategories.cp-subcats .cp-subcats-list {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 0;
        gap: 10px;
        padding: 2px clamp(16px, 2.5vw, 40px) 8px 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    #subcategories.cp-subcats .cp-subcats-list::-webkit-scrollbar {
        display: none;
    }

    #subcategories.cp-subcats .cp-subcats-list li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .cp-subcat {
        min-height: 56px;
        padding: 8px 14px 8px 8px;
        border-radius: 999px;
    }

    .cp-subcat-media {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .cp-subcat-name {
        white-space: nowrap;
        -webkit-line-clamp: 1;
    }

    .cp-subcat-arrow {
        display: none;
    }
}

/* ==========================================================================
   41.2 Desktop: a bit of space on the left of the steps (icons), cart closer,
        slight "zoom in" across the whole checkout
   ========================================================================== */
@media (min-width: 992px) {
    body#checkout #content {
        zoom: 1.05;
    }

    body#checkout .cart-grid-body {
        padding: 56px 113px 80px max(32px, calc(56% - var(--cp-content) - 72px));
    }

    body#checkout .cart-grid-right {
        padding-left: 40px;
    }

    body#checkout section.checkout-step {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* GLOBAL-FORMS (auto-generated from the checkout) */
/* ==========================================================================
   33. SAME FORM PATTERN ACROSS THE WHOLE THEME (login, registration, account, addresses …)
   Copy of the checkout rules with body:not(#checkout). Do not edit it by
   hand: change the checkout rules and re-run the generator.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
body:not(#checkout) {
    --cp-dark: var(--cp-primary);   /* primary colour: buttons, selected, focus */
    --cp-dark-hover: var(--cp-primary-hover);
    --cp-ink: #1f1f1f;              /* dark neutral: tooltip, quantity badge */
    --cp-text: #1f1f1f;
    --cp-muted: #6b7280;
    --cp-faint: #a3a8b0;
    --cp-line: #ececec;             /* divider lines */
    --cp-field: #cfd4da;            /* field border */
    --cp-panel: #f5f5f5;            /* light grey cart panel */
    --cp-bg: #ffffff;
    --cp-danger: #e0244d;
    --cp-ok: #2f8f5b;
    --cp-field-h: 50px;
    --cp-content: 560px;            /* checkout column width */
    --cp-summary: 450px;            /* cart width */
}



/* --------------------------------------------------------------------------
   5. Fields — FLOATING LABELS
   --------------------------------------------------------------------------
   Theme form: .form-group.row > label | .js-input-column | .form-control-comment
   • The label sits inside the field; on focus or value (.cp-filled from
     custom.js) it moves up, small, to the top side.
   • "Optional" on the right, instructions as a tooltip (ⓘ).
   -------------------------------------------------------------------------- */

/* 2-column grid (First name | Last name …) */
body:not(#checkout) .js-address-form .form-fields,
body:not(#checkout) #customer-form > div:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 16px;
}

body:not(#checkout) .js-address-form .form-fields > *,
body:not(#checkout) #customer-form > div:first-child > * {
    grid-column: 1 / -1;
    margin: 0;
}

body:not(#checkout) .js-address-form .form-fields > .form-group.row:has(> .js-input-column > .form-control),
body:not(#checkout) #customer-form > div:first-child > .form-group.row:has(> .js-input-column > .form-control) {
    grid-column: auto;
}

body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) {
    position: relative;
    display: block;
    margin-left: 0;
    margin-right: 0;
}

body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) > .js-input-column {
    position: relative;
    float: none;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* label inside the field */
body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) > .form-control-label {
    position: absolute;
    top: calc(var(--cp-field-h) / 2);
    left: 16px;
    z-index: 3;
    width: auto;
    max-width: calc(100% - 80px);
    margin: 0;
    padding: 0;
    float: none;
    overflow: hidden;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cp-muted);
    transform: translateY(-50%);
    pointer-events: none;
    transition: none; /* enabled only with data-cp-ready (section 18) */
}

/* label on top (focus / has value) — same :has for higher specificity */
body:not(#checkout) .form-group.row.cp-filled:has(> .js-input-column .form-control) > .form-control-label,
body:not(#checkout) .form-group.row:has(> .js-input-column .form-control):focus-within > .form-control-label {
    top: 13px;
    font-size: 11px;
    color: var(--cp-muted);
}

/* required asterisk */
body:not(#checkout) .form-group.row > .form-control-label.required::after {
    content: "*";
    margin-left: 1px;
}

/* "Optional" on the right inside the field, at the top */
body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) > .form-control-comment {
    position: absolute;
    top: 6px;
    right: 12px;
    z-index: 3;
    width: auto;
    max-width: 40%;
    margin: 0;
    padding: 0;
    float: none;
    overflow: hidden;
    font-size: 10px;
    line-height: 14px;
    text-overflow: ellipsis;
    text-transform: lowercase;
    white-space: nowrap;
    color: var(--cp-faint);
    pointer-events: none;
}

body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) > .form-control-comment:empty {
    display: none;
}

/* the field */
body:not(#checkout) .form-group :where(.form-control) {
    min-height: var(--cp-field-h);
    padding: 20px 16px 6px;
    font-size: 14px;
    color: var(--cp-text);
    background-color: #fff;
    border: 1px solid var(--cp-field);
    border-radius: 0;
    box-shadow: none;
    transition: border-color .15s ease;
}

body:not(#checkout) .form-group :where(.form-control):hover {
    border-color: #9aa1a9;
}

body:not(#checkout) .form-group :where(.form-control):focus {
    outline: none;
    box-shadow: none;
    border-color: var(--cp-dark);
}

body:not(#checkout) .form-group :where(select.form-control) {
    padding-top: 18px;
    padding-bottom: 4px;
}

body:not(#checkout) .form-group :where(textarea.form-control) {
    min-height: 110px;
    padding-top: 24px;
}

body:not(#checkout) .form-group :where(.form-control[readonly], .form-control:disabled) {
    background-color: #f3f4f6;
}

/* placeholder only on focus (otherwise it overlaps the label) */
body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) .form-control::placeholder {
    opacity: 0;
}

body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) .form-control:focus::placeholder {
    opacity: 1;
    color: var(--cp-faint);
}

/* password "Show" button */
body:not(#checkout) .js-input-column .input-group-btn .btn {
    min-height: var(--cp-field-h);
    border-radius: 0;
    background: var(--cp-ink);
}

/* instructions below the field → ⓘ tooltip */
body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment {
    position: absolute;
    top: calc(var(--cp-field-h) / 2);
    right: 12px;
    z-index: 4;
    display: block;
    width: 18px;
    height: 18px;
    margin: -9px 0 0;
    overflow: visible;
    font-size: 0;
    color: transparent;
    cursor: help;
}

body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment::before {
    content: "i";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--cp-field);
    border-radius: 50%;
    background: #fff;
    color: var(--cp-muted);
    font: italic 700 11px/1 Georgia, serif;
}

body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment:hover {
    right: 0;
    width: 240px;
    height: auto;
    margin: 14px 0 0;
    padding: 10px 12px;
    background: var(--cp-ink);
    font-size: 12px;
    line-height: 1.45;
    color: #fff;
}

body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment:hover::before {
    display: none;
}

body:not(#checkout) .form-group.row:has(> .js-input-column > .form-control-comment) .form-control {
    padding-right: 40px;
}

/* errors: red border + ⚠ text below */
body:not(#checkout) .form-group.row.has-error .form-control,
body:not(#checkout) .form-group :where(.has-error .form-control) {
    border-color: var(--cp-danger);
}

body:not(#checkout) .form-group :where(.help-block) {
    margin: 6px 0 0;
}

body:not(#checkout) .form-group :where(.help-block ul) {
    margin: 0;
    padding: 0;
    list-style: none;
}

body:not(#checkout) .form-group :where(.help-block .alert-danger, .has-error .help-block li) {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    color: var(--cp-danger);
}

body:not(#checkout) .form-group :where(.help-block .alert-danger)::before {
    content: "\26A0";
    font-size: 12px;
}

/* form-level error (e.g. "Authentication failed"), not below a field:
   subtle box with comfortable padding */
body:not(#checkout) .help-block:not(.js-input-column .help-block) li.alert-danger {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #fde2e2;
    border-radius: 12px;
    background: #fff7f7;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #b42318;
}

body:not(#checkout) .help-block:not(.js-input-column .help-block) li.alert-danger::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}

body:not(#checkout) .help-block:not(.js-input-column .help-block) ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* rows with a checkbox (terms, newsletter, "same address" etc.) */
body:not(#checkout) .form-group.row:not(:has(.form-control)) {
    margin-left: 0;
    margin-right: 0;
}

body:not(#checkout) .form-group.row:not(:has(.form-control)) > .form-control-label {
    flex: 0 0 0;
    max-width: 0;
    padding: 0;
}

body:not(#checkout) .form-group.row:not(:has(.form-control)) > .js-input-column {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
}

body:not(#checkout) .form-group.row:not(:has(.form-control)) > .form-control-comment {
    padding: 0;
}



/* --------------------------------------------------------------------------
   7. Radio / checkbox
   -------------------------------------------------------------------------- */
body:not(#checkout) .form-group :where(.custom-radio) {
    width: 18px;
    height: 18px;
    border: 1px solid var(--cp-field);
    background: #fff;
}

body:not(#checkout) .form-group :where(.custom-radio:has(input:checked)) {
    border-color: var(--cp-dark);
}

body:not(#checkout) .form-group :where(.custom-radio input[type="radio"]:checked + span) {
    width: 10px;
    height: 10px;
    top: 3px;
    left: 3px;
    background-color: var(--cp-dark);
}

body:not(#checkout) .form-group :where(.custom-checkbox input[type="checkbox"] + span) {
    width: 18px;
    height: 18px;
    border: 1px solid var(--cp-field);
    border-radius: 0;
    background: #fff;
}

body:not(#checkout) .form-group :where(.custom-checkbox input[type="checkbox"]:checked + span) {
    border-color: var(--cp-dark);
    background: var(--cp-dark);
}

body:not(#checkout) .form-group :where(.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked) {
    margin: 0;
    font-size: 14px;
    color: #fff;
}



/* --- 14.4 Buttons in waiting state (after click, from custom.js) ------------ */
body:not(#checkout) .cp-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

body:not(#checkout) .cp-btn-loading::after,
body:not(#checkout) .btn.cp-btn-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    flex: none;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    background: none;
    animation: cp-spin .7s linear infinite;
}


/* --- 14.7 Password field (input + "Show") --------------------------- */
body:not(#checkout) .input-group.focus {
    outline: none;
}

body:not(#checkout) .js-input-column .input-group {
    display: flex;
}

body:not(#checkout) .js-input-column .input-group:focus-within .form-control {
    border-color: var(--cp-dark);
}

body:not(#checkout) .js-input-column .input-group-btn .btn {
    padding: 0 16px;
    border: 1px solid var(--cp-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}

/* "optional" should not overlap "Show" */
body:not(#checkout) .form-group.row:has(.input-group) > .form-control-comment {
    right: 110px;
}


/* --- 18.1 The label animation only after custom.js sets the correct
   position (data-cp-ready). In a form that was just rebuilt (country change)
   the labels appear directly in place. */
body:not(#checkout) .form-group.row[data-cp-ready]:has(> .js-input-column .form-control) > .form-control-label {
    transition: top .16s ease, font-size .16s ease, color .16s ease;
}


/* ==========================================================================
   21. Personal details: tabs as a switch, email full width
   ========================================================================== */

/* --- 21.1 Guest | Sign in: two-option switch ------------------- */
body:not(#checkout) #checkout-personal-information-step .nav.nav-inline {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    margin: 0 0 24px !important;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: #f1f3f5;
}

body:not(#checkout) #checkout-personal-information-step .nav-inline .nav-item:has(.nav-separator) {
    display: none;
}

body:not(#checkout) #checkout-personal-information-step .nav-inline .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
    text-transform: none;
    color: var(--cp-muted);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

body:not(#checkout) #checkout-personal-information-step .nav-inline .nav-link:hover {
    color: var(--cp-text);
}

body:not(#checkout) #checkout-personal-information-step .nav-inline .nav-link.active {
    border-color: #e5e7eb;
    background: #fff;
    color: var(--cp-text);
}

/* --- 21.2 e-mail full width ---------------------------------------- */
body:not(#checkout) #customer-form > div:first-child > .form-group.row:has(input[name="email"]) {
    grid-column: 1 / -1 !important;
}

/* --- 21.4 Password: "Show" as plain text inside the field ----------- */
body:not(#checkout) .js-input-column .input-group {
    position: relative;
}

body:not(#checkout) .js-input-column .input-group > .form-control {
    padding-right: 104px;
}

body:not(#checkout) .js-input-column .input-group-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 3;
    width: auto;
    transform: translateY(-50%);
}

body:not(#checkout) .js-input-column .input-group-btn .btn {
    min-height: 0;
    height: 36px;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 8px;
    background: transparent !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cp-dark) !important;
}

body:not(#checkout) .js-input-column .input-group-btn .btn:hover {
    background: var(--cp-primary-soft) !important;
}

/* --- 21.5 Tabs: no border / outline on click --------------------- */
body:not(#checkout) #checkout-personal-information-step .nav-inline .nav-link:focus,
body:not(#checkout) #checkout-personal-information-step .nav-inline .nav-link:active,
body:not(#checkout) #checkout-personal-information-step .nav-inline .nav-link:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

body:not(#checkout) #checkout-personal-information-step .nav-inline .nav-link:not(.active):focus {
    border-color: transparent;
}

body:not(#checkout) #checkout-personal-information-step .nav-inline .nav-link.active,
body:not(#checkout) #checkout-personal-information-step .nav-inline .nav-link.active:focus {
    border: 1px solid #e5e7eb !important;
}

/* --- 21.6 Password label above the field (the input-group has z-index) */
body:not(#checkout) .form-group.row:has(.input-group) > .form-control-label {
    z-index: 5 !important;
}




/* --- 22.1 Strength bar: thin, rounded, soft colours ------------------ */
body:not(#checkout) .password-strength-feedback {
    margin-top: 10px !important;
}

body:not(#checkout) .password-strength-feedback .progress {
    height: 4px;
    margin: 0 0 8px !important;
    overflow: hidden;
    border-radius: 999px;
    background: #eceef1;
    box-shadow: none;
}

body:not(#checkout) .password-strength-feedback .progress-bar {
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease, background-color .3s ease;
}

body:not(#checkout) .password-strength-feedback .progress-bar.bg-success { background-color: var(--cp-dark) !important; }
body:not(#checkout) .password-strength-feedback .progress-bar.bg-warning { background-color: #f5b041 !important; }
body:not(#checkout) .password-strength-feedback .progress-bar.bg-danger  { background-color: #ef6a5a !important; }

body:not(#checkout) .password-strength-text {
    font-size: 12px;
    color: var(--cp-muted);
}

/* --- 22.2 Instructions: small grey text, small icon ----------------- */
body:not(#checkout) .password-requirements p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--cp-muted);
}

body:not(#checkout) .password-requirements .material-icons {
    font-size: 14px;
    color: var(--cp-faint);
}

body:not(#checkout) .password-requirements .material-icons.text-success {
    color: var(--cp-dark) !important;
}

body:not(#checkout) .password-requirements .material-icons.text-danger {
    color: #ef6a5a !important;
}

/* green / red border that the theme puts on the field → ours instead */
body:not(#checkout) #field-password.border-success {
    border-color: var(--cp-dark) !important;
}


/* ==========================================================================
   24. Smaller / lighter text on checkboxes (privacy, newsletter …)
       + "Create account (optional)" above the password
   ========================================================================== */

/* --- 24.1 Explanation below each checkbox: small, light, not italic ---- */
body:not(#checkout) .custom-checkbox label {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--cp-text);
}

body:not(#checkout) .custom-checkbox label em {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5;
    color: var(--cp-muted);
}

/* --- 24.2 Text above the password, like the theme but cleaner ---- */
body:not(#checkout) #customer-form .form-informations {
    margin: 6px 0 -4px;
    font-size: 14px;
    line-height: 1.45;
}

body:not(#checkout) #customer-form .form-informations-title {
    font-weight: 500 !important;
    color: var(--cp-text);
}

body:not(#checkout) #customer-form .form-informations-option {
    margin-left: 4px;
    font-size: 12px;
    font-style: normal !important;
    font-weight: 300;
    color: var(--cp-muted);
}

body:not(#checkout) #customer-form .form-informations-subtitle {
    font-size: 12px;
    font-weight: 300;
    color: var(--cp-muted) !important;
}

/* --- 24.3 Password: white background (even when readonly), eye instead of
       "Show", no "optional" inside the field ---------------------- */
body:not(#checkout) .js-input-column .input-group > .form-control,
body:not(#checkout) .js-input-column .input-group > .form-control[readonly] {
    background-color: transparent;
    padding-right: 56px;
}

body:not(#checkout) .js-input-column .input-group {
    background: #fff;
}

body:not(#checkout) .field-password-policy .form-group > .form-control-comment {
    display: none !important;
}

body:not(#checkout) .js-input-column .input-group-btn .btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 0 !important;      /* hides "Show / Hide" */
    color: transparent !important;
}

/* eye (password hidden) */
body:not(#checkout) .js-input-column .input-group-btn .btn::before {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--cp-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: background-color .15s ease;
}

/* eye with slash (password visible) */
body:not(#checkout) .js-input-column .input-group:has(> input[type="text"]) .input-group-btn .btn::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 5.1A10.6 10.6 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-2.9 3.9M6.6 6.6C3.9 8.3 2 12 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 5.1A10.6 10.6 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-2.9 3.9M6.6 6.6C3.9 8.3 2 12 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

body:not(#checkout) .js-input-column .input-group-btn .btn:hover::before {
    background: var(--cp-dark);
}

/* --- 24.4 The "*" above the required checkboxes (empty label) ------- */
body:not(#checkout) .form-group.row:has(.custom-checkbox) > .form-control-label {
    display: none;
}

/* eye exactly centred (the button's hidden text took up a second "line") */
body:not(#checkout) .js-input-column .input-group-btn .btn {
    position: relative;
    display: block;
}

body:not(#checkout) .js-input-column .input-group-btn .btn::before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
}


/* ==========================================================================
   25. Tooltips ⓘ, checkbox "hand", "Forgot password"
   ========================================================================== */

/* --- 25.1 Tooltip: the icon stays the same, the text in a bubble above
       (text from data-cp-tip set by custom.js) ---------------------- */
body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment,
body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment:hover {
    right: 12px;
    width: 20px;
    height: 20px;
    margin: -10px 0 0;
    padding: 0;
    background: transparent;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: help;
    outline: 0;
}

/* "i" icon in a circle (SVG, takes its colour from a variable) */
body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment::before,
body:not(#checkout) .form-group.row:has(> .js-input-column .form-control) .js-input-column > .form-control-comment:hover::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 0;
    background: var(--cp-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.8' r='.6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.8' r='.6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: background-color .15s ease;
}

body:not(#checkout) .js-input-column > .form-control-comment:hover::before,
body:not(#checkout) .js-input-column > .form-control-comment:focus::before {
    background: var(--cp-dark) !important;
}

/* the bubble */
body:not(#checkout) .js-input-column > .form-control-comment[data-cp-tip]::after {
    content: attr(data-cp-tip);
    position: absolute;
    right: -8px;
    bottom: calc(100% + 10px);
    z-index: 30;
    width: max-content;
    max-width: min(260px, 80vw);
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--cp-ink);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

body:not(#checkout) .js-input-column > .form-control-comment[data-cp-tip]:hover::after,
body:not(#checkout) .js-input-column > .form-control-comment[data-cp-tip]:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- 25.2 Checkbox: "hand" cursor on the whole row (box + text) -------- */
body:not(#checkout) .custom-checkbox,
body:not(#checkout) .custom-checkbox label,
body:not(#checkout) .custom-checkbox input,
body:not(#checkout) .custom-checkbox label *,
body:not(#checkout) #conditions-to-approve label,
body:not(#checkout) #conditions-to-approve input {
    cursor: pointer;
}

body:not(#checkout) .custom-checkbox label {
    display: block;
}

/* links inside the checkbox text (e.g. "terms") remain links */
body:not(#checkout) .custom-checkbox label a {
    cursor: pointer;
}

/* --- 25.3 "Forgot password": small black text with an icon ------- */
body:not(#checkout) .forgot-password {
    margin: -4px 0 18px;
    text-align: left;
}

body:not(#checkout) .forgot-password a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--cp-text);
    text-decoration: none;
}

body:not(#checkout) .forgot-password a::before {
    content: "";
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
}

body:not(#checkout) .forgot-password a:hover {
    color: var(--cp-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "Forgot password": left-aligned on desktop too (the theme sets margin-left 25%), better spacing */
body:not(#checkout) .forgot-password {
    width: 100%;
    margin: 12px 0 26px !important;
    padding: 0 2px;
    text-align: left !important;
}

body:not(#checkout) .forgot-password a {
    padding: 4px 0;
}

/* /GLOBAL-FORMS */



/* ==========================================================================
   54. FLOATING LABELS — UNIFIED STYLE EVERYWHERE (like the "Find ink")
   --------------------------------------------------------------------------
   One pattern for ALL forms: theme (login, registration, account,
   addresses, contact), checkout and modules.
   • Field 52px, 10px corners, grey border · hover darker ·
     focus: blue border + soft "ring".
   • The label sits inside the field; on focus / value it moves up, small (blue on focus).
   A. Theme forms (.form-group.row …) — appearance only, the positioning rules
      are in sections 5 (checkout) / 33 (GLOBAL-FORMS).
   B. Utility .cp-fl for modules:
        <div class="cp-fl">
          <input class="cp-fl-control" id="x" placeholder=" ">
          <label for="x">Label</label>
        </div>
      (select / textarea the same · .has-value from custom.js, .is-loading = spinner)
   ========================================================================== */
body:is(#checkout, :not(#checkout)) {
    --cp-field-h: 52px;
    --cp-field: #dcdfe6;
    --cp-fl-radius: 10px;
    --cp-fl-ring: 0 0 0 3px rgba(28, 54, 115, .12);
}

/* ── A. theme forms ── */
body:is(#checkout, :not(#checkout)) .form-group :where(.form-control) {
    min-height: var(--cp-field-h);
    border-color: var(--cp-field);
    border-radius: var(--cp-fl-radius);
    font-size: 15px;
    font-weight: 500;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

body:is(#checkout, :not(#checkout)) .form-group :where(.form-control):hover {
    border-color: #b9bfcb;
}

body:is(#checkout, :not(#checkout)) .form-group :where(.form-control):focus {
    border-color: var(--cp-dark);
    box-shadow: var(--cp-fl-ring);
}

body:is(#checkout, :not(#checkout)) .form-group :where(select.form-control) {
    padding-right: 36px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
    -webkit-appearance: none;
    appearance: none;
}

body:is(#checkout, :not(#checkout)) .form-group.row:has(> .js-input-column .form-control) > .form-control-label {
    left: 15px;
    font-size: 15px;
    color: var(--cp-muted);
}

body:is(#checkout, :not(#checkout)) .form-group.row.cp-filled:has(> .js-input-column .form-control) > .form-control-label,
body:is(#checkout, :not(#checkout)) .form-group.row:has(> .js-input-column .form-control):focus-within > .form-control-label {
    top: 15px;
    font-size: 11.5px;
    font-weight: 500;
}

body:is(#checkout, :not(#checkout)) .form-group.row:has(> .js-input-column .form-control):focus-within > .form-control-label {
    color: var(--cp-dark);
}

/* password: the "eye" button inside the rounded field */
body:is(#checkout, :not(#checkout)) .js-input-column .input-group > .form-control {
    border-radius: var(--cp-fl-radius);
}

/* ── B. utility .cp-fl (modules) ── */
.cp-fl {
    position: relative;
    margin: 0;
}

.cp-fl > .cp-fl-control {
    display: block;
    width: 100%;
    height: var(--cp-field-h, 52px);
    margin: 0;
    padding: 20px 14px 4px;
    border: 1px solid var(--cp-field, #dcdfe6);
    border-radius: var(--cp-fl-radius, 10px);
    outline: 0;
    background-color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    color: #1f2937;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    -webkit-appearance: none;
    appearance: none;
}

.cp-fl > textarea.cp-fl-control {
    height: auto;
    min-height: 120px;
    padding-top: 26px;
    resize: vertical;
}

.cp-fl > select.cp-fl-control {
    padding-right: 36px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
    cursor: pointer;
}

.cp-fl > .cp-fl-control:hover:not(:disabled) {
    border-color: #b9bfcb;
}

.cp-fl > .cp-fl-control:focus {
    border-color: var(--cp-primary, #1c3673);
    box-shadow: 0 0 0 3px rgba(28, 54, 115, .12);
}

.cp-fl > .cp-fl-control:disabled {
    background-color: #f6f7f9;
    color: #9aa1ad;
    cursor: not-allowed;
}

.cp-fl > .cp-fl-control::placeholder {
    color: transparent;
}

.cp-fl > .cp-fl-control:focus::placeholder {
    color: #a3a8b0;
}

.cp-fl > label {
    position: absolute;
    top: calc(var(--cp-field-h, 52px) / 2);
    left: 15px;
    right: 36px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: #6b7280;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    transform: translateY(-50%);
    transition: top .15s, font-size .15s, color .15s;
}

.cp-fl.has-value > label,
.cp-fl:focus-within > label,
.cp-fl > .cp-fl-control:not(:placeholder-shown) + label {
    top: 15px;
    font-size: 11.5px;
    font-weight: 500;
}

.cp-fl:focus-within > label {
    color: var(--cp-primary, #1c3673);
}

.cp-fl:has(:disabled) > label {
    color: #b3b9c4;
}

.cp-fl > label .required,
.cp-fl > label sup {
    color: inherit;
    font-size: inherit;
    vertical-align: baseline;
}

/* spinner on the loading field */
.cp-fl.is-loading::after {
    content: "";
    position: absolute;
    top: calc(var(--cp-field-h, 52px) / 2);
    right: 12px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid #d5d9e1;
    border-top-color: var(--cp-primary, #1c3673);
    border-radius: 50%;
    animation: cp-fl-spin .6s linear infinite;
}

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

/* error */
.cp-fl.has-error > .cp-fl-control {
    border-color: var(--cp-danger, #e0244d);
}

.cp-fl.has-error > label {
    color: var(--cp-danger, #e0244d);
}

@media (max-width: 767px) {
    .cp-fl > .cp-fl-control {
        font-size: 16px; /* no zoom on iPhone */
    }
}
/* /54 FLOATING */

/* 54.1 ps_emailalerts: the field is hidden together with the button after subscribing */
.js-mailalert:has(> .js-mailalert-add[style*="none"]) > .cp-mailalert-field {
    display: none;
}

.js-mailalert > .cp-mailalert-field {
    max-width: 420px;
    margin: 0 auto;
}

/* 54.2 productcomments: review fields stacked one below the other */
.cp-review-fields {
    display: grid;
    gap: 12px;
    margin: 16px 0;
}

.cp-review-fields .cp-fl > label sup {
    margin-left: 1px;
}

/* 54.3 contact: "Attachment" (bootstrap-filestyle) in the same style */
.contact-form .bootstrap-filestyle {
    display: flex;
}

body:is(#checkout, :not(#checkout)) .contact-form .bootstrap-filestyle > .form-control {
    height: 52px;
    min-height: 52px;
    border-color: #dcdfe6;
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: #fff;
}

.contact-form .bootstrap-filestyle .group-span-filestyle .btn {
    display: inline-flex;
    align-items: center;
    height: 52px;
    border-radius: 0 10px 10px 0;
}

.contact-form .form-group:has(.bootstrap-filestyle) > .form-control-label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}


/* ==========================================================================
   55. Menu — 1st level: icon per category + more breathing room
   The icon is chosen automatically from the name (modules/ps_mainmenu/ps_mainmenu.tpl,
   function hdrIcon) — every new category always gets one (a generic one if nothing matches).
   ========================================================================== */
.hdr-col[data-col="1"] > .hdr-list {
    display: grid;
    gap: 6px;
}

.hdr-item.is-top {
    justify-content: flex-start;
    gap: 14px;
    min-height: 58px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.hdr-item-label {
    flex: 1 1 auto;
    min-width: 0;
}

.hdr-ico {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--hdr-primary, #1c3673);
}

.hdr-ico svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 991px) {
    .hdr-col[data-col="1"] > .hdr-list {
        gap: 0;
    }

    .hdr-item.is-top {
        min-height: 64px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}
/* /55 */


/* ==========================================================================
   56. Menu — "special" links (Offers, New products, Popular…)
   Anything added as a "Custom link" in ps_mainmenu goes here,
   below the categories, with colour / icon from the name or URL:
   .is-offer (offers…, prices-drop) · .is-new (new…, new-products)
   .is-best (popular…, best) · .is-link (anything else)
   ========================================================================== */
.hdr-sep {
    height: 1px;
    margin: 8px 0;
    background: #eceef2;
    list-style: none;
}

.hdr-item.is-special {
    --sp: #6d28d9;
    --sp-soft: #f3effd;
    margin-top: 2px;
    border-radius: 12px;
    background: var(--sp-soft);
    font-weight: 600;
    color: var(--sp);
}

.hdr-item.is-special .hdr-ico {
    color: var(--sp);
}

.hdr-item.is-special:hover,
.hdr-item.is-special:focus-visible {
    background: color-mix(in srgb, var(--sp) 14%, #fff);
    color: var(--sp);
}

.hdr-item.is-offer {
    --sp: #d92d4b;
    --sp-soft: #fdeef1;
}

.hdr-item.is-new {
    --sp: #15803d;
    --sp-soft: #eaf7ef;
}

.hdr-item.is-best {
    --sp: #c2410c;
    --sp-soft: #fdf1e7;
}

@media (max-width: 991px) {
    .hdr-li-special {
        padding: 4px 0;
    }

    .hdr-item.is-special {
        min-height: 56px;
        margin: 0;
        padding-right: 12px;
        padding-left: 12px;
        border-bottom: 0;
        border-radius: 12px;
    }

    .hdr-item.is-special:hover,
    .hdr-item.is-special.is-active {
        background: color-mix(in srgb, var(--sp) 14%, #fff);
    }
}
/* /56 */


/* ==========================================================================
   57. Header — search in the centre, icons like in the menu (no words)
   templates/_partials/header.tpl (.hdr-start = logo + MENU)
   modules/ps_searchbar/ps_searchbar.tpl (button = icon)
   ========================================================================== */
.hdr-start {
    display: contents; /* mobile: logo / menu stay in place */
}

@media (min-width: 992px) {
    .hdr-bar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr);
        grid-template-areas: "start search actions";
    }

    .hdr-start {
        grid-area: start;
        display: flex;
        gap: clamp(14px, 2vw, 32px);
        align-items: center;
    }

    .hdr-actions {
        justify-self: end;
    }
}

/* ── search: "pill" with a thin border, focus like the forms ── */
.hdr-searchbox {
    max-width: 680px;
}

#search_widget.hdr-searchbox form input[type="text"] {
    height: 50px;
    padding: 0 60px 0 50px;
    border: 1px solid #dcdfe6;
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
}

#search_widget.hdr-searchbox form input[type="text"]:hover {
    border-color: #b9bfcb;
}

#search_widget.hdr-searchbox form input[type="text"]:focus {
    border-color: var(--hdr-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(28, 54, 115, .12);
}

#search_widget.hdr-searchbox form input[type="text"]::placeholder {
    color: #9aa1ad;
}

.hdr-searchbox-icon {
    left: 18px;
    width: 20px;
    height: 20px;
    color: #9aa1ad;
}

#search_widget.hdr-searchbox .hdr-searchbox-btn {
    top: 5px;
    right: 5px;
    bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding: 0;
    border-radius: 50%;
}

.hdr-searchbox-btn svg {
    width: 19px;
    height: 19px;
    stroke: #fff;
    stroke-width: 2.2;
}

/* ── login / cart: icon only, line in blue (like the menu) ── */
.hdr-icon {
    justify-content: center;
    gap: 0;
    min-width: 0;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    color: var(--hdr-primary);
}

.hdr-icon:hover,
.hdr-icon:focus-visible {
    background: #eef1f7;
    color: var(--hdr-primary);
}

.hdr-icon-svg,
.hdr-icon-svg svg {
    width: 26px;
    height: 26px;
}

.hdr .hdr-icon-svg svg {
    stroke-width: 1.5;
}

/* the words remain for screen readers only */
.hdr-icon-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hdr-actions {
    gap: 6px;
}

/* MENU: same blue */
.hdr-menu-btn {
    color: var(--hdr-primary);
}
/* color: stronger than the theme's #header a */
#header .hdr-icon,
#header .hdr-icon:hover,
#header .hdr-icon:focus-visible,
#header .hdr-menu-btn {
    color: var(--hdr-primary);
}

/* desktop: larger, in a soft blue circle, with spacing between */
@media (min-width: 992px) {
    .hdr-actions {
        gap: 14px;
    }

    .hdr-icon {
        width: 54px;
        height: 54px;
        background: #eef1f7;
    }

    #header .hdr-icon:hover,
    #header .hdr-icon:focus-visible {
        background: #e1e7f2;
    }

    .hdr-icon-svg,
    .hdr-icon-svg svg {
        width: 28px;
        height: 28px;
    }

    .hdr-badge {
        top: -12px;
        right: -14px;
    }
}
/* /57 */


/* ==========================================================================
   58. Menu drawer — same header & "X" as the module drawers (cart, login, favorites)
   ========================================================================== */
body .hdr-mega-title {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-transform: none;
    color: #1f2937;
}

body .hdr-mega-close,
body .ot-drawer-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 -8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #1f2937;
    cursor: pointer;
    transition: background-color .15s ease, transform .2s ease;
}

body .hdr-mega-close:hover,
body .ot-drawer-close:hover {
    background: #f3f4f6;
    transform: rotate(90deg);
}

body .hdr-mega-close svg,
body .ot-drawer-close svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

/* menu: the header exists only on mobile (drawer) */
@media (max-width: 991px) {
    body .hdr-mega-head {
        display: flex;
        gap: 16px;
        align-items: center;
        justify-content: space-between;
        padding: 16px 16px 14px;
        border-bottom: 1px solid #ececec;
    }
}

/* product card: no border and shadow (also on hover) */
.product-miniature.pcard,
.product-miniature.pcard:hover {
    border-color: transparent;
    box-shadow: none;
}

/* header: more spacing top and bottom */
.hdr-bar {
    padding-top: 18px;
    padding-bottom: 18px;
}

@media (max-width: 991px) {
    .hdr-bar {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

/* /58 */


/* ==========================================================================
   59. Product cards with breathing room — lists: 3 per row (desktop)
   ========================================================================== */
#js-product-list .products:has(.pcard) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 16px;
}

@media (max-width: 1199px) {
    #js-product-list .products:has(.pcard) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }
}

@media (max-width: 767px) {
    #js-product-list .products:has(.pcard) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 10px;
    }
}

/* the card: more inner padding, larger image */
.product-miniature.pcard {
    padding: 22px 24px 24px;
    border-radius: 16px;
}

.product-miniature.pcard .thumbnail-container {
    margin-bottom: 20px;
}

.product-miniature.pcard .pcard-img img {
    max-width: 300px;
}

.product-miniature.pcard .pcard-meta {
    margin-bottom: 4px;
}

.product-miniature.pcard .pcard-title {
    margin: 8px 0 14px;
}

.product-miniature.pcard .pcard-title a {
    min-height: 2.9em;
    font-size: 16px;
    line-height: 1.45;
}

.product-miniature.pcard .pcard-stock {
    margin-bottom: 18px;
}

.product-miniature.pcard .pcard-price .price {
    font-size: 24px;
}

.pcard-foot {
    gap: 14px;
    padding-top: 4px;
}

/* mobile: tighter (2 columns) */
@media (max-width: 767px) {
    .product-miniature.pcard {
        padding: 14px 12px 14px;
        border-radius: 14px;
    }

    .product-miniature.pcard .thumbnail-container {
        margin-bottom: 12px;
    }

    .product-miniature.pcard .pcard-title {
        margin: 6px 0 10px;
    }

    .product-miniature.pcard .pcard-title a {
        font-size: 14.5px;
        line-height: 1.4;
    }

    .product-miniature.pcard .pcard-stock {
        margin-bottom: 12px;
    }

    .product-miniature.pcard .pcard-price .price {
        font-size: 19px;
    }
}
/* /59 */


/* ==========================================================================
   60. Product lists: full-width container (fluid) + 4 per row
   ========================================================================== */
body:is(#category, #search, #manufacturer, #supplier, #prices-drop, #new-products, #best-sales, #module-cpwishlist-list, #module-cpinkfinder-printer, #module-cpinkfinder-search) #wrapper > .container {
    width: 100%;
    max-width: none;
    padding-right: clamp(16px, 3vw, 56px);
    padding-left: clamp(16px, 3vw, 56px);
}

@media (min-width: 1400px) {
    #js-product-list .products:has(.pcard) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* /60 */


/* ==========================================================================
   61. Home — product carousel ("New products"), full width
   modules/ps_newproducts/.../ps_newproducts.tpl · JS: custom.js (js-cp-pc)
   ========================================================================== */
#index #wrapper > .container {
    width: 100%;
    max-width: none;
    padding-right: clamp(16px, 3vw, 56px);
    padding-left: clamp(16px, 3vw, 56px);
}

.cp-pc {
    --pc-gap: 16px;
    --pc-cols: 5;
    margin: 40px 0 48px;
}

/* header */
.cp-pc-head {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 22px;
}

.cp-pc-eyebrow {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cp-primary, #1c3673);
}

.cp-pc-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.cp-pc-title {
    margin: 0;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-transform: none;
    color: #1f2937;
}

.cp-pc-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cp-pc-all {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-right: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cp-primary, #1c3673);
    text-decoration: none;
}

.cp-pc-all:hover {
    color: var(--cp-primary-hover, #15295a);
    text-decoration: none;
}

.cp-pc-all svg,
.cp-pc-arrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .15s;
}

.cp-pc-all:hover svg {
    transform: translateX(3px);
}

.cp-pc-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #dcdfe6;
    border-radius: 50%;
    background: #fff;
    color: #1f2937;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, opacity .15s;
}

.cp-pc-arrow:hover:not(:disabled) {
    border-color: var(--cp-primary, #1c3673);
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

.cp-pc-arrow:disabled {
    opacity: .35;
    cursor: default;
}

.cp-pc.is-static .cp-pc-arrow {
    display: none;
}

/* track: as many as fit (4 / 3 / 2) + native swipe */
.cp-pc-track.products {
    display: grid;
    grid-auto-columns: calc((100% - (var(--pc-cols) - 1) * var(--pc-gap)) / var(--pc-cols));
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: var(--pc-gap);
    margin: 0;
    padding: 2px 0 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.cp-pc-track::-webkit-scrollbar {
    display: none;
}

.cp-pc-item {
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}

@media (max-width: 1599px) {
    .cp-pc {
        --pc-cols: 4;
    }
}

@media (max-width: 1299px) {
    .cp-pc {
        --pc-cols: 3;
    }
}

@media (max-width: 991px) {
    .cp-pc {
        --pc-cols: 3;
    }
}

@media (max-width: 767px) {
    .cp-pc {
        --pc-gap: 10px;
        --pc-cols: 2;
        margin: 28px 0 36px;
    }

    .cp-pc-head {
        align-items: center;
        margin-bottom: 16px;
    }

    .cp-pc-arrow {
        display: none;
    }

    .cp-pc-all {
        margin-right: 0;
        font-size: 14px;
    }

}
/* pager: ‹ 01 ━━━ 04 › */
.cp-pc-pager {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
}

.cp-pc-count {
    display: flex;
    gap: 14px;
    align-items: center;
}

.cp-pc-num {
    position: relative;
    display: inline-block;
    min-width: 2ch;
    overflow: hidden;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--cp-primary, #1c3673);
}

.cp-pc-num > span {
    display: inline-block;
}

.cp-pc-num .is-anim {
    animation: cp-pc-num-up .35s cubic-bezier(.22, .8, .3, 1);
}

@keyframes cp-pc-num-up {
    from { opacity: 0; transform: translateY(70%); }
    to { opacity: 1; transform: none; }
}

.cp-pc-num.is-total {
    font-size: 15px;
    font-weight: 600;
    color: #9aa1ad;
}

.cp-pc-line {
    position: relative;
    width: clamp(120px, 14vw, 220px);
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: #e3e7ef;
}

.cp-pc-line span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #4a6bb8, var(--cp-primary, #1c3673));
    transition: width .45s cubic-bezier(.22, .8, .3, 1);
}

.cp-pc-pager .cp-pc-arrow {
    width: 48px;
    height: 48px;
}

.cp-pc.is-static .cp-pc-pager {
    display: none;
}

@media (max-width: 767px) {
    .cp-pc-pager {
        gap: 12px;
        margin-top: 20px;
    }

    /* on mobile the arrows stay (only the header's were hidden) */
    .cp-pc-pager .cp-pc-arrow {
        display: inline-flex;
        width: 42px;
        height: 42px;
    }

    .cp-pc-num {
        font-size: 19px;
    }

    .cp-pc-line {
        width: 96px;
    }
}
/* /61 */


/* ==========================================================================
   62. Product card — price, label / heart alignment, cart button
   ========================================================================== */
/* price: large, the old (struck-through) one on the same line next to it */
.product-miniature.pcard .pcard-price {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px 10px;
    align-items: baseline;
}

.product-miniature.pcard .pcard-price .price {
    order: 1;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.product-miniature.pcard .pcard-price-old {
    order: 2;
    margin: 0;
}

.product-miniature.pcard .regular-price {
    font-size: 15px;
    font-weight: 500;
    color: #9aa1ad;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

/* the percentage is already shown in the label at top left */
.product-miniature.pcard .pcard-price .discount-product {
    display: none;
}

/* discount: the price in the label's red */
.product-miniature.pcard .pcard-price:has(.pcard-price-old) .price {
    color: #d92d4b;
}

/* labels (e.g. -13%, New) at the same height as the heart */
.product-miniature.pcard .product-flags {
    top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 38px;
}

.product-miniature.pcard .product-flags .product-flag {
    margin: 0;
}

/* cart button: like the header icons */
.pcard-cart-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.pcard-cart-btn svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pcard-cart-btn:hover,
.pcard-cart-btn:focus-visible {
    background: var(--cp-primary, #1c3673);
    color: #fff;
    filter: none;
}

@media (max-width: 767px) {
    .product-miniature.pcard .pcard-price .price {
        font-size: 20px;
    }

    .product-miniature.pcard .regular-price {
        font-size: 13px;
    }

    .pcard-cart-btn {
        width: 44px;
        height: 44px;
    }

    .pcard-cart-btn svg {
        width: 22px;
        height: 22px;
    }
}
/* /62 */


/* ==========================================================================
   63. LOGIN / REGISTRATION — centered white card without border
   (same pattern as order tracking / withdrawal: icon in #eef1f7 circle,
   title, light subtitle, floating labels — section 54, wide buttons)
   templates: customer/authentication.tpl, customer/registration.tpl
   ========================================================================== */
body:is(#authentication, #registration) #content,
body:is(#authentication, #registration) .page-content {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.cp-auth {
    max-width: 520px;
    margin: 0 auto;
    padding: 28px 0 56px;
}

.cp-auth.is-wide {
    max-width: 640px;
}

.cp-auth-card {
    padding: clamp(24px, 4vw, 40px);
    border: 0;
    border-radius: 18px;
    background: #fff;
}

.cp-auth-head {
    margin-bottom: 24px;
    text-align: center;
}

.cp-auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-auth-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-auth-title {
    margin: 0 0 6px;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    color: #1f2937;
}

.cp-auth-sub {
    max-width: 420px;
    margin: 0 auto;
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.55;
    color: #8b93a1;
}

.cp-auth-sub a {
    font-weight: 600;
    color: var(--cp-primary, #1c3673);
}

/* ── forms: without their own margins / lines ── */
body:is(#authentication, #registration) .cp-auth .login-form,
body:is(#authentication, #registration) .cp-auth .register-form {
    margin: 0;
    padding: 0;
}

/* "Forgot my password": right-aligned, small */
body:is(#authentication, #registration) .cp-auth .forgot-password {
    margin: 6px 0 0;
    padding: 0;
    text-align: right;
}

body:is(#authentication, #registration) .cp-auth .forgot-password a {
    font-size: 13px;
    font-weight: 500;
    color: var(--cp-primary, #1c3673);
}

/* ── submit button: wide, like the rest ── */
body:is(#authentication, #registration) .cp-auth .form-footer {
    margin: 20px 0 0;
    padding: 0;
    border: 0;
    text-align: center;
}

body:is(#authentication, #registration) .cp-auth .form-footer .btn-primary {
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--cp-primary, #1c3673);
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    transition: background .15s;
}

body:is(#authentication, #registration) .cp-auth .form-footer .btn-primary:hover,
body:is(#authentication, #registration) .cp-auth .form-footer .btn-primary:focus {
    background: var(--cp-primary-hover, #15295a);
    color: #fff;
}

/* ── "or" + "Create account" ── */
.cp-auth-or {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 22px 0 14px;
    font-size: 12.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #b0b7c3;
}

.cp-auth-or::before,
.cp-auth-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #eceef2;
}

body#authentication .cp-auth .no-account {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
}

body#authentication .cp-auth a.cp-auth-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 10px;
    background: #eef1f7;
    font-size: 15px;
    font-weight: 600;
    color: var(--cp-primary, #1c3673);
    text-decoration: none;
    transition: background .15s;
}

body#authentication .cp-auth a.cp-auth-alt:hover {
    background: #e3e8f2;
    color: var(--cp-primary, #1c3673);
}

/* ── registration: checkboxes (newsletter / GDPR / terms) in soft boxes ── */
:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .form-group.row:has(.custom-checkbox) {
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f7f8fb;
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox label {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox label em,
:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox .psgdpr_consent_message + * ,
:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox em {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5;
    color: #8b93a1;
}

@media (max-width: 575px) {
    .cp-auth {
        padding-top: 12px;
    }

    .cp-auth-card {
        padding: 22px 18px;
        border-radius: 16px;
    }
}
/* /63 */

/* 63.1 full column width so the card sits in the center · "Forgot" on the right · "or" lowercase */
body:is(#authentication, #registration) #content-wrapper {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

body:is(#authentication, #registration) .cp-auth .forgot-password {
    display: flex;
    justify-content: flex-end;
}

.cp-auth-or {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

/* 63.2 center: the theme sets max-width on #content → margin auto */
body:is(#authentication, #registration) #content.page-content {
    margin-right: auto;
    margin-left: auto;
}

/* 63.3 registration: checkboxes "grouped" in one box with thin lines */
:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .form-group.row:has(.custom-checkbox) {
    margin: 0;
    padding: 12px 14px;
    border-radius: 0;
    background: #f7f8fb;
}

/* first / middle / last */
:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .form-group.row:not(:has(.custom-checkbox)) + .form-group.row:has(.custom-checkbox) {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .form-group.row:has(.custom-checkbox) + .form-group.row:has(.custom-checkbox) {
    margin-top: -16px;
    border-top: 1px solid #eceef2;
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .form-group.row:has(.custom-checkbox):not(:has(+ .form-group.row .custom-checkbox)) {
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .form-group.row:has(.custom-checkbox) > * {
    padding: 0;
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox {
    display: block;
    margin: 0;
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox label {
    position: relative;
    display: block;
    margin: 0;
    padding-left: 32px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    color: #1f2937;
    cursor: pointer;
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox label a {
    font-weight: 600;
    color: var(--cp-primary, #1c3673);
    text-decoration: underline;
    text-underline-offset: 2px;
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* the checkbox */
:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox input[type="checkbox"] + span {
    position: absolute;
    top: -1px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid #c5ccd8;
    border-radius: 6px;
    background: #fff;
    transition: background .15s, border-color .15s;
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox input[type="checkbox"] + span .material-icons {
    display: none;
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox input[type="checkbox"]:checked + span {
    border-color: var(--cp-primary, #1c3673);
    background: var(--cp-primary, #1c3673);
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox input[type="checkbox"]:checked + span::after {
    content: "";
    width: 10px;
    height: 6px;
    margin-top: -2px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox input[type="checkbox"]:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(28, 54, 115, .18);
}

/* description (legal text): small, light */
:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox label em,
:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .custom-checkbox em {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5;
    color: #8b93a1;
}

/* 63.4 registration checkboxes: without gray background / lines — clean on the white */
:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .form-group.row:has(.custom-checkbox) {
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: none;
}

:is(body#registration .cp-auth, body#identity .cp-idf) #customer-form .form-group.row:has(.custom-checkbox) + .form-group.row:has(.custom-checkbox) {
    margin-top: -6px;
    border-top: 0;
}

/* 63.5 FORGOT PASSWORD / NEW PASSWORD (body#password) — same card */
body#password #content,
body#password .page-content {
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body#password #content-wrapper {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

body#password .cp-auth form {
    margin: 0;
}

body#password .cp-auth .form-fields {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
}

body#password .cp-auth .form-group.row {
    margin: 0 0 16px;
}

body#password .cp-auth .form-fields .form-group.row {
    margin: 0;
}

body#password .cp-auth .form-footer {
    margin: 20px 0 0;
    padding: 0;
    border: 0;
}

body#password .cp-auth .form-footer .btn-primary {
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--cp-primary, #1c3673);
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    transition: background .15s;
}

body#password .cp-auth .form-footer .btn-primary:hover,
body#password .cp-auth .form-footer .btn-primary:focus {
    background: var(--cp-primary-hover, #15295a);
    color: #fff;
}

body#password .cp-auth a.cp-auth-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    border-radius: 10px;
    background: #eef1f7;
    font-size: 15px;
    font-weight: 600;
    color: var(--cp-primary, #1c3673);
    text-decoration: none;
}

body#password .cp-auth a.cp-auth-alt:hover {
    background: #e3e8f2;
}

/* "Back to login" */
.cp-auth-back {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-primary, #1c3673);
}

.cp-auth-back:hover {
    color: var(--cp-primary-hover, #15295a);
    text-decoration: none;
}

.cp-auth-back svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* errors inside the card */
.cp-auth-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fdecef;
    font-size: 14px;
    line-height: 1.5;
    color: #9f1239;
}

.cp-auth-alert p {
    margin: 0;
}

.cp-auth-alert svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-auth-icon.is-ok {
    background: #e7f6ec;
    color: #1e7e3d;
}


/* ==========================================================================
   64. HOVER ON ALL LINKS — like in the footer: a line that "grows"
   from the left (instead of the theme's abrupt underline).
   • With background-image (not ::after) so it doesn't conflict with the
     components' ::before/::after and also covers text spanning 2 lines.
   • :where() = zero specificity: where a component has its own
     background (buttons, pills, cards), it keeps its own.
   • Excluded: buttons, links with icon/image, pagination, tabs, dropdowns,
     footer links (they already have their own).
   ========================================================================== */
a:hover,
a:focus {
    text-decoration: none;
}

:where(a):where(:not(.btn, [class*="btn"], [role="button"], .page-link, .nav-link, .dropdown-item,
    .cpf-col-list a, .cp-slide-link, .thumbnail, .product-thumbnail)):where(:not(:has(img, svg, picture, .material-icons, i))) {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-decoration: none;
    transition: background-size .25s ease, color .15s;
}

:where(a):where(:not(.btn, [class*="btn"], [role="button"], .page-link, .nav-link, .dropdown-item,
    .cpf-col-list a, .cp-slide-link, .thumbnail, .product-thumbnail)):where(:not(:has(img, svg, picture, .material-icons, i))):is(:hover, :focus-visible) {
    background-size: 100% 1px;
    text-decoration: none;
}
/* /64 */

/* 64.1 no classic underline (text-decoration) on any link — only the section 64 line */
a,
a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none !important;
}

/* 64.2 not on products: cards / product titles (lists, carousel, cart, wishlist) */
.product-miniature a,
.js-product-miniature a,
.product-title a,
.product-title,
.product-name a,
.product-line-info a,
.cp-pc a {
    background-image: none !important;
}

/* 61.1 "New products": same width as "Shop by brand" (manufacturerlogo)
   brands: padding clamp(24px, 7vw, 140px) / 32px (≤1199) / 16px (≤767)
   home container: padding clamp(16px, 3vw, 56px) → we add the difference */
#index .cp-pc[data-type="newproducts"] {
    padding-right: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
    padding-left: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
}

@media (max-width: 1199px) {
    #index .cp-pc[data-type="newproducts"] {
        padding-right: max(0px, calc(32px - clamp(16px, 3vw, 56px)));
        padding-left: max(0px, calc(32px - clamp(16px, 3vw, 56px)));
    }
}

@media (max-width: 767px) {
    #index .cp-pc[data-type="newproducts"] {
        padding-right: 0;
        padding-left: 0;
    }
}




/* ==========================================================================
   65. PRODUCT PAGE — image card (sticky) | purchase card · tabs below
   template: catalog/product.tpl (cp-pp) · cards without border · same width as
   the home page sections
   ========================================================================== */

.cp-pp {
    padding-bottom: 24px;
}

.cp-pp > .product-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-right: -12px;
    margin-left: -12px;
}

.cp-pp > .product-container > .cp-pp-col-media,
.cp-pp > .product-container > .cp-pp-col-info {
    padding-right: 12px;
    padding-left: 12px;
}

@media (min-width: 992px) {
    .cp-pp > .product-container > .cp-pp-col-media {
        flex: 0 0 54%;
        max-width: 54%;
    }

    .cp-pp > .product-container > .cp-pp-col-info {
        flex: 0 0 46%;
        max-width: 46%;
    }

    /* the images stay in place while the purchase column scrolls */
    .cp-pp-media {
        position: sticky;
        top: 120px;
    }
}

/* ── cards ── */
.cp-pp-media,
.cp-pp-info {
    border: 0;
    border-radius: 28px;
    background: #fff;
    box-shadow: none;
}

.cp-pp-media {
    position: relative;
    padding: clamp(18px, 2.4vw, 32px);
}

.cp-pp-info {
    padding: clamp(22px, 2.8vw, 40px);
}

body#product .cp-pp-media .page-content,
body#product .cp-pp-media #content {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* ── images ── */
body#product .cp-pp .product-cover {
    position: relative;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
}

body#product .cp-pp .product-cover img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    box-shadow: none;
}

body#product .cp-pp .product-cover .layer {
    border-radius: 20px;
    background: rgba(28, 54, 115, .06);
}

body#product .cp-pp .product-cover .layer .zoom-in {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    font-size: 28px;
    color: var(--cp-primary, #1c3673);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .15);
}

body#product .cp-pp .product-images {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

body#product .cp-pp .product-images > li.thumb-container {
    margin: 0;
}

body#product .cp-pp .product-images > li.thumb-container .thumb {
    width: 84px;
    height: 84px;
    margin: 0;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 16px;
    background: #f5f7fb;
    object-fit: contain;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

body#product .cp-pp .product-images > li.thumb-container .thumb.selected,
body#product .cp-pp .product-images > li.thumb-container .thumb:hover {
    border-color: var(--cp-primary, #1c3673);
    background: #fff;
}

/* discount label at top left of the image */
body#product .cp-pp .product-flags {
    top: clamp(28px, 3.4vw, 48px);
    left: clamp(28px, 3.4vw, 48px);
    z-index: 2;
}

body#product .cp-pp .product-flags .product-flag {
    margin: 0 0 6px;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 800;
}

body#product .cp-pp .product-flags .product-flag.discount,
body#product .cp-pp .product-flags .product-flag.discount-percentage,
body#product .cp-pp .product-flags .product-flag.on-sale {
    background: #fdecef;
    color: #d61f45;
}

/* ── brand · code ── */
.cp-pp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin-bottom: 14px;
}

.cp-pp-brand {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef1f7;
    background-image: none !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cp-primary, #1c3673);
    text-decoration: none;
    transition: background .2s;
}

.cp-pp-brand:hover {
    background: #e3e9f5;
    color: var(--cp-primary, #1c3673);
}

.cp-pp-ref {
    font-size: 13.5px;
    color: #8b93a1;
}

.cp-pp-ref strong {
    font-weight: 700;
    color: #4b5563;
}

/* ── title ── */
body#product .cp-pp-title {
    margin: 0 0 18px;
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-transform: none;
    color: #1f2937;
}

/* ── price ── */
body#product .cp-pp .product-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: baseline;
    margin: 0 0 18px;
    padding: 18px 20px;
    border-radius: 20px;
    background: #f5f7fb;
}

body#product .cp-pp .product-prices .product-discount {
    order: 2;
    margin: 0;
}

body#product .cp-pp .product-prices .regular-price {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #9aa1ad;
    text-decoration: line-through;
}

body#product .cp-pp .product-prices .product-price {
    order: 1;
    margin: 0;
}

body#product .cp-pp .product-prices .current-price {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
}

body#product .cp-pp .product-prices .current-price-value {
    font-size: clamp(32px, 3vw, 44px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: #1f2937;
}

body#product .cp-pp .product-prices .product-price.has-discount .current-price-value {
    color: #d61f45;
}

body#product .cp-pp .product-prices .discount {
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fdecef;
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
    color: #d61f45;
}

body#product .cp-pp .product-prices .tax-shipping-delivery-label {
    order: 3;
    flex-basis: 100%;
    margin: 2px 0 0;
    font-size: 13px;
    color: #8b93a1;
}

body#product .cp-pp .product-prices .tax-shipping-delivery-label:empty {
    display: none;
}

/* short description */
body#product .cp-pp .product-information > .product-description {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.65;
    color: #6b7280;
}

body#product .cp-pp .product-information > .product-description p:last-child {
    margin-bottom: 0;
}

/* ── quantity + purchase + favorites ── */
body#product .cp-pp .product-actions .control-label {
    display: none;
}

body#product .cp-pp .product-add-to-cart .product-quantity {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: stretch;
    margin: 0;
}

body#product .cp-pp .product-add-to-cart .product-quantity .qty,
body#product .cp-pp .product-add-to-cart .product-quantity .add {
    float: none;
    margin: 0;
}

body#product .cp-pp .product-add-to-cart .product-quantity .add {
    flex: 1 1 auto;
}

/* quantity (theme's touchspin) */
body#product .cp-pp .product-add-to-cart .bootstrap-touchspin {
    display: flex;
    width: 120px;
    height: 58px;
    overflow: hidden;
    border: 1.5px solid #dcdfe6;
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin #quantity_wanted {
    flex: 1 1 auto;
    width: auto;
    height: 100%;
    padding: 0 0 0 16px;
    border: 0;
    background: transparent;
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical {
    display: flex;
    flex-direction: column;
    width: 38px;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical .btn {
    flex: 1 1 50%;
    height: auto;
    border: 0;
    border-left: 1px solid #eceef2;
    background: #fafbfd;
    color: #6b7280;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical .btn:hover {
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
    border-bottom: 1px solid #eceef2;
}

/* "Buy" button */
body#product .cp-pp .product-add-to-cart .add-to-cart {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    padding: 0 24px;
    border: 0;
    border-radius: 16px;
    background: var(--cp-primary, #1c3673);
    box-shadow: 0 14px 28px -14px rgba(28, 54, 115, .7);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    transition: background .2s, transform .2s, box-shadow .2s;
}

body#product .cp-pp .product-add-to-cart .add-to-cart:hover:not(:disabled) {
    background: var(--cp-primary-hover, #15295a);
    box-shadow: 0 18px 32px -14px rgba(28, 54, 115, .8);
    transform: translateY(-1px);
}

body#product .cp-pp .product-add-to-cart .add-to-cart:disabled {
    background: #c9d2e3;
    box-shadow: none;
}

body#product .cp-pp .product-add-to-cart .add-to-cart .material-icons {
    margin: 0;
    font-size: 22px;
}

/* favorites: circle next to the button (text hidden) */
body#product .cp-pp .product-add-to-cart .cpwl-btn {
    display: flex;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #dcdfe6;
    border-radius: 16px;
    background: #fff;
    color: #1f2937;
    transition: border-color .2s, color .2s, background .2s;
}

body#product .cp-pp .product-add-to-cart .cpwl-btn:hover,
body#product .cp-pp .product-add-to-cart .cpwl-btn[aria-pressed="true"] {
    border-color: #fbc7d2;
    background: #fdecef;
    color: #d61f45;
}

body#product .cp-pp .product-add-to-cart .cpwl-btn .cpwl-btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body#product .cp-pp .product-add-to-cart .cpwl-btn svg {
    width: 24px;
    height: 24px;
}

/* availability */
body#product .cp-pp .product-availability {
    display: block;
    margin: 14px 0 0;
}

body#product .cp-pp .product-availability .alert {
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 600;
}

body#product .cp-pp .product-availability .alert-success {
    background: #e7f6ec;
    color: #1e7e3d;
}

body#product .cp-pp .product-availability .alert-warning {
    background: #fff4e0;
    color: #a15c00;
}

body#product .cp-pp .product-availability .alert-danger {
    background: #fdecef;
    color: #b4233f;
}

body#product .cp-pp .product-availability .alert-content-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

body#product .cp-pp .product-availability .material-icons {
    font-size: 20px;
}

body#product .cp-pp .product-minimal-quantity:empty {
    display: none;
}

/* sharing: small line */
body#product .cp-pp .product-additional-info {
    margin-top: 16px;
}

body#product .cp-pp .social-sharing {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0;
    font-size: 13.5px;
    color: #8b93a1;
}

body#product .cp-pp .social-sharing ul {
    display: flex;
    gap: 6px;
    margin: 0;
}

body#product .cp-pp .social-sharing li {
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 50%;
    background-color: #f3f5f9;
    background-size: 18px;
    box-shadow: none;
    transition: background-color .2s;
}

body#product .cp-pp .social-sharing li:hover {
    background-color: #e3e9f5;
}

/* guarantees: 3 small cards */
body#product .cp-pp .blockreassurance_product {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid #eceef2;
}

body#product .cp-pp .blockreassurance_product > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    margin: 0;
    padding: 14px;
    border-radius: 16px;
    background: #f5f7fb;
}

body#product .cp-pp .blockreassurance_product > div:empty,
body#product .cp-pp .blockreassurance_product > .clearfix {
    display: none;
}

body#product .cp-pp .blockreassurance_product .item-product {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 0 4px;
    border-radius: 12px;
    background: #fff;
}

body#product .cp-pp .blockreassurance_product .item-product img,
body#product .cp-pp .blockreassurance_product .item-product svg {
    width: 22px;
    height: 22px;
}

body#product .cp-pp .blockreassurance_product .block-title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2937 !important;
}

body#product .cp-pp .blockreassurance_product p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #8b93a1 !important;
}

/* ── full-width tabs ── */
.cp-pp-tabs {
    margin-top: 24px;
    padding: clamp(20px, 2.6vw, 36px);
    border: 0;
    border-radius: 28px;
    background: #fff;
    box-shadow: none;
}

.cp-pp-tabs .nav-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 22px;
    padding: 5px;
    border: 0;
    border-radius: 16px;
    background: #f3f5f9;
}

.cp-pp-tabs .nav-tabs .nav-item {
    margin: 0;
}

.cp-pp-tabs .nav-tabs .nav-link {
    padding: 10px 18px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    background-image: none !important;
    font-size: 14.5px;
    font-weight: 700;
    color: #6b7280;
    transition: background .2s, color .2s;
}

.cp-pp-tabs .nav-tabs .nav-link:hover {
    color: #1f2937;
}

.cp-pp-tabs .nav-tabs .nav-link.active {
    border: 0;
    background: #fff;
    color: var(--cp-primary, #1c3673);
    box-shadow: 0 4px 14px -6px rgba(28, 54, 115, .25);
}

.cp-pp-tabs .tab-content {
    padding: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
}

.cp-pp-tabs .product-features > .data-sheet,
.cp-pp-tabs .product-features .data-sheet {
    display: grid;
    grid-template-columns: minmax(140px, 260px) 1fr;
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #f5f7fb;
}

.cp-pp-tabs .data-sheet .name,
.cp-pp-tabs .data-sheet .value {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #fff;
    background: transparent;
    font-size: 14px;
}

.cp-pp-tabs .data-sheet .name {
    font-weight: 700;
    color: #1f2937;
}

/* ── reviews ── */
body#product #product-comments-list-header {
    margin: 32px 0 12px;
    padding: 0;
}

body#product #product-comments-list-header .comments-nb {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    color: #1f2937;
}

body#product #empty-product-comment {
    padding: 22px;
    border-radius: 20px;
    background: #fff;
    font-size: 15px;
    color: #8b93a1;
    text-align: center;
}

/* ── "more products in the same category" ── */
body#product .featured-products[data-type="categoryproducts"] {
    margin-top: 40px !important;
}

body#product .featured-products[data-type="categoryproducts"] > h2 {
    margin: 0 0 20px;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 800;
    letter-spacing: -.02em;
    text-transform: none;
    color: #1f2937;
}

/* ── tablet / mobile ── */
@media (max-width: 991px) {
    .cp-pp > .product-container > .cp-pp-col-media,
    .cp-pp > .product-container > .cp-pp-col-info {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cp-pp-media {
        margin-bottom: 14px;
    }
}

@media (max-width: 575px) {
    .cp-pp-media,
    .cp-pp-info,
    .cp-pp-tabs {
        border-radius: 22px;
    }

    body#product .cp-pp .product-images > li.thumb-container .thumb {
        width: 68px;
        height: 68px;
    }

    body#product .cp-pp .product-add-to-cart .bootstrap-touchspin {
        width: 100px;
        height: 54px;
    }

    body#product .cp-pp .product-add-to-cart .add-to-cart,
    body#product .cp-pp .product-add-to-cart .cpwl-btn {
        height: 54px;
    }

    body#product .cp-pp .product-add-to-cart .cpwl-btn {
        flex-basis: 54px;
        width: 54px;
    }

    body#product .cp-pp .blockreassurance_product {
        grid-template-columns: minmax(0, 1fr);
    }

    body#product .cp-pp .blockreassurance_product > div {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    body#product .cp-pp .blockreassurance_product .item-product {
        flex: 0 0 38px;
        margin: 0;
    }

    .cp-pp-tabs .data-sheet {
        grid-template-columns: 1fr 1fr;
    }
}
/* sticky images (must come after the card's position: relative) */
@media (min-width: 992px) {
    .cp-pp-media {
        position: sticky;
        top: 120px;
    }
}

@media (max-width: 991px) {
    .cp-pp-media {
        top: auto;
    }
}
/* /65 */



/* ==========================================================================
   66. MODULE PRODUCT LISTS = home page carousel (cp-carousel.tpl)
   + the product page at the same width as the home page (same margins, spacing)
   ========================================================================== */
/* product page: container like the home page, inner padding like its sections */
body#product #wrapper > .container {
    width: 100%;
    max-width: none;
    padding-right: clamp(16px, 3vw, 56px);
    padding-left: clamp(16px, 3vw, 56px);
}

body#product {
    --cp-inset: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
}

body#product #wrapper .breadcrumb,
body#product .cp-pp {
    padding-right: var(--cp-inset);
    padding-left: var(--cp-inset);
}

@media (max-width: 1199px) {
    body#product {
        --cp-inset: max(0px, calc(32px - clamp(16px, 3vw, 56px)));
    }
}

@media (max-width: 767px) {
    body#product {
        --cp-inset: 0px;
    }
}

/* module carousels: spacing top / bottom (on all pages) */
.cp-pc[data-type="categoryproducts"],
.cp-pc[data-type="crossselling"],
.cp-pc[data-type="viewedproduct"],
.cp-pc[data-type="accessories"],
.cp-pc[data-type="popularproducts"],
.cp-pc[data-type="bestsellers"],
.cp-pc[data-type="onsale"] {
    margin: clamp(48px, 5vw, 72px) 0 clamp(40px, 4vw, 56px);
}

/* on the product page: divider between consecutive carousels */
body#product .cp-pc + .cp-pc {
    margin-top: clamp(32px, 4vw, 56px);
}

/* the old "featured-products" header is no longer needed */
body#product .featured-products[data-type="categoryproducts"] {
    margin-top: 0 !important;
}
/* /66 */



/* ==========================================================================
   67. PRODUCT PAGE v2 (hartorama style, with our own colors)
   thumbnails vertical on the left · header with category / codes / brand logo ·
   quantity − 1 + · info strip · sticky purchase bar
   ========================================================================== */

/* ── images: thumbnails vertical on the left (desktop) ── */
@media (min-width: 992px) {
    body#product .cp-pp .images-container {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }

    body#product .cp-pp .images-container .product-cover {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    body#product .cp-pp .images-container .js-qv-mask {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        max-height: 520px;
        margin: 0;
        overflow-y: auto;
        scrollbar-width: none;
    }

    body#product .cp-pp .images-container .js-qv-mask::-webkit-scrollbar {
        display: none;
    }

    body#product .cp-pp .product-images {
        flex-direction: column;
        width: auto !important;
    }

    body#product .cp-pp .product-images > li.thumb-container .thumb {
        width: 84px;
        height: 84px;
    }

    /* the discount label on the large image (not on the thumbnails) */
    body#product .cp-pp .product-flags {
        left: calc(clamp(18px, 2.4vw, 32px) + 88px + 16px + 14px);
    }
}

body#product .cp-pp .scroll-box-arrows {
    display: none !important;
}

/* ── purchase card header ── */
.cp-pp-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.cp-pp-head-main {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-pp-cat {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cp-primary, #1c3673);
}

.cp-pp-cat svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body#product .cp-pp-head .cp-pp-title {
    margin: 0 0 12px;
}

.cp-pp-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #8b93a1;
}

.cp-pp-codes li + li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 12px;
    vertical-align: -1px;
    background: #dcdfe6;
}

.cp-pp-codes strong {
    font-weight: 700;
    color: #4b5563;
}

/* brand logo at top right (otherwise the name in a "pill") */
.cp-pp-head .cp-pp-brand {
    flex: 0 0 auto;
    padding: 0;
    border-radius: 14px;
    background: none;
}

.cp-pp-head .cp-pp-brand img {
    display: block;
    width: 120px;
    height: 60px;
    object-fit: contain;
}

.cp-pp-head .cp-pp-brand span {
    display: none;
}

.cp-pp-head .cp-pp-brand.is-text {
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef1f7;
}

.cp-pp-head .cp-pp-brand.is-text span {
    display: inline;
}

/* the old "brand · code" line no longer exists */
.cp-pp-meta {
    display: none;
}

/* ── quantity: − 1 + horizontal (theme's touchspin) ── */
body#product .cp-pp .product-add-to-cart .bootstrap-touchspin {
    width: 140px;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical {
    display: contents;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical .btn {
    position: static;
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .bootstrap-touchspin-down {
    order: 0;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin #quantity_wanted {
    order: 1;
    padding: 0;
    text-align: center;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .bootstrap-touchspin-up {
    order: 2;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical .btn .material-icons {
    display: none;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical .btn::before {
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    color: #6b7280;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .bootstrap-touchspin-down::before {
    content: "−";
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .bootstrap-touchspin-up::before {
    content: "+";
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical .btn:hover {
    background: #f3f5f9;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical .btn:hover::before {
    color: var(--cp-primary, #1c3673);
}

/* ── strip: shipping · phone orders ── */
.cp-pp-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 20px 0 0;
    padding: 14px 18px;
    border-radius: 16px;
    background: #f5f7fb;
    list-style: none;
}

.cp-pp-perks li {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.cp-pp-perks svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--cp-primary, #1c3673);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-pp-perks a {
    font-weight: 800;
    color: var(--cp-primary, #1c3673);
}

/* ── sticky purchase bar (like you.gr) ──
   desktop: white bar below the header (top = --cp-sticky-top from custom.js)
   mobile: bar at the bottom with price + cart */
.cp-pp-sticky {
    position: fixed;
    top: var(--cp-sticky-top, 0px);
    right: 0;
    left: 0;
    z-index: 900;
    padding: 10px clamp(16px, 3vw, 56px);
    background: #fff;
    box-shadow: 0 14px 28px -22px rgba(15, 23, 42, .35);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: transform .28s cubic-bezier(.22, .8, .3, 1), opacity .2s ease, visibility 0s linear .28s;
}

html:has(.hdr.is-menu-open) .cp-pp-sticky.is-visible {
    visibility: hidden;
    opacity: 0;
}

.cp-pp-sticky.is-visible {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: transform .28s cubic-bezier(.22, .8, .3, 1), opacity .2s ease;
}

.cp-pp-sticky-in {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 0 max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
}

/* image + name (click → scroll to the product) */
.cp-pp-sticky-prod {
    display: flex;
    flex: 0 1 360px;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.cp-pp-sticky-img {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    padding: 4px;
    border-radius: 12px;
    background: #f5f7fb;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.cp-pp-sticky-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cp-pp-sticky-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2937;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cp-pp-sticky-ref {
    font-size: 12px;
    font-weight: 300;
    color: #8b93a1;
}

/* section links */
.cp-pp-sticky-nav {
    display: flex;
    flex: 1 1 auto;
    gap: 4px;
    justify-content: center;
    min-width: 0;
}

.cp-pp-sticky-nav a {
    position: relative;
    padding: 10px 14px;
    border-radius: 999px;
    background-image: none !important;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: #4b5563;
    transition: background .15s, color .15s;
}

.cp-pp-sticky-nav a:hover {
    background: #f5f7fb;
    color: var(--cp-primary, #1c3673);
}

.cp-pp-sticky-nav a.is-active {
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

/* price + cart */
.cp-pp-sticky-buy {
    display: flex;
    flex: 0 0 auto;
    gap: 18px;
    align-items: center;
    margin-left: auto;
}

.cp-pp-sticky-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.cp-pp-sticky-old {
    font-size: 13px;
    color: #9ca3af;
}

.cp-pp-sticky-price {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #1f2937;
}

.cp-pp-sticky-price.is-sale {
    color: #d61f45;
}

.cp-pp-sticky-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: 14px;
    background: var(--cp-primary, #1c3673);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    cursor: pointer;
    transition: background .2s;
}

.cp-pp-sticky-btn:hover {
    background: var(--cp-primary-hover, #15295a);
}

.cp-pp-sticky-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1199px) {
    .cp-pp-sticky-in {
        gap: 16px;
        padding: 0;
    }

    .cp-pp-sticky-ref {
        display: none;
    }
}

/* tablet + mobile: bar at the bottom, only price + cart */
@media (max-width: 991px) {
    .cp-pp-sticky {
        top: auto;
        bottom: 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -14px 28px -22px rgba(15, 23, 42, .35);
        transform: translateY(100%);
    }

    .cp-pp-sticky-nav,
    .cp-pp-sticky-ref {
        display: none;
    }

    .cp-pp-sticky-prod {
        flex: 1 1 auto;
    }

    .cp-pp-sticky-buy {
        gap: 12px;
    }

    /* while the bar is visible, backtotop moves up above it */
    html.cp-pp-sticky-on .btt {
        bottom: 96px;
    }
}

@media (max-width: 575px) {
    .cp-pp-sticky-prod {
        display: none;
    }

    .cp-pp-sticky-buy {
        flex: 1 1 auto;
        justify-content: space-between;
        margin: 0;
    }

    .cp-pp-sticky-prices {
        align-items: flex-start;
    }

    .cp-pp-sticky-price {
        font-size: 22px;
    }

    .cp-pp-sticky-btn {
        flex: 1 1 auto;
        justify-content: center;
        max-width: 230px;
        height: 50px;
        padding: 0 16px;
    }
}

@media (max-width: 767px) {
    .cp-pp-head .cp-pp-brand img {
        width: 84px;
        height: 42px;
    }

    .cp-pp-perks {
        flex-direction: column;
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-pp-sticky {
        transition: none;
    }
}
/* fixes: quantity input width · images at full card width */
body#product .cp-pp .product-add-to-cart .bootstrap-touchspin #quantity_wanted {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    max-width: none;
}

body#product .cp-pp .images-container {
    width: 100%;
    max-width: none;
}

body#product .cp-pp .images-container .product-cover img {
    width: 100%;
    max-width: 100%;
}
/* the theme limits #content to 452px (for the images) */
body#product .cp-pp-media #content.page-content {
    width: 100%;
    max-width: none;
}
/* /67 */



/* ==========================================================================
   68. PRODUCT PAGE v3: larger images · "Add to cart" with the
   header icon · no shadows on buttons · new "Share"
   ========================================================================== */
/* larger images */
@media (min-width: 992px) {
    .cp-pp > .product-container > .cp-pp-col-media {
        flex: 0 0 58%;
        max-width: 58%;
    }

    .cp-pp > .product-container > .cp-pp-col-info {
        flex: 0 0 42%;
        max-width: 42%;
    }

    body#product .cp-pp .images-container {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    body#product .cp-pp .product-images > li.thumb-container .thumb {
        width: 92px;
        height: 92px;
    }

    body#product .cp-pp .images-container .js-qv-mask {
        max-height: 640px;
    }

    body#product .cp-pp .product-flags {
        left: calc(clamp(18px, 2.4vw, 32px) + 96px + 16px + 14px);
    }
}

/* cart icon (same as the header) on the buttons */
.cp-cart-ico {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* no shadows on buttons */
body#product .cp-pp .product-add-to-cart .add-to-cart,
body#product .cp-pp .product-add-to-cart .add-to-cart:hover,
body#product .cp-pp .product-add-to-cart .add-to-cart:focus,
.cp-pp-sticky-btn,
body#product .cp-pp .cpwl-btn,
body#product .cp-pp .product-cover .layer .zoom-in {
    box-shadow: none !important;
}

body#product .cp-pp .product-add-to-cart .add-to-cart:hover:not(:disabled) {
    transform: none;
}

/* ── "Share": button + menu ── */
.cp-share {
    position: relative;
    display: inline-block;
}

.cp-share-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border: 1.5px solid #e3e7ef;
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}

.cp-share-btn:hover,
.cp-share-btn[aria-expanded="true"] {
    border-color: var(--cp-primary, #1c3673);
    background: #f5f7fb;
    color: var(--cp-primary, #1c3673);
}

.cp-share-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-share-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    display: grid;
    min-width: 230px;
    padding: 6px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 40px -14px rgba(16, 32, 72, .28), 0 0 0 1px rgba(28, 54, 115, .06);
}

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

.cp-share-item {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    background-image: none !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}

.cp-share-item:hover {
    background: #f3f5f9;
    color: #1f2937;
}

.cp-share-item svg {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 50%;
    background: #eef1f7;
    fill: var(--cp-primary, #1c3673);
    stroke: none;
}

.cp-share-item.is-copy svg {
    fill: none;
    stroke: var(--cp-primary, #1c3673);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-share-item.is-facebook svg { background: #e8f0fe; fill: #1877f2; }
.cp-share-item.is-twitter svg { background: #eceff1; fill: #111; }
.cp-share-item.is-pinterest svg { background: #fdecef; fill: #e60023; }

.cp-share-item.is-done span {
    color: #1e7e3d;
}

/* the old share line (if it appears somewhere else) */
body#product .cp-pp .product-additional-info .cp-share {
    margin-top: 2px;
}
/* /68 */

/* 68.1 image slightly smaller, purchase column wider */
@media (min-width: 992px) {
    .cp-pp > .product-container > .cp-pp-col-media {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .cp-pp > .product-container > .cp-pp-col-info {
        flex: 0 0 50%;
        max-width: 50%;
    }

    body#product .cp-pp .images-container .product-cover {
        max-width: 560px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* 68.2 image narrower (44%), purchase column wider (56%) */
@media (min-width: 992px) {
    .cp-pp > .product-container > .cp-pp-col-media {
        flex: 0 0 44%;
        max-width: 44%;
    }

    .cp-pp > .product-container > .cp-pp-col-info {
        flex: 0 0 56%;
        max-width: 56%;
    }
}

/* 68.3 price box: no gray background, compact */
body#product .cp-pp .product-prices {
    gap: 2px 10px;
    margin: 0 0 14px;
    padding: 0;
    border-radius: 0;
    background: none;
}

body#product .cp-pp .product-prices .tax-shipping-delivery-label {
    margin-top: 0;
}

/* 68.4 price even more compact: without "incl. VAT" and without "Discount %" (the -13% stays on the image) */
body#product .cp-pp .product-prices .tax-shipping-delivery-label,
body#product .cp-pp .product-prices .discount {
    display: none;
}

body#product .cp-pp .product-prices {
    gap: 0 10px;
    margin: 0 0 10px;
    line-height: 1;
}

body#product .cp-pp .product-prices .product-price,
body#product .cp-pp .product-prices .current-price {
    margin: 0;
    padding: 0;
}

body#product .cp-pp .product-prices .regular-price {
    font-size: 17px;
}



/* ==========================================================================
   69. "BRANDS" PAGE (catalog/manufacturers.tpl)
   header + search · top brands (logos) · A–Z index (sticky) ·
   chips per letter · same width as the home page
   ========================================================================== */
body#manufacturer #wrapper > .container {
    width: 100%;
    max-width: none;
    padding-right: clamp(16px, 3vw, 56px);
    padding-left: clamp(16px, 3vw, 56px);
}

.cp-bp {
    --cp-inset: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
    padding: 8px var(--cp-inset) 56px;
}

body#manufacturer #wrapper .breadcrumb {
    padding-right: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
    padding-left: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
}

/* ── header ── */
.cp-bp-head {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    padding: clamp(24px, 3vw, 40px);
    border-radius: 28px;
    background: #fff;
}

.cp-bp-title {
    margin: 0 0 6px;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-transform: none;
    color: #1f2937;
}

.cp-bp-sub {
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    color: #8b93a1;
}

.cp-bp-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: center;
}

.cp-bp-search {
    width: min(360px, 100%);
}

/* "Also without products" toggle */
.cp-bp-toggle {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
}

.cp-bp-toggle input {
    position: absolute;
    opacity: 0;
}

.cp-bp-switch {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #d5dbe7;
    transition: background .2s;
}

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

.cp-bp-toggle input:checked + .cp-bp-switch {
    background: var(--cp-primary, #1c3673);
}

.cp-bp-toggle input:checked + .cp-bp-switch::after {
    transform: translateX(18px);
}

.cp-bp-toggle input:focus-visible + .cp-bp-switch {
    box-shadow: 0 0 0 3px rgba(28, 54, 115, .2);
}

/* ── top brands ── */
.cp-bp-h2 {
    margin: 0 0 16px;
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    color: #1f2937;
}

.cp-bp-top {
    margin-bottom: 36px;
}

.cp-bp-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-bp-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    padding: 10px 14px;
    border-radius: 18px;
    background: #fff;
    background-image: none !important;
    transition: transform .2s ease;
}

.cp-bp-logo:hover {
    transform: translateY(-3px);
}

.cp-bp-logo img {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 2 / 1;
    object-fit: contain;
}

/* ── letter index (sticky) ── */
.cp-bp-index {
    position: sticky;
    top: 96px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.cp-bp-index:empty {
    display: none;
}

.cp-bp-index a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 10px;
    background-image: none !important;
    font-size: 14px;
    font-weight: 800;
    color: #4b5563;
    transition: background .15s, color .15s;
}

.cp-bp-index a:hover,
.cp-bp-index a.is-active {
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

/* ── groups per letter ── */
.cp-bp-groups {
    display: grid;
    gap: 14px;
}

.cp-bp-group {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 18px 20px;
    border-radius: 22px;
    background: #fff;
    scroll-margin-top: 170px;
}

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

.cp-bp-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 16px;
    background: #eef1f7;
    font-size: 24px;
    font-weight: 800;
    color: var(--cp-primary, #1c3673);
}

.cp-bp-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 6px 0 0;
    list-style: none;
}

.cp-bp-list li[hidden] {
    display: none;
}

.cp-bp-chip {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 8px 8px 8px 14px;
    border-radius: 999px;
    background: #f5f7fb;
    background-image: none !important;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    transition: background .15s, color .15s;
}

.cp-bp-chip:hover {
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

.cp-bp-count {
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: #6b7280;
}

.cp-bp-chip:hover .cp-bp-count {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.cp-bp-empty {
    padding: 28px;
    border-radius: 22px;
    background: #fff;
    font-size: 15px;
    color: #8b93a1;
    text-align: center;
}

@media (max-width: 1199px) {
    .cp-bp {
        --cp-inset: max(0px, calc(32px - clamp(16px, 3vw, 56px)));
    }
}

@media (max-width: 767px) {
    .cp-bp {
        --cp-inset: 0px;
    }

    .cp-bp-head {
        border-radius: 22px;
    }

    .cp-bp-tools,
    .cp-bp-search {
        width: 100%;
    }

    .cp-bp-index {
        top: 64px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cp-bp-index::-webkit-scrollbar {
        display: none;
    }

    .cp-bp-group {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 16px;
    }

    .cp-bp-letter {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .cp-bp-logo {
        height: 80px;
    }
}
/* /69 */


/* ==========================================================================
   70. BREADCRUMB (everywhere) · "back" button + path
   white circle with arrow → previous level (breadcrumb.tpl) ·
   path in plain text with a thin " / " · current page dark ·
   on mobile the path scrolls horizontally
   ========================================================================== */
body #wrapper .breadcrumb {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 0 0 14px;
    padding-top: 20px;
    padding-bottom: 16px;
    background: none;
    font-family: var(--cp-font, inherit);
}

body #wrapper .breadcrumb::after {
    display: none;
}

.cp-bc-back {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    background-image: none !important;
    color: var(--cp-primary, #1c3673);
    transition: background .15s, color .15s, transform .15s;
}

.cp-bc-back:hover,
.cp-bc-back:focus-visible {
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

.cp-bc-back:hover svg {
    transform: translateX(-2px);
}

.cp-bc-back svg {
    transition: transform .15s;
}

body #wrapper .breadcrumb ol {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    list-style: none;
    white-space: nowrap;
}

body #wrapper .breadcrumb ol::-webkit-scrollbar {
    display: none;
}

body #wrapper .breadcrumb li {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    font-size: 14px;
    line-height: 1.4;
    color: #8b93a1;
}

body #wrapper .breadcrumb li::after {
    content: "/";
    margin: 0 12px;
    font-weight: 300;
    color: #c3c9d4;
}

body #wrapper .breadcrumb li:last-child::after {
    display: none;
}

body #wrapper .breadcrumb li a {
    font-weight: 500;
    color: #6b7280;
    transition: color .15s;
}

body #wrapper .breadcrumb li a:hover {
    color: var(--cp-primary, #1c3673);
}

body #wrapper .breadcrumb li:last-child {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 700;
    color: #1f2937;
}

body #wrapper .breadcrumb li:last-child > span {
    overflow: hidden;
    max-width: 60ch;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    body #wrapper .breadcrumb {
        gap: 10px;
        margin-bottom: 6px;
        padding-top: 12px;
        padding-bottom: 10px;
    }

    .cp-bc-back {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    body #wrapper .breadcrumb li {
        font-size: 13px;
    }

    body #wrapper .breadcrumb li::after {
        margin: 0 8px;
    }

    body #wrapper .breadcrumb li:last-child > span {
        max-width: none;
    }
}
/* /70 */


/* ==========================================================================
   71. PRODUCT · mobile: quantity + ♡ on the 1st row, "Add to cart" below
   (on one row they didn't fit → the page grew wider and caused horizontal scroll)
   ========================================================================== */
@media (max-width: 575px) {
    body#product .cp-pp .product-add-to-cart .product-quantity {
        flex-wrap: wrap;
    }

    body#product .cp-pp .product-add-to-cart .product-quantity .qty {
        flex: 1 1 0;
        order: 1;
        min-width: 0;
    }

    body#product .cp-pp .product-add-to-cart .bootstrap-touchspin {
        width: 100%;
    }

    body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical .btn {
        flex-basis: 56px;
        width: 56px;
    }

    body#product .cp-pp .product-add-to-cart .cpwl-btn {
        order: 2;
    }

    body#product .cp-pp .product-add-to-cart .product-quantity .add {
        flex: 1 1 100%;
        order: 3;
        min-width: 0;
    }

    body#product .cp-pp .product-add-to-cart .add-to-cart {
        padding: 0 16px;
    }
}
/* /71 */



/* ==========================================================================
   72. PRODUCT · purchase box
   availability subtle at the top (dot + text) · quantity in a soft
   box with round −/+ · soft heart · loading on −/+, typing, heart
   ========================================================================== */
body#product .cp-pp .product-add-to-cart .product-availability {
    margin: 0 0 12px;
}

body#product .cp-pp .product-add-to-cart .product-availability:empty,
body#product .cp-pp .product-add-to-cart .product-availability:not(:has(.alert)) {
    display: none;
}

body#product .cp-pp .product-add-to-cart .product-availability .alert {
    display: inline-flex;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
}

body#product .cp-pp .product-add-to-cart .product-availability .alert-content-wrapper {
    gap: 9px;
}

body#product .cp-pp .product-add-to-cart .product-availability .material-icons {
    display: none;
}

/* dot with a soft "pulse" */
body#product .cp-pp .product-add-to-cart .product-availability .alert-content-wrapper::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: cp-avail-pulse 2.2s ease-out infinite;
}

body#product .cp-pp .product-add-to-cart .product-availability .alert-success {
    color: #0d9488;
}

body#product .cp-pp .product-add-to-cart .product-availability .alert-warning {
    color: #c27803;
}

body#product .cp-pp .product-add-to-cart .product-availability .alert-danger {
    color: #d61f45;
}

body#product .cp-pp .product-add-to-cart .product-availability small {
    font-size: 12.5px;
    font-weight: 400;
    color: #8b93a1;
}

@keyframes cp-avail-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent);
    }

    70%,
    100% {
        box-shadow: 0 0 0 7px transparent;
    }
}

/* quantity: soft box, −/+ in white circles */
body#product .cp-pp .product-add-to-cart .bootstrap-touchspin {
    position: relative;
    align-items: center;
    padding: 0 7px;
    border: 0;
    background: #f5f7fb;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical .btn {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #1f2937;
    transition: background .15s, color .15s;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical .btn:hover {
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical .btn:hover::before {
    color: #fff;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin #quantity_wanted {
    font-size: 17px;
    font-weight: 800;
}

/* heart: soft box without border */
body#product .cp-pp .product-add-to-cart .cpwl-btn {
    position: relative;
    border: 0;
    background: #f5f7fb;
    color: var(--cp-primary, #1c3673);
}

body#product .cp-pp .product-add-to-cart .cpwl-btn:hover,
body#product .cp-pp .product-add-to-cart .cpwl-btn[aria-pressed="true"] {
    border: 0;
    background: #fdecef;
    color: #d61f45;
}

/* "Add to cart" */
body#product .cp-pp .product-add-to-cart .add-to-cart {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

/* ── loading ── */
/* −/+ pressed or quantity changing: spinner in place of the number (custom.js → .cp-qty-busy) */
body#product .cp-pp .product-add-to-cart .bootstrap-touchspin.cp-qty-busy #quantity_wanted {
    color: transparent;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin.cp-qty-busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid color-mix(in srgb, var(--cp-primary, #1c3673) 22%, transparent);
    border-top-color: var(--cp-primary, #1c3673);
    border-radius: 50%;
    animation: cp-spin .7s linear infinite;
    pointer-events: none;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin.cp-qty-busy .btn {
    pointer-events: none;
}

/* the −/+ don't show their own spinner (it shows on the number) */
body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .btn.cp-btn-loading {
    color: #1f2937 !important;
}

body#product .cp-pp .product-add-to-cart .bootstrap-touchspin .btn.cp-btn-loading::after {
    content: none;
}

/* heart: spinner while the AJAX runs (cpwishlist → .is-busy) */
body#product .cp-pp .product-add-to-cart .cpwl-btn.is-busy svg {
    visibility: hidden;
}

body#product .cp-pp .product-add-to-cart .cpwl-btn.is-busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: cp-spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    body#product .cp-pp .product-add-to-cart .product-availability .alert-content-wrapper::before {
        animation: none;
    }
}

/* description: open letter spacing, more breathing room */
body#product .cp-pp .product-information > .product-description {
    font-weight: 300;
    line-height: 1.75;
}

.cp-pp-tabs .tab-content {
    font-weight: 300;
    line-height: 1.85;
}

.cp-pp-tabs .tab-content #description {
    max-width: 920px;
    padding: 6px clamp(4px, 1.5vw, 20px) 10px;
}

.cp-pp-tabs .tab-content #description .product-description p {
    margin: 0 0 1.1em;
}

.cp-pp-tabs .tab-content #description .product-description :is(strong, b, h2, h3, h4) {
    font-weight: 700;
    color: #1f2937;
}
/* /72 */


/* ==========================================================================
   73. PRODUCT · sticky images on the left (desktop)
   the column takes the full row height (otherwise it has no room to "stick")·
   when the purchase bar is visible, it moves down below it (--cp-pp-offset from custom.js)
   ========================================================================== */
@media (min-width: 992px) {
    .cp-pp > .product-container > .cp-pp-col-media {
        align-self: stretch;
    }

    .cp-pp > .product-container > .cp-pp-col-media > .cp-pp-media {
        position: sticky;
        top: 120px;
        transition: top .28s cubic-bezier(.22, .8, .3, 1);
    }

    html.cp-pp-sticky-on .cp-pp > .product-container > .cp-pp-col-media > .cp-pp-media {
        top: var(--cp-pp-offset, 190px);
    }
}
/* /73 */


/* ==========================================================================
   74. CART (checkout/cart.tpl)
   same width as the home page · header + steps · white product card
   (image · info · − 1 + · total · delete) · sticky summary on the right
   ========================================================================== */
body#cart #wrapper > .container {
    width: 100%;
    max-width: none;
    padding-right: clamp(16px, 3vw, 56px);
    padding-left: clamp(16px, 3vw, 56px);
}

body#cart {
    --cp-inset: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
}

body#cart #wrapper .breadcrumb,
body#cart .cp-cart {
    padding-right: var(--cp-inset);
    padding-left: var(--cp-inset);
}

body#cart #content-wrapper {
    width: 100%;
    max-width: none;
}

.cp-cart {
    padding-bottom: 56px;
}

/* ── header ── */
.cp-cart-head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 0 22px;
}

.cp-cart-title {
    margin: 0;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-transform: none;
    color: #1f2937;
}

.cp-cart-steps {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 6px;
    border-radius: 999px;
    background: #fff;
    list-style: none;
}

.cp-cart-steps li {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #8b93a1;
}

.cp-cart-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f5f7fb;
    font-size: 12px;
    font-weight: 800;
}

.cp-cart-steps li.is-active {
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-cart-steps li.is-active span {
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

/* ── grid ── */
body#cart .cp-cart-grid {
    margin-right: -12px;
    margin-left: -12px;
}

body#cart .cp-cart-grid > .cart-grid-body,
body#cart .cp-cart-grid > .cart-grid-right {
    padding-right: 12px;
    padding-left: 12px;
}

@media (min-width: 992px) {
    body#cart .cp-cart-grid {
        display: flex;
        align-items: stretch;
    }

    body#cart .cp-cart-grid > .cart-grid-body {
        flex: 0 0 64%;
        max-width: 64%;
    }

    body#cart .cp-cart-grid > .cart-grid-right {
        flex: 0 0 36%;
        max-width: 36%;
    }

    .cp-cart-side {
        position: sticky;
        top: 120px;
    }
}

/* ── cards ── */
body#cart .cp-cart-card,
body#cart .cp-cart-summary {
    margin: 0;
    border: 0;
    border-radius: 28px;
    background: #fff;
    box-shadow: none;
}

body#cart .cp-cart-card {
    padding: 8px clamp(16px, 2.4vw, 32px);
}

body#cart .cp-cart-summary {
    padding: clamp(20px, 2.4vw, 30px);
}

/* ── product rows ── */
body#cart .cart-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

body#cart .cart-items .cart-item {
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid #eef1f7;
}

body#cart .cart-items .cart-item:last-child {
    border-bottom: 0;
}

.cp-cl {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    grid-template-areas:
        "img info del"
        "img qty total";
    gap: 12px 20px;
    align-items: start;
}

.cp-cl-img {
    grid-area: img;
}

.cp-cl-info {
    grid-area: info;
}

.cp-cl-qty {
    grid-area: qty;
}

body#cart .cp-cl-total {
    grid-area: total;
    align-self: center;
}

.cp-cl-actions {
    grid-area: del;
}

body#cart .cp-cl .cp-cl-name,
body#cart .cp-cl .product-line-info {
    text-align: left;
}

.cp-cl > * {
    float: none;
    width: auto;
    padding: 0;
}

.cp-cl-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    padding: 8px;
    border-radius: 18px;
    background: #f5f7fb;
    background-image: none !important;
}

.cp-cl-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.cp-cl-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cp-cl-info .product-line-info {
    margin: 0;
}

body#cart .cp-cl .cp-cl-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
    color: #1f2937;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body#cart .cp-cl .cp-cl-name:hover {
    color: var(--cp-primary, #1c3673);
}

.cp-cl-ref {
    font-size: 12.5px;
    font-weight: 300;
    color: #8b93a1;
}

body#cart .cp-cl .cp-cl-unit {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: baseline;
    margin-top: 2px;
    font-size: 13.5px;
    font-weight: 400;
    color: #6b7280;
}

body#cart .cp-cl .cp-cl-unit .price {
    font-weight: 700;
    color: #1f2937;
}

body#cart .cp-cl .cp-cl-unit .regular-price {
    font-size: 12.5px;
    text-decoration: line-through;
    color: #9ca3af;
}

body#cart .cp-cl .cp-cl-unit .discount {
    margin: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fdecef;
    font-size: 11.5px;
    font-weight: 700;
    color: #d61f45;
}

.cp-cl-attr {
    font-size: 13px;
    color: #6b7280;
}

.cp-cl-custom {
    font-size: 13px;
    font-weight: 600;
}

/* quantity: − 1 + horizontal (theme's touchspin) */
body#cart .cp-cl-qty .bootstrap-touchspin {
    position: relative;
    display: flex;
    align-items: center;
    width: 124px;
    height: 46px;
    padding: 0 4px;
    border: 0;
    border-radius: 14px;
    background: #f5f7fb;
    box-shadow: none;
}

body#cart .cp-cl-qty .bootstrap-touchspin .input-group-addon {
    display: none !important;
}

body#cart .cp-cl-qty .bootstrap-touchspin .input-group-btn-vertical {
    display: contents;
}

body#cart .cp-cl-qty .bootstrap-touchspin .js-cart-line-product-quantity {
    flex: 1 1 0;
    order: 1;
    width: auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    color: #1f2937;
    -moz-appearance: textfield;
}

body#cart .cp-cl-qty .js-cart-line-product-quantity::-webkit-inner-spin-button,
body#cart .cp-cl-qty .js-cart-line-product-quantity::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

body#cart .cp-cl-qty .bootstrap-touchspin .btn-touchspin {
    position: static;
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    font-size: 0;
    color: #1f2937;
    transition: background .15s, color .15s;
}

body#cart .cp-cl-qty .bootstrap-touchspin .btn-touchspin .material-icons {
    display: none;
}

body#cart .cp-cl-qty .bootstrap-touchspin .bootstrap-touchspin-down {
    order: 0;
}

body#cart .cp-cl-qty .bootstrap-touchspin .bootstrap-touchspin-up {
    order: 2;
}

body#cart .cp-cl-qty .bootstrap-touchspin .bootstrap-touchspin-down::before,
body#cart .cp-cl-qty .bootstrap-touchspin .bootstrap-touchspin-up::before {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

body#cart .cp-cl-qty .bootstrap-touchspin .bootstrap-touchspin-down::before {
    content: "−";
}

body#cart .cp-cl-qty .bootstrap-touchspin .bootstrap-touchspin-up::before {
    content: "+";
}

body#cart .cp-cl-qty .bootstrap-touchspin .btn-touchspin:hover {
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

/* quantity loading: spinner in place of the number (custom.js → .cp-qty-busy) */
body#cart .cp-cl-qty .bootstrap-touchspin .btn-touchspin.cp-btn-loading {
    color: #1f2937 !important;
}

body#cart .cp-cl-qty .bootstrap-touchspin .btn-touchspin.cp-btn-loading::after {
    content: none;
}

body#cart .cp-cl-qty .bootstrap-touchspin.cp-qty-busy .js-cart-line-product-quantity {
    color: transparent;
}

body#cart .cp-cl-qty .bootstrap-touchspin.cp-qty-busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid color-mix(in srgb, var(--cp-primary, #1c3673) 22%, transparent);
    border-top-color: var(--cp-primary, #1c3673);
    border-radius: 50%;
    animation: cp-spin .7s linear infinite;
    pointer-events: none;
}

body#cart .cp-cl-qty .bootstrap-touchspin.cp-qty-busy .btn-touchspin {
    pointer-events: none;
}

body#cart .cp-cl-qty .gift-quantity {
    font-weight: 700;
}

/* line total */
body#cart .cp-cl-total {
    text-align: right;
}

body#cart .cp-cl-total .product-price,
body#cart .cp-cl-total strong {
    font-size: 17px;
    font-weight: 800;
    color: #1f2937;
}

/* delete */
body#cart .cp-cl-actions {
    display: flex;
    justify-content: flex-end;
}

body#cart .cp-cl-remove {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f7fb;
    background-image: none !important;
    color: #8b93a1;
    transition: background .15s, color .15s;
}

body#cart .cp-cl-remove:hover {
    background: #fdecef;
    color: #d61f45;
}

body#cart .cp-cl-remove svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body#cart .cp-cl-remove.cp-btn-loading svg {
    visibility: hidden;
}

/* ── "Continue shopping" ── */
.cp-cart-back {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 18px 0 0 6px;
    background-image: none !important;
    font-size: 14px;
    font-weight: 700;
    color: #4b5563;
}

.cp-cart-back svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .15s;
}

.cp-cart-back:hover {
    color: var(--cp-primary, #1c3673);
}

.cp-cart-back:hover svg {
    transform: translateX(-3px);
}

/* ── summary ── */
.cp-cart-sum-title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    color: #1f2937;
}

body#cart .cp-cart-summary .card-block {
    padding: 0;
}

body#cart .cp-cart-summary .cart-summary-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 10px;
    font-size: 14.5px;
    color: #4b5563;
}

body#cart .cp-cart-summary .cart-summary-line::after {
    display: none;
}

body#cart .cp-cart-summary .cart-summary-line .label {
    float: none;
    padding: 0;
    font-size: inherit;
    font-weight: 400;
    text-align: left;
    text-transform: none;
    white-space: normal;
    color: inherit;
}

body#cart .cp-cart-summary .cart-summary-line .value {
    float: none;
    font-weight: 700;
    color: #1f2937;
}

body#cart .cp-cart-summary .cart-summary-line small.value {
    font-weight: 400;
    color: #8b93a1;
}

body#cart .cp-cart-summary .cart-summary-totals {
    margin: 14px 0 0;
    padding-top: 16px;
    border-top: 1px solid #eef1f7;
}

body#cart .cp-cart-summary .cart-summary-line.cart-total {
    align-items: center;
    margin: 0;
    padding: 0;
    background: none;
}

body#cart .cp-cart-summary .cart-summary-line.cart-total .label {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}

body#cart .cp-cart-summary .cart-summary-line.cart-total .value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--cp-primary, #1c3673);
}

/* voucher */
body#cart .cp-cart-summary .block-promo {
    margin: 14px 0 0;
}

body#cart .cp-cart-summary .promo-code-button {
    margin: 0;
    padding: 0;
    text-align: left;
}

body#cart .cp-cart-summary .display-promo .collapse-button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    background-image: none !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    color: var(--cp-primary, #1c3673);
}

body#cart .cp-cart-summary .display-promo .collapse-button::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #eef1f7;
    font-size: 14px;
    line-height: 1;
}

body#cart .cp-cart-summary .promo-code {
    margin: 10px 0 0;
    padding: 0;
    background: none;
}

body#cart .cp-cart-summary .promo-code form {
    display: flex;
    gap: 8px;
}

body#cart .cp-cart-summary .promo-code .promo-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: #f5f7fb;
    font-size: 14px;
    color: #1f2937;
}

body#cart .cp-cart-summary .promo-code .promo-input:focus {
    outline: 2px solid color-mix(in srgb, var(--cp-primary, #1c3673) 30%, transparent);
}

body#cart .cp-cart-summary .promo-code form .btn {
    height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    box-shadow: none;
    text-transform: none;
}

body#cart .cp-cart-summary .promo-code .cancel-promo {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: #8b93a1;
}

body#cart .cp-cart-summary .promo-code .alert {
    margin: 8px 0 0;
    border-radius: 12px;
    font-size: 13px;
}

body#cart .cp-cart-summary .promo-name {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

body#cart .cp-cart-summary .promo-highlighted {
    margin: 12px 0 4px;
    font-size: 13px;
    color: #6b7280;
}

body#cart .cp-cart-summary .promo-discounts {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

/* checkout button */
body#cart .cp-cart-actions {
    margin: 20px 0 0;
    padding: 0;
}

body#cart .cp-cart-actions .cp-cart-go {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    padding: 0 22px;
    border: 0;
    border-radius: 16px;
    background: var(--cp-primary, #1c3673);
    box-shadow: none;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    color: #fff;
}

body#cart .cp-cart-actions .cp-cart-go:hover {
    background: var(--cp-primary-hover, #15295a);
}

body#cart .cp-cart-actions .cp-cart-go svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .15s;
}

body#cart .cp-cart-actions .cp-cart-go:hover svg {
    transform: translateX(3px);
}

body#cart .cp-cart-actions .cp-cart-go.disabled {
    opacity: .45;
}

/* guarantees below the summary */
body#cart .cp-cart-side .cp-trust {
    margin: 16px 0 0;
    padding: 20px 22px;
    border: 0;
    border-radius: 22px;
    background: #fff;
}

/* ── empty cart ── */
.cp-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(36px, 6vw, 72px) 16px;
    text-align: center;
}

.cp-cart-empty-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-cart-empty-ico svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-cart-empty-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
    color: #1f2937;
}

.cp-cart-empty-text {
    margin: 0 0 22px;
    font-size: 15px;
    font-weight: 300;
    color: #6b7280;
}

body#cart .cp-cart-empty .cp-cart-empty-btn {
    height: 50px;
    padding: 0 26px;
    border-radius: 14px;
    box-shadow: none;
    line-height: 50px;
    text-transform: none;
}

/* empty (including after the last item is removed via AJAX): message only */
body#cart .cp-cart.is-empty .cart-grid-right,
body#cart .cp-cart:has(.cp-cart-empty) .cart-grid-right,
body#cart .cp-cart.is-empty .cp-cart-back,
body#cart .cp-cart:has(.cp-cart-empty) .cp-cart-back {
    display: none;
}

body#cart .cp-cart.is-empty .cart-grid-body,
body#cart .cp-cart:has(.cp-cart-empty) .cart-grid-body {
    flex-basis: 100%;
    max-width: 100%;
}

/* ── tablet / mobile ── */
@media (max-width: 1199px) {
    body#cart {
        --cp-inset: max(0px, calc(32px - clamp(16px, 3vw, 56px)));
    }
}

@media (max-width: 991px) {
    body#cart .cp-cart-grid > .cart-grid-right {
        margin-top: 16px;
    }
}

@media (max-width: 767px) {
    body#cart {
        --cp-inset: 0px;
    }

    .cp-cart-head {
        align-items: flex-start;
    }

    .cp-cart-steps li {
        padding-right: 10px;
        font-size: 12.5px;
    }

    body#cart .cp-cart-card,
    body#cart .cp-cart-summary {
        border-radius: 22px;
    }

    .cp-cl {
        grid-template-columns: 76px minmax(0, 1fr) auto;
        gap: 10px 14px;
    }

    .cp-cl-img {
        width: 76px;
        height: 76px;
        border-radius: 14px;
    }

    body#cart .cp-cl-total .product-price,
    body#cart .cp-cl-total strong {
        font-size: 16px;
    }
}
/* /74 */


/* ==========================================================================
   74.1 CART · loading on the summary while the cart refreshes (custom.js → .cp-sum-busy)
   + spacing around "Continue shopping"
   ========================================================================== */
body#cart .cp-cart-summary {
    position: relative;
}

body#cart .cp-cart-summary .cart-detailed-totals,
body#cart .cp-cart-summary .cp-cart-actions {
    transition: opacity .2s ease;
}

body#cart .cp-cart-summary.cp-sum-busy .cart-detailed-totals,
body#cart .cp-cart-summary.cp-sum-busy .cp-cart-actions {
    opacity: .35;
    pointer-events: none;
}

body#cart .cp-cart-summary.cp-sum-busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid color-mix(in srgb, var(--cp-primary, #1c3673) 18%, transparent);
    border-top-color: var(--cp-primary, #1c3673);
    border-radius: 50%;
    animation: cp-spin .7s linear infinite;
}

body#cart .cp-cart-back {
    margin: 26px 0 8px 8px;
    padding: 6px 0;
}
/* /74.1 */


/* --- 74.2 Cart · summary in groups: [Net · VAT · Products value] | [Shipping] | [Total] --- */
body#cart .cp-cart-summary .cp-summary-group:not(:has(.cart-summary-line)) {
    display: none;
}

body#cart .cp-cart-summary .cp-summary-group + .cp-summary-group:has(.cart-summary-line) {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #eef1f7;
}

body#cart .cp-cart-summary .cp-line-net,
body#cart .cp-cart-summary .cp-line-vat {
    font-size: 13.5px;
}

body#cart .cp-cart-summary .cp-line-net .value,
body#cart .cp-cart-summary .cp-line-vat .value {
    font-weight: 600;
    color: #4b5563;
}

body#cart .cp-cart-summary .cp-line-products .label {
    font-weight: 600;
    color: #1f2937;
}


/* --- 74.3 Cart · one line above the Total · voucher always open in a soft box (also in checkout) --- */
body#cart .cp-cart-summary .cart-summary-line.cart-total {
    border: 0;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .block-promo {
    margin: 18px 0 0;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .block-promo .block-promo {
    margin: 0;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher {
    padding: 14px;
    border-radius: 16px;
    background: #f5f7fb;
}

/* the title becomes a plain label (the field is always open) */
:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .display-promo {
    display: block !important;
    margin: 0 0 10px;
    padding: 0;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .display-promo .collapse-button {
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1f2937;
    pointer-events: none;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .display-promo .collapse-button::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: var(--cp-primary, #1c3673);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher #promo-code {
    display: block !important;
    height: auto !important;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code {
    margin: 0;
    padding: 0;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code .cancel-promo {
    display: none;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code form {
    display: flex;
    gap: 8px;
    margin: 0;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code .promo-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #e3e6eb;
    border-radius: 12px;
    background: #fff;
    font-size: 14.5px;
    color: #1f2937;
    outline: 0;
    transition: border-color .15s, box-shadow .15s;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code .promo-input::placeholder {
    color: #9ca3af;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code .promo-input:focus {
    border-color: var(--cp-primary, #1c3673);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-primary, #1c3673) 14%, transparent);
    outline: 0;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code form .btn {
    position: relative;
    flex: 0 0 auto;
    height: 48px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: var(--cp-primary, #1c3673);
    box-shadow: none;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    color: #fff;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code form .btn:hover {
    background: var(--cp-primary-hover, #15295a);
}

/* code error message */
:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code .js-error {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: #fdecef;
    font-size: 13px;
    color: #b4233f;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code .js-error .material-icons {
    font-size: 18px;
    vertical-align: middle;
}

/* vouchers already applied */
:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-name {
    margin: 0 0 10px;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-name .cart-summary-line {
    margin: 0 0 6px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-name .float-xs-right {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    float: none;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-name .material-icons {
    font-size: 18px;
    color: #9ca3af;
}

/* --- 74.4 Voucher · field with floating label (.cp-fl) in cart and checkout --- */
:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code form .cp-promo-fl {
    flex: 1 1 auto;
    min-width: 0;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code .cp-promo-fl > .promo-input {
    width: 100%;
    height: 52px;
    padding: 20px 14px 4px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code .cp-promo-fl > label {
    top: 26px;
    font-size: 14px;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code .cp-promo-fl:focus-within > label,
:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code .cp-promo-fl > .promo-input:not(:placeholder-shown) + label {
    top: 15px;
    font-size: 11.5px;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .promo-code form .btn {
    height: 52px;
}

/* checkout: the voucher box without the theme's extra margins */
body#checkout #js-checkout-summary .block-promo {
    padding: 0;
}

body#checkout #js-checkout-summary .cart-voucher {
    margin: 4px 0 8px;
}

/* voucher: no background on the box (transparent), only label + field + button */
:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

/* voucher: same title (left, with icon) in checkout too */
:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .display-promo {
    text-align: left;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .display-promo .collapse-button {
    display: inline-flex;
    align-items: center;
    background-image: none !important;
    text-decoration: none;
}

/* voucher without accordion: title "Have a voucher?" as plain text with a tag icon */
:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .cp-promo-title {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 10px;
    padding: 0;
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    color: #1f2937;
}

:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-voucher .cp-promo-title::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: var(--cp-primary, #1c3673);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* spacing between "Final Amount Payable" and "Have a voucher?" */
:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .cart-summary-totals + .block-promo,
:is(body#cart .cp-cart-summary, body#checkout #js-checkout-summary) .block-promo:has(.cp-promo-title) {
    margin-top: 34px;
}

/* --- 74.5 Cart · sticky summary: position from custom.js (--cp-side-top), so the button is always visible --- */
@media (min-width: 992px) {
    body#cart .cp-cart-grid > .cart-grid-right {
        align-self: stretch;
    }

    body#cart .cp-cart-grid > .cart-grid-right > .cp-cart-side {
        position: sticky;
        top: var(--cp-side-top, 120px);
    }
}


/* ==========================================================================
   75. EMPTY PRODUCT LIST (catalog/_partials/cp-empty-listing.tpl)
   white card across the full width · icon in a soft circle · title · text ·
   actions (back to parent / phone / contact) ·
   the empty filters column is hidden
   ========================================================================== */
body #left-column:has(+ #content-wrapper .cp-empty),
body #wrapper .row:has(.cp-empty) > #left-column {
    display: none;
}

body #wrapper .row:has(.cp-empty) > #content-wrapper {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

/* the listing row is a grid (filters 290px | products): one column when empty */
body #wrapper .row:has(.cp-empty) {
    grid-template-columns: minmax(0, 1fr) !important;
}

body #wrapper .row:has(.cp-empty) #products,
body #wrapper .row:has(.cp-empty) #js-product-list-header,
body #wrapper .row:has(.cp-empty) #js-product-list-footer {
    grid-column: 1 / -1 !important;
}

body #js-product-list .cp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: none;
    margin: 0;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
    border: 0;
    border-radius: 28px;
    background: #fff;
    box-shadow: none;
    text-align: center;
}

.cp-empty-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-empty-ico svg {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body #js-product-list .cp-empty .cp-empty-title {
    margin: 0 0 8px;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    color: #1f2937;
}

.cp-empty-text {
    max-width: 520px;
    margin: 0 0 28px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: #6b7280;
}

.cp-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.cp-empty-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    height: 48px;
    padding: 0 20px;
    border-radius: 14px;
    background: #f5f7fb;
    background-image: none !important;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    transition: background .15s, color .15s;
}

.cp-empty-btn:hover {
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-empty-btn.is-primary {
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

.cp-empty-btn.is-primary:hover {
    background: var(--cp-primary-hover, #15295a);
    color: #fff;
}

.cp-empty-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 575px) {
    body #js-product-list .cp-empty {
        border-radius: 22px;
    }

    .cp-empty-actions,
    .cp-empty-btn {
        width: 100%;
    }

    .cp-empty-btn {
        justify-content: center;
    }
}
/* /75 */


/* ==========================================================================
   76. CUSTOMER ACCOUNT · menu on the left + content (customer/page.tpl)
   same width as the homepage · white menu card: customer card, links with
   icons, module links (hook), sign out · mobile: horizontal scrolling bar
   ========================================================================== */
body:has(.cp-acc-nav) #wrapper > .container {
    width: 100%;
    max-width: none;
    padding-right: clamp(16px, 3vw, 56px);
    padding-left: clamp(16px, 3vw, 56px);
}

body:has(.cp-acc-nav) #content-wrapper {
    width: 100%;
    max-width: none;
}

body:has(.cp-acc-nav) #main {
    --cp-inset: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
    padding: 0 var(--cp-inset) 48px;
}

body:has(.cp-acc-nav) #wrapper .breadcrumb {
    padding-right: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
    padding-left: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
}

body:has(.cp-acc-nav) #main > .cp-acc-nav {
    position: sticky;
    top: 110px;
    grid-row: 1 / span 20;
    grid-column: 1;
}

body:has(.cp-acc-nav) #main > :not(.cp-acc-nav) {
    grid-column: 2;
    min-width: 0;
}

/* page title of the account pages */
body:has(.cp-acc-nav) #main > .page-header {
    margin: 0 0 16px;
}

body:has(.cp-acc-nav) #main > .page-header h1 {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    letter-spacing: -.02em;
    text-transform: none;
    color: #1f2937;
}

/* the dashboard has its own greeting */
body#my-account:has(.cpa) #main > .page-header {
    display: none;
}

body#my-account #main > #content {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* ── menu card ── */
.cp-acc-nav {
    padding: 18px;
    border-radius: 24px;
    background: #fff;
}

.cp-acc-user {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0 0 14px;
    padding: 0 4px 16px;
    border-bottom: 1px solid #eef1f7;
}

.cp-acc-avatar {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--cp-primary, #1c3673);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
}

.cp-acc-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cp-acc-name {
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #1f2937;
}

.cp-acc-email {
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 300;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #8b93a1;
}

.cp-acc-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* core links + module links (hook displayCustomerAccount) look the same */
.cp-acc-link,
.cp-acc-extra > a {
    display: flex !important;
    gap: 12px;
    align-items: center;
    width: auto !important;
    max-width: none !important;
    margin: 0;
    padding: 10px 12px !important;
    float: none !important;
    border-radius: 14px;
    background: none;
    background-image: none !important;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    transition: background .15s, color .15s;
}

.cp-acc-extra {
    display: contents;
}

.cp-acc-extra > a .link-item {
    display: flex !important;
    gap: 12px;
    align-items: center;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-transform: none !important;
    color: inherit !important;
}

.cp-acc-extra > a .link-item i,
.cp-acc-extra > a .link-item .material-icons {
    display: inline-block !important;
    width: 20px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: currentColor !important;
}

.cp-acc-link svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-acc-link:hover,
.cp-acc-extra > a:hover {
    background: #f5f7fb;
    color: var(--cp-primary, #1c3673);
}

.cp-acc-link.is-active,
.cp-acc-extra > a.is-active {
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-acc-link.is-logout {
    margin-top: 10px;
    border-top: 1px solid #eef1f7;
    border-radius: 0 0 14px 14px;
    padding-top: 14px !important;
    color: #d61f45;
}

.cp-acc-link.is-logout:hover {
    background: #fdecef;
    color: #d61f45;
}

@media (max-width: 1199px) {
    body:has(.cp-acc-nav) #main {
        --cp-inset: max(0px, calc(32px - clamp(16px, 3vw, 56px)));
        grid-template-columns: 250px minmax(0, 1fr);
    }
}

/* ── mobile: menu above the content, links as a horizontal bar ── */
@media (max-width: 991px) {
    body:has(.cp-acc-nav) #main {
        display: block;
        padding-right: 0;
        padding-left: 0;
    }

    body:has(.cp-acc-nav) #main > .cp-acc-nav {
        position: static;
        margin-bottom: 16px;
        padding: 14px;
        border-radius: 20px;
    }

    .cp-acc-user {
        margin-bottom: 10px;
        padding-bottom: 12px;
    }

    .cp-acc-links {
        flex-direction: row;
        gap: 6px;
        margin: 0 -14px;
        padding: 0 14px 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cp-acc-links::-webkit-scrollbar {
        display: none;
    }

    .cp-acc-link,
    .cp-acc-extra > a {
        flex: 0 0 auto;
        padding: 9px 12px !important;
        background: #f5f7fb;
        white-space: nowrap;
    }

    .cp-acc-link.is-logout {
        margin: 0;
        border-top: 0;
        border-radius: 14px;
        padding-top: 9px !important;
        background: #fdecef;
    }
}
/* /76 */


/* ==========================================================================
   77. ORDER HISTORY · cards instead of a table (customer/history.tpl)
   white card per order: reference + date · total · status · payment / carrier ·
   product thumbnails · actions — wraps naturally, fully responsive
   ========================================================================== */
body#history #main > #content {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.cp-oh-intro {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 300;
    color: #6b7280;
}

.cp-oh {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-oh-card {
    display: grid;
    gap: 14px;
    padding: clamp(18px, 2.2vw, 26px);
    border-radius: 22px;
    background: #fff;
}

.cp-oh svg,
.cp-oh-empty svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* reference + date · total */
.cp-oh-top {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: baseline;
    justify-content: space-between;
}

.cp-oh-id {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    min-width: 0;
}

.cp-oh-ref {
    background-image: none !important;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #1f2937;
}

.cp-oh-ref:hover {
    color: var(--cp-primary, #1c3673);
}

.cp-oh-date {
    font-size: 13px;
    font-weight: 300;
    color: #8b93a1;
}

.cp-oh-total {
    font-size: 20px;
    font-weight: 800;
    color: var(--cp-primary, #1c3673);
}

/* status · payment · carrier */
.cp-oh-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
}

.cp-oh-state {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--state, #8b93a1) 14%, #fff);
    font-size: 13px;
    font-weight: 700;
    color: color-mix(in srgb, var(--state, #8b93a1) 75%, #1f2937);
}

.cp-oh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--state, #8b93a1);
}

.cp-oh-info {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    color: #6b7280;
}

.cp-oh-info svg {
    width: 16px;
    height: 16px;
    color: #9ca3af;
}

/* product thumbnails */
.cp-oh-products {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cp-oh-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 4px;
    border-radius: 14px;
    background: #f5f7fb;
    color: #9ca3af;
}

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

.cp-oh-thumb svg {
    width: 24px;
    height: 24px;
}

.cp-oh-thumb.is-more {
    font-size: 13px;
    font-weight: 800;
    color: var(--cp-primary, #1c3673);
}

.cp-oh-qty {
    position: absolute;
    right: -4px;
    bottom: -4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--cp-primary, #1c3673);
    font-size: 10.5px;
    font-weight: 800;
    color: #fff;
}

.cp-oh-count {
    margin-left: 4px;
    font-size: 13px;
    color: #8b93a1;
}

/* actions */
.cp-oh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid #eef1f7;
}

.cp-oh-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    background: #f5f7fb;
    background-image: none !important;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    color: #1f2937;
    transition: background .15s, color .15s;
}

.cp-oh-btn:hover {
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-oh-btn.is-primary {
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

.cp-oh-btn.is-primary:hover {
    background: var(--cp-primary-hover, #15295a);
    color: #fff;
}

.cp-oh-btn svg {
    width: 17px;
    height: 17px;
}

/* empty */
.cp-oh-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    padding: clamp(36px, 6vw, 64px) 20px;
    border-radius: 22px;
    background: #fff;
    text-align: center;
}

.cp-oh-empty-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-oh-empty-ico svg {
    width: 32px;
    height: 32px;
}

.cp-oh-empty-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #1f2937;
}

.cp-oh-empty .cp-oh-btn {
    margin-top: 10px;
}

@media (max-width: 575px) {
    .cp-oh-card {
        border-radius: 18px;
    }

    .cp-oh-thumb {
        width: 48px;
        height: 48px;
    }

    .cp-oh-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cp-oh-btn.is-primary {
        grid-column: 1 / -1;
    }

    .cp-oh-btn {
        padding: 0 10px;
    }
}
/* /77 */


/* ==========================================================================
   78. ORDER DETAIL (customer/order-detail.tpl + _partials/order-messages.tpl)
   header card · progress steps · products + totals · side cards (shipping,
   addresses, payment) · status timeline · messages — no tables, responsive
   ========================================================================== */
body#order-detail #main > #content {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.cp-od-head svg,
.cp-od-card svg,
.cp-od-closed svg,
.cp-od-steps svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-od-muted {
    display: block;
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    color: #6b7280;
}

/* ── buttons ── */
.cp-od-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 13px;
    background: #f5f7fb;
    background-image: none !important;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    color: #1f2937;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.cp-od-btn:hover {
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-od-btn.is-primary {
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

.cp-od-btn.is-primary:hover {
    background: var(--cp-primary-hover, #15295a);
    color: #fff;
}

.cp-od-btn.is-block {
    width: 100%;
    margin-top: 12px;
}

.cp-od-btn svg {
    width: 17px;
    height: 17px;
}

/* ── header ── */
.cp-od-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 20px;
    align-items: start;
    margin-bottom: 12px;
    padding: clamp(20px, 2.6vw, 30px);
    border-radius: 24px;
    background: #fff;
}

.cp-od-eyebrow {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cp-primary, #1c3673);
}

body#order-detail .cp-od-ref {
    margin: 0 0 4px;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    color: #1f2937;
}

.cp-od-date {
    margin: 0;
    font-size: 13.5px;
    font-weight: 300;
    color: #8b93a1;
}

.cp-od-head-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.cp-od-state {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--state, #8b93a1) 14%, #fff);
    font-size: 13px;
    font-weight: 700;
    color: color-mix(in srgb, var(--state, #8b93a1) 75%, #1f2937);
}

.cp-od-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--state, #8b93a1);
}

.cp-od-total {
    font-size: 26px;
    font-weight: 800;
    color: var(--cp-primary, #1c3673);
}

.cp-od-actions {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid #eef1f7;
}

/* ── progress ── */
.cp-od-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 12px;
    padding: 20px clamp(16px, 2.4vw, 28px);
    border-radius: 24px;
    background: #fff;
    list-style: none;
    counter-reset: step;
}

.cp-od-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

/* connecting line */
.cp-od-steps li::before {
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    left: -50%;
    z-index: 0;
    height: 3px;
    border-radius: 3px;
    background: #eef1f7;
}

.cp-od-steps li:first-child::before {
    display: none;
}

.cp-od-steps li.is-done::before {
    background: var(--cp-primary, #1c3673);
}

.cp-od-step-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 3px solid #eef1f7;
    border-radius: 50%;
    background: #fff;
    color: transparent;
}

.cp-od-steps li.is-done .cp-od-step-dot {
    border-color: var(--cp-primary, #1c3673);
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

.cp-od-steps li.is-current .cp-od-step-dot {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cp-primary, #1c3673) 15%, transparent);
}

.cp-od-step-dot svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.6;
}

.cp-od-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: #8b93a1;
}

.cp-od-step-text strong {
    font-weight: 700;
}

.cp-od-steps li.is-done .cp-od-step-text strong {
    color: #1f2937;
}

.cp-od-step-text small {
    font-size: 12px;
    color: #9ca3af;
}

.cp-od-closed {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 12px;
    padding: 16px 20px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--state, #d61f45) 10%, #fff);
    font-size: 14px;
    font-weight: 700;
    color: color-mix(in srgb, var(--state, #d61f45) 80%, #1f2937);
}

.cp-od-closed svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
}

/* ── layout ── */
.cp-od-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 12px;
    align-items: start;
}

.cp-od-main,
.cp-od-side {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.cp-od-card {
    padding: clamp(18px, 2.2vw, 26px);
    border-radius: 22px;
    background: #fff;
}

body#order-detail .cp-od-title {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 800;
    text-transform: none;
    color: #1f2937;
}

.cp-od-count {
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef1f7;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    color: var(--cp-primary, #1c3673);
}

/* products */
.cp-od-products {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-od-product {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
}

.cp-od-product + .cp-od-product {
    border-top: 1px solid #eef1f7;
}

.cp-od-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 5px;
    border-radius: 14px;
    background: #f5f7fb;
    color: #9ca3af;
}

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

.cp-od-thumb svg {
    width: 26px;
    height: 26px;
}

.cp-od-product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cp-od-product-name {
    display: -webkit-box;
    overflow: hidden;
    background-image: none !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #1f2937;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cp-od-product-name:hover {
    color: var(--cp-primary, #1c3673);
}

.cp-od-product-total {
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    color: #1f2937;
}

.cp-od-link {
    font-size: 13px;
    font-weight: 700;
}

/* totals */
.cp-od-totals {
    margin: 10px 0 0;
    padding-top: 12px;
    border-top: 1px solid #eef1f7;
}

.cp-od-total-line {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    color: #4b5563;
}

.cp-od-total-line dt,
.cp-od-total-line dd {
    margin: 0;
    font-weight: 400;
}

.cp-od-total-line dd {
    font-weight: 700;
    color: #1f2937;
}

.cp-od-total-line.is-grand {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #eef1f7;
    font-size: 15px;
}

.cp-od-total-line.is-grand dt {
    font-weight: 700;
    color: #1f2937;
}

.cp-od-total-line.is-grand dd {
    font-size: 20px;
    font-weight: 800;
    color: var(--cp-primary, #1c3673);
}

/* timeline */
.cp-od-timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-od-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: center;
    padding: 8px 0;
}

.cp-od-timeline li + li::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 5px;
    width: 2px;
    height: 20px;
    background: #eef1f7;
}

.cp-od-tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--state, #8b93a1);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--state, #8b93a1) 18%, #fff);
}

.cp-od-tl-name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.cp-od-timeline .cp-od-muted {
    font-size: 12.5px;
    text-align: right;
}

/* side */
.cp-od-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.cp-od-row svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--cp-primary, #1c3673);
}

.cp-od-tracking {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f5f7fb;
}

.cp-od-tracking strong,
.cp-od-tracking strong a {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .03em;
    word-break: break-all;
    color: #1f2937;
}

.cp-od-address {
    margin: 0;
    font-size: 14px;
    font-style: normal;
    line-height: 1.7;
    color: #4b5563;
}

.cp-od-side .cp-od-muted + .cp-od-muted {
    margin-top: 6px;
}

/* module output (tracking, delivery, payment…) */
.cp-od-hook > :first-child {
    margin-top: 0;
}

.cp-od-hook .box,
.cp-od-hook .card {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* messages */
.cp-od-thread {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-od-msg {
    max-width: 85%;
    padding: 12px 14px;
    border-radius: 16px 16px 16px 4px;
    background: #f5f7fb;
}

.cp-od-msg.is-shop {
    justify-self: end;
    border-radius: 16px 16px 4px 16px;
    background: #eef1f7;
}

.cp-od-msg-head {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    align-items: baseline;
    margin-bottom: 4px;
    font-size: 13px;
    color: #1f2937;
}

.cp-od-msg-head .cp-od-muted {
    display: inline;
    font-size: 12px;
}

.cp-od-msg-text {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
}

.cp-od-form-hint {
    margin-bottom: 14px;
}

.cp-od-form {
    display: grid;
    gap: 12px;
}

.cp-od-form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* ── responsive ── */
@media (max-width: 1199px) {
    .cp-od-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cp-od-side {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        order: -1;
    }
}

@media (max-width: 575px) {
    .cp-od-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .cp-od-head-side {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cp-od-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    /* progress: vertical on phones (dot left, label + date right, vertical line) */
    .cp-od-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 18px 20px;
    }

    .cp-od-steps li {
        flex-direction: row;
        gap: 14px;
        align-items: center;
        min-height: 50px;
        text-align: left;
    }

    .cp-od-steps li::before {
        top: -18px;
        right: auto;
        bottom: auto;
        left: 14px;
        width: 3px;
        height: 36px;
    }

    .cp-od-step-text {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px 10px;
        align-items: baseline;
        font-size: 14px;
    }

    .cp-od-product {
        grid-template-columns: 52px minmax(0, 1fr);
        grid-template-areas:
            "thumb info"
            "thumb total";
        gap: 4px 12px;
    }

    .cp-od-thumb {
        grid-area: thumb;
        width: 52px;
        height: 52px;
    }

    .cp-od-product-info {
        grid-area: info;
    }

    .cp-od-product-total {
        grid-area: total;
    }

    .cp-od-timeline li {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .cp-od-timeline .cp-od-muted {
        grid-column: 2;
        text-align: left;
    }

    .cp-od-msg {
        max-width: 100%;
    }

    .cp-od-form-footer .cp-od-btn {
        width: 100%;
    }
}
/* /78 */


/* ==========================================================================
   79. ADDRESSES (customer/addresses.tpl + _partials/block-address.tpl)
   grid of white address cards + dashed "new address" card · empty state
   ========================================================================== */
body#addresses #main > #content {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.cp-ad-intro {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 300;
    color: #6b7280;
}

.cp-ad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 12px;
}

.cp-ad-card svg,
.cp-ad-new svg,
.cp-ad-empty svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body#addresses .cp-ad-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 22px;
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: none;
}

.cp-ad-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.cp-ad-ico {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-ad-ico svg {
    width: 20px;
    height: 20px;
}

body#addresses .cp-ad-alias {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    text-transform: none;
    color: #1f2937;
}

body#addresses .cp-ad-body {
    flex: 1 1 auto;
    padding: 0;
}

.cp-ad-name {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}

.cp-ad-line {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #4b5563;
}

.cp-ad-line.is-strong {
    font-weight: 600;
    color: #1f2937;
}

.cp-ad-phone {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.cp-ad-phone svg {
    width: 16px;
    height: 16px;
    color: var(--cp-primary, #1c3673);
}

body#addresses .cp-ad-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding: 16px 0 0;
    border-top: 1px solid #eef1f7;
    background: none;
    text-align: left;
}

.cp-ad-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    background: #f5f7fb;
    background-image: none !important;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    color: #1f2937;
    transition: background .15s, color .15s;
}

body#addresses .cp-ad-actions .cp-ad-btn:first-child {
    flex: 1 1 auto;
}

.cp-ad-btn:hover {
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-ad-btn.is-danger {
    width: 42px;
    padding: 0;
    color: #8b93a1;
}

.cp-ad-btn.is-danger:hover {
    background: #fdecef;
    color: #d61f45;
}

.cp-ad-btn.is-primary {
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

.cp-ad-btn.is-primary:hover {
    background: var(--cp-primary-hover, #15295a);
    color: #fff;
}

.cp-ad-btn svg {
    width: 17px;
    height: 17px;
}

/* "new address" card */
.cp-ad-new {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    padding: 22px;
    border: 2px dashed #d5dbe7;
    border-radius: 22px;
    background: transparent;
    background-image: none !important;
    text-align: center;
    color: #4b5563;
    transition: border-color .15s, background .15s, color .15s;
}

.cp-ad-new:hover {
    border-color: var(--cp-primary, #1c3673);
    background: #fff;
    color: var(--cp-primary, #1c3673);
}

.cp-ad-new-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: #fff;
    color: var(--cp-primary, #1c3673);
}

.cp-ad-new:hover .cp-ad-new-ico {
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

.cp-ad-new-ico svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
}

.cp-ad-new-title {
    font-size: 15px;
    font-weight: 800;
}

.cp-ad-new-text {
    max-width: 220px;
    font-size: 13px;
    font-weight: 300;
    color: #8b93a1;
}

/* empty */
.cp-ad-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    padding: clamp(36px, 6vw, 64px) 20px;
    border-radius: 22px;
    background: #fff;
    text-align: center;
}

.cp-ad-empty-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-ad-empty-ico svg {
    width: 32px;
    height: 32px;
}

.cp-ad-empty-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #1f2937;
}

.cp-ad-empty .cp-ad-intro {
    margin: 0 0 10px;
}

@media (max-width: 575px) {
    .cp-ad-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cp-ad-new {
        min-height: 150px;
    }
}
/* /79 */


/* ==========================================================================
   80. ADDRESS FORM PAGE (customer/address.tpl)
   white card with header (icon, title, hint, back link) · fields keep the
   site-wide floating labels · roomy save button · 1 column on phones
   ========================================================================== */
body#address #main > #content {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.cp-af {
    padding: clamp(20px, 2.8vw, 34px);
    border-radius: 24px;
    background: #fff;
}

.cp-af svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-af-head {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin: 0 0 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef1f7;
}

.cp-af-ico {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-af-ico svg {
    width: 24px;
    height: 24px;
}

.cp-af-head-text {
    flex: 1 1 260px;
    min-width: 0;
}

.cp-af-title {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
}

.cp-af-sub {
    margin: 0;
    font-size: 13.5px;
    font-weight: 300;
    color: #6b7280;
}

.cp-af-back {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    background: #f5f7fb;
    background-image: none !important;
    font-size: 13.5px;
    font-weight: 700;
    color: #4b5563;
    transition: background .15s, color .15s;
}

.cp-af-back:hover {
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-af-back svg {
    width: 17px;
    height: 17px;
}

/* form footer: save button on the left, roomy */
body#address .cp-af .form-footer {
    display: flex;
    justify-content: flex-start;
    margin: 22px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid #eef1f7;
}

body#address .cp-af .form-footer .btn-primary {
    float: none;
    min-width: 200px;
    height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 14px;
    background: var(--cp-primary, #1c3673);
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    color: #fff;
}

body#address .cp-af .form-footer .btn-primary:hover,
body#address .cp-af .form-footer .btn-primary:focus {
    background: var(--cp-primary-hover, #15295a);
}

@media (max-width: 767px) {
    body#address .cp-af .form-fields {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body#address .cp-af .form-fields > * {
        grid-column: 1 / -1 !important;
    }

    .cp-af-back {
        width: 100%;
        justify-content: center;
    }

    body#address .cp-af .form-footer .btn-primary {
        width: 100%;
    }
}
/* /80 */


/* ==========================================================================
   81. SweetAlert2 dialogs (errors / warnings from PrestaShop, custom.js)
   site style: white card, big radius, primary button, no shadows on the button
   + address form page: the card has its own title → hide the page title
   ========================================================================== */
.swal2-container .cp-swal {
    width: min(440px, calc(100vw - 32px));
    padding: 28px 26px 24px;
    border-radius: 24px;
    font-family: var(--cp-font, inherit);
}

.swal2-container .cp-swal .swal2-icon {
    margin: 4px auto 14px;
    transform: scale(.85);
}

.swal2-container .cp-swal-title {
    padding: 0;
    font-size: 20px;
    font-weight: 800;
    color: #1f2937;
}

.swal2-container .cp-swal-text {
    margin: 10px 0 0;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #4b5563;
}

.swal2-container .cp-swal-text a {
    font-weight: 700;
    color: var(--cp-primary, #1c3673);
}

.swal2-container .cp-swal .swal2-actions {
    width: 100%;
    margin: 22px 0 0;
}

.swal2-container .cp-swal-btn {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 14px;
    background: var(--cp-primary, #1c3673);
    box-shadow: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}

.swal2-container .cp-swal-btn:hover {
    background: var(--cp-primary-hover, #15295a);
}

.swal2-container .cp-swal-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cp-primary, #1c3673) 30%, transparent);
    outline-offset: 2px;
}

/* confirmation: cancel + confirm side by side, red confirm for deletions */
.swal2-container .cp-swal .swal2-actions:has(.is-cancel) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.swal2-container .cp-swal .swal2-actions:has(.is-cancel) .cp-swal-btn {
    margin: 0;
}

.swal2-container .cp-swal-btn.is-cancel {
    background: #f5f7fb;
    color: #1f2937;
}

.swal2-container .cp-swal-btn.is-cancel:hover {
    background: #eef1f7;
}

.swal2-container .cp-swal-btn.is-danger {
    background: #d61f45;
}

.swal2-container .cp-swal-btn.is-danger:hover {
    background: #b4183a;
}

body#address #main > .page-header {
    display: none;
}
/* /81 */


/* ==========================================================================
   82. ACCOUNT DETAILS (customer/identity.tpl)
   white card with header · fields keep the site-wide floating labels ·
   separator before the password fields · checkboxes grouped (see 63.3) ·
   save button on the left
   ========================================================================== */
body#identity #main > #content {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

body#identity #main > .page-header {
    display: none;
}

.cp-idf {
    padding: clamp(20px, 2.8vw, 34px);
    border-radius: 24px;
    background: #fff;
}

.cp-idf svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-idf-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 0 0 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef1f7;
}

.cp-idf-ico {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-idf-ico svg {
    width: 24px;
    height: 24px;
}

.cp-idf-head-text {
    min-width: 0;
}

.cp-idf-title {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
}

.cp-idf-sub {
    margin: 0;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.55;
    color: #6b7280;
}

/* password fields: their own block, separated from the personal details */
/* (the line sits under the previous field — padding on the password field itself would shift
   its input below the floating label) */
body#identity .cp-idf #customer-form > div:first-child > :has(+ .field-password-policy) {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eef1f7;
}

/* current + new password side by side (desktop / tablet) */
@media (min-width: 768px) {
    /* the password fields are wrapped in .field-password-policy (that is the grid item) */
    body#identity .cp-idf #customer-form > div:first-child > .field-password-policy {
        grid-column: span 1 !important;
    }
}

/* consents: some space above the group */
body#identity .cp-idf #customer-form .form-group.row:not(:has(.custom-checkbox)) + .form-group.row:has(.custom-checkbox) {
    margin-top: 14px;
}

/* save button: left, roomy */
body#identity .cp-idf #customer-form .form-footer {
    display: flex;
    justify-content: flex-start;
    margin: 22px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid #eef1f7;
}

body#identity .cp-idf #customer-form .form-footer .btn-primary {
    float: none;
    min-width: 200px;
    height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 14px;
    background: var(--cp-primary, #1c3673);
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    color: #fff;
}

body#identity .cp-idf #customer-form .form-footer .btn-primary:hover,
body#identity .cp-idf #customer-form .form-footer .btn-primary:focus {
    background: var(--cp-primary-hover, #15295a);
}

@media (max-width: 767px) {
    .cp-idf-head {
        align-items: flex-start;
    }

    /* one column on phones (first name / last name were side by side) */
    body#identity .cp-idf #customer-form > div:first-child {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body#identity .cp-idf #customer-form > div:first-child > * {
        grid-column: 1 / -1 !important;
    }

    body#identity .cp-idf #customer-form .form-footer .btn-primary {
        width: 100%;
    }
}
/* /82 */


/* ==========================================================================
   76.1 ACCOUNT MENU · module links with the same stroke icons as the core links
   (the module's material icon is hidden; the icon comes from a CSS mask per link id,
   with a generic link icon for any other module)
   ========================================================================== */
.cp-acc-extra > a .link-item i,
.cp-acc-extra > a .link-item .material-icons {
    display: none !important;
}

.cp-acc-extra > a .link-item::before {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--cp-acc-ico) center / contain no-repeat;
    mask: var(--cp-acc-ico) center / contain no-repeat;
}

.cp-acc-extra > a {
    --cp-acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
}

.cp-acc-extra > a#cpwishlist-link {
    --cp-acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10Z'/%3E%3C/svg%3E");
}

.cp-acc-extra > a#cp-wma-link {
    --cp-acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E");
}

.cp-acc-extra > a#psgdpr-link {
    --cp-acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.4 8.3 8 9 4.6-.7 8-4 8-9V6l-8-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

.cp-acc-extra > a#emailsalerts {
    --cp-acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E");
}
/* /76.1 */


/* ==========================================================================
   83. CMS PAGES (cms/page.tpl) · same pattern as the customer account (76):
   white menu card with the other information pages on the left (sticky) ·
   white content card with the title, readable text (left aligned, limited
   line length) · the old "icon + title" line of the content is hidden
   (it repeats the title, its images no longer exist) · mobile: the menu is a
   horizontal bar above the content
   ========================================================================== */
/* same width as the customer account pages (76) */
body#cms #wrapper > .container {
    width: 100%;
    max-width: none;
    padding-right: clamp(16px, 3vw, 56px);
    padding-left: clamp(16px, 3vw, 56px);
}

body#cms #content-wrapper {
    width: 100%;
    max-width: none;
}

body#cms #wrapper .breadcrumb,
body#cms .cp-cms {
    padding-right: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
    padding-left: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
}

.cp-cms {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
    padding-bottom: 48px;
}

.cp-cms--single {
    grid-template-columns: minmax(0, 1fr);
}

/* ── menu card ── */
.cp-cms__nav {
    position: sticky;
    top: 110px;
    padding: 18px;
    border-radius: 24px;
    background: #fff;
}

.cp-cms__nav-title {
    margin: 0 0 10px;
    padding: 2px 12px 14px;
    border-bottom: 1px solid #eef1f7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8b93a1;
}

.cp-cms__nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body#cms .cp-cms__nav-link {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: none;
    background-image: none !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #4b5563;
    transition: background .15s, color .15s;
}

/* small document icon in front of every page */
body#cms .cp-cms__nav-link::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: currentColor;
    opacity: .55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

body#cms .cp-cms__nav-link:hover {
    background: #f5f7fb;
    color: var(--cp-primary, #1c3673);
}

body#cms .cp-cms__nav-link.is-active {
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

body#cms .cp-cms__nav-link:hover::before,
body#cms .cp-cms__nav-link.is-active::before {
    opacity: 1;
}

/* no "growing line" of the site links (64) inside the menu */
body#cms .cp-cms__nav-link::after {
    display: none !important;
}

/* ── content card ── */
body#cms #content.cp-cms__body {
    min-width: 0;
    margin: 0;
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4.5vw, 56px);
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: none;
}

.cp-cms__header {
    margin: 0 0 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef1f7;
}

.cp-cms__title {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-transform: none;
    color: #1f2937;
}

.cp-cms__content {
    max-width: 1040px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #4b5563;
}

/* whatever the old content says (justify, inline styles…) */
.cp-cms__content,
.cp-cms__content * {
    text-align: left !important;
}

.cp-cms__content .rte,
.cp-cms__content #buho,
.cp-cms__content .content-cms,
.cp-cms__content .personal_data_text {
    margin: 0;
    padding: 0;
    background: none;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* the old "image + title" line repeats the page title */
.cp-cms__content .cms_title,
.cp-cms__content .cms-page-title {
    display: none;
}

.cp-cms__content p {
    margin: 0 0 1.1em;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.cp-cms__content h2,
.cp-cms__content h3,
.cp-cms__content h4,
.cp-cms__content .pd_title {
    margin: 1.8em 0 .6em;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.01em;
    text-transform: none;
    color: #1f2937;
}

.cp-cms__content h3,
.cp-cms__content h4 {
    font-size: 17px;
}

.cp-cms__content > :first-child,
.cp-cms__content > :first-child > :first-child,
.cp-cms__content .cms_title + * > :first-child {
    margin-top: 0;
}

.cp-cms__content strong,
.cp-cms__content b {
    font-weight: 700;
    color: #1f2937;
}

.cp-cms__content ul,
.cp-cms__content ol {
    margin: 0 0 1.2em;
    padding-left: 0;
    list-style: none;
}

.cp-cms__content ol {
    counter-reset: cp-cms-ol;
}

.cp-cms__content li {
    position: relative;
    margin: 0 0 .55em;
    padding-left: 26px;
    list-style: none !important;
}

.cp-cms__content ul > li::before {
    content: "";
    position: absolute;
    top: .68em;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cp-primary, #1c3673);
}

.cp-cms__content ol > li::before {
    content: counter(cp-cms-ol) ".";
    counter-increment: cp-cms-ol;
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
    color: var(--cp-primary, #1c3673);
}

.cp-cms__content a {
    font-weight: 600;
    color: var(--cp-primary, #1c3673);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.cp-cms__content a:hover {
    text-decoration-thickness: 2px;
}

.cp-cms__content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.cp-cms__content table {
    width: 100%;
    margin: 0 0 1.4em;
    border-collapse: collapse;
    font-size: 15px;
}

.cp-cms__content th,
.cp-cms__content td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef1f7;
    vertical-align: top;
}

.cp-cms__content th {
    font-weight: 700;
    color: #1f2937;
}

.cp-cms__content hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid #eef1f7;
}

@media (max-width: 1199px) {
    .cp-cms {
        grid-template-columns: 250px minmax(0, 1fr);
    }
}

/* ── mobile: menu above the content, pages as a horizontal bar ── */
@media (max-width: 991px) {
    body#cms .cp-cms {
        display: block;
        padding-right: 0;
        padding-left: 0;
    }

    .cp-cms__nav {
        position: static;
        margin-bottom: 16px;
        padding: 14px;
        border-radius: 20px;
    }

    .cp-cms__nav-title {
        display: none;
    }

    .cp-cms__nav-list {
        position: relative;
        flex-direction: row;
        gap: 6px;
        margin: 0 -14px;
        padding: 0 14px 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cp-cms__nav-list::-webkit-scrollbar {
        display: none;
    }

    body#cms .cp-cms__nav-link {
        flex: 0 0 auto;
        padding: 9px 12px;
        background: #f5f7fb;
        white-space: nowrap;
    }

    body#cms #content.cp-cms__body {
        border-radius: 20px;
    }

    .cp-cms__content {
        font-size: 15px;
        line-height: 1.7;
    }
}
/* /83 */


/* ==========================================================================
   84. CONTACT PAGE (templates/contact.tpl + modules/contactform/…/contactform.tpl
   + module cpcontact hook/side.tpl) · same width as the account pages · header ·
   contact cards + quick answers on the left (sticky) · the form in a white card
   on the right · mobile: one column, the cards first
   ========================================================================== */
body#contact #wrapper > .container {
    width: 100%;
    max-width: none;
    padding-right: clamp(16px, 3vw, 56px);
    padding-left: clamp(16px, 3vw, 56px);
}

body#contact #wrapper .breadcrumb,
body#contact .cp-ct {
    padding-right: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
    padding-left: max(0px, calc(clamp(24px, 7vw, 140px) - clamp(16px, 3vw, 56px)));
}

body#contact #content.cp-ct {
    margin: 0;
    padding-top: 0;
    padding-bottom: 56px;
    border: 0;
    background: none;
    box-shadow: none;
}

/* ── header ── */
.cp-ct-head {
    max-width: 760px;
    margin: 4px 0 28px;
}

.cp-ct-eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cp-primary, #1c3673);
}

.cp-ct-title {
    margin: 0 0 10px;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-transform: none;
    color: #1f2937;
}

.cp-ct-lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: #4b5563;
}

/* ── two columns ── */
.cp-ct-grid {
    display: grid;
    grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.cp-ct-side {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── contact cards (cpfooter) ── */
.cp-ct-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body#contact .cp-ct-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 20px;
    background: #fff;
    background-image: none !important;
    color: #1f2937;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}

body#contact a.cp-ct-card:hover {
    box-shadow: 0 8px 24px rgba(28, 54, 115, .08);
    transform: translateY(-1px);
}

body#contact a.cp-ct-card::after,
body#contact .cp-ct-help a::after,
body#contact .cp-ct-social a::after {
    display: none !important;
}

.cp-ct-ico {
    display: inline-flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #eef1f7;
    color: var(--cp-primary, #1c3673);
}

.cp-ct-ico svg,
.cp-ct-help svg,
.cp-ct-social svg,
.cp-ct-file-label svg,
.cp-ct-send svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cp-ct-ico svg {
    width: 22px;
    height: 22px;
}

.cp-ct-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cp-ct-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8b93a1;
}

.cp-ct-value {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    color: #1f2937;
}

.cp-ct-hint {
    font-size: 13px;
    color: #6b7280;
}

.cp-ct-hours {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

body#contact .cp-ct-link {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-primary, #1c3673);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── social ── */
.cp-ct-social {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 20px;
    background: #fff;
}

.cp-ct-social-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.cp-ct-social-list {
    display: flex;
    gap: 6px;
}

body#contact .cp-ct-social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f5f7fb;
    background-image: none !important;
    color: var(--cp-primary, #1c3673);
    transition: background .15s, color .15s;
}

body#contact .cp-ct-social-list a:hover {
    background: var(--cp-primary, #1c3673);
    color: #fff;
}

.cp-ct-social-list svg {
    width: 18px;
    height: 18px;
}

/* ── quick answers ── */
.cp-ct-help {
    padding: 18px;
    border-radius: 20px;
    background: #fff;
}

.cp-ct-help-title {
    margin: 0 0 8px;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.cp-ct-help-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body#contact .cp-ct-help-list a {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 12px;
    background-image: none !important;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    transition: background .15s, color .15s;
}

body#contact .cp-ct-help-list a:hover {
    background: #f5f7fb;
    color: var(--cp-primary, #1c3673);
}

.cp-ct-help-list svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    opacity: .7;
}

/* ── the form card ── */
body#contact .cp-ct-main .contact-form {
    padding: clamp(22px, 3.5vw, 40px);
    border-radius: 24px;
    background: #fff;
}

.cp-ct-form-head {
    margin: 0 0 20px;
}

.cp-ct-form-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    color: #1f2937;
}

.cp-ct-form-text {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

body#contact .contact-form .alert {
    float: none;
    width: 100%;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 0;
    border-radius: 14px;
}

body#contact .contact-form .alert ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* attachment: the whole row is the button */
.cp-ct-file {
    position: relative;
}

.cp-ct-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cp-ct-file-label {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 8px 8px 8px 16px;
    border: 1px dashed #cfd4da;
    border-radius: 14px;
    background: #fafbfc;
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.cp-ct-file-label:hover,
.cp-ct-file-input:focus-visible + .cp-ct-file-label {
    border-color: var(--cp-primary, #1c3673);
    background: #f5f7fb;
}

.cp-ct-file-label svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--cp-primary, #1c3673);
}

.cp-ct-file-name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cp-ct-file-btn {
    flex: 0 0 auto;
    padding: 9px 14px;
    border-radius: 10px;
    background: #eef1f7;
    font-size: 13px;
    font-weight: 700;
    color: var(--cp-primary, #1c3673);
}

.cp-ct-gdpr {
    margin-top: 4px;
}

/* send */
body#contact .cp-ct-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
}

body#contact .cp-ct-send {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: var(--cp-primary, #1c3673);
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    color: #fff;
    box-shadow: none;
}

body#contact .cp-ct-send:hover {
    background: var(--cp-primary-hover, #18305f);
}

.cp-ct-send svg {
    width: 18px;
    height: 18px;
}

/* Cloudflare Turnstile inside the card */
body#contact .contact-form .cfturnstile-box {
    display: flex;
    justify-content: flex-start;
    margin: 6px 0 4px;
    text-align: left;
}

/* ── tablet / mobile: one column, the cards first ── */
@media (max-width: 991px) {
    body#contact .cp-ct {
        padding-right: 0;
        padding-left: 0;
    }

    .cp-ct-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cp-ct-side {
        position: static;
    }
}

@media (max-width: 575px) {
    body#contact .cp-ct-footer {
        justify-content: stretch;
    }

    body#contact .cp-ct-send {
        width: 100%;
    }

    .cp-ct-file-btn {
        display: none;
    }
}
/* /84 */


/* ==========================================================================
   85. PAGE NOT FOUND (templates/errors/404.tpl) · centred white card: big "404",
   message, home / contact
   ========================================================================== */
body#pagenotfound #content.cp-nf {
    max-width: 860px;
    margin: 24px auto 64px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: center;
}

.cp-nf-card {
    padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 64px);
    border-radius: 28px;
    background: #fff;
}

.cp-nf-code {
    margin: 0;
    font-size: clamp(72px, 14vw, 140px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--cp-primary, #1c3673), color-mix(in srgb, var(--cp-primary, #1c3673) 45%, #fff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cp-nf-title {
    margin: 10px 0 10px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -.02em;
    text-transform: none;
    color: #1f2937;
}

.cp-nf-text {
    max-width: 520px;
    margin: 0 auto 26px;
    font-size: 16px;
    line-height: 1.6;
    color: #4b5563;
}

/* home / contact */
.cp-nf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

body#pagenotfound .cp-nf-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    height: 46px;
    padding: 0 22px;
    border: 1px solid var(--cp-primary, #1c3673);
    border-radius: 999px;
    background: var(--cp-primary, #1c3673);
    background-image: none !important;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: background .15s, color .15s;
}

body#pagenotfound .cp-nf-btn.is-outline {
    background: #fff;
    color: var(--cp-primary, #1c3673);
}

body#pagenotfound .cp-nf-btn:hover {
    background: var(--cp-primary-hover, #18305f);
    color: #fff;
}

body#pagenotfound .cp-nf-btn::after {
    display: none !important;
}

.cp-nf-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 575px) {
    .cp-nf-actions .cp-nf-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}
/* /85 */


/* ==========================================================================
   86. FOOTER · CTA blocks (hook displayFooterCta: ordertracking, cp_wma)
   side by side 50% / 50% · one block alone takes the full width · mobile: one under the other
   ========================================================================== */
.cp-footer-cta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 16px;
    width: 100%;
    min-width: 0; /* grid item of .cp-footer-main: without it the 2 columns (2 × 420px) widen the footer on tablet/mobile */
    max-width: 1240px;
    margin: 0 auto;
}

.cp-footer-cta > .wma-cta,
.cp-footer-cta > .ot-cta {
    flex-wrap: nowrap;
    gap: 16px;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 16px 18px;
}

/* smaller texts and button, the button on the same row as the text */
.cp-footer-cta .wma-cta-text,
.cp-footer-cta .ot-cta-text {
    flex: 1 1 auto;
    gap: 12px;
}

.cp-footer-cta .wma-cta-ico,
.cp-footer-cta .ot-cta-ico {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
}

.cp-footer-cta .wma-cta-ico svg,
.cp-footer-cta .ot-cta-ico svg {
    width: 19px;
    height: 19px;
}

.cp-footer-cta .wma-cta-title,
.cp-footer-cta .ot-cta-title {
    font-size: 15px;
}

/* title only, no description */
.cp-footer-cta .wma-cta-sub,
.cp-footer-cta .ot-cta-sub {
    display: none;
}

.cp-footer-cta .wma-cta-text,
.cp-footer-cta .ot-cta-text {
    align-items: center;
}

.cp-footer-cta .wma-cta-title,
.cp-footer-cta .ot-cta-title {
    margin: 0;
}

.cp-footer .cp-footer-cta a.wma-cta-btn,
.cp-footer .cp-footer-cta a.ot-cta-btn,
.cp-footer-cta .wma-cta-btn,
.cp-footer-cta .ot-cta-btn {
    gap: 6px;
    width: auto;
    min-height: 38px;
    padding: 0 16px;
    font-size: 13px;
    white-space: nowrap;
}

.cp-footer-cta .wma-cta-btn svg,
.cp-footer-cta .ot-cta-btn svg {
    width: 15px;
    height: 15px;
}

/* tablet / large mobile: always side by side, the button under the text, full width */
@media (min-width: 480px) {
    .cp-footer-cta {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
}

@media (max-width: 1099px) {
    .cp-footer-cta > .wma-cta,
    .cp-footer-cta > .ot-cta {
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
    }

    .cp-footer-cta .wma-cta-text,
    .cp-footer-cta .ot-cta-text {
        align-items: center;
    }

    .cp-footer .cp-footer-cta a.wma-cta-btn,
    .cp-footer .cp-footer-cta a.ot-cta-btn {
        justify-content: center;
        width: 100%;
    }
}

/* small screens: narrow cards — compact, the button text may wrap */
@media (max-width: 767px) {
    .cp-footer-cta {
        gap: 10px;
    }

    .cp-footer-cta > .wma-cta,
    .cp-footer-cta > .ot-cta {
        gap: 12px;
        padding: 14px;
    }

    .cp-footer .cp-footer-cta a.wma-cta-btn,
    .cp-footer .cp-footer-cta a.ot-cta-btn {
        padding: 8px 12px;
        text-align: center;
        white-space: normal;
    }
}

@media (max-width: 639px) {
    .cp-footer-cta .wma-cta-ico,
    .cp-footer-cta .ot-cta-ico {
        display: none;
    }
}
/* /86 */