/**
 * PrestaChamps
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Commercial License
 * you can't distribute, modify or sell this code
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file
 * If you need help please contact leo@prestachamps.com
 *
 * @author    PrestaChamps <leo@prestachamps.com>
 * @copyright PrestaChamps
 * @license   commercial
 */

/* ==========================================================================
   wpg-ui: the back-office UI kit of the module (3.0, design B "Graphite frame")
   --------------------------------------------------------------------------
   Design A's structure (docs/mockups/3.0-admin-refresh/A-dashboard.dc.html: header card, icon menu, figure tiles,
   cards) in the colours of mockup V1 "Graphite frame" (7 October 2026): a graphite header, menu and Automatic
   conversion panel frame light cards on a grey ground; gold marks what can be done or what moves (main buttons,
   progress, the state badge, the active menu item). A namespaced copy of the PrestaChamps
   admin kit: no dependency on any other module. Loaded by the module's
   displayBackOfficeHeader hook on the module's pages (and by getContent() on
   PrestaShop 9's Configure).

   Every rule is scoped to a root element carrying the class .wpg-ui (the
   settings shell #wpg-admin), or to .wpg-notice (the notice a module page shows
   instead of its content). No important flags anywhere: the weight tiers are
     .wpg-ui .x                            one class + one class (0,2,0)
     :is(.wpg-ui, #wpg-ui) .x              an id's weight: beats the admin
                                           theme's ".bootstrap" rules on tags
                                           and .btn
     :is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .x   two ids: beats the
                                           theme's "#content.bootstrap" rules
   The font is the back office's own (Open Sans on 1.7.8 and 8, IBM Plex Sans
   on 9.1): no web font, except the handwritten signature of Our modules' signed
   note (Caveat, shipped in views/fonts/: no request leaves the shop). No gradients, no emoji: the icons are inline SVG
   (views/templates/admin/_shell/icon.tpl). A mark drawn as text by a
   pseudo-element ("i", a tick, an arrow, a stacked cell's column name) is
   given an empty alternative text, content: "i" / "", so screen readers skip
   it; the declaration before it is for browsers without that syntax.

   Colours: only custom properties (the design tokens below), no colour literal in a rule. Graphite scale #15181C
   #1E2227 #22262C #2C3138 #3A4048 #545C68 #A3AAB4 #EDEFF2; gold #D4A72C is a fill (graphite text on it, 7.1:1) or
   text/icons on graphite (#E0B84F, #E6C066); on white, gold text is #8A6410 (5.4:1) and progress, switches and the
   outline buttons' border #A87A0E (3:1). Never gold text on white. Warnings are orange (#C2410C, text #9A3412 on
   #FDEEE3) so they never read as the gold accent; pass #1D7A47 (text #166534 on #E3F3EA), info #2F5BBF (#1E3A8A on
   #E8EEFB), danger #B91C1C on #FDECEC. Two focus rings: #8A6410 on light, #E0B84F on graphite. Every text pair is
   WCAG AA (the 32 pairs of the mockup's canvas and the kit's own). Cards: 16 px radius and a soft shadow; buttons 44 px
   high, 10 px radius.
   Breakpoints: 1200 px (the Overview's tiles two by two), 900 px (the
   navigation becomes a scroller above the section, 44 px touch targets),
   600 px (form rows stacked, tiles one per line).

   The file has two parts. THE KIT (shell, navigation, cards, buttons, form
   rows and controls, checklist, tables, alerts...) comes first; then the
   SECTION BLOCKS, one per section of the navigation in its order, each between
   its "section: <id>" and "end of section: <id>" comments: what only that
   section draws goes there, so the sections can be restyled side by side. The
   rule for [hidden] stays last.

   Components (markup in views/templates/admin/_shell/ and sections/):
     .wpg-crumb; .wpg-head (.wpg-head-tile, .wpg-head-name, .wpg-chip, .wpg-state,
       .wpg-status > li, .wpg-head-actions); .wpg-shell-grid > .wpg-nav
       (.wpg-nav-group, .wpg-nav-item > .wpg-nav-icon + .wpg-nav-text) + .wpg-main
     .wpg-section > h2 + .wpg-lead; .wpg-card > .wpg-card-head (h2/h3, .wpg-lead,
       .wpg-pill) > .wpg-card-body > .wpg-card-foot; .wpg-form-foot
     .wpg-btn [.wpg-btn-primary | .wpg-btn-ghost | .wpg-btn-outline | .wpg-btn-danger] [.wpg-btn-sm]
     .wpg-field > .wpg-field-label (.wpg-field-title: label + .wpg-help; the
       switch's note; .wpg-help-text[hidden]) + .wpg-field-control
     .wpg-switch, .wpg-range (+ .wpg-range-presets), .wpg-segmented, .wpg-checks >
       .wpg-check, .wpg-number, .wpg-lang-tabs
     .wpg-checklist > .wpg-checklist-row [.is-pass|.is-warn|.is-fail|.is-info]
       (.wpg-checklist-icon, .wpg-checklist-text, .wpg-checklist-fix)
     .wpg-icon-list > li (.wpg-icon-list-mark + text), .wpg-host-name (an address in a table)
     .wpg-tiles [.is-inset: inside a card] > .wpg-tile [.is-accent|.is-warn|.is-info|.is-danger] (.wpg-tile-head >
       .wpg-tile-label + .wpg-tile-icon; .wpg-tile-body > .wpg-tile-value [.is-text], .wpg-progress, .wpg-tile-caption)
     .wpg-progress, .wpg-jobs, .wpg-steps, .wpg-choices, .wpg-preview, .wpg-kv, .wpg-code
     details.wpg-card.wpg-advanced > summary.wpg-card-head (a collapsed card)
     .wpg-table [.is-stacked: one cell per line below 900px], .wpg-badge,
       .wpg-pill [.is-pass|.is-warn|.is-danger|.is-accent|.is-info], code (inline: a light chip), .wpg-alert, .wpg-notice, .wpg-empty, .wpg-toolbar, .wpg-pager
     .wpg-confirm (inline confirmation row), .wpg-pending, details.wpg-manual
     .wpg-icon, .wpg-muted, .wpg-sr (screen-reader only), .wpg-grow (flex spacer)
   ========================================================================== */

/* ==========================================================================
   THE KIT
   ========================================================================== */

/* ---- design tokens --------------------------------------------------------- */

.wpg-ui,
.wpg-notice {
    /* light ground and cards */
    --wpg-ground: #edeff2;
    --wpg-surface: #fff;
    --wpg-soft: #f6f7f8;
    --wpg-hover: #f1f3f5;
    --wpg-foot: #f6f7f8;
    --wpg-ink: #1e2227;
    --wpg-ink-2: #3a4048;
    --wpg-muted: #545c68;
    --wpg-line: #e6e9ed;
    --wpg-line-2: #d3d8de;
    --wpg-line-hover: #b6bdc6;
    --wpg-control: #7d8590;
    --wpg-track: #eceef1;
    /* gold: a fill with graphite text, or gold-ink text and strokes on white */
    --wpg-primary: #d4a72c;
    --wpg-primary-hover: #e0b84f;
    --wpg-on-primary: #1e2227;
    --wpg-accent-ink: #8a6410;
    --wpg-tint: #fbf3dc;
    --wpg-primary-line: #a87a0e;
    --wpg-bar: #a87a0e;
    --wpg-ring: rgba(212, 167, 44, .35);
    --wpg-focus: #8a6410;
    --wpg-focus-dark: #e0b84f;
    --wpg-link: #3a4048;
    --wpg-link-line: #a87a0e;
    --wpg-link-hover: #8a6410;
    /* white text on a strong fill (an alert's mark) */
    --wpg-on-fill: #fff;
    /* pass, warning (orange, never the gold), danger, info */
    --wpg-success: #1d7a47;
    --wpg-success-text: #166534;
    --wpg-success-tint: #e3f3ea;
    --wpg-success-line: #b7dec6;
    --wpg-warning: #c2410c;
    --wpg-warning-text: #9a3412;
    --wpg-warning-tint: #fdeee3;
    --wpg-warning-line: #f5cdb0;
    --wpg-danger: #b91c1c;
    --wpg-danger-tint: #fdecec;
    --wpg-danger-line: #f4c4c4;
    --wpg-info: #2f5bbf;
    --wpg-info-text: #1e3a8a;
    --wpg-info-tint: #e8eefb;
    --wpg-info-line: #c3d3f7;
    /* the graphite header card */
    --wpg-head-bg: #1e2227;
    --wpg-head-ink: #f3f4f6;
    --wpg-head-muted: #a3aab4;
    --wpg-head-strong: #fff;
    --wpg-head-chip-bg: #2c3138;
    --wpg-head-chip-ink: #d5d9de;
    --wpg-head-btn-line: #7d8590;
    --wpg-head-btn-hover: #2c3138;
    --wpg-head-btn-hover-line: #a3aab4;
    --wpg-head-cta-ink: #e6c066;
    --wpg-head-cta-line: #d4a72c;
    --wpg-head-warn: #f7b27a;
    --wpg-head-fail: #f4a39c;
    --wpg-state-bg: #2c3138;
    --wpg-state-ink: #e6c066;
    --wpg-state-dot: #d4a72c;
    --wpg-state-line: #6b5a2a;
    --wpg-state-warn-bg: #3d2a1a;
    --wpg-state-warn-dot: #f59e5b;
    --wpg-state-fail-bg: #3d2022;
    --wpg-state-fail-dot: #f28b82;
    --wpg-state-off-ink: #d5d9de;
    --wpg-state-off-dot: #a3aab4;
    /* the graphite menu */
    --wpg-nav-bg: #1e2227;
    --wpg-nav-group: #8e96a1;
    --wpg-nav-ink: #d5d9de;
    --wpg-nav-icon: #a3aab4;
    --wpg-nav-hover: #2c3138;
    --wpg-nav-hover-ink: #fff;
    --wpg-nav-hover-icon: #e0b84f;
    --wpg-nav-active-bg: #3b3728;
    --wpg-nav-active-ink: #e6c066;
    --wpg-nav-scroll: #545c68;
    /* the graphite Automatic conversion panel */
    --wpg-panel-bg: #1e2227;
    --wpg-panel-ink: #e6e8eb;
    --wpg-panel-muted: #a3aab4;
    --wpg-panel-line: #3a4048;
    --wpg-panel-title: #fff;
    --wpg-panel-accent: #e0b84f;
    --wpg-panel-warn-bg: #3d2a1a;
    --wpg-panel-warn-ink: #f7b27a;
    /* code on graphite */
    --wpg-code-bg: #1e2227;
    --wpg-code-ink: #e6e8eb;
    --wpg-code-muted: #a3aab4;
    --wpg-code-ok: #6fd3a0;
    --wpg-code-line: rgba(255, 255, 255, .12);
    --wpg-code-btn-line: rgba(255, 255, 255, .28);
    --wpg-code-btn-bg: rgba(255, 255, 255, .08);
    --wpg-code-btn-hover-line: rgba(255, 255, 255, .5);
    --wpg-code-btn-hover-bg: rgba(255, 255, 255, .16);
    /* Our modules: the team's signed note (the PrestaChamps colours, the same in every module) */
    --wpg-note-bg: #fff5fa;
    --wpg-note-heart: #ff0076;
    --wpg-note-title: #13106a;
    --wpg-note-ink: #3b3563;
    --wpg-note-sign: #321f95;
    --wpg-radius: 16px;
    --wpg-radius-md: 12px;
    --wpg-radius-sm: 10px;
    --wpg-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
    --wpg-shadow-tab: 0 1px 2px rgba(16, 24, 40, .12);
    --wpg-shadow-knob: 0 1px 2px rgba(0, 0, 0, .25);
    font-size: 14px;
    line-height: 1.5;
    color: var(--wpg-ink);
}

.wpg-ui *,
.wpg-ui *::before,
.wpg-ui *::after {
    box-sizing: border-box;
}

:is(.wpg-ui, #wpg-ui) :is(h1, h2, h3, h4) {
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
}

:is(.wpg-ui, #wpg-ui) p {
    margin: 0;
}

/* A link is graphite with a gold underline (graphite alone would not tell it from the text around it); hover turns it
   gold-ink. */
:is(.wpg-ui, #wpg-ui) a {
    color: var(--wpg-link);
    text-decoration: underline;
    text-decoration-color: var(--wpg-link-line);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

:is(.wpg-ui, #wpg-ui) a:hover {
    color: var(--wpg-link-hover);
}

/* one visible focus ring, gold-ink on light, for every link (the admin theme's own ring differs from one version to
   the next); on graphite it is the light gold */
:is(.wpg-ui, #wpg-ui) a:focus {
    outline: none;
}

:is(.wpg-ui, #wpg-ui) a:focus-visible {
    border-radius: 3px;
    outline: 2px solid var(--wpg-focus);
    outline-offset: 2px;
}

/* PrestaShop 9.1 underlines every link of #content.bootstrap but buttons
   (one id, three classes): the navigation, the crumb and the buttons stay plain
   with two ids' weight. Links inside texts keep their underline. */
:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) :is(.wpg-nav-item, .wpg-crumb, .wpg-btn) {
    text-decoration: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.wpg-ui .wpg-muted {
    color: var(--wpg-muted);
}

.wpg-ui .wpg-grow {
    flex: 1 1 auto;
    min-width: 0;
}

/* the stroke icons of _shell/icon.tpl: they fill the box their parent gives them */
.wpg-ui .wpg-icon {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ---- the shell: ground, crumb, header card --------------------------------- */

.wpg-ui.wpg-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 24px;
    padding: 20px;
    border-radius: var(--wpg-radius);
    background: var(--wpg-ground);
}

:is(.wpg-ui, #wpg-ui) .wpg-crumb {
    align-self: flex-start;
    margin: -4px 0 -6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--wpg-muted);
}

:is(.wpg-ui, #wpg-ui) .wpg-crumb:hover,
:is(.wpg-ui, #wpg-ui) .wpg-crumb:focus {
    color: var(--wpg-ink);
}

.wpg-ui .wpg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: var(--wpg-radius);
    background: var(--wpg-head-bg);
    box-shadow: var(--wpg-shadow);
    color: var(--wpg-head-ink);
}

.wpg-ui .wpg-head-tile {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--wpg-primary);
    color: var(--wpg-on-primary);
}

.wpg-ui .wpg-head-main {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wpg-ui .wpg-head-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

:is(.wpg-ui, #wpg-ui) .wpg-head-name {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--wpg-head-strong);
}

.wpg-ui .wpg-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* the version chip and the state badge beside the name (on the graphite header: their own tokens; a chip elsewhere is
   the light one) */
.wpg-ui .wpg-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--wpg-ground);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wpg-ink-2);
    white-space: nowrap;
}

.wpg-ui .wpg-head .wpg-chip {
    background: var(--wpg-head-chip-bg);
    color: var(--wpg-head-chip-ink);
}

/* the state badge: gold while the module works, orange while paused or needing attention, red while failing, grey
   while off in this shop (each the dark tint of its tone on the graphite header) */
.wpg-ui .wpg-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid var(--wpg-state-line);
    border-radius: 999px;
    background: var(--wpg-state-bg);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wpg-state-ink);
    white-space: nowrap;
}

.wpg-ui .wpg-state-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wpg-state-dot);
}

.wpg-ui .wpg-state:is(.is-paused, .is-attention) {
    border-color: transparent;
    background: var(--wpg-state-warn-bg);
    color: var(--wpg-head-warn);
}

.wpg-ui .wpg-state:is(.is-paused, .is-attention) .wpg-state-dot {
    background: var(--wpg-state-warn-dot);
}

.wpg-ui .wpg-state.is-failing {
    border-color: transparent;
    background: var(--wpg-state-fail-bg);
    color: var(--wpg-head-fail);
}

.wpg-ui .wpg-state.is-failing .wpg-state-dot {
    background: var(--wpg-state-fail-dot);
}

.wpg-ui .wpg-state.is-inactive {
    border-color: transparent;
    background: var(--wpg-head-chip-bg);
    color: var(--wpg-state-off-ink);
}

.wpg-ui .wpg-state.is-inactive .wpg-state-dot {
    background: var(--wpg-state-off-dot);
}

/* "Needs attention: N" leads to the Overview's checks: a badge that is a link (underlined on hover only) */
:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) a.wpg-state {
    color: var(--wpg-head-warn);
    text-decoration: none;
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) a.wpg-state:hover {
    color: var(--wpg-head-warn);
    text-decoration: underline;
    text-decoration-color: currentColor;
}

:is(.wpg-ui, #wpg-ui) a.wpg-state:focus-visible {
    outline-color: var(--wpg-focus-dark);
}

/* the live status line under the name: one muted line of parts, values in bold */
:is(.wpg-ui, #wpg-ui) .wpg-status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 20px;
    row-gap: 0;
    margin: 2px 0 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    font-size: 14px;
    line-height: 1.55;
    color: var(--wpg-head-muted);
}

/* Inside the flex status line the item is blockified anyway; what matters is
   that it is not a flex container itself: its text, <strong> and "after" text
   then flow as one line of inline content, with no gap before a comma.
   The dot before each part sits in a 20 px strip the part pulls back into the
   gap before it; the part that starts a line has its strip outside the list,
   which clips it: no line starts or ends with a dot when the facts wrap. */
.wpg-ui .wpg-status-item {
    display: inline;
    margin-inline-start: -20px;
    padding-inline-start: 20px;
}

.wpg-ui .wpg-status-item::before {
    content: "\00b7";
    content: "\00b7" / "";
    display: inline-block;
    width: 20px;
    margin-inline-start: -20px;
    text-align: center;
    color: var(--wpg-head-muted);
}

.wpg-ui .wpg-status-item strong {
    font-weight: 600;
    color: var(--wpg-head-strong);
}

.wpg-ui .wpg-status-item.is-warn strong {
    color: var(--wpg-head-warn);
}

.wpg-ui .wpg-status-item.is-fail strong {
    color: var(--wpg-head-fail);
}

/* the header's buttons on graphite: outlined in grey with light text; the main one gold (a fill while there is work,
   an outline when there is none); the light gold focus ring */
:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-head .wpg-btn {
    border-color: var(--wpg-head-btn-line);
    background: transparent;
    color: var(--wpg-head-ink);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-head .wpg-btn:is(:hover, :focus) {
    border-color: var(--wpg-head-btn-hover-line);
    background: var(--wpg-head-btn-hover);
    color: var(--wpg-head-strong);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-head .wpg-btn.wpg-btn-primary {
    border-color: var(--wpg-primary);
    background: var(--wpg-primary);
    color: var(--wpg-on-primary);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-head .wpg-btn.wpg-btn-primary:is(:hover, :focus) {
    border-color: var(--wpg-primary-hover);
    background: var(--wpg-primary-hover);
    color: var(--wpg-on-primary);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-head .wpg-btn.wpg-btn-outline {
    border-color: var(--wpg-head-cta-line);
    color: var(--wpg-head-cta-ink);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-head .wpg-btn.wpg-btn-outline:is(:hover, :focus) {
    border-color: var(--wpg-primary-hover);
    background: var(--wpg-head-btn-hover);
    color: var(--wpg-head-cta-ink);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-head :is(.wpg-btn, a):focus-visible {
    outline-color: var(--wpg-focus-dark);
}

/* ---- the shell: navigation + sections --------------------------------------- */

.wpg-ui .wpg-shell-grid {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.wpg-ui .wpg-main {
    min-width: 0;
}

.wpg-ui .wpg-nav {
    position: sticky;
    top: var(--wpg-sticky-top, 16px);
    max-height: calc(100vh - var(--wpg-sticky-top, 16px) - 16px);
    overflow-y: auto;
    padding: 14px;
    border-radius: var(--wpg-radius);
    background: var(--wpg-nav-bg);
    box-shadow: var(--wpg-shadow);
    scrollbar-color: var(--wpg-nav-scroll) transparent;
}

:is(.wpg-ui, #wpg-ui) .wpg-nav-group {
    margin: 0;
    padding: 14px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wpg-nav-group);
}

:is(.wpg-ui, #wpg-ui) .wpg-nav-group:first-child {
    padding-top: 0;
}

/* The Overview group holds only the Overview: its title would repeat the item's. */
:is(.wpg-ui, #wpg-ui) #wpg-nav-group-overview {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

:is(.wpg-ui, #wpg-ui) .wpg-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-nav-list > li {
    margin: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--wpg-nav-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-nav-item:hover,
:is(.wpg-ui, #wpg-ui) .wpg-nav-item:focus {
    background: var(--wpg-nav-hover);
    color: var(--wpg-nav-hover-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-nav-item:focus {
    outline: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-nav-item:focus-visible {
    outline: 2px solid var(--wpg-focus-dark);
    outline-offset: -2px;
}

:is(.wpg-ui, #wpg-ui) .wpg-nav-item.is-active {
    background: var(--wpg-nav-active-bg);
    font-weight: 600;
    color: var(--wpg-nav-active-ink);
}

.wpg-ui .wpg-nav-icon {
    display: inline-flex;
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--wpg-nav-icon);
}

.wpg-ui .wpg-nav-item:is(:hover, :focus) .wpg-nav-icon {
    color: var(--wpg-nav-hover-icon);
}

.wpg-ui .wpg-nav-item.is-active .wpg-nav-icon {
    color: var(--wpg-nav-active-ink);
}

.wpg-ui .wpg-nav-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wpg-ui .wpg-section {
    min-width: 0;
}

.wpg-ui .wpg-section-messages {
    margin: 0 0 16px;
}

/* the section title and its lead, above the cards (two ids' weight: PrestaShop styles bare h2) */
:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-section > h2 {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-section > .wpg-lead {
    margin: 4px 0 16px;
}

/* ---- cards ------------------------------------------------------------------ */

.wpg-ui .wpg-card {
    margin: 0 0 20px;
    border: 0;
    border-radius: var(--wpg-radius);
    background: var(--wpg-surface);
    box-shadow: var(--wpg-shadow);
}

.wpg-ui .wpg-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 22px 24px 0;
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-card-head h2,
:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-card-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wpg-ink);
}

/* a card title's (i) sits right after it, as a field's does; what follows (a count pill) goes to the end */
:is(.wpg-ui, #wpg-ui) .wpg-card-head > :is(h2, h3) + .wpg-help {
    margin-inline: -6px auto;
}

/* The lead takes its own line under the title (a max-width would let it share
   the title's line): the measure (about 75 characters) is a right padding. */
:is(.wpg-ui, #wpg-ui) .wpg-lead {
    flex: 0 0 100%;
    max-width: none;
    margin: 0;
    padding-inline-end: max(0px, calc(100% - 75ch));
    font-size: 14px;
    line-height: 1.5;
    color: var(--wpg-muted);
}

.wpg-ui .wpg-card-body {
    padding: 16px 24px 22px;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body > * + * {
    margin-top: 12px;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body > .wpg-field + .wpg-field {
    margin-top: 0;
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-card-body h4 {
    margin: 0;
    padding: 18px 0 0;
    border: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-card-body h4:first-child {
    padding-top: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body :is(ul, ol) {
    margin-bottom: 0;
    padding-inline-start: 20px;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body li + li {
    margin-top: 4px;
}

/* the buttons under a card: a line across the card's content, the main button at the end */
.wpg-ui .wpg-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
    margin: 0 24px;
    padding: 14px 0 22px;
    border-top: 1px solid var(--wpg-line);
}

/* A block of its own in a foot (Convert's run: what waits, its buttons, the bar) takes the whole line. As a flex item
   it would take the width its content is estimated at (a wrapping row inside is estimated narrower than the line) and
   wrap its rows early: 75 px instead of 44 px at 1440 px. A toolbar of buttons stays at the end. */
.wpg-ui .wpg-card-foot > div:not(.wpg-toolbar) {
    flex: 1 1 100%;
    min-width: 0;
}

/* the buttons of a form of several cards (Images to convert), under the last card */
.wpg-ui .wpg-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
    margin: 0 0 20px;
}

/* ---- buttons ---------------------------------------------------------------- */

:is(.wpg-ui, #wpg-ui) .wpg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 6px 16px;
    border: 1px solid var(--wpg-line-2);
    border-radius: var(--wpg-radius-sm);
    background: var(--wpg-surface);
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--wpg-ink);
    text-align: center;
    text-transform: none;
    /* A label longer than its button's room (a narrow column with PrestaShop's menu beside the page, a long
       translation) wraps inside the button instead of spilling out of it; a button with room keeps one line. In a
       table it keeps one line: the table scrolls in its frame. */
    white-space: normal;
    cursor: pointer;
}

:is(.wpg-ui, #wpg-ui) .wpg-table .wpg-btn {
    white-space: nowrap;
}

:is(.wpg-ui, #wpg-ui) .wpg-btn:hover,
:is(.wpg-ui, #wpg-ui) .wpg-btn:focus {
    border-color: var(--wpg-line-hover);
    background: var(--wpg-soft);
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-btn:focus {
    outline: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-btn:focus-visible {
    outline: 2px solid var(--wpg-focus);
    outline-offset: 2px;
}

/* the main action: a gold fill with graphite text */
:is(.wpg-ui, #wpg-ui) .wpg-btn-primary {
    padding-inline: 18px;
    border-color: var(--wpg-primary);
    background: var(--wpg-primary);
    color: var(--wpg-on-primary);
}

:is(.wpg-ui, #wpg-ui) .wpg-btn-primary:hover,
:is(.wpg-ui, #wpg-ui) .wpg-btn-primary:focus,
:is(.wpg-ui, #wpg-ui) .wpg-btn-primary:active {
    border-color: var(--wpg-primary-hover);
    background: var(--wpg-primary-hover);
    color: var(--wpg-on-primary);
}

:is(.wpg-ui, #wpg-ui) .wpg-btn-ghost {
    border-color: var(--wpg-line-2);
    background: var(--wpg-surface);
    color: var(--wpg-ink);
}

/* a secondary action of the gold family: white, a gold border, graphite text */
:is(.wpg-ui, #wpg-ui) .wpg-btn-outline {
    border-color: var(--wpg-primary-line);
    background: var(--wpg-surface);
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-btn-outline:hover,
:is(.wpg-ui, #wpg-ui) .wpg-btn-outline:focus {
    border-color: var(--wpg-accent-ink);
    background: var(--wpg-tint);
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-btn-danger {
    border-color: var(--wpg-danger-line);
    background: var(--wpg-surface);
    color: var(--wpg-danger);
}

:is(.wpg-ui, #wpg-ui) .wpg-btn-danger:hover,
:is(.wpg-ui, #wpg-ui) .wpg-btn-danger:focus {
    border-color: var(--wpg-danger);
    background: var(--wpg-danger-tint);
    color: var(--wpg-danger);
}

:is(.wpg-ui, #wpg-ui) .wpg-btn.wpg-btn-sm {
    min-height: 36px;
    padding-inline: 12px;
    border-radius: 8px;
    font-size: 13px;
}

:is(.wpg-ui, #wpg-ui) .wpg-btn:disabled,
:is(.wpg-ui, #wpg-ui) .wpg-btn[disabled],
:is(.wpg-ui, #wpg-ui) .wpg-btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* a link that looks like a text button */
:is(.wpg-ui, #wpg-ui) .wpg-link {
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font: inherit;
    font-weight: 600;
    color: var(--wpg-link);
    text-decoration: underline;
    text-decoration-color: var(--wpg-link-line);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: pointer;
}

:is(.wpg-ui, #wpg-ui) .wpg-link:hover {
    color: var(--wpg-link-hover);
}

:is(.wpg-ui, #wpg-ui) .wpg-link:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--wpg-focus);
    outline-offset: 2px;
}

:is(.wpg-ui, #wpg-ui) .wpg-link:disabled {
    color: var(--wpg-muted);
    cursor: not-allowed;
}

/* ---- form rows: label + (i) + help on the left, the control on the right ---- */

.wpg-ui .wpg-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 8px 24px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--wpg-line);
}

.wpg-ui .wpg-card-body > .wpg-field:first-child {
    padding-top: 2px;
    border-top: 0;
}

/* a switch sits at the end of its row */
.wpg-ui .wpg-field.wpg-field-switch {
    grid-template-columns: minmax(0, 1fr) auto;
}

/* a group of tick boxes takes the row's width under its label */
.wpg-ui .wpg-field.wpg-field-checkboxes {
    grid-template-columns: minmax(0, 1fr);
}

.wpg-ui .wpg-field-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* The label and its (i) flow as text: on a label of two lines the (i) follows its last word (as a flex row the label's
   box took the whole width and pushed the (i) to the column's end). */
.wpg-ui .wpg-field-title {
    display: block;
    min-width: 0;
    font-size: 14px;
    line-height: 1.4;
}

:is(.wpg-ui, #wpg-ui) .wpg-field-label :is(label, .wpg-label) {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wpg-ink);
    text-align: start;
    overflow-wrap: anywhere;
}

/* The (i) never stands alone at the start of a line ("Ne garder une copie que si elle économise au moins" put it on
   line 2 in French, Italian and Polish): the label keeps room for it at its end (an inline box's end padding sits on
   its last line, right after the last word, where no line breaks), and the (i), written right after the label with no
   space (_shell/fields.tpl), is drawn over that room (a negative start margin of its width): it adds no width of its
   own to the line, so it stays with the last word, which takes it along to the next line when both do not fit. */
:is(.wpg-ui, #wpg-ui) .wpg-field-title.has-help :is(label, .wpg-label) {
    padding-inline-end: 32px;
}

:is(.wpg-ui, #wpg-ui) .wpg-field-title.has-help > .wpg-help {
    margin-inline-start: -28px;
}

.wpg-ui .wpg-field-control {
    min-width: 0;
}

.wpg-ui .wpg-field-switch .wpg-field-control {
    justify-self: end;
}

/* the (i) help button and the help text it opens under the label */
:is(.wpg-ui, #wpg-ui) .wpg-help {
    display: inline-flex;
    vertical-align: middle;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 0;
    min-height: 0;
    margin: -4px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

:is(.wpg-ui, #wpg-ui) .wpg-help .wpg-help-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--wpg-accent-ink);
    border-radius: 50%;
    font: 700 11px/1 Georgia, serif;
    font-style: italic;
    color: var(--wpg-accent-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-help:hover .wpg-help-mark,
:is(.wpg-ui, #wpg-ui) .wpg-help[aria-expanded="true"] .wpg-help-mark {
    border-color: var(--wpg-accent-ink);
    background: var(--wpg-primary);
    color: var(--wpg-on-primary);
}

:is(.wpg-ui, #wpg-ui) .wpg-help:focus {
    outline: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-help:focus-visible {
    outline: 2px solid var(--wpg-focus);
    outline-offset: 0;
    box-shadow: 0 0 0 4px var(--wpg-ring);
}

:is(.wpg-ui, #wpg-ui) .wpg-help-text {
    max-width: 560px;
    margin: 6px 0 0;
    padding: 10px 12px;
    border-radius: var(--wpg-radius-sm);
    background: var(--wpg-soft);
    font-size: 13px;
    line-height: 1.5;
    color: var(--wpg-ink-2);
}

:is(.wpg-ui, #wpg-ui) .wpg-hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--wpg-muted);
}

.wpg-ui .wpg-field-note {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
}

/* the note of a switch sits under its label */
.wpg-ui .wpg-switch-note {
    display: block;
    margin: 0;
}

.wpg-ui .wpg-note-muted {
    color: var(--wpg-muted);
}

.wpg-ui .wpg-note-success {
    color: var(--wpg-success-text);
}

.wpg-ui .wpg-note-warn {
    color: var(--wpg-warning-text);
}

.wpg-ui .wpg-note-danger {
    color: var(--wpg-danger);
    font-weight: 600;
}

/* ---- controls --------------------------------------------------------------- */

:is(.wpg-ui, #wpg-ui) :is(input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], select, textarea) {
    display: block;
    max-width: 100%;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--wpg-control);
    border-radius: var(--wpg-radius-sm);
    background-color: var(--wpg-surface);
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) textarea {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

/* a select keeps the browser's list, drawn with the kit's chevron */
:is(.wpg-ui, #wpg-ui) select:not([multiple]) {
    padding-right: 36px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23545c68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}

body.lang-rtl :is(.wpg-ui, #wpg-ui) select:not([multiple]) {
    padding-right: 12px;
    padding-left: 36px;
    background-position: left 14px center;
}

:is(.wpg-ui, #wpg-ui) :is(input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], select, textarea):focus {
    border-color: var(--wpg-focus);
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px var(--wpg-ring);
}

:is(.wpg-ui, #wpg-ui) :is(input, select, textarea):disabled,
:is(.wpg-ui, #wpg-ui) :is(input, textarea)[readonly] {
    background-color: var(--wpg-soft);
    color: var(--wpg-muted);
}

:is(.wpg-ui, #wpg-ui) :is(input, select, textarea):disabled {
    cursor: not-allowed;
}

:is(.wpg-ui, #wpg-ui) input:is([type="checkbox"], [type="radio"], [type="range"]) {
    accent-color: var(--wpg-accent-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-field-control :is(input[type="text"], input[type="email"], input[type="password"], input[type="url"], select) {
    width: 100%;
    max-width: 520px;
}

/* a multilang field: one per language, the language code at its end */
.wpg-ui .wpg-lang-field {
    position: relative;
    max-width: 520px;
}

:is(.wpg-ui, #wpg-ui) .wpg-lang-field input {
    padding-inline-end: 48px;
}

.wpg-ui .wpg-lang-code {
    position: absolute;
    top: 50%;
    inset-inline-end: 8px;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--wpg-soft);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--wpg-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

/* switch: a checkbox drawn as a toggle (44 x 24, 18 px knob); on, its track is the darker gold of the progress bars
   (3:1 on white, as a control's state must be) */
.wpg-ui .wpg-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

:is(.wpg-ui, #wpg-ui) .wpg-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    font-weight: 400;
    cursor: pointer;
}

:is(.wpg-ui, #wpg-ui) .wpg-switch input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 44px;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.wpg-ui .wpg-switch-track {
    position: relative;
    flex: none;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--wpg-control);
    transition: background-color .15s ease-out;
}

.wpg-ui .wpg-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wpg-surface);
    box-shadow: var(--wpg-shadow-knob);
    transition: inset-inline-start .15s ease-out;
}

.wpg-ui .wpg-switch input:checked + .wpg-switch-track {
    background: var(--wpg-bar);
}

.wpg-ui .wpg-switch input:checked + .wpg-switch-track::after {
    inset-inline-start: 23px;
}

.wpg-ui .wpg-switch input:focus-visible + .wpg-switch-track {
    outline: 2px solid var(--wpg-focus);
    outline-offset: 2px;
}

/* the slider of a quality: the track in the progress gold, its value in a chip beside it, the presets under it */
.wpg-ui .wpg-range {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

:is(.wpg-ui, #wpg-ui) .wpg-range input[type="range"] {
    flex: 1 1 auto;
    accent-color: var(--wpg-bar);
    width: auto;
    min-width: 0;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
}

:is(.wpg-ui, #wpg-ui) .wpg-range input[type="range"]:focus {
    outline: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-range input[type="range"]:focus-visible {
    border-radius: 6px;
    outline: 2px solid var(--wpg-focus);
    outline-offset: 4px;
}

:is(.wpg-ui, #wpg-ui) .wpg-range input[type="range"]:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.wpg-ui .wpg-range-value {
    flex: none;
    min-width: 52px;
    padding: 7px 8px;
    border-radius: 8px;
    background: var(--wpg-ground);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--wpg-ink);
}

.wpg-ui .wpg-range-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

:is(.wpg-ui, #wpg-ui) .wpg-range-preset {
    min-height: 32px;
    margin: 0;
    padding: 4px 12px;
    border: 1px solid var(--wpg-line-2);
    border-radius: 999px;
    background: var(--wpg-surface);
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--wpg-ink-2);
    cursor: pointer;
}

:is(.wpg-ui, #wpg-ui) .wpg-range-preset:hover {
    border-color: var(--wpg-primary-line);
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-range-preset[aria-pressed="true"] {
    border-color: var(--wpg-primary-line);
    background: var(--wpg-tint);
    font-weight: 600;
    color: var(--wpg-accent-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-range-preset:focus {
    outline: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-range-preset:focus-visible {
    outline: 2px solid var(--wpg-focus);
    outline-offset: 2px;
}

:is(.wpg-ui, #wpg-ui) .wpg-range-preset:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* the segmented control: radio inputs drawn as one control */
.wpg-ui .wpg-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--wpg-control);
    border-radius: var(--wpg-radius-sm);
}

.wpg-ui .wpg-segmented label {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.wpg-ui .wpg-segmented label + label {
    border-inline-start: 1px solid var(--wpg-control);
}

:is(.wpg-ui, #wpg-ui) .wpg-segmented input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.wpg-ui .wpg-segmented span {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    background: var(--wpg-surface);
    color: var(--wpg-ink);
}

.wpg-ui .wpg-segmented input:checked + span {
    background: var(--wpg-primary);
    font-weight: 600;
    color: var(--wpg-on-primary);
}

.wpg-ui .wpg-segmented input:focus-visible + span {
    outline: 2px solid var(--wpg-focus);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--wpg-ring), inset 0 0 0 5px var(--wpg-surface);
}

/* disabled controls: visibly dimmed, with the not-allowed cursor */
:is(.wpg-ui, #wpg-ui) .wpg-switch input:disabled,
:is(.wpg-ui, #wpg-ui) .wpg-segmented input:disabled {
    cursor: not-allowed;
}

.wpg-ui .wpg-switch input:disabled + .wpg-switch-track,
.wpg-ui .wpg-segmented input:disabled + span {
    opacity: .5;
}

.wpg-ui .wpg-number {
    display: flex;
    align-items: center;
    gap: 8px;
}

:is(.wpg-ui, #wpg-ui) .wpg-number input[type="number"] {
    width: 84px;
}

.wpg-ui .wpg-number-unit {
    color: var(--wpg-muted);
}

/* tick-box tiles */
.wpg-ui .wpg-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
}

:is(.wpg-ui, #wpg-ui) .wpg-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--wpg-line-2);
    border-radius: var(--wpg-radius-sm);
    background: var(--wpg-surface);
    font-weight: 400;
    cursor: pointer;
}

:is(.wpg-ui, #wpg-ui) .wpg-check:hover {
    border-color: var(--wpg-primary-line);
}

:is(.wpg-ui, #wpg-ui) .wpg-check input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-check b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-check small {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--wpg-muted);
}

@supports selector(:has(*)) {
    :is(.wpg-ui, #wpg-ui) .wpg-check:has(input:checked) {
        border-color: var(--wpg-primary-line);
        background: var(--wpg-tint);
    }

    :is(.wpg-ui, #wpg-ui) .wpg-check:has(input:focus-visible) {
        outline: 2px solid var(--wpg-focus);
        outline-offset: 2px;
    }
}

/* ---- language tabs ------------------------------------------------------------ */

.wpg-ui .wpg-lang-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
    border-radius: var(--wpg-radius-sm);
    background: var(--wpg-ground);
}

:is(.wpg-ui, #wpg-ui) .wpg-lang-tab {
    min-width: 36px;
    min-height: 28px;
    margin: 0;
    padding: 3px 8px;
    border: 0;
    border-radius: 7px;
    background: none;
    box-shadow: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--wpg-ink-2);
    cursor: pointer;
}

:is(.wpg-ui, #wpg-ui) .wpg-lang-tab:hover {
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-lang-tab.is-active {
    background: var(--wpg-surface);
    box-shadow: var(--wpg-shadow-tab);
    color: var(--wpg-accent-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-lang-tab.is-inactive {
    font-style: italic;
    color: var(--wpg-muted);
}

:is(.wpg-ui, #wpg-ui) .wpg-lang-tab:focus {
    outline: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-lang-tab:focus-visible {
    outline: 2px solid var(--wpg-focus);
    outline-offset: 1px;
}

/* ---- badges and pills ------------------------------------------------------------ */

:is(.wpg-ui, #wpg-ui) .wpg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--wpg-ground);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wpg-ink-2);
    white-space: nowrap;
    vertical-align: middle;
}

/* the title pill of a card head (for example "Checks passed: 8 of 11") */
.wpg-ui .wpg-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wpg-ground);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wpg-ink-2);
}

.wpg-ui .wpg-pill.is-warn {
    background: var(--wpg-warning-tint);
    color: var(--wpg-warning-text);
}

.wpg-ui .wpg-pill.is-danger {
    background: var(--wpg-danger-tint);
    color: var(--wpg-danger);
}

.wpg-ui .wpg-pill.is-pass {
    background: var(--wpg-success-tint);
    color: var(--wpg-success-text);
}

/* the gold pill: something the module acts on (a CDN it can purge) */
.wpg-ui .wpg-pill.is-accent {
    background: var(--wpg-tint);
    color: var(--wpg-accent-ink);
}

.wpg-ui .wpg-pill.is-info {
    background: var(--wpg-info-tint);
    color: var(--wpg-info-text);
}

/* a pill in a table cell that needs two lines (a long language in a narrow column) is a rounded box, not an oval: the
   radius of a one-line pill (its height is 1.4 x 12 + 8 px); the second line not left with one word when avoidable */
:is(.wpg-ui, #wpg-ui) .wpg-table td .wpg-pill {
    border-radius: 12px;
    text-wrap: pretty;
}

/* a file name, a header line or an address inside a text: monospace on a light chip (not the back office's red code) */
:is(.wpg-ui, #wpg-ui) :not(pre) > code {
    padding: 1px 6px;
    border: 1px solid var(--wpg-line-2);
    border-radius: 6px;
    background: var(--wpg-soft);
    font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--wpg-ink-2);
    overflow-wrap: anywhere;
}

/* ---- tables ------------------------------------------------------------------- */

/* a table scrolls inside its own frame, never the page */
.wpg-ui .wpg-table-wrap {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--wpg-line);
    border-radius: var(--wpg-radius-md);
}

:is(.wpg-ui, #wpg-ui) .wpg-table {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: var(--wpg-surface);
    font-size: 13px;
}

:is(.wpg-ui, #wpg-ui) .wpg-table > thead > tr > th {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--wpg-line);
    background: var(--wpg-foot);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.3;
    text-align: start;
    text-transform: uppercase;
    vertical-align: bottom;
    color: var(--wpg-muted);
    /* Long headers (German, Italian, Polish) wrap between words, so the table fits its card. */
    white-space: normal;
}

:is(.wpg-ui, #wpg-ui) .wpg-table > tbody > tr > td {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--wpg-line);
    background: var(--wpg-surface);
    vertical-align: middle;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-table > tbody > tr > th {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--wpg-line);
    background: var(--wpg-surface);
    font-weight: 600;
    text-align: start;
    vertical-align: middle;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-table > tbody > tr:last-child > :is(td, th) {
    border-bottom: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-table > tbody > tr:hover > :is(td, th) {
    background: var(--wpg-soft);
}

:is(.wpg-ui, #wpg-ui) .wpg-table > tbody > tr.is-selected > td {
    background: var(--wpg-tint);
}

:is(.wpg-ui, #wpg-ui) .wpg-table :is(th, td).is-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

:is(.wpg-ui, #wpg-ui) .wpg-table td.is-num {
    white-space: nowrap;
}

:is(.wpg-ui, #wpg-ui) .wpg-table :is(th, td).is-center {
    text-align: center;
}

:is(.wpg-ui, #wpg-ui) .wpg-table :is(th, td).is-nowrap {
    white-space: nowrap;
}

:is(.wpg-ui, #wpg-ui) .wpg-table small {
    display: block;
    font-size: 12px;
    color: var(--wpg-muted);
}

:is(.wpg-ui, #wpg-ui) .wpg-table > thead > tr > th small {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
}

/* a shop address in bold (the address tables of Delivery and CDN) */
:is(.wpg-ui, #wpg-ui) .wpg-host-name {
    font-weight: 600;
    color: var(--wpg-ink);
    /* break-word, not anywhere: the address column keeps a short address on one line (localhost:9092 broke before its
       last digit at 1440 px), a very long one still wraps */
    overflow-wrap: break-word;
}

/* ---- rows of filters and actions, pagination ---------------------------------- */

.wpg-ui .wpg-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

:is(.wpg-ui, #wpg-ui) .wpg-toolbar :is(input[type="text"], input[type="search"]) {
    flex: 1 1 220px;
    width: auto;
    max-width: 360px;
}

:is(.wpg-ui, #wpg-ui) .wpg-toolbar select {
    width: auto;
}

/* a control and its button that stay on one line (a table cell grows instead) */
.wpg-ui .wpg-toolbar.is-nowrap {
    flex-wrap: nowrap;
}

.wpg-ui .wpg-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--wpg-muted);
}

/* ---- empty states, alerts, notices ---------------------------------------------- */

.wpg-ui .wpg-empty {
    padding: 28px 16px;
    border: 1px dashed var(--wpg-line-2);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-soft);
    font-size: 14px;
    text-align: center;
    color: var(--wpg-muted);
}

.wpg-ui .wpg-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--wpg-line-2);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-soft);
    font-size: 14px;
    line-height: 1.45;
    color: var(--wpg-ink-2);
}

.wpg-ui .wpg-alert + .wpg-alert {
    margin-top: 8px;
}

.wpg-ui .wpg-alert.is-success {
    border-color: var(--wpg-success-line);
    background: var(--wpg-success-tint);
    color: var(--wpg-success-text);
}

.wpg-ui .wpg-alert.is-warning {
    border-color: var(--wpg-warning-line);
    background: var(--wpg-warning-tint);
    color: var(--wpg-warning-text);
}

.wpg-ui .wpg-alert.is-danger {
    border-color: var(--wpg-danger-line);
    background: var(--wpg-danger-tint);
    color: var(--wpg-danger);
}

.wpg-ui .wpg-alert.is-info {
    border-color: var(--wpg-info-line);
    background: var(--wpg-info-tint);
    color: var(--wpg-info-text);
}

/* the alert's mark (i, !, a tick) in a round chip of the alert's colour */
.wpg-ui .wpg-alert-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 0;
    border-radius: 50%;
    background: var(--wpg-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--wpg-on-fill);
}

.wpg-ui .is-success > .wpg-alert-icon {
    background: var(--wpg-success);
}

.wpg-ui .is-warning > .wpg-alert-icon {
    background: var(--wpg-warning);
}

.wpg-ui .is-danger > .wpg-alert-icon {
    background: var(--wpg-danger);
}

.wpg-ui .is-info > .wpg-alert-icon {
    background: var(--wpg-info);
}

:is(.wpg-ui, #wpg-ui) .wpg-alert a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: currentColor;
}

/* the answer that opens a section (Overview, Automatic conversion): all is well (green), or what needs attention
   (orange, red when something fails), with its sentences or the rows of the checks and their fixes */
.wpg-ui .wpg-banner {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    margin: 0 0 20px;
    padding: 20px 24px;
    border: 1px solid var(--wpg-success-line);
    border-radius: var(--wpg-radius);
    background: var(--wpg-success-tint);
}

.wpg-ui .wpg-banner.is-warn {
    border-color: var(--wpg-warning-line);
    background: var(--wpg-warning-tint);
}

.wpg-ui .wpg-banner.is-danger {
    border-color: var(--wpg-danger-line);
    background: var(--wpg-danger-tint);
}

.wpg-ui .wpg-banner-mark {
    display: block;
    width: 44px;
    height: 44px;
    padding: 11px;
    border-radius: 50%;
    background: var(--wpg-surface);
    color: var(--wpg-success);
}

.wpg-ui .wpg-banner-mark .wpg-icon {
    stroke-width: 2.6;
}

.wpg-ui .is-warn > .wpg-banner-mark {
    color: var(--wpg-warning);
}

.wpg-ui .is-danger > .wpg-banner-mark {
    color: var(--wpg-danger);
}

.wpg-ui .wpg-banner-main {
    min-width: 0;
    align-self: center;
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-banner-title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-banner-text {
    margin: 4px 0 0;
    color: var(--wpg-ink-2);
}

/* the rows that need attention, inside the banner: on white, so their marks and fix links read as in the checks card */
:is(.wpg-ui, #wpg-ui) .wpg-banner .wpg-checklist {
    margin-top: 12px;
    padding: 4px 16px;
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-surface);
}

@media (max-width: 600px) {
    .wpg-ui .wpg-banner {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 16px;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-banner .wpg-checklist {
        padding: 2px 12px;
    }
}

/* the notice a module page shows instead of its content (_shell/notice.tpl): PrestaShop's alert box, in the kit's
   look where this stylesheet is loaded (an id's weight beats ".bootstrap .alert", and its icon) */
:is(.wpg-notice, #wpg-notice).alert {
    position: relative;
    margin: 0 0 20px;
    padding: 14px 16px 14px 46px;
    border: 1px solid var(--wpg-info-line);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-info-tint);
    box-shadow: none;
    font-size: 14px;
    line-height: 1.5;
    color: var(--wpg-info-text);
}

:is(.wpg-notice, #wpg-notice).alert::before {
    content: "i";
    content: "i" / "";
    position: absolute;
    top: 14px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--wpg-info);
    font: 700 12px/1 inherit;
    color: var(--wpg-on-fill);
}

:is(.wpg-notice, #wpg-notice).alert.is-danger {
    border-color: var(--wpg-danger-line);
    background: var(--wpg-danger-tint);
    color: var(--wpg-danger);
}

:is(.wpg-notice, #wpg-notice).alert.is-danger::before {
    content: "!";
    content: "!" / "";
    background: var(--wpg-danger);
}

/* an inline confirmation row (no browser dialogs): the question, then Yes and No */
.wpg-ui .wpg-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--wpg-warning-line);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-warning-tint);
    color: var(--wpg-warning-text);
}

/* a section that is not part of this build, or failed, or loads on demand */
.wpg-ui .wpg-pending {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.wpg-ui .wpg-pending-mark {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wpg-tint);
    font-weight: 700;
    color: var(--wpg-accent-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-pending > div > * + * {
    margin-top: 8px;
}

/* ---- the checklist ---------------------------------------------------------------- */

.wpg-ui .wpg-checklist-summary {
    margin: 0 0 4px;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-checklist,
:is(.wpg-ui, #wpg-ui) .wpg-checklist {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-checklist > li + li {
    margin-top: 0;
}

.wpg-ui .wpg-checklist-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--wpg-line);
}

.wpg-ui .wpg-checklist-row:last-child {
    border-bottom: 0;
}

.wpg-ui .wpg-checklist-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 6px;
    border-radius: 50%;
    background: var(--wpg-success-tint);
    color: var(--wpg-success);
}

.wpg-ui .is-warn > .wpg-checklist-icon {
    background: var(--wpg-warning-tint);
    color: var(--wpg-warning);
}

.wpg-ui .is-info > .wpg-checklist-icon {
    background: var(--wpg-info-tint);
    color: var(--wpg-info);
}

.wpg-ui .is-fail > .wpg-checklist-icon {
    background: var(--wpg-danger-tint);
    color: var(--wpg-danger);
}

.wpg-ui .wpg-checklist-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wpg-ui .wpg-checklist-text b {
    display: block;
    font-weight: 500;
    color: var(--wpg-ink);
}

.wpg-ui .wpg-checklist-text small {
    display: block;
    font-size: 13px;
    color: var(--wpg-muted);
}

/* the fix of a row: a text link at its end */
:is(.wpg-ui, #wpg-ui) .wpg-checklist-fix {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpg-link);
    text-decoration: underline;
    text-decoration-color: var(--wpg-link-line);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    white-space: nowrap;
}

:is(.wpg-ui, #wpg-ui) .wpg-checklist-fix:hover {
    color: var(--wpg-link-hover);
}

:is(.wpg-ui, #wpg-ui) .wpg-checklist-fix:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--wpg-focus);
    outline-offset: 2px;
}

.wpg-ui .wpg-checklist-row .wpg-btn {
    flex: none;
}

/* a list whose lines each start with a round gold mark (an empty span.wpg-icon-list-mark): Delivery's sources in the
   page and notes of the tests, CDN's notice and purge lines */
:is(.wpg-ui, #wpg-ui) .wpg-icon-list,
:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-icon-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-inline: 0;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-icon-list:first-child {
    margin-top: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-icon-list > li + li {
    margin-top: 0;
}

.wpg-ui .wpg-icon-list > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
    color: var(--wpg-ink-2);
}

.wpg-ui .wpg-icon-list-mark {
    position: relative;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wpg-tint);
}

.wpg-ui .wpg-icon-list-mark::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wpg-accent-ink);
}

/* ---- progress bars, step runs ----------------------------------------------------- */

.wpg-ui .wpg-progress-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.wpg-ui .wpg-progress-row span:first-child {
    font-weight: 600;
}

.wpg-ui .wpg-progress-row span:last-child {
    color: var(--wpg-muted);
}

.wpg-ui .wpg-progress {
    display: block;
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--wpg-track);
}

.wpg-ui .wpg-progress-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--wpg-bar);
}

:is(.wpg-ui, #wpg-ui) .wpg-progress-label {
    margin: 0;
    font-size: 13px;
    color: var(--wpg-ink-2);
}

/* the progress of a run of steps (the existing images, a delivery test, a clean up) */
.wpg-ui .wpg-jobs {
    padding: 14px 16px;
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-soft);
}

:is(.wpg-ui, #wpg-ui) .wpg-jobs > * + * {
    margin-top: 8px;
}

/* ---- the first-run step bar --------------------------------------------------------- */

:is(.wpg-ui, #wpg-ui) .wpg-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-step {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-surface);
    box-shadow: var(--wpg-shadow);
}

.wpg-ui .wpg-step-title {
    display: block;
    font-weight: 500;
    color: var(--wpg-ink);
}

.wpg-ui .wpg-step.is-current .wpg-step-title {
    font-weight: 700;
}

.wpg-ui .wpg-step small {
    display: block;
    font-size: 12px;
    color: var(--wpg-muted);
}

.wpg-ui .wpg-step.is-done small {
    font-weight: 600;
    color: var(--wpg-success-text);
}

:is(.wpg-ui, #wpg-ui) .wpg-step.is-current {
    padding: 11px 13px;
    border: 2px solid var(--wpg-primary-line);
    background: var(--wpg-tint);
}

.wpg-ui .wpg-step.is-current small {
    font-weight: 600;
    color: var(--wpg-accent-ink);
}

/* ---- choices and image previews ------------------------------------------------------ */

.wpg-ui .wpg-choices,
.wpg-ui .wpg-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.wpg-ui .wpg-choice {
    padding: 16px;
    border: 1px solid var(--wpg-line-2);
    border-radius: var(--wpg-radius-md);
}

.wpg-ui .wpg-choice.is-recommended {
    padding: 15px;
    border: 2px solid var(--wpg-primary-line);
}

.wpg-ui .wpg-choice .wpg-btn {
    width: 100%;
    margin-top: 12px;
}

.wpg-ui .wpg-preview {
    position: relative;
    padding: 16px;
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-soft);
}

.wpg-ui .wpg-preview-grid {
    gap: 12px;
    margin-top: 12px;
}

.wpg-ui .wpg-preview-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    overflow: hidden;
    border: 1px solid var(--wpg-line);
    border-radius: var(--wpg-radius-sm);
    background: var(--wpg-surface);
    font-size: 12px;
    text-align: center;
    color: var(--wpg-muted);
}

.wpg-ui .wpg-preview-frame img {
    max-width: 100%;
    max-height: 100%;
}

.wpg-ui .wpg-saved {
    color: var(--wpg-success-text);
}

/* an empty status line takes no room but stays a live region (display: none would keep a screen reader from it) */
.wpg-ui .wpg-preview-status:empty {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- figure tiles (the Overview's four, the Statistics' per format) -------------------------- */

/* a figure tile: its label and icon chip, the big figure, its bar, a caption; in a row of .wpg-tiles */
:is(.wpg-ui, #wpg-ui) .wpg-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 20px;
}

.wpg-ui .wpg-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 18px;
    border-radius: var(--wpg-radius);
    background: var(--wpg-surface);
    box-shadow: var(--wpg-shadow);
}

/* The tiles of a row share their heads' height (a label on two or three lines in French or German), so their figures
   line up: each tile is two rows of the row's grid (its head, its body). Without subgrid a tile is a column. */
@supports (grid-template-rows: subgrid) {
    .wpg-ui .wpg-tile {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        row-gap: 10px;
    }
}

.wpg-ui .wpg-tile-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.wpg-ui .wpg-tile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.wpg-ui .wpg-tile-label {
    min-width: 0;
    padding-top: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--wpg-muted);
}

.wpg-ui .wpg-tile-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 9px;
    background: var(--wpg-ground);
    color: var(--wpg-muted);
}

.wpg-ui .wpg-tile.is-accent .wpg-tile-icon {
    background: var(--wpg-tint);
    color: var(--wpg-accent-ink);
}

.wpg-ui .wpg-tile.is-warn .wpg-tile-icon {
    background: var(--wpg-warning-tint);
    color: var(--wpg-warning);
}

.wpg-ui .wpg-tile.is-info .wpg-tile-icon {
    background: var(--wpg-info-tint);
    color: var(--wpg-info);
}

.wpg-ui .wpg-tile.is-danger .wpg-tile-icon {
    background: var(--wpg-danger-tint);
    color: var(--wpg-danger);
}

:is(.wpg-ui, #wpg-ui) .wpg-tile-value {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--wpg-ink);
    overflow-wrap: anywhere;
}

/* a word rather than a number ("Server swap", "Not available") */
:is(.wpg-ui, #wpg-ui) .wpg-tile-value.is-text {
    font-size: 20px;
    line-height: 1.25;
}

:is(.wpg-ui, #wpg-ui) .wpg-tile-value::first-letter,
:is(.wpg-ui, #wpg-ui) .wpg-tile-caption::first-letter {
    text-transform: uppercase;
}

.wpg-ui .wpg-tile .wpg-progress {
    margin-top: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-tile-caption {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--wpg-muted);
}

:is(.wpg-ui, #wpg-ui) .wpg-tile-caption + .wpg-tile-caption {
    margin-top: -6px;
}

/* tiles inside a card (.is-inset, Statistics): on the soft fill instead of a shadow, as many per line as fit (two by
   two, then one per line on a phone) */
:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-tiles.is-inset {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-tiles.is-inset > .wpg-tile {
    margin: 0;
    padding: 16px;
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-soft);
    box-shadow: none;
}

/* one tile alone (WebP only) keeps a tile's width instead of stretching across the card */
:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-tiles.is-inset > .wpg-tile:only-child {
    width: 100%;
    max-width: 420px;
}

.wpg-ui .wpg-tiles.is-inset .wpg-tile-icon {
    background: var(--wpg-surface);
}

:is(.wpg-ui, #wpg-ui) .wpg-tiles.is-inset .wpg-tile-value {
    font-size: 26px;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body > * + .wpg-tiles.is-inset {
    margin-top: 12px;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-tiles.is-inset + * {
    margin-top: 16px;
}

/* With PrestaShop's menu beside the page, four tiles fit from about 1300 px: below, two by two, then one per line. */
@media (max-width: 1299px) {
    :is(.wpg-ui, #wpg-ui) .wpg-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    :is(.wpg-ui, #wpg-ui) .wpg-tiles {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .wpg-ui .wpg-tile {
        padding: 16px;
    }
}

/* ---- label + value rows, code, disclosures ---------------------------------------------- */

.wpg-ui .wpg-kv {
    border: 1px solid var(--wpg-line);
    border-radius: var(--wpg-radius-md);
}

:is(.wpg-ui, #wpg-ui) ul.wpg-kv {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpg-ui .wpg-kv-row {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 14px;
}

:is(.wpg-ui, #wpg-ui) .wpg-kv > .wpg-kv-row + .wpg-kv-row {
    margin-top: 0;
    border-top: 1px solid var(--wpg-line);
}

.wpg-ui .wpg-kv-key {
    font-weight: 600;
}

.wpg-ui .wpg-kv-value {
    color: var(--wpg-ink-2);
}

/* code to copy (the nginx configuration, the cron address) */
:is(.wpg-ui, #wpg-ui) .wpg-code {
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: var(--wpg-radius-sm);
    background: var(--wpg-code-bg);
    font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--wpg-code-ink);
}

/* two blocks in a row (the crontab lines without their Copy buttons, for a view-only employee) stay apart */
:is(.wpg-ui, #wpg-ui) .wpg-code + .wpg-code {
    margin-top: 10px;
}

/* a disclosure (the rules to add by hand) */
:is(.wpg-ui, #wpg-ui) .wpg-manual > summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--wpg-link);
    text-decoration: underline;
    text-decoration-color: var(--wpg-link-line);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: pointer;
}

:is(.wpg-ui, #wpg-ui) .wpg-manual > summary:focus-visible {
    outline: 2px solid var(--wpg-focus);
    outline-offset: 2px;
}

:is(.wpg-ui, #wpg-ui) .wpg-manual > * + * {
    margin-top: 10px;
}

/* a disclosure inside a card ("Show the details", "Show all checks"): a line above it, the summary a text button with
   a gold underline and a chevron at the end of the line, 44 px high */
.wpg-ui .wpg-details {
    margin-top: 16px;
    border-top: 1px solid var(--wpg-line);
}

:is(.wpg-ui, #wpg-ui) .wpg-details > summary {
    display: flex;
    align-items: center;
    gap: 4px 12px;
    min-height: 44px;
    padding: 10px 0 0;
    list-style: none;
    cursor: pointer;
}

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

.wpg-ui .wpg-details-label {
    font-weight: 600;
    color: var(--wpg-link);
    text-decoration: underline;
    text-decoration-color: var(--wpg-link-line);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.wpg-ui .wpg-details > summary:hover .wpg-details-label {
    color: var(--wpg-link-hover);
}

.wpg-ui .wpg-details-chevron {
    flex: none;
    width: 9px;
    height: 9px;
    margin-inline: auto 6px;
    border-right: 2px solid var(--wpg-muted);
    border-bottom: 2px solid var(--wpg-muted);
    transform: rotate(45deg);
}

.wpg-ui .wpg-details[open] > summary .wpg-details-chevron {
    transform: rotate(225deg);
}

:is(.wpg-ui, #wpg-ui) .wpg-details > summary:focus {
    outline: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-details > summary:focus-visible {
    border-radius: 6px;
    outline: 2px solid var(--wpg-focus);
    outline-offset: 2px;
}

.wpg-ui .wpg-details[open] > summary {
    margin-bottom: 12px;
}

/* a disclosure that starts a card's body needs no line above it (the card's head is above) */
:is(.wpg-ui, #wpg-ui) .wpg-card-body > .wpg-details:first-child {
    margin-top: 0;
    border-top: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body > .wpg-details:first-child > summary {
    padding-top: 0;
}

/* a collapsed card (Advanced): its head is the summary, the arrow at the end of the title's line */
.wpg-ui .wpg-advanced > summary {
    padding-bottom: 22px;
    cursor: pointer;
    list-style: none;
}

.wpg-ui .wpg-advanced > summary::-webkit-details-marker {
    display: none;
}

/* the chevron at the end of the title's line: two drawn sides of a square, turned (right closed, down open) */
.wpg-ui .wpg-advanced > summary::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin-inline: auto 6px;
    border-right: 2px solid var(--wpg-muted);
    border-bottom: 2px solid var(--wpg-muted);
    transform: rotate(-45deg);
}

body.lang-rtl .wpg-ui .wpg-advanced > summary::after {
    transform: rotate(135deg);
}

.wpg-ui .wpg-advanced[open] > summary {
    padding-bottom: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-advanced[open] > summary::after {
    transform: rotate(45deg);
}

.wpg-ui .wpg-advanced > summary:hover::after {
    border-color: var(--wpg-accent-ink);
}

.wpg-ui .wpg-advanced > summary:focus-visible {
    border-radius: var(--wpg-radius);
    outline: 0;
    box-shadow: 0 0 0 2px var(--wpg-focus);
}

/* the arrow stays on the title's line, the hint takes the next one */
.wpg-ui .wpg-advanced > summary .wpg-hint {
    flex: 1 1 100%;
    order: 2;
}

/* a section that loads when it is opened, is missing from this build, or failed */
.wpg-ui .wpg-section-state .wpg-card-body {
    padding-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .wpg-ui .wpg-switch-track,
    .wpg-ui .wpg-switch-track::after {
        transition: none;
    }
}

/* ---- narrower screens ------------------------------------------------------------------- */

/* Below 1300 px (PrestaShop's menu takes its share) the header's buttons take a line of their own under the name and
   the status line, aligned with them, so the status line keeps the card's width. */
@media (max-width: 1299px) {
    .wpg-ui .wpg-head-actions {
        flex: 1 1 100%;
        margin-inline-start: 68px;
    }
}

/* Below 900 px the navigation becomes a strip of pills above the section that scrolls sideways (the page never
   does), and every target is at least 44 px. */
@media (max-width: 900px) {
    .wpg-ui.wpg-shell {
        gap: 12px;
        padding: 12px;
    }

    .wpg-ui .wpg-head {
        gap: 12px 14px;
        padding: 16px;
    }

    .wpg-ui .wpg-shell-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .wpg-ui .wpg-nav {
        position: static;
        display: flex;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 4px;
        padding: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--wpg-nav-scroll) transparent;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-nav-group {
        display: none;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-nav-list {
        flex-direction: row;
        gap: 4px;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-nav-item {
        min-height: 44px;
        white-space: nowrap;
    }

    .wpg-ui .wpg-nav-text {
        overflow-wrap: normal;
    }

    .wpg-ui .wpg-card-head {
        padding: 18px 16px 0;
    }

    .wpg-ui .wpg-card-body {
        padding: 14px 16px 18px;
    }

    .wpg-ui .wpg-card-foot {
        margin: 0 16px;
        padding: 14px 0 18px;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-btn,
    :is(.wpg-ui, #wpg-ui) .wpg-btn.wpg-btn-sm {
        min-height: 44px;
        white-space: normal;
        text-align: center;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-range-preset,
    :is(.wpg-ui, #wpg-ui) .wpg-lang-tab,
    :is(.wpg-ui, #wpg-ui) .wpg-checklist-fix {
        min-height: 44px;
    }

    /* a disclosure's summary (the rules to add by hand, the crontab lines) is a 44 px target too */
    :is(.wpg-ui, #wpg-ui) .wpg-manual > summary {
        padding-block: 12px;
        line-height: 20px;
    }

    /* inputs and selects: 44 px targets too */
    :is(.wpg-ui, #wpg-ui) :is(input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], select) {
        height: 44px;
        min-height: 44px;
    }

    /* the quality slider: the track stays thin, the target around it is 44 px high (the thumb stays centred) */
    :is(.wpg-ui, #wpg-ui) .wpg-range input[type="range"] {
        height: 44px;
    }

    /* a text button or link (Reopen the setup steps, Skip the setup, Formats' link to PrestaShop's image settings,
       Delivery's) keeps its look with a 44 px target */
    :is(.wpg-ui, #wpg-ui) .wpg-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        text-align: start;
    }

    /* the link at the end of a figure tile's caption: on a line of its own, 44 px high */
    :is(.wpg-ui, #wpg-ui) .wpg-tile-caption a {
        display: flex;
        align-items: center;
        width: fit-content;
        min-height: 44px;
    }

    /* the (i) keeps its look and gets a 44 px target without making the row taller */
    :is(.wpg-ui, #wpg-ui) .wpg-help {
        width: 44px;
        height: 44px;
        margin: -12px -8px;
    }

    /* a field's (i), 44 px wide: still no width of its own after its label, its mark where it is on a wide screen */
    :is(.wpg-ui, #wpg-ui) .wpg-field-title.has-help > .wpg-help {
        margin-inline-start: -36px;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .wpg-ui .wpg-choices,
    .wpg-ui .wpg-preview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wpg-ui .wpg-kv-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    /* a table marked is-stacked: each row a block, each cell a line of its own under its column's name (data-label);
       the column names row stays for screen readers only (the cells keep their table roles) */
    :is(.wpg-ui, #wpg-ui) .wpg-table.is-stacked,
    :is(.wpg-ui, #wpg-ui) .wpg-table.is-stacked > tbody,
    :is(.wpg-ui, #wpg-ui) .wpg-table.is-stacked > tbody > tr,
    :is(.wpg-ui, #wpg-ui) .wpg-table.is-stacked > tbody > tr > td {
        display: block;
        width: 100%;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-table.is-stacked > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-table.is-stacked > tbody > tr {
        padding: 6px 0;
        border-bottom: 1px solid var(--wpg-line);
    }

    :is(.wpg-ui, #wpg-ui) .wpg-table.is-stacked > tbody > tr:last-child {
        border-bottom: 0;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-table.is-stacked > tbody > tr > td {
        padding: 5px 12px;
        border-bottom: 0;
        white-space: normal;
    }

    /* a figure starts its line like the other cells (its column is gone) */
    :is(.wpg-ui, #wpg-ui) .wpg-table.is-stacked > tbody > tr > td.is-num {
        text-align: start;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-table.is-stacked > tbody > tr > td::before {
        content: attr(data-label);
        content: attr(data-label) / "";
        display: block;
        margin-bottom: 2px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em;
        line-height: 1.3;
        text-transform: uppercase;
        color: var(--wpg-muted);
    }

    :is(.wpg-ui, #wpg-ui) .wpg-table.is-stacked .wpg-toolbar.is-nowrap {
        flex-wrap: wrap;
    }
}

/* A phone: form rows stack (the control under its label; a switch stays at the end of its label's line), the
   header's buttons share the width, a checklist row's link goes under its text. */
@media (max-width: 600px) {
    .wpg-ui .wpg-field {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .wpg-ui .wpg-field.wpg-field-switch {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 16px;
    }

    .wpg-ui .wpg-head {
        align-items: flex-start;
    }

    .wpg-ui .wpg-head-tile {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-head-name {
        font-size: 20px;
    }

    .wpg-ui .wpg-head-main {
        flex-basis: calc(100% - 58px);
    }

    .wpg-ui .wpg-head-actions {
        flex: 1 1 100%;
        margin-inline-start: 0;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-head-actions .wpg-btn {
        flex: 1 1 auto;
    }

    /* a phone: the badge and the first two facts (the header stays a few lines; the Overview says the rest) */
    .wpg-ui .wpg-status-item:nth-child(n + 3) {
        display: none;
    }

    /* each fact on its own line (each starts a line: its dot is clipped) */
    :is(.wpg-ui, #wpg-ui) .wpg-status {
        flex-direction: column;
        align-items: flex-start;
    }

    .wpg-ui .wpg-checklist-row {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 4px;
    }

    .wpg-ui .wpg-checklist-text {
        flex-basis: calc(100% - 38px);
        padding-top: 2px;
    }

    .wpg-ui .wpg-checklist-row > :is(.wpg-checklist-fix, .wpg-btn) {
        margin-inline-start: 38px;
    }
}

/* ==========================================================================
   SECTION BLOCKS
   One block per section of the navigation, in its order. What only one section
   draws goes into its block (between its two comments), with the kit's weight
   tiers; the kit above stays shared.
   ========================================================================== */

/* ---- section: overview -------------------------------------------------------------- */

/* the checks card beside the graphite Automatic conversion panel */
.wpg-ui .wpg-overview-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* during the first-run setup the checks card is alone in its row (no Automatic conversion panel) */
.wpg-ui .wpg-overview-row.is-single {
    grid-template-columns: minmax(0, 1fr);
}

:is(.wpg-ui, #wpg-ui) .wpg-auto-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 20px;
    padding: 22px 24px;
    border-radius: var(--wpg-radius);
    background: var(--wpg-panel-bg);
    color: var(--wpg-panel-ink);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-auto-panel h3 {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wpg-panel-title);
}

/* the clock of the menu's Automatic conversion before the panel's title, in gold (mockup V1) */
.wpg-ui .wpg-auto-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-inline-end: 10px;
    vertical-align: -3px;
    color: var(--wpg-panel-accent);
}

.wpg-ui .wpg-auto-icon .wpg-icon {
    display: block;
    width: 100%;
    height: 100%;
}

:is(.wpg-ui, #wpg-ui) .wpg-auto-panel p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--wpg-panel-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-auto-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

/* each row on a line of the panel: the label muted, the value in gold */
:is(.wpg-ui, #wpg-ui) .wpg-auto-rows > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid var(--wpg-panel-line);
    font-size: 14px;
    color: var(--wpg-panel-muted);
}

/* a short value keeps its line ("acum 16 min") and its label wraps instead; a long one ("Aucune exécution pour
   l'instant") wraps within 60 % of the row */
:is(.wpg-ui, #wpg-ui) .wpg-auto-rows strong {
    flex: 0 0 auto;
    max-width: 60%;
    font-weight: 700;
    text-align: end;
    color: var(--wpg-panel-accent);
    font-variant-numeric: tabular-nums;
}

/* the last run that never came, or long ago: an orange pill on the graphite */
:is(.wpg-ui, #wpg-ui) .wpg-auto-rows strong.is-warn {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--wpg-panel-warn-bg);
    color: var(--wpg-panel-warn-ink);
}

/* From 1300 px the panel is a third of the main column: its button's label may take two lines (the kit's buttons wrap;
   in French and German it is wider than the button up to about 1550 px with PrestaShop's menu) */
:is(.wpg-ui, #wpg-ui) .wpg-auto-panel .wpg-auto-open {
    width: 100%;
    margin-top: 4px;
    border-color: var(--wpg-primary);
    background: var(--wpg-primary);
    color: var(--wpg-on-primary);
}

:is(.wpg-ui, #wpg-ui) .wpg-auto-panel .wpg-auto-open:hover,
:is(.wpg-ui, #wpg-ui) .wpg-auto-panel .wpg-auto-open:focus {
    border-color: var(--wpg-primary-hover);
    background: var(--wpg-primary-hover);
    color: var(--wpg-on-primary);
}

:is(.wpg-ui, #wpg-ui) .wpg-auto-panel :is(.wpg-auto-open, a):focus-visible {
    outline-color: var(--wpg-focus-dark);
}

/* below 1300 px the panel goes under the checks card */
@media (max-width: 1299px) {
    .wpg-ui .wpg-overview-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* three tiles: what the visitors get, the copies, the download size saved */
:is(.wpg-ui, #wpg-ui) #wpg-overview-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1299px) {
    :is(.wpg-ui, #wpg-ui) #wpg-overview-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :is(.wpg-ui, #wpg-ui) #wpg-overview-tiles > .wpg-tile:first-child {
        grid-column: 1 / -1;
    }
}

/* a phone: the first tile on its own line, the other two side by side (two screens less before the checks) */
@media (max-width: 600px) {
    :is(.wpg-ui, #wpg-ui) #wpg-overview-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    :is(.wpg-ui, #wpg-ui) #wpg-overview-tiles .wpg-tile-value:not(.is-text) {
        font-size: 24px;
    }

}

/* the first-run step card under the step bar: Back and Skip on the left, Next on the right */
.wpg-ui .wpg-card-foot.wpg-setup-nav {
    justify-content: flex-start;
}

:is(.wpg-ui, #wpg-ui) .wpg-setup-nav form {
    margin: 0;
}

/* Next stays on the row of Back and Skip where they fit side by side ("Suivant : Activer la diffusion" went to a row of
   its own in French, German and Italian at 1366 px): Skip's link is what gives way. Its form counts as 12em when the
   row is laid out, takes the room left between Back and Next (which pushes Next to the end) and wraps its link onto a
   second line when that room is short. A row too narrow even for that (a phone) still puts Next under the others. */
:is(.wpg-ui, #wpg-ui) .wpg-setup-nav > .wpg-setup-skip {
    flex: 1 1 12em;
    min-width: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-setup-skip .wpg-link {
    text-align: start;
}

/* a quality choice of the first run: its title with pills, the sizes, the preview frame */
.wpg-ui .wpg-choice-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
}

.wpg-ui .wpg-choice .wpg-pill {
    padding: 2px 8px;
}

:is(.wpg-ui, #wpg-ui) .wpg-choice .wpg-hint {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--wpg-ink-2);
}

.wpg-ui .wpg-setup .wpg-preview-frame {
    height: 180px;
}

/* ---- end of section: overview ------------------------------------------------------- */

/* ---- section: formats --------------------------------------------------------------- */

/* the preview inside the card */
:is(.wpg-ui, #wpg-ui) .wpg-preview-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

:is(.wpg-ui, #wpg-ui) .wpg-preview-size {
    margin-top: 6px;
    font-size: 13px;
    color: var(--wpg-ink-2);
}

/* a server that cannot make AVIF: the original and the WebP copy only, side by side (one under the other below
   900 px, as the kit's grid) */
@media (min-width: 901px) {
    :is(.wpg-ui, #wpg-ui) #wpg-formats-preview .wpg-preview-grid.is-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- end of section: formats -------------------------------------------------------- */

/* ---- section: images ---------------------------------------------------------------- */

/* the kinds of images: each switch row starts with the icon of its kind in a gold tinted square (grey while it is
   off); what it covers and the images found stay its note. The square is the label's ::before, the icon its ::after:
   an SVG data image used as a mask (the rows are the shared fields template's), painted in the kit's gold-ink, so no
   colour is baked into the image; in the stroke style of _shell/icon.tpl. */
:is(.wpg-ui, #wpg-ui) #wpg-images-kinds .wpg-field-switch .wpg-field-label {
    position: relative;
    justify-content: center;
    min-height: 36px;
    padding-inline-start: 50px;
}

:is(.wpg-ui, #wpg-ui) #wpg-images-kinds .wpg-field-switch .wpg-field-label::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--wpg-tint);
}

:is(.wpg-ui, #wpg-ui) #wpg-images-kinds .wpg-field-switch .wpg-field-label::after {
    content: "";
    position: absolute;
    top: 9px;
    inset-inline-start: 9px;
    width: 18px;
    height: 18px;
    background: var(--wpg-accent-ink);
    -webkit-mask: var(--wpg-kind-icon, none) center / 18px 18px no-repeat;
    mask: var(--wpg-kind-icon, none) center / 18px 18px no-repeat;
}

:is(.wpg-ui, #wpg-ui) #family_catalogue_row {
    --wpg-kind-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

:is(.wpg-ui, #wpg-ui) #family_cms_row {
    --wpg-kind-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9l-6-6z'/%3E%3Cpath d='M14 3v6h6'/%3E%3C/svg%3E");
}

:is(.wpg-ui, #wpg-ui) #family_theme_row {
    --wpg-kind-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3C/svg%3E");
}

:is(.wpg-ui, #wpg-ui) #family_logo_row {
    --wpg-kind-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E");
}

:is(.wpg-ui, #wpg-ui) #family_module_row {
    --wpg-kind-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4'/%3E%3C/svg%3E");
}

@supports selector(:has(*)) {
    :is(.wpg-ui, #wpg-ui) #wpg-images-kinds .wpg-field-switch:has(input[role="switch"]:not(:checked)) .wpg-field-label::before {
        background: var(--wpg-ground);
    }

    :is(.wpg-ui, #wpg-ui) #wpg-images-kinds .wpg-field-switch:has(input[role="switch"]:not(:checked)) .wpg-field-label::after {
        background: var(--wpg-muted);
    }
}

@media (max-width: 600px) {
    :is(.wpg-ui, #wpg-ui) #wpg-images-kinds .wpg-field-switch .wpg-field-label {
        min-height: 32px;
        padding-inline-start: 44px;
    }

    :is(.wpg-ui, #wpg-ui) #wpg-images-kinds .wpg-field-switch .wpg-field-label::before {
        width: 32px;
        height: 32px;
    }

    :is(.wpg-ui, #wpg-ui) #wpg-images-kinds .wpg-field-switch .wpg-field-label::after {
        top: 8px;
        inset-inline-start: 8px;
        width: 16px;
        height: 16px;
        -webkit-mask-size: 16px 16px;
        mask-size: 16px 16px;
    }
}

/* the module picker: the first row of its card has no line above it (a hidden field comes first) */
:is(.wpg-ui, #wpg-ui) #wpg-images-modules .wpg-card-body > input[type="hidden"]:first-child + .wpg-field {
    padding-top: 2px;
    border-top: 0;
}

:is(.wpg-ui, #wpg-ui) #wpg-images-modules .wpg-checks + .wpg-field-note {
    margin-top: 10px;
}

/* ---- end of section: images --------------------------------------------------------- */

/* ---- section: engine ---------------------------------------------------------------- */

/* the engines of this server: one row each in a frame, the icon tinted in the row's tone (gold: it makes copies here;
   orange: refused; grey: not here), the name, what it creates after a dot of that tone, its place as a badge; the
   last test conversion as the last row */
:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-engines {
    margin: 0;
    padding: 0;
    border: 1px solid var(--wpg-line-2);
    border-radius: var(--wpg-radius-md);
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-engines > li {
    display: grid;
    grid-template-columns: 36px minmax(120px, 220px) minmax(0, 1fr);
    gap: 4px 14px;
    align-items: center;
    margin: 0;
    padding: 12px 16px;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-engines > li + li {
    border-top: 1px solid var(--wpg-line);
}

.wpg-ui .wpg-engine-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    padding: 9px;
    border-radius: 10px;
    background: var(--wpg-ground);
    color: var(--wpg-muted);
}

.wpg-ui .wpg-engine.is-success .wpg-engine-icon {
    background: var(--wpg-tint);
    color: var(--wpg-accent-ink);
}

.wpg-ui .wpg-engine.is-warn .wpg-engine-icon {
    background: var(--wpg-warning-tint);
    color: var(--wpg-warning);
}

.wpg-ui .wpg-engine.is-probe .wpg-engine-icon {
    background: var(--wpg-info-tint);
    color: var(--wpg-info);
}

.wpg-ui .wpg-engine-name {
    min-width: 0;
    font-weight: 600;
    color: var(--wpg-ink);
    overflow-wrap: anywhere;
}

.wpg-ui .wpg-engine-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
    color: var(--wpg-ink-2);
}

.wpg-ui .wpg-engine-state {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    color: var(--wpg-muted);
}

.wpg-ui .wpg-engine-state::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wpg-control);
    transform: translateY(-1px);
}

.wpg-ui .wpg-engine.is-success .wpg-engine-state {
    font-weight: 600;
    color: var(--wpg-success-text);
}

.wpg-ui .wpg-engine.is-success .wpg-engine-state::before {
    background: var(--wpg-success);
}

.wpg-ui .wpg-engine.is-warn .wpg-engine-state {
    font-weight: 600;
    color: var(--wpg-warning-text);
}

.wpg-ui .wpg-engine.is-warn .wpg-engine-state::before {
    background: var(--wpg-warning);
}

/* the test conversion: the button and what it does, then its lines in a frame, each with a round tick, cross or dash */
:is(.wpg-ui, #wpg-ui) .wpg-engine-test {
    margin-top: 16px;
}

:is(.wpg-ui, #wpg-ui) .wpg-engine-test > * + * {
    margin-top: 8px;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-test-rows {
    margin: 12px 0 0;
    padding: 4px 16px;
    border: 1px solid var(--wpg-line-2);
    border-radius: var(--wpg-radius-md);
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-test-rows li {
    position: relative;
    margin: 0;
    padding: 9px 0;
    padding-inline-start: 34px;
    line-height: 1.45;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-test-rows li + li {
    border-top: 1px solid var(--wpg-line);
}

.wpg-ui .wpg-test-rows li::before {
    position: absolute;
    top: 8px;
    inset-inline-start: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.wpg-ui .wpg-test-rows li.is-pass::before {
    content: "\2713";
    content: "\2713" / "";
    background: var(--wpg-success-tint);
    color: var(--wpg-success);
}

.wpg-ui .wpg-test-rows li.is-fail::before {
    content: "\00D7";
    content: "\00D7" / "";
    background: var(--wpg-danger-tint);
    color: var(--wpg-danger);
}

.wpg-ui .wpg-test-rows li.is-skip::before {
    content: "\2013";
    content: "\2013" / "";
    background: var(--wpg-ground);
    color: var(--wpg-muted);
}

/* Advanced: "Remove the key" sits right under the key's field, without a line of its own */
.wpg-ui .wpg-field#wpg-engine-key-remove {
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 600px) {
    :is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-engines > li {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 12px;
    }

    .wpg-ui .wpg-engine-status {
        grid-column: 2;
    }
}

/* ---- end of section: engine --------------------------------------------------------- */

/* ---- section: delivery -------------------------------------------------------------- */

/* code to copy with a dark head bar holding its name, the Copy button and the Copy result (.wpg-code-box) */
.wpg-ui .wpg-code-box {
    overflow: hidden;
    border-radius: var(--wpg-radius-sm);
    background: var(--wpg-code-bg);
}

.wpg-ui .wpg-code-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 8px;
    padding-inline-start: 16px;
    border-bottom: 1px solid var(--wpg-code-line);
}

.wpg-ui .wpg-code-title {
    flex: 1 1 auto;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--wpg-code-muted);
}

.wpg-ui .wpg-code-copied {
    font-size: 12px;
    font-weight: 600;
    color: var(--wpg-code-ok);
}

:is(.wpg-ui, #wpg-ui) .wpg-code-box .wpg-code {
    border-radius: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-btn.wpg-code-copy {
    border-color: var(--wpg-code-btn-line);
    background: var(--wpg-code-btn-bg);
    color: var(--wpg-code-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-btn.wpg-code-copy:hover,
:is(.wpg-ui, #wpg-ui) .wpg-btn.wpg-code-copy:focus {
    border-color: var(--wpg-code-btn-hover-line);
    background: var(--wpg-code-btn-hover-bg);
    color: var(--wpg-code-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-btn.wpg-code-copy:focus-visible {
    outline-color: var(--wpg-focus-dark);
}

/* the addresses: the address in bold (.wpg-host-name, the kit), how its images are sent as a pill in the tone of the
   answer, why under it */
:is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts-table td > .wpg-pill {
    margin-bottom: 4px;
}

:is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts-table small.wpg-host-note {
    margin-top: 4px;
    color: var(--wpg-ink-2);
}

:is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts-table .wpg-host-test {
    min-width: 9em;
    color: var(--wpg-ink-2);
}

:is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts-table td > .wpg-btn {
    margin-top: 8px;
}

/* the pill of how images are sent reads on one line, two at most in the long languages ("Misma dirección (sustitución
   en el servidor)", "Ten sam adres (podmiana na serwerze)"): its column has 30% of the table and never less than 15em
   (one line in English at 1366 px, in German and French at 1440 px), where the Mode column used to take the room for
   its select and Apply side by side and leave the pill a word per line (3 to 5 lines) */
:is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts-table > thead > tr > th.wpg-host-how {
    width: 30%;
}

:is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts-table td.wpg-host-how {
    min-width: 15em;
}

/* the Mode column: the select on its line with Apply under it; the column has 40% of the table (the select is seen
   whole in English, French and German at 1366 px), the select narrows rather than push the table past its card */
:is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts-table > thead > tr > th.wpg-host-mode {
    width: 40%;
}

:is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts-table .wpg-toolbar select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 10em;
}

/* Where the table has room (a frame of 720 px or more: 1366 px and wider with PrestaShop's menu), the select is never
   narrower than its longest choice, so the chosen mode reads in full ("Misma dirección (sustitución en el servidor)"
   was cut at "…en el se" in Spanish, Italian and Polish): the Mode column takes the width it needs from the pill's
   and the last test's columns, which wrap a line more instead (Spanish at 1366 px: the pill on 2 lines, the last test
   on 4, the row as high as before). A narrower frame keeps the narrowing select (a table
   that does not fit scrolls in its frame). */
:is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts .wpg-table-wrap {
    container-type: inline-size;
}

@container (min-width: 720px) {
    :is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts-table .wpg-toolbar select {
        min-width: max-content;
    }

    :is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts-table td.wpg-host-how {
        min-width: 12em;
    }

    :is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts-table .wpg-host-test {
        min-width: 8em;
    }
}

/* the purge notice: its Done button at the end of the alert */
.wpg-ui #wpg-delivery-purge {
    flex-wrap: wrap;
    align-items: center;
}

.wpg-ui #wpg-delivery-purge > span:not(.wpg-alert-icon) {
    flex: 1 1 260px;
    min-width: 0;
}

.wpg-ui #wpg-delivery-notes {
    font-size: 13px;
}

/* the details of the last test: one framed block per address, the pages as pills, the feeds */
.wpg-ui .wpg-test-host {
    padding: 14px 16px;
    border: 1px solid var(--wpg-line-2);
    border-radius: var(--wpg-radius-md);
}

:is(.wpg-ui, #wpg-ui) .wpg-test-host > * + * {
    margin-top: 10px;
}

:is(.wpg-ui, #wpg-ui) .wpg-test-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wpg-ui .wpg-test-stat {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--wpg-line-2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wpg-ink-2);
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-test-codes,
:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-test-examples {
    margin-inline: 0;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-test-codes > li {
    padding: 10px 12px;
    border-radius: var(--wpg-radius-sm);
    background: var(--wpg-soft);
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-test-codes > li + li {
    margin-top: 8px;
}

.wpg-ui .wpg-test-code-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.wpg-ui .wpg-test-code-head b {
    font-weight: 600;
    color: var(--wpg-ink);
}

.wpg-ui .wpg-test-code-head .wpg-badge {
    background: var(--wpg-surface);
}

.wpg-ui .wpg-test-fixes {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--wpg-ink-2);
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-test-examples {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 8px;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-test-examples > li + li {
    margin-top: 0;
}

:is(.wpg-ui, #wpg-ui) #wpg-section-delivery .wpg-test-examples code {
    display: inline-block;
    max-width: 100%;
    background: var(--wpg-surface);
}

:is(.wpg-ui, #wpg-ui) .wpg-test-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

:is(.wpg-ui, #wpg-ui) .wpg-test-feed {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 10px;
    padding: 12px 14px;
    border: 1px solid var(--wpg-line-2);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-soft);
    color: var(--wpg-ink-2);
}

:is(.wpg-ui, #wpg-ui) .wpg-test-feed.is-success {
    border-color: var(--wpg-success-line);
    background: var(--wpg-success-tint);
    color: var(--wpg-success-text);
}

:is(.wpg-ui, #wpg-ui) .wpg-test-feed.is-warn {
    border-color: var(--wpg-warning-line);
    background: var(--wpg-warning-tint);
    color: var(--wpg-warning-text);
}

:is(.wpg-ui, #wpg-ui) .wpg-test-feed.is-danger {
    border-color: var(--wpg-danger-line);
    background: var(--wpg-danger-tint);
    color: var(--wpg-danger);
}

.wpg-ui .wpg-test-mark {
    display: inline-flex;
    flex: none;
    width: 20px;
    height: 20px;
    padding: 4px;
    border-radius: 50%;
    background: var(--wpg-muted);
    color: var(--wpg-on-fill);
}

.wpg-ui .is-success > .wpg-test-mark {
    background: var(--wpg-success);
}

.wpg-ui .is-warn > .wpg-test-mark {
    background: var(--wpg-warning);
}

.wpg-ui .is-danger > .wpg-test-mark {
    background: var(--wpg-danger);
}

.wpg-ui .wpg-test-feed-text {
    flex: 1 1 calc(100% - 30px);
    min-width: 0;
    font-weight: 600;
}

:is(.wpg-ui, #wpg-ui) #wpg-section-delivery .wpg-test-feed code {
    flex: 0 1 auto;
    max-width: calc(100% - 30px);
    margin-inline-start: 30px;
    background: var(--wpg-surface);
}

/* the last test's example addresses and failing feed addresses wrap inside the card (at 390 px a long address made
   the whole section scroll sideways) */
:is(.wpg-ui, #wpg-ui) #wpg-delivery-test-results code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* the server rules: their state as a framed row tinted in its tone, the mark in a white chip */
:is(.wpg-ui, #wpg-ui) #wpg-delivery-rules-state {
    padding: 12px 16px;
    border: 1px solid var(--wpg-line-2);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-soft);
}

:is(.wpg-ui, #wpg-ui) #wpg-delivery-rules-state.is-pass {
    border-color: var(--wpg-success-line);
    background: var(--wpg-success-tint);
}

:is(.wpg-ui, #wpg-ui) #wpg-delivery-rules-state.is-warn {
    border-color: var(--wpg-warning-line);
    background: var(--wpg-warning-tint);
}

:is(.wpg-ui, #wpg-ui) #wpg-delivery-rules-state.is-fail {
    border-color: var(--wpg-danger-line);
    background: var(--wpg-danger-tint);
}

.wpg-ui #wpg-delivery-rules-state .wpg-checklist-icon {
    background: var(--wpg-surface);
}

.wpg-ui #wpg-delivery-rules-state .wpg-checklist-text b {
    font-weight: 600;
}

.wpg-ui #wpg-delivery-rules-state .wpg-checklist-text small {
    color: var(--wpg-ink-2);
}

/* nginx: the line of the confirmation, in green */
.wpg-ui #wpg-delivery-nginx-confirmed {
    font-weight: 600;
}

@media (max-width: 900px) {
    :is(.wpg-ui, #wpg-ui) #wpg-delivery-hosts-table td > .wpg-pill {
        margin-bottom: 2px;
    }
}

@media (max-width: 600px) {
    .wpg-ui .wpg-test-host {
        padding: 12px;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-test-codes > li {
        padding: 10px;
    }
}

/* the answer of the last test (design B): a round mark in the tone of the answer, the answer in large type, one or
   two sentences of what the test saw, the facts as pills, What to do as framed choices, the fix button; the details
   per address are folded under it (.wpg-details) */
.wpg-ui .wpg-verdict {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--wpg-line);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-soft);
}

.wpg-ui .wpg-verdict-mark {
    display: block;
    width: 56px;
    height: 56px;
    padding: 15px;
    border-radius: 50%;
    background: var(--wpg-tint);
    color: var(--wpg-accent-ink);
}

.wpg-ui .wpg-verdict-mark .wpg-icon {
    stroke-width: 2.6;
}

.wpg-ui .wpg-verdict.is-pass > .wpg-verdict-mark {
    background: var(--wpg-success-tint);
    color: var(--wpg-success);
}

.wpg-ui .wpg-verdict.is-warn > .wpg-verdict-mark {
    background: var(--wpg-warning-tint);
    color: var(--wpg-warning);
}

.wpg-ui .wpg-verdict.is-fail > .wpg-verdict-mark {
    background: var(--wpg-danger-tint);
    color: var(--wpg-danger);
}

.wpg-ui .wpg-verdict-main {
    min-width: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-verdict-meta {
    margin: 0 0 2px;
    font-size: 13px;
    color: var(--wpg-muted);
    overflow-wrap: anywhere;
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-card-body h4.wpg-verdict-title {
    margin: 0;
    padding: 0;
    width: fit-content;
    max-width: 100%;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--wpg-ink);
    text-wrap: balance;
}

/* a result line that takes the focus after its action (wpg-shell.js showFlash: Stop the test, the rules): the kit's
   ring around the text, not the browser's black frame across the card */
:is(.wpg-ui, #wpg-ui) .wpg-hint[tabindex="-1"]:focus {
    outline: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-hint[tabindex="-1"]:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--wpg-focus);
    outline-offset: 4px;
}

/* the PageSpeed summary takes the focus after a run (wpg-shell.js showFlash, data-wpg-jobs-focus) so a screen reader
   reads the result; it is text, not a control, and Chrome counts a script's focus right after a load as
   :focus-visible, so no ring at all (a ring framed the result as a second box, Leo 21/10/2026) */
:is(.wpg-ui, #wpg-ui) .wpg-stats-summary {
    width: fit-content;
    max-width: 100%;
}

:is(.wpg-ui, #wpg-ui) .wpg-stats-summary[tabindex="-1"]:is(:focus, :focus-visible) {
    outline: none;
}

/* the answer takes the focus after a test (wpg-shell.js): a normal ring around its words (the heading is as wide as its
   text), only for the keyboard's focus */
:is(.wpg-ui, #wpg-ui) .wpg-verdict-title:focus {
    outline: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-verdict-title:focus-visible {
    border-radius: 6px;
    outline: 2px solid var(--wpg-focus);
    outline-offset: 2px;
}

:is(.wpg-ui, #wpg-ui) .wpg-verdict-lead {
    max-width: 68ch;
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--wpg-ink-2);
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-facts > li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 5px 12px 5px 8px;
    border: 1px solid var(--wpg-line-2);
    border-radius: 999px;
    background: var(--wpg-surface);
    font-size: 13px;
    line-height: 1.35;
    color: var(--wpg-ink-2);
}

.wpg-ui .wpg-fact-i {
    display: inline-flex;
    flex: none;
    width: 18px;
    height: 18px;
    padding: 3px;
    border-radius: 50%;
    background: var(--wpg-soft);
    color: var(--wpg-muted);
}

.wpg-ui .wpg-fact-i .wpg-icon {
    stroke-width: 3;
}

.wpg-ui .wpg-facts .is-pass .wpg-fact-i {
    background: var(--wpg-success-tint);
    color: var(--wpg-success);
}

.wpg-ui .wpg-facts .is-warn .wpg-fact-i {
    background: var(--wpg-warning-tint);
    color: var(--wpg-warning);
}

.wpg-ui .wpg-facts .is-danger .wpg-fact-i {
    background: var(--wpg-danger-tint);
    color: var(--wpg-danger);
}

.wpg-ui .wpg-todo {
    margin-top: 18px;
}

:is(.wpg-ui, #wpg-ui) .wpg-todo-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--wpg-muted);
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-options {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-options > .wpg-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--wpg-line-2);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-surface);
}

.wpg-ui .wpg-option-i {
    display: inline-flex;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 10px;
    background: var(--wpg-tint);
    color: var(--wpg-accent-ink);
}

.wpg-ui .wpg-option-text {
    flex: 1 1 180px;
    min-width: 0;
    color: var(--wpg-ink-2);
}

.wpg-ui .wpg-option-text b {
    display: block;
    font-weight: 600;
    color: var(--wpg-ink);
}

.wpg-ui .wpg-option .wpg-btn {
    flex: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-verdict-actions {
    margin: 16px 0 0;
}

/* the details of the test: the blocks per address, the broken addresses on a light red ground */
.wpg-ui #wpg-delivery-test-results .wpg-test-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

:is(.wpg-ui, #wpg-ui) #wpg-delivery-test-results .wpg-test-results > * + * {
    margin-top: 0;
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-test-host h5 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--wpg-ink);
    overflow-wrap: anywhere;
}

.wpg-ui .wpg-test-host.is-broken {
    border-color: var(--wpg-danger-line);
    background: var(--wpg-danger-tint);
}

@media (max-width: 600px) {
    /* one column on a phone: the mark above the answer, which then takes the card's whole width */
    .wpg-ui .wpg-verdict {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 16px 14px;
    }

    .wpg-ui .wpg-verdict-mark {
        width: 36px;
        height: 36px;
        padding: 9px;
    }

    :is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-card-body h4.wpg-verdict-title {
        font-size: 22px;
    }

    .wpg-ui .wpg-option .wpg-btn {
        flex: 1 1 100%;
    }
}

/* ---- end of section: delivery ------------------------------------------------------- */

/* ---- section: speed ----------------------------------------------------------------- */

/* the shop context the values belong to: an info alert, its round mark drawn here (its text stays the line alone) */
:is(.wpg-ui, #wpg-ui) #wpg-speed-form > .wpg-speed-scope {
    margin: 0 0 16px;
}

.wpg-ui .wpg-speed-scope::before {
    content: "i";
    content: "i" / "";
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wpg-info);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--wpg-on-fill);
}

/* ---- end of section: speed ---------------------------------------------------------- */

/* ---- section: cdn ------------------------------------------------------------------- */

/* the addresses: the CDN seen as a pill (the kit's gold pill: the module can purge it; orange: it cannot), when under
   it; what the section knows of each address, one line under the other (.wpg-host-name: the kit) */
:is(.wpg-ui, #wpg-ui) .wpg-cdn-line {
    display: block;
}

:is(.wpg-ui, #wpg-ui) #wpg-cdn-hosts-table td > .wpg-pill {
    margin-bottom: 4px;
}

/* Cloudflare: the globe in a gold square before the title; the token's tools in a framed panel, Remove at its end */
.wpg-ui .wpg-cdn-mark {
    display: inline-flex;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 9px;
    background: var(--wpg-tint);
    color: var(--wpg-accent-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body > .wpg-cdn-tools {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--wpg-line-2);
    border-radius: var(--wpg-radius-md);
}

:is(.wpg-ui, #wpg-ui) .wpg-cdn-tools > * + * {
    margin-top: 12px;
}

:is(.wpg-ui, #wpg-ui) .wpg-cdn-tools .wpg-confirm {
    margin-top: 12px;
}

:is(.wpg-ui, #wpg-ui) .wpg-btn.wpg-cdn-remove {
    margin-inline-start: auto;
}

/* what waits for the purge job, under the tools */
:is(.wpg-ui, #wpg-ui) .wpg-cdn-tools .wpg-cdn-queue {
    padding-top: 12px;
    border-top: 1px solid var(--wpg-line);
    font-size: 13px;
}

/* the plan caveats of Cloudflare and image formats: what to do there, in an info panel (green once the variants are on) */
:is(.wpg-ui, #wpg-ui) .wpg-cdn-plan {
    padding: 12px 14px;
    border: 1px solid var(--wpg-info-line);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-info-tint);
    color: var(--wpg-info-text);
}

:is(.wpg-ui, #wpg-ui) .wpg-cdn-plan.is-on {
    border-color: var(--wpg-success-line);
    background: var(--wpg-success-tint);
    color: var(--wpg-success-text);
}

@media (max-width: 600px) {
    /* on a phone the tools share the width; Remove takes its own line */
    :is(.wpg-ui, #wpg-ui) .wpg-cdn-tools .wpg-toolbar > .wpg-btn {
        flex: 1 1 auto;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-btn.wpg-cdn-remove {
        flex-basis: 100%;
        margin-inline-start: 0;
    }
}

/* ---- end of section: cdn ------------------------------------------------------------ */

/* ---- section: convert --------------------------------------------------------------- */

/* the card's head: the title on the left, Scan again and Convert all (Pause while the page converts) at the end, each
   with its (i) beside it */
.wpg-ui .wpg-convert-card > .wpg-card-head .wpg-convert-actions {
    justify-content: flex-end;
    margin-inline-start: auto;
}

.wpg-ui .wpg-convert-actions > :is(.wpg-convert-scan, .wpg-convert-now) {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-actions .wpg-btn,
:is(.wpg-ui, #wpg-ui) .wpg-convert-strip-actions .wpg-btn,
:is(.wpg-ui, #wpg-ui) #wpg-convert-table .wpg-convert-action .wpg-btn {
    min-height: 44px;
}

/* Start, Pause and Resume: a play or a pause icon before the word, the one of the button's action (the script turns a
   Start into a Pause and back); Start is a gold outline, Pause a graphite one, Convert all says Pause the same way */
.wpg-ui .wpg-convert-icon {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
}

.wpg-ui .wpg-convert-go:not([data-wpg-convert-do="pause"]) .wpg-convert-icon.is-pause,
.wpg-ui .wpg-convert-go[data-wpg-convert-do="pause"] .wpg-convert-icon.is-start {
    display: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-go.wpg-btn-outline[data-wpg-convert-do="start"] {
    color: var(--wpg-accent-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-go[data-wpg-convert-do="pause"] {
    border-color: var(--wpg-ink);
    background: var(--wpg-surface);
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-go[data-wpg-convert-do="pause"]:is(:hover, :focus) {
    border-color: var(--wpg-ink);
    background: var(--wpg-soft);
    color: var(--wpg-ink);
}

/* the run strip: what converts now (the page's run or the automatic one), or that the conversion is paused */
:is(.wpg-ui, #wpg-ui) .wpg-convert-strip {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--wpg-primary-line);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-tint);
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-strip[data-wpg-tone="paused"] {
    border-color: var(--wpg-warning-line);
    background: var(--wpg-warning-tint);
}

.wpg-ui .wpg-convert-strip-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-strip-title {
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-strip[data-wpg-tone="paused"] .wpg-convert-strip-title {
    color: var(--wpg-warning-text);
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-strip :is(.wpg-convert-strip-speed, .wpg-convert-strip-counts, .wpg-convert-strip-file) {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--wpg-ink-2);
    font-variant-numeric: tabular-nums;
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-strip .wpg-convert-strip-speed {
    margin: 0;
}

/* a long image path breaks anywhere rather than widening the card */
:is(.wpg-ui, #wpg-ui) .wpg-convert-strip .wpg-convert-strip-file {
    min-width: 0;
    overflow-wrap: anywhere;
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-strip > .wpg-progress {
    height: 8px;
    margin-top: 10px;
    border-radius: 4px;
    background: var(--wpg-surface);
}

.wpg-ui .wpg-convert-strip-actions {
    margin-top: 10px;
}

.wpg-ui .wpg-convert-strip-actions:not(:has(> :not([hidden]))) {
    display: none;
}

/* Pause or Resume of the strip, each with its (i) beside it */
.wpg-ui .wpg-convert-strip-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* The Progress column takes the table's room: the name, the counts and the action shrink to their content and stay
   on one line. Its cell: "x of y" and the state word on a line, a bar across the whole cell under them (gold while
   images wait, green once the family is done). */
:is(.wpg-ui, #wpg-ui) #wpg-convert-table :is(th, td):not(.wpg-convert-progress) {
    width: 1%;
    white-space: nowrap;
}

/* a long header (a translation) wraps rather than widening its column; under 900 px it keeps one line */
:is(.wpg-ui, #wpg-ui) #wpg-convert-table > thead th:not(.wpg-convert-progress) {
    white-space: normal;
}

:is(.wpg-ui, #wpg-ui) #wpg-convert-table :is(th, td).wpg-convert-progress {
    width: auto;
    min-width: 200px;
}

:is(.wpg-ui, #wpg-ui) #wpg-convert-table .wpg-convert-rowbar {
    width: 100%;
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-state {
    margin-inline-start: 6px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--wpg-muted);
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-state.is-converting {
    font-weight: 600;
    color: var(--wpg-accent-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-state.is-paused {
    font-weight: 600;
    color: var(--wpg-warning-text);
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-state.is-done,
:is(.wpg-ui, #wpg-ui) .wpg-convert-done {
    font-weight: 600;
    color: var(--wpg-success-text);
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-rowbar {
    display: block;
    height: 6px;
    margin-top: 6px;
    border-radius: 3px;
}

:is(.wpg-ui, #wpg-ui) #wpg-convert-table tr[data-wpg-state="done"] .wpg-convert-rowbar .wpg-progress-fill {
    background: var(--wpg-success);
}

:is(.wpg-ui, #wpg-ui) #wpg-convert-table :is(th, td).wpg-convert-action {
    text-align: end;
    white-space: nowrap;
}


/* the reason of a failed copy keeps a readable width; the table scrolls in its frame on a phone */
:is(.wpg-ui, #wpg-ui) .wpg-table td.wpg-convert-reason {
    min-width: 14em;
}

/* the foot: what the batches of the page did, and the one live line */
:is(.wpg-ui, #wpg-ui) .wpg-convert > * + * {
    margin-top: 10px;
}

:is(.wpg-ui, #wpg-ui) .wpg-convert > .wpg-hint:empty {
    display: none;
}

/* nothing to say yet (no batch ran on this page): no empty foot under the table */
.wpg-ui .wpg-convert-card > .wpg-card-foot:not(:has(.wpg-convert > :not([hidden]):not(:empty))) {
    display: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-convert-waiting {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--wpg-ink);
}

/* under 900 px the table keeps its columns and scrolls inside its frame (the kit's .wpg-table-wrap scrolls) */
@media (max-width: 900px) {
    :is(.wpg-ui, #wpg-ui) #wpg-convert-table {
        min-width: 720px;
    }

    /* the headers keep one line: the table scrolls anyway */
    :is(.wpg-ui, #wpg-ui) #wpg-convert-table > thead th {
        white-space: nowrap;
    }
}

/* a phone: the head's buttons each take a line of their own, with their (i) beside them */
@media (max-width: 600px) {
    .wpg-ui .wpg-convert-card > .wpg-card-head .wpg-convert-actions {
        flex: 1 1 100%;
        margin-inline-start: 0;
    }

    .wpg-ui .wpg-convert-actions > :is(.wpg-convert-scan, .wpg-convert-now) {
        flex: 1 1 100%;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-convert-actions .wpg-btn {
        flex: 1 1 auto;
    }
}

/* ---- end of section: convert -------------------------------------------------------- */

/* ---- section: automatic ------------------------------------------------------------- */

/* the cron address and the crontab lines: the code, its Copy button beside it (under it on a phone) */
.wpg-ui .wpg-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: start;
}

/* a common width for the buttons' column, so the three blocks of code end at the same place (unless a translation
   needs more) */
.wpg-ui .wpg-code-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 13em;
    padding-top: 4px;
}

:is(.wpg-ui, #wpg-ui) .wpg-code-side .wpg-hint {
    margin: 0;
    max-width: 16em;
    text-align: end;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body > .wpg-automatic-crontab {
    margin-top: 20px;
}

/* the last run of each trigger: small tiles on the soft fill */
.wpg-ui .wpg-automatic-triggers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.wpg-ui .wpg-automatic-trigger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 14px 16px;
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-soft);
}

.wpg-ui .wpg-automatic-trigger-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--wpg-muted);
}

.wpg-ui .wpg-automatic-trigger-text {
    font-size: 14px;
    line-height: 1.45;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body > .wpg-automatic-triggers + * {
    margin-top: 16px;
}

/* the note of a run: a full-width row under its run (no Note column, whose 16em pushed the table past its card even
   when no run had a note), its name in the column heads' small capitals; the run and its note read as one row */
:is(.wpg-ui, #wpg-ui) #wpg-automatic-recent > tbody > tr.has-note > td {
    border-bottom: 0;
}

:is(.wpg-ui, #wpg-ui) #wpg-automatic-recent > tbody > tr > td.wpg-run-note {
    padding-top: 0;
    font-size: 12px;
    color: var(--wpg-ink-2);
}

:is(.wpg-ui, #wpg-ui) #wpg-automatic-recent .wpg-run-note-label {
    margin-inline-end: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--wpg-muted);
}

:is(.wpg-ui, #wpg-ui) #wpg-automatic-recent > tbody > tr.has-note:hover + tr.wpg-run-note-row > td,
:is(.wpg-ui, #wpg-ui) #wpg-automatic-recent > tbody > tr.has-note:has(+ tr.wpg-run-note-row:hover) > td {
    background: var(--wpg-soft);
}

/* one line per cell below 900 px (.is-stacked): the note closes its run's block, its name already in the text */
@media (max-width: 900px) {
    :is(.wpg-ui, #wpg-ui) #wpg-automatic-recent.is-stacked > tbody > tr.has-note {
        padding-bottom: 0;
        border-bottom: 0;
    }

    :is(.wpg-ui, #wpg-ui) #wpg-automatic-recent.is-stacked > tbody > tr.wpg-run-note-row {
        padding-top: 0;
    }

    :is(.wpg-ui, #wpg-ui) #wpg-automatic-recent.is-stacked > tbody > tr > td.wpg-run-note::before {
        content: none;
    }
}

@media (max-width: 600px) {
    .wpg-ui .wpg-code-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .wpg-ui .wpg-code-side {
        align-items: flex-start;
        padding-top: 0;
    }

    :is(.wpg-ui, #wpg-ui) .wpg-code-side .wpg-hint {
        max-width: none;
        text-align: start;
    }
}

/* ---- end of section: automatic ------------------------------------------------------ */

/* ---- section: statistics ------------------------------------------------------------ */

/* the savings per family: the copies' size above its bar, the share saved as a green badge */
.wpg-ui .wpg-stats-bar {
    width: 140px;
    max-width: 100%;
}

:is(.wpg-ui, #wpg-ui) .wpg-badge.wpg-stats-saved {
    background: var(--wpg-success-tint);
    color: var(--wpg-success-text);
}

/* PageSpeed: when each measurement was made, then each score with the dot of its band and the change in points */
.wpg-ui .wpg-stats-when {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.wpg-ui .wpg-stats-when .wpg-chip {
    white-space: normal;
}

.wpg-ui .wpg-score {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: var(--wpg-muted);
    vertical-align: 0;
}

.wpg-ui .wpg-score.is-good {
    background: var(--wpg-success);
}

.wpg-ui .wpg-score.is-average {
    background: var(--wpg-warning);
}

.wpg-ui .wpg-score.is-poor {
    background: var(--wpg-danger);
}

:is(.wpg-ui, #wpg-ui) .wpg-badge.wpg-stats-change {
    margin-inline-start: 6px;
    font-variant-numeric: tabular-nums;
}

:is(.wpg-ui, #wpg-ui) .wpg-badge.wpg-stats-change.is-up {
    background: var(--wpg-success-tint);
    color: var(--wpg-success-text);
}

:is(.wpg-ui, #wpg-ui) .wpg-badge.wpg-stats-change.is-down {
    background: var(--wpg-danger-tint);
    color: var(--wpg-danger);
}

:is(.wpg-ui, #wpg-ui) .wpg-stats-scores td small {
    margin-top: 2px;
}

/* the disk report's other lines and what Clean up could delete, with its link */
:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-stats-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-stats-lines > li {
    position: relative;
    margin: 0;
    padding: 4px 0;
    padding-inline-start: 18px;
    color: var(--wpg-ink-2);
}

.wpg-ui .wpg-stats-lines > li::before {
    content: "";
    position: absolute;
    top: 12px;
    inset-inline-start: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wpg-control);
}

.wpg-ui .wpg-stats-cleanup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 16px;
    border: 1px solid var(--wpg-warning-line);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-warning-tint);
}

.wpg-ui .wpg-stats-cleanup .wpg-stats-lines {
    flex: 1 1 320px;
    min-width: 0;
}

.wpg-ui .wpg-stats-cleanup .wpg-stats-lines > li::before {
    background: var(--wpg-warning);
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-stats-cleanup .wpg-stats-lines > li {
    color: var(--wpg-warning-text);
}

/* a few small leftovers (or only version 2's copies kept aside): information, as on the Overview */
.wpg-ui .wpg-stats-cleanup.is-info {
    border-color: var(--wpg-info-line);
    background: var(--wpg-info-tint);
}

.wpg-ui .wpg-stats-cleanup.is-info .wpg-stats-lines > li::before {
    background: var(--wpg-info);
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-stats-cleanup.is-info .wpg-stats-lines > li {
    color: var(--wpg-info-text);
}

/* Below 900 px a stacked row puts two cells on each line (Images and Format, Originals and Copies...); the figures
   start their cells like the others (the kit) */
@media (max-width: 900px) {
    .wpg-ui .wpg-stats-bar {
        width: 100%;
    }

    :is(.wpg-ui, #wpg-ui) #wpg-section-statistics .wpg-table.is-stacked > tbody > tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 8px;
    }
}

/* ---- end of section: statistics ----------------------------------------------------- */

/* ---- section: compare --------------------------------------------------------------- */

/* the choice of the image: its fields side by side in one row (the label above each control) with Show at its end,
   aligned with the controls, as many per line as fit; the other products found, the pages of the list and "no image
   matches" under the row */
:is(.wpg-ui, #wpg-ui) #wpg-compare-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 16px;
}

:is(.wpg-ui, #wpg-ui) #wpg-compare-filters > .wpg-field {
    flex: 1 1 170px;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin: 0;
    padding: 0;
    border-top: 0;
}

/* the image's select names the product and the file ("Personalisierbare Tasse · 22-large_default.jpg", about 290 px):
   it counts as 360 px, so it goes to a line of its own (with Show) before it would cut that name, as at 1440 px where it
   shared the first line at 269 px and Show stood alone on the second */
:is(.wpg-ui, #wpg-ui) #wpg-compare-filters > #compare_image_row {
    flex: 2 1 360px;
}

:is(.wpg-ui, #wpg-ui) #wpg-compare-filters > .wpg-compare-submit {
    flex: none;
    margin: 0;
}

:is(.wpg-ui, #wpg-ui) #wpg-compare-pick .wpg-field-control :is(select, input[type="number"], input[type="text"]) {
    width: 100%;
    max-width: none;
}

.wpg-ui #wpg-compare-pick .wpg-number {
    display: block;
}

:is(.wpg-ui, #wpg-ui) #wpg-compare-pick .wpg-card-body > * + * {
    margin-top: 12px;
}

@media (max-width: 600px) {
    :is(.wpg-ui, #wpg-ui) #wpg-compare-filters > :is(.wpg-field, .wpg-compare-submit) {
        flex-basis: 100%;
    }

    :is(.wpg-ui, #wpg-ui) #wpg-compare-filters .wpg-compare-submit .wpg-btn {
        width: 100%;
    }
}

/* the original and its copies side by side (one under the other below 900 px), each in a frame of its own with its
   name, its size and what it saves as a pill; the image on a light checkerboard so transparent PNG areas show (a
   pattern image, not a gradient); an image is never enlarged; a copy that is not shown says why in a dashed frame */
.wpg-ui .wpg-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* a format with no frame (switched off, or this server cannot make it): two larger frames, its line under them */
.wpg-ui .wpg-compare-grid.is-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wpg-ui .wpg-compare-grid.is-2 .wpg-compare-frame {
    height: 400px;
}

.wpg-ui .wpg-compare-grid.is-1 {
    grid-template-columns: minmax(0, 1fr);
}

:is(.wpg-ui, #wpg-ui) .wpg-compare-unavailable {
    margin: 12px 0 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-compare-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 10px 10px 14px;
    border: 1px solid var(--wpg-line-2);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-surface);
}

.wpg-ui .wpg-compare-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    padding: 8px;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: var(--wpg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 0h8v8H0zM8 8h8v8H8z' fill='%23edeff2'/%3E%3C/svg%3E") 0 0 / 16px 16px repeat;
}

.wpg-ui .wpg-compare-frame img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.wpg-ui .wpg-compare-frame.is-empty {
    border: 1px dashed var(--wpg-line-2);
    background: var(--wpg-soft);
}

:is(.wpg-ui, #wpg-ui) .wpg-compare-reason {
    max-width: 280px;
    margin: 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    color: var(--wpg-muted);
}

/* the name and the size on the left, what the copy saves as a pill at the end of the line */
:is(.wpg-ui, #wpg-ui) .wpg-compare-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 12px 4px 0;
    font-size: 14px;
    color: var(--wpg-ink-2);
}

:is(.wpg-ui, #wpg-ui) .wpg-compare-caption > b {
    font-weight: 700;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-compare-size {
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--wpg-muted);
}

:is(.wpg-ui, #wpg-ui) .wpg-compare-saving {
    margin-inline-start: auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--wpg-ground);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--wpg-ink-2);
    white-space: nowrap;
}

:is(.wpg-ui, #wpg-ui) .wpg-compare-saving.is-success {
    background: var(--wpg-success-tint);
    color: var(--wpg-success-text);
}

:is(.wpg-ui, #wpg-ui) .wpg-compare-saving.is-warn {
    background: var(--wpg-warning-tint);
    color: var(--wpg-warning-text);
}

:is(.wpg-ui, #wpg-ui) .wpg-compare-note,
:is(.wpg-ui, #wpg-ui) .wpg-compare-open {
    margin: 6px 4px 0;
    font-size: 13px;
}

:is(.wpg-ui, #wpg-ui) :is(.wpg-compare-path, .wpg-compare-title) {
    overflow-wrap: anywhere;
}

:is(.wpg-ui, #wpg-ui) p.wpg-compare-path {
    margin: 0 0 12px;
}

@media (max-width: 900px) {
    .wpg-ui .wpg-compare-grid,
    .wpg-ui .wpg-compare-grid.is-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .wpg-ui .wpg-compare-frame,
    .wpg-ui .wpg-compare-grid.is-2 .wpg-compare-frame {
        height: auto;
        min-height: 160px;
    }

    .wpg-ui .wpg-compare-frame img {
        max-height: 420px;
    }

    /* "Open at full size" is a 44 px target on a touch screen */
    :is(.wpg-ui, #wpg-ui) .wpg-compare-open a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ---- end of section: compare -------------------------------------------------------- */

/* ---- section: cleanup --------------------------------------------------------------- */

/* Leftover copies: its title and (i) on the left, "Delete these copies" at the end of the head (only when there is
   something to delete), a row per kind of copies with its count and size; nothing to clean is one line with a tick */
.wpg-ui .wpg-alert + .wpg-cleanup-card {
    margin-top: 16px;
}

.wpg-ui .wpg-cleanup-card > .wpg-card-head {
    justify-content: flex-start;
}

:is(.wpg-ui, #wpg-ui) .wpg-cleanup-card > .wpg-card-head > .wpg-cleanup-run {
    margin: 0;
    margin-inline-start: auto;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-cleanup-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-cleanup-rows .wpg-cleanup-count {
    font-variant-numeric: tabular-nums;
}

/* the copies made by version 2: a part of the card under a line, its title and (i), the last search with its button
   on one line */
:is(.wpg-ui, #wpg-ui) .wpg-cleanup-v2 {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--wpg-line);
}

:is(.wpg-ui, #wpg-ui) .wpg-cleanup-v2-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

:is(.wpg-ui, #wpg-ui) .wpg-cleanup-v2-head .wpg-cleanup-subhead {
    margin: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-cleanup-v2-search {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

:is(.wpg-ui, #wpg-ui) .wpg-cleanup-v2-search > p {
    flex: 1 1 260px;
    margin: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-cleanup-v2 > * + * {
    margin-top: 10px;
}

/* the result of "Delete copies made by this module" stands after its closed card */
:is(.wpg-ui, #wpg-ui) #wpg-cleanup-own-result {
    margin-top: 10px;
}

/* the copies made by version 2: the groups found as tick boxes, the folders moved aside */
.wpg-ui .wpg-cleanup-groups-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

:is(.wpg-ui, #wpg-ui) .wpg-cleanup-groups-head .wpg-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-cleanup-groups .wpg-help-text {
    margin: 0 0 8px;
}

:is(.wpg-ui, #wpg-ui) #wpg-cleanup-own select {
    width: 100%;
}

/* the folders of copies moved aside: label + value rows, one under the other below 900 px */
:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-cleanup-batches {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-cleanup-batches > .wpg-kv-row + .wpg-kv-row {
    margin-top: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-cleanup-batches .wpg-kv-value p {
    margin: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-cleanup-batches .wpg-kv-value .wpg-btn {
    margin-top: 8px;
}

/* the copies to delete: its row without the line above it (the description is above) */
:is(.wpg-ui, #wpg-ui) #wpg-cleanup-own .wpg-card-body > .wpg-field {
    padding-bottom: 4px;
    border-top: 0;
}

/* while its question is open, the delete button hides (wpg-shell.js): its empty foot goes with it */
@supports selector(:has(*)) {
    .wpg-ui .wpg-cleanup-card > .wpg-card-foot:not(:has(> :not([hidden]))) {
        display: none;
    }
}

/* a phone: the delete button takes its own line under the title */
@media (max-width: 600px) {
    :is(.wpg-ui, #wpg-ui) .wpg-cleanup-card > .wpg-card-head > .wpg-cleanup-run {
        flex: 0 1 auto;
        margin-inline-start: 0;
    }
}

/* ---- end of section: cleanup -------------------------------------------------------- */

/* ---- section: originals ------------------------------------------------------------- */

/* the paths: the kit's inline code without its chip (a list of paths that reads as a table stays plain) */
:is(.wpg-ui, #wpg-ui) #wpg-section-originals code {
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    color: var(--wpg-ink);
    white-space: normal;
}

/* a card's title and (i) on the left, its count as a pill at the end of the head */
.wpg-ui #wpg-originals-backups > .wpg-card-head {
    justify-content: flex-start;
}

:is(.wpg-ui, #wpg-ui) #wpg-originals-backups > .wpg-card-head > .wpg-pill {
    margin: 0;
    margin-inline-start: auto;
}

/* Progress: one small tile per state, three per line (the six states in two even rows; two per line on a phone); a
   count that links to its images as a link (graphite, gold underline) */
:is(.wpg-ui, #wpg-ui) #wpg-originals-counts.wpg-kv {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    border: 0;
}

:is(.wpg-ui, #wpg-ui) #wpg-originals-counts > .wpg-kv-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-soft);
}

.wpg-ui #wpg-originals-counts .wpg-kv-key {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--wpg-muted);
}

.wpg-ui #wpg-originals-counts .wpg-kv-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) #wpg-originals-counts .wpg-kv-value a {
    color: var(--wpg-link);
    text-decoration: underline;
    text-decoration-color: var(--wpg-link-line);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

:is(.wpg-ui, #wpg-ui) #wpg-originals-saved {
    font-weight: 600;
}

/* the lists of images read as a table: the path, then its sizes or its reason, the action at the end of the row
   (its question under the row when it opens) */
.wpg-ui .wpg-originals-list .wpg-kv-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
}

.wpg-ui .wpg-originals-list .wpg-kv-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

:is(.wpg-ui, #wpg-ui) .wpg-originals-list .wpg-kv-value > p {
    flex: 1 1 auto;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

:is(.wpg-ui, #wpg-ui) .wpg-originals-list .wpg-kv-value > .wpg-btn {
    flex: none;
    margin: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-originals-list .wpg-kv-value > .wpg-confirm {
    flex: 1 1 100%;
    margin-top: 0;
}

.wpg-ui .wpg-originals-list .wpg-kv-row.is-danger {
    background: var(--wpg-danger-tint);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-card-body h4.wpg-originals-subhead {
    padding-top: 20px;
}

/* the filters of the images not optimised: pills */
:is(.wpg-ui, #wpg-ui) #wpg-originals-reasons-filters .wpg-btn {
    border-radius: 999px;
}

@media (max-width: 600px) {
    :is(.wpg-ui, #wpg-ui) #wpg-originals-counts.wpg-kv {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .wpg-ui .wpg-originals-list .wpg-kv-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    /* a count that links to its images is a 44 px target on a touch screen; every count keeps the same height */
    .wpg-ui #wpg-originals-counts .wpg-kv-value {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    :is(.wpg-ui, #wpg-ui) #wpg-originals-counts .wpg-kv-value a {
        display: inline-flex;
        align-items: center;
        align-self: stretch;
        min-width: 44px;
    }
}

/* ---- end of section: originals ------------------------------------------------------ */

/* ---- section: help ------------------------------------------------------------------ */

/* the user guide: a file mark in a gold tile, the sentence and the link to the Addons page, then the other languages
   as pills */
.wpg-ui .wpg-help-guide {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.wpg-ui .wpg-help-guide-icon {
    display: inline-flex;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 11px;
    border-radius: 12px;
    background: var(--wpg-tint);
    color: var(--wpg-accent-ink);
}

.wpg-ui .wpg-help-guide-text {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}

:is(.wpg-ui, #wpg-ui) .wpg-help-guide-text > * + * {
    margin-top: 12px;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-help-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    padding-inline-start: 60px;
    list-style: none;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-help-langs > li {
    margin: 0;
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-help-lang {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 14px;
    border: 1px solid var(--wpg-line-2);
    border-radius: 999px;
    background: var(--wpg-surface);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--wpg-ink-2);
    text-decoration: none;
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-help-lang:hover {
    border-color: var(--wpg-primary-line);
    background: var(--wpg-tint);
    color: var(--wpg-ink);
}

:is(.wpg-ui, #wpg-ui) .wpg-help-lang:focus-visible {
    outline: 2px solid var(--wpg-focus);
    outline-offset: 2px;
}

/* Support and Version side by side */
.wpg-ui .wpg-help-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    align-items: start;
}

:is(.wpg-ui, #wpg-ui) .wpg-help-version .wpg-chip {
    margin-inline-start: 4px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .wpg-ui .wpg-help-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-help-langs {
        padding-inline-start: 0;
    }

    :is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-help-lang {
        min-height: 44px;
    }
}

/* "Other languages:" above the pills of the other guides, in line with them (at the card's edge below 900 px, as they are) */
:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-help-langs-title {
    margin: 16px 0 0;
    padding-inline-start: 60px;
}

:is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-help-langs-title + .wpg-help-langs {
    margin-top: 8px;
}

@media (max-width: 900px) {
    :is(.wpg-ui, #wpg-ui) .wpg-card-body .wpg-help-langs-title {
        padding-inline-start: 0;
    }
}

/* the questions: one closed answer each, the question a 44 px row with a line between them */
:is(.wpg-ui, #wpg-ui) .wpg-help-faq {
    border-top: 1px solid var(--wpg-line);
}

:is(.wpg-ui, #wpg-ui) .wpg-help-faq:first-child {
    border-top: 0;
}

:is(.wpg-ui, #wpg-ui) .wpg-help-faq > summary {
    display: list-item;
    min-height: 44px;
    padding: 11px 0;
    font-weight: 600;
    line-height: 1.5;
    color: var(--wpg-ink);
    cursor: pointer;
}

:is(.wpg-ui, #wpg-ui) .wpg-help-faq > p {
    margin: 0 0 14px;
    color: var(--wpg-ink-2);
}

/* the line to Our modules under the Support button */
:is(.wpg-ui, #wpg-ui) .wpg-help-more {
    margin-top: 12px;
    font-size: 13px;
}

/* ---- end of section: help ----------------------------------------------------------- */

/* ---- section: ourmodules ------------------------------------------------------------
   One card per other PrestaChamps module in a grid (three, two, then one column), then the team's signed note. The
   list rules carry two ids' weight to beat the kit's card-body lists and PrestaShop 8's "#content.bootstrap h4". */

/* Caveat 600, latin and latin-ext (Polish and Romanian letters), from @fontsource/caveat 5.3.0 (SIL OFL 1.1,
   views/fonts/OFL.txt); a family name of our own so that no other "Caveat" of the back office replaces it. */
@font-face {
    font-family: "webpgenerator-caveat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../../fonts/caveat-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "webpgenerator-caveat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../../fonts/caveat-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-om-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-om-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--wpg-line);
    border-radius: var(--wpg-radius-md);
    background: var(--wpg-surface);
}

.wpg-ui .wpg-om-card:hover {
    border-color: var(--wpg-line-hover);
}

.wpg-ui .wpg-om-top {
    display: flex;
    gap: 12px;
    align-items: center;
}

.wpg-ui .wpg-om-icon {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
}

.wpg-ui .wpg-om-icon-none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wpg-tint);
    color: var(--wpg-accent-ink);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-om-name {
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wpg-ink);
    overflow-wrap: anywhere;
}

/* The sentence: four lines at most, the whole text in the title attribute. */
:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-om-line {
    display: -webkit-box;
    flex: 0 0 auto;
    margin: 0;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--wpg-ink-2);
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-om-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
    margin: 0;
    font-size: 12.5px;
    color: var(--wpg-muted);
}

.wpg-ui .wpg-om-rating,
.wpg-ui .wpg-om-downloads,
.wpg-ui .wpg-om-installed {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.wpg-ui .wpg-om-rating b {
    color: var(--wpg-ink);
}

.wpg-ui .wpg-om-stars {
    display: inline-flex;
    gap: 1px;
    font-size: 15px;
    line-height: 1;
}

/* Text stars (PrestaShop 9 draws the Material Icons outlined, so an icon star would look empty), gold on white at
   3:1 like the kit's strokes; an empty star is grey, a half star grey with its left half drawn over in gold. */
.wpg-ui .wpg-om-star {
    position: relative;
    color: var(--wpg-primary-line);
}

.wpg-ui .wpg-om-star:is(.is-empty, .is-half) {
    color: var(--wpg-line-2);
}

.wpg-ui .wpg-om-star.is-half::before {
    content: "\2605";
    content: "\2605" / "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    color: var(--wpg-primary-line);
}

.wpg-ui :is(.wpg-om-downloads, .wpg-om-installed) .wpg-icon {
    width: 16px;
    height: 16px;
}

.wpg-ui .wpg-om-foot {
    display: flex;
    margin-top: auto;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--wpg-line);
}

.wpg-ui .wpg-om-compat {
    font-size: 12px;
    color: var(--wpg-muted);
    font-variant-numeric: tabular-nums;
}

.wpg-ui .wpg-om-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}

.wpg-ui .wpg-om-installed {
    font-size: 13px;
    font-weight: 700;
    color: var(--wpg-success-text);
}

.wpg-ui .wpg-om-off {
    font-size: 12px;
    color: var(--wpg-muted);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-om-fine {
    margin: 0;
    font-size: 12.5px;
    color: var(--wpg-muted);
}

/* The signed note (Leo, 2026-10-20, direction "C"): a soft pink card under the module cards, a pink heart and the
   title in the admin's own font, the note, and a handwritten two-line signature. */
:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-om-note {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    padding: 20px 24px;
    border-radius: 14px;
    background: var(--wpg-note-bg);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-om-note p {
    margin: 0;
    padding: 0;
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-om-note-title {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wpg-note-title);
}

.wpg-ui .wpg-om-note-heart {
    flex: none;
    fill: var(--wpg-note-heart);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-om-note-text {
    max-width: 80ch;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--wpg-note-ink);
}

:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-om-note-sign {
    font-family: "webpgenerator-caveat", "Segoe Print", "Bradley Hand", cursive;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--wpg-note-sign);
}

@media (max-width: 600px) {
    :is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) .wpg-om-note {
        padding: 16px 18px;
    }
}

/* ---- end of section: ourmodules ----------------------------------------------------- */

/* ==========================================================================
   Keep last: the hidden attribute wins over every display rule above (two ids'
   weight, no important flag).
   ========================================================================== */
:is(.wpg-ui, #wpg-ui):is(.wpg-ui, #wpg-ui) [hidden] {
    display: none;
}