@font-face {
      font-family: 'Claro';
      src: url('https://lesquissebarbizon.fr/wp-content/themes/lesquisse/fonts/Claro/Claro-Light.woff2') format('woff2');
      font-style: normal;
      font-weight: 300;
      font-display: swap;
    }

    @font-face {
      font-family: 'Claro';
      src: url('https://lesquissebarbizon.fr/wp-content/themes/lesquisse/fonts/Claro/Claro-Regular.woff2') format('woff2');
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }

    /* Theme tokens and device-safe spacing. */
    :root {
      --bg: #f9f9f9;
      --card: #fff;
      --tx: #252625;
      --mu: #656761;
      --bd: #e2e3df;
      --ac: #aebd9f;
      --ac-strong: #6d7e62;
      --sand: #f6e5ce;
      --clay: #c99973;
      --blue: #87a3b5;
      --ok: #58734e;
      --out: #a94f45;
      --low: #a9754c;
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --bg: #252625;
        --card: #30322f;
        --tx: #f9f9f9;
        --mu: #c0c1ba;
        --bd: #4a4c47;
        --ac: #aebd9f;
        --ac-strong: #c5d1b8;
        --sand: #494238;
        --clay: #c99973;
        --blue: #87a3b5;
        --ok: #aebd9f;
        --out: #e08b7d;
        --low: #e0ac7b;
      }
    }

    :root[data-theme="dark"] {
      --bg: #252625;
      --card: #30322f;
      --tx: #f9f9f9;
      --mu: #c0c1ba;
      --bd: #4a4c47;
      --ac: #aebd9f;
      --ac-strong: #c5d1b8;
      --sand: #494238;
      --clay: #c99973;
      --blue: #87a3b5;
      --ok: #aebd9f;
      --out: #e08b7d;
      --low: #e0ac7b;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html { -webkit-text-size-adjust: 100%; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--tx);
      font-family: 'Barlow', sans-serif;
      font-weight: 400;
      line-height: 1.5;
      touch-action: manipulation;
    }

    button { font-family: inherit; cursor: pointer; }

    /* Main layout and language controls. */
    main { max-width: 640px; margin: 0 auto; padding: 16px; }
    h1 {
      margin: 4px 0 12px;
      color: var(--tx);
      font-family: 'Claro', Georgia, serif;
      font-size: 30px;
      font-weight: 300;
      line-height: 1.05;
    }

    .tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .tab {
      padding: 13px 4px;
      border: 1px solid var(--bd);
      border-radius: 4px;
      background: var(--card);
      color: var(--tx);
      font-size: 15px;
      font-weight: 700;
      cursor: grab;
      touch-action: pan-y;
      user-select: none;
      transition: opacity .15s, outline-color .15s;
    }

    .tab.on { border-color: var(--ac-strong); background: var(--ac); color: var(--tx); }
    .tab.dragging { opacity: .55; cursor: grabbing; }
    .tab.drop-target { outline: 2px dashed var(--ac-strong); outline-offset: 2px; }
    .tabs.is-dragging { user-select: none; }

    input {
      min-width: 0;
      padding: 12px;
      border: 1px solid var(--bd);
      border-radius: 4px;
      background: var(--card);
      color: var(--tx);
      font-size: 16px;
    }

    select {
      padding: 8px 10px;
      border: 1px solid var(--bd);
      border-radius: 4px;
      background: var(--card);
      color: var(--tx);
      font: inherit;
    }

    .top-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin: -6px 0 10px;
      color: var(--mu);
      font-size: 14px;
    }

    .theme-toggle {
      display: grid;
      flex: none;
      width: 44px;
      height: 44px;
      place-items: center;
      padding: 0;
      border: 1px solid var(--bd);
      border-radius: 50%;
      background: var(--card);
      color: var(--low);
      font-size: 22px;
      line-height: 1;
      transition: background-color .2s, border-color .2s, color .2s;
    }

    .theme-toggle:hover { border-color: var(--ac-strong); background: var(--sand); }

    .sbar { display: flex; gap: 8px; margin-bottom: 10px; }
    .sbar .s { flex: 1; width: auto; margin: 0; }
    .s { width: 100%; margin-bottom: 10px; }
    select { flex: none; max-width: 44%; min-width: 0; padding: 12px 8px; border-radius: 4px; font-size: 16px; }
    .sync { display: block; margin-top: 2px; color: var(--mu); font-size: 12px; font-weight: 600; }
    .layout { transition: opacity .2s; }
    body.loading .layout { opacity: .35; pointer-events: none; }

    /* Inventory summary, product rows and quantity controls. */
    .sum { display: flex; gap: 8px; margin-bottom: 8px; }

    .sum div {
      flex: 1;
      padding: 8px;
      border: 1px solid var(--bd);
      border-radius: 12px;
      background: var(--card);
      color: var(--mu);
      text-align: center;
      font-size: 12px;
    }

    .sum b { display: block; font-size: 24px; }

    .btn {
      padding: 13px 16px;
      border: 0;
      border-radius: 4px;
      background: var(--ac);
      color: var(--tx);
      font-size: 16px;
      font-weight: 700;
    }

    .addrow { width: 100%; margin-bottom: 8px; }

    .g {
      margin: 14px 4px 6px;
      color: var(--mu);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .item {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      grid-template-areas: "ck nm x" "ck q q";
      gap: 6px 10px;
      align-items: center;
      margin-bottom: 8px;
      padding: 8px 10px;
      border: 1px solid var(--bd);
      border-radius: 5px;
      background: var(--card);
    }

    .item .ck { grid-area: ck; align-self: start; }
    .item .nm { grid-area: nm; }
    .item .q { grid-area: q; }
    .item .x { grid-area: x; }
    .item.lw { border-color: color-mix(in srgb, var(--low) 55%, var(--bd)); }

    @media (min-width: 560px) {
      .item {
        grid-template-columns: 42px minmax(0, 1fr) auto auto;
        grid-template-areas: "ck nm q x";
      }
      .item .ck { align-self: center; }
    }

    .item.ko { border-color: color-mix(in srgb, var(--out) 45%, var(--bd)); }
    .nm { flex: 1; min-width: 0; }
    .n { display: block; overflow-wrap: anywhere; font-size: 17px; }

    .shop {
      margin-top: 3px;
      padding: 3px 9px;
      border: 0;
      border-radius: 4px;
      background: color-mix(in srgb, var(--ac) 30%, transparent);
      color: var(--tx);
      font-size: 12px;
      font-weight: 600;
    }

    .shop.no { background: var(--bg); color: var(--mu); }

    .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
    .tags .shop { margin: 0; }
    .pill { padding: 3px 9px; border-radius: 4px; font-size: 12px; font-weight: 700; }
    .p-out { background: color-mix(in srgb, var(--out) 16%, transparent); color: var(--out); }
    .p-low { background: color-mix(in srgb, var(--low) 20%, transparent); color: var(--low); }
    .p-ok, .p-full { background: color-mix(in srgb, var(--ok) 24%, transparent); color: var(--ok); }
    .pg { height: 6px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: var(--bd); }
    .pg i { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
    .lw .pg i { background: var(--low); }
    .ko .pg i { background: var(--out); }

    .ck {
      flex: none;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 3px solid var(--out);
      border-radius: 50%;
      background: none;
      color: #fff;
      font-size: 22px;
      font-weight: 800;
    }

    .ck.on { border-color: var(--ok); background: var(--ok); }
    .q { display: flex; align-items: center; gap: 4px; flex: none; }

    .q button {
      width: 38px;
      height: 42px;
      padding: 0;
      border: 1px solid var(--bd);
      border-radius: 4px;
      background: var(--bg);
      color: var(--tx);
      font-size: 22px;
      line-height: 1;
    }

    .qi { width: 52px; height: 42px; padding: 0; text-align: center; font-size: 18px; font-weight: 700; }
    .mx { width: 52px; height: 42px; padding: 0; color: var(--mu); text-align: center; font-size: 16px; font-weight: 600; }
    .sl { color: var(--mu); font-weight: 700; }
    .x { flex: none; padding: 4px; border: 0; background: none; color: var(--mu); font-size: 22px; }
    .none { padding: 18px; color: var(--mu); text-align: center; }
    .hint { margin: 8px 2px; color: var(--mu); font-size: 12px; }

    /* Store settings and sharing actions. */
    details {
      margin-top: 12px;
      padding: 12px 14px;
      border: 1px solid var(--bd);
      border-radius: 4px;
      background: var(--card);
    }

    summary { font-size: 15px; font-weight: 700; }
    .row { display: flex; gap: 8px; margin-top: 10px; }
    .row input { flex: 1; }
    .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .side-tools { display: grid; gap: 6px; }
    .side-tools details { margin-top: 0; }

    .history .btn { width: 100%; margin-top: 10px; }
    .history .btn:disabled { cursor: not-allowed; opacity: .55; }
    .history-list { max-height: 280px; overflow-y: auto; margin: 12px 0 0; padding: 0; list-style: none; }
    .history-item { padding: 9px 0; border-top: 1px solid var(--bd); }
    .history-item span { display: block; overflow-wrap: anywhere; font-size: 13px; }
    .history-item small { display: block; margin-top: 4px; color: var(--mu); font-size: 11px; }
    .history-item.undone span, .history-empty { color: var(--mu); }
    .history-item.undone span { text-decoration: line-through; }
    .history-empty { margin: 12px 0 0; font-size: 13px; }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 4px 4px 4px 12px;
      border: 1px solid var(--bd);
      border-radius: 4px;
      background: var(--bg);
      font-size: 14px;
    }

    .chip button { padding: 0 6px; border: 0; background: none; color: var(--mu); font-size: 18px; }

    .send {
      margin-top: 18px;
      padding: 14px;
      border: 1px solid var(--bd);
      border-radius: 4px;
      background: color-mix(in srgb, var(--sand) 38%, var(--card));
    }

    .lab { margin-bottom: 10px; font-weight: 800; }
    .send .btn { display: block; width: 100%; margin-top: 8px; text-align: left; }
    .send small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; opacity: .85; }
    .wa { background: #25d366; color: #073b1c; }
    :focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

    @media (hover: hover) {
      .btn:hover, .tab:hover, .q button:hover, .shop:hover, .theme-toggle:hover { filter: brightness(.95); }
      .ck:hover { opacity: .8; }
      .x:hover { color: var(--out); }
      summary { cursor: pointer; }
    }

    /* On desktop, keep settings visible beside the inventory. */
    @media (min-width: 960px) {
      main { max-width: 1180px; padding: 28px 32px; }
      h1 { margin-bottom: 18px; font-size: 28px; }
      .layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
      .side {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 20px;
        max-height: calc(100vh - 40px);
        overflow: auto;
      }
      .side-tools { display: contents; }
      .side-tools .history { order: 0; margin-top: 0; }
      .side-tools > details:not(.history) { order: 1; }
      .side > .send { order: 2; }
      .send { margin-top: 12px; }
      .item { padding: 10px 14px; }
      .n { font-size: 18px; }
    }