/* ==========================================================================
   TS LAB label designer studio. Loaded only on tools/label-designer.html,
   after style.css, together with assets/label-designer.js.

   Everything is scoped to .ld-* so no other page is touched. Tokens, borders
   and type come from style.css. The page reads complete without the script:
   the stage, the flat label and the prose are in the HTML, and only the
   controls that need scripting are hidden.
   ========================================================================== */

/* 1. Progressive enhancement ------------------------------------------------
   assets/label-designer.js sets .has-ix on <html>, the same flag the other
   interactive blocks use. Controls that do nothing without it stay hidden. */
/* Phone wizard geometry. Under 1000 px the studio is a linear step wizard:
   a sticky top bar, a 140 px live preview strip, the step body in normal
   document flow, and a sticky action bar at the foot of the studio. Nothing
   is fixed over the page, so the page scrolls as it always did. */
:root{--ld-mtop-h:58px;--ld-mprev-h:140px;--ld-navh:70px}

.ld-only{display:none}
.has-ix .ld-only{display:block}
.has-ix .ld-only--inline{display:inline-block}
.has-ix .ld-only--flex{display:flex}
.ld-noscript{display:block}
.has-ix .ld-noscript{display:none}

.ld-note{font-size:13px;line-height:1.45;color:var(--gray);margin:var(--s-2) 0 0}
.ld-hint{font-size:12px;line-height:1.45;color:var(--gray);margin:6px 0 0}
.ld-err{font-size:13px;line-height:1.45;color:var(--dark);background:var(--light);
  border-left:4px solid var(--dark);padding:8px 10px;margin:8px 0 0}
.ld-err:empty{display:none}

/* 2. The studio shell --------------------------------------------------------
   A full bleed band under the hero. It breaks out of .wrap on purpose: the
   product has to be the largest thing on the page. */
.ld-studio{padding:0;background:var(--light);border-top:var(--border);border-bottom:var(--border);
  scroll-margin-top:110px}
.ld-studio__inner{width:100%;max-width:1640px;margin:0 auto;padding:0 var(--pad) var(--s-4)}

/* 2a. Summary bar ----------------------------------------------------------- */
.ld-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  padding:12px 0;border-bottom:var(--border);margin-bottom:var(--s-3);
}
.ld-bar__group{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-width:0;flex:1 1 auto}
.ld-bar__name{font-family:var(--font-h);font-weight:700;font-size:clamp(17px,1.8vw,22px);
  line-height:1.15;overflow-wrap:anywhere}
.ld-bar__fact{font-size:13px;font-weight:500;color:var(--gray)}
.ld-bar__fact::before{content:"";display:inline-block;width:6px;height:6px;background:var(--dark);
  margin-right:8px;vertical-align:middle}
.ld-bar__chip{
  font-family:var(--font-b);font-weight:600;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;background:var(--blue);color:var(--dark);
  border:var(--border);padding:5px 10px;white-space:nowrap;
}
.ld-bar__actions{display:flex;gap:var(--s-1);flex:0 0 auto}

/* 2b. The three column studio ----------------------------------------------- */
.ld-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
@media(min-width:1000px){
  .has-ix .ld-grid{grid-template-columns:104px minmax(0,1fr) 360px;align-items:start}
}

/* 3. Step rail ---------------------------------------------------------------
   Vertical on the desktop, a scrollable tab bar under the stage on a phone. */
.ld-rail{display:none;gap:var(--s-1);min-width:0}
.has-ix .ld-rail{display:flex}
.ld-rail__btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
  background:var(--white);border:var(--border);color:var(--dark);
  padding:10px 6px;min-height:44px;min-width:84px;border-radius:0;text-align:center;
  font-family:var(--font-b);font-size:11px;font-weight:600;line-height:1.2;
}
.ld-rail__btn:hover{background:var(--light)}
.ld-rail__btn[aria-selected="true"]{background:var(--dark);color:var(--white)}
.ld-rail__btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ld-rail__ico{display:block;width:26px;height:26px}
.ld-rail__ico svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6}
.ld-rail__num{display:block;font-size:10px;letter-spacing:.1em;opacity:.75}
.ld-rail__label{display:block;overflow-wrap:anywhere}

@media(max-width:999.98px){
  .ld-rail{order:2;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .ld-rail__btn{flex:0 0 auto;min-width:96px}
  /* the wizard carries the steps in its own top bar, so the rail is not
     rendered on a phone at all */
  .has-ix .ld-rail{display:none}
}
@media(min-width:1000px){
  .ld-rail{flex-direction:column;position:sticky;top:var(--s-2)}
  .ld-rail__btn{width:100%}
}

/* 4. Centre stage -------------------------------------------------------------
   The product is the largest element on the page, on a warm studio sweep. */
.ld-stage{
  position:relative;background:#ebe7e0;border:var(--border);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:420px;padding:var(--s-4) var(--s-3) var(--s-5);
}
@media(min-width:1000px){.ld-stage{min-height:560px}}
@media(max-width:999.98px){
  .ld-stage{order:1;min-height:60vh;padding:var(--s-3) var(--s-2) var(--s-4)}
  /* In the wizard the stage is not in the flow at all: the preview strip
     stands in for it, and the stage only appears as the full screen preview
     the strip opens. */
  .has-ix .ld-stage{display:none}
  .has-ix.ld-mfull .ld-stage{
    display:flex;position:fixed;inset:0;z-index:120;min-height:0;
    padding:62px var(--s-2) calc(var(--s-4) + env(safe-area-inset-bottom));
  }
  .has-ix.ld-mfull .ld-toolbar{flex-wrap:wrap;top:calc(var(--s-2) + env(safe-area-inset-top))}
  .has-ix.ld-mfull .ld-3d,.has-ix.ld-mfull .ld-mockup{max-width:min(100%,72vh)}
}
.ld-stage.is-over::after{
  content:"Drop the logo file here";position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:rgba(28,148,210,.92);color:var(--dark);border:2px dashed var(--dark);
  font-family:var(--font-b);font-weight:600;font-size:15px;padding:var(--s-2);
}

/* 4a. Floating toolbar over the stage */
.ld-toolbar{
  position:absolute;left:var(--s-2);right:var(--s-2);top:var(--s-2);z-index:4;
  display:none;flex-wrap:wrap;gap:6px;align-items:center;
}
.has-ix .ld-toolbar{display:flex}
.ld-tbtn{
  font-family:var(--font-b);font-weight:600;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dark);background:var(--white);border:var(--border);
  padding:7px 10px;min-height:34px;cursor:pointer;border-radius:0;
}
.ld-tbtn:hover{background:var(--light)}
.ld-tbtn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ld-tbtn[aria-pressed="true"]{background:var(--dark);color:var(--white)}
.ld-tbtn--push{margin-left:auto}
/* the two zoom buttons read as one pair: same height as the rest of the bar,
   square, and wide enough for a finger on a phone */
.ld-tbtn--zoom{
  font-size:15px;line-height:1;padding:7px 0;min-width:34px;text-align:center;
}

/* 4b. The turntable and the flat fallback */
.ld-3d{position:relative;width:100%;max-width:620px;margin:0 auto}
.ld-3d__canvas{
  display:block;width:100%;height:auto;aspect-ratio:1/1;max-width:620px;
  background:transparent;cursor:grab;touch-action:pan-y;
}
.ld-3d__canvas:active{cursor:grabbing}
.ld-3d__canvas:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ld-mockup{position:relative;width:100%;max-width:360px;margin:0 auto}
.ld-mockup__svg{display:block;width:100%;height:auto}
.ld-stage__hint{
  position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font-size:12px;color:var(--gray);margin:0;padding:0 var(--s-2);
}
/* the wheel only zooms once the pack has been clicked, so the stage says so
   until the first zoom, then the line fades out and stays out */
.ld-zoomhint{
  position:absolute;left:0;right:0;bottom:30px;text-align:center;
  font-size:12px;color:var(--gray);margin:0;padding:0 var(--s-2);
  transition:opacity .4s ease;
}
.ld-zoomhint.is-gone{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.ld-zoomhint{transition:none}}

/* 4c. The flat label drawer, sliding up from the foot of the stage */
/* Without scripting the drawer is simply the block under the stage, so the
   flat front and back panels are part of the page the visitor already has.
   With scripting it becomes a panel that slides up over the stage. */
.ld-stagewrap{position:relative;min-width:0}
.has-ix .ld-stagewrap{overflow:hidden}
.ld-drawer{background:var(--white);border:var(--border);border-top:0;padding:var(--s-3)}
.has-ix .ld-drawer{
  position:absolute;left:0;right:0;bottom:0;z-index:6;border:0;border-top:var(--border);
  max-height:86%;overflow:auto;transform:translateY(101%);transition:transform .26s ease;
}
.has-ix .ld-drawer.is-open{transform:translateY(0)}
.ld-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  margin-bottom:var(--s-2)}
.ld-drawer__title{font-family:var(--font-h);font-weight:700;font-size:16px;margin:0}

/* 5. Context panel ------------------------------------------------------------
   Desktop: a 360 px column beside the stage. Phone: a sheet that slides up. */
.ld-ctx{background:var(--white);border:var(--border);min-width:0}
/* .has-ix .ld-only sets display:block, so the column has to match it */
.has-ix .ld-ctx{display:flex;flex-direction:column}
.ld-ctx__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:var(--s-2) var(--s-3);border-bottom:var(--border);flex:0 0 auto}
.ld-ctx__title{font-family:var(--font-h);font-weight:700;font-size:18px;margin:0;line-height:1.1}
.ld-ctx__body{padding:var(--s-3);flex:1 1 auto;min-height:0}
.ld-step[hidden]{display:none}
.ld-step h4{margin:0 0 8px;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--gray)}
.ld-step > * + h4{margin-top:var(--s-3)}

/* 5a. The action row. It closes every panel, on the phone and on the desktop,
   so the next step is one button away and never a hunt for the rail. */
.ld-ctx__actions{
  display:flex;align-items:center;gap:var(--s-2);flex:0 0 auto;
  padding:var(--s-2) var(--s-3) calc(var(--s-2) + 3px);
  border-top:var(--border);background:var(--white);
}
.ld-ctx__back{flex:0 0 auto}
.ld-ctx__next{flex:1 1 auto;min-width:0;text-align:center}
.ld-ctx__back[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.ld-ctx__back[disabled]:hover{transform:none;box-shadow:none}

@media(min-width:1000px){
  .ld-ctx{position:sticky;top:var(--s-2);max-height:calc(100vh - var(--s-4));overflow:hidden}
  .ld-ctx__body{overflow:auto}
}
@media(max-width:999.98px){
  /* The panel chrome is not rendered on a phone: the wizard owns the step
     name, the progress and the two actions, and the step body simply sits in
     the page. Nothing here is fixed, so nothing can flap. */
  .has-ix .ld-ctx{border:0;background:transparent;display:block}
  .has-ix .ld-ctx__head,.has-ix .ld-ctx__actions{display:none}
  .has-ix .ld-ctx__body{padding:0;overflow:visible}
}
@media(prefers-reduced-motion:reduce){
  .ld-ctx,.ld-drawer,.ld-rail{transition:none}
}

/* 6. Visual pickers ----------------------------------------------------------- */
.ld-field{margin-top:var(--s-3)}
.ld-field:first-child{margin-top:0}
.ld-field > label,.ld-field__legend{display:block;font-family:var(--font-b);font-weight:600;
  font-size:12px;line-height:1.3;margin-bottom:6px;color:var(--gray)}
.ld-field input[type="text"],.ld-field input[type="url"],.ld-field input[type="file"]{
  width:100%;max-width:100%;min-height:44px;padding:8px 10px;
  font-family:var(--font-b);font-size:15px;color:var(--dark);background:var(--white);
  border:var(--border);border-radius:0;
}
.ld-field input[type="file"]{padding:9px 10px;font-size:13px}
.ld-field input:focus-visible{outline:3px solid var(--blue);outline-offset:0}
.ld-field input[type="color"]{
  width:56px;height:44px;min-height:44px;padding:2px;border:var(--border);background:var(--white);
  border-radius:0;cursor:pointer;flex:0 0 auto;
}
.ld-swatch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.ld-swatch__v{font-size:13px;color:var(--gray);font-variant-numeric:tabular-nums}
.ld-check{display:flex;align-items:flex-start;gap:10px;margin-top:var(--s-2)}
.ld-check input[type="checkbox"]{width:22px;height:22px;min-width:22px;margin-top:2px;accent-color:var(--blue)}
.ld-check label{font-size:14px;line-height:1.4;font-weight:500;color:var(--dark)}
.ld-btnrow{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.ld-status{font-size:13px;line-height:1.45;color:var(--gray);margin:var(--s-2) 0 0;min-height:1.45em}
.ld-counter{font-size:12px;color:var(--gray);margin:6px 0 0;font-variant-numeric:tabular-nums}
.ld-counter.is-full{color:var(--dark);font-weight:600}

/* 6a. Pill toggles instead of a select */
.ld-pills{display:flex;flex-wrap:wrap;gap:6px}
.ld-pill{
  font-family:var(--font-b);font-weight:600;font-size:13px;color:var(--dark);
  background:var(--white);border:var(--border);padding:9px 14px;min-height:44px;
  cursor:pointer;border-radius:0;
}
.ld-pill:hover{background:var(--light)}
.ld-pill[aria-pressed="true"]{background:var(--dark);color:var(--white)}
.ld-pill:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ld-pills[aria-disabled="true"]{opacity:.45}
.ld-pills[aria-disabled="true"] .ld-pill{cursor:not-allowed}

/* 6b. Container thumbnails */
.ld-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ld-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  background:var(--white);border:var(--border);padding:8px;cursor:pointer;border-radius:0;
  color:var(--dark);min-width:0;
}
.ld-card:hover{background:var(--light)}
.ld-card:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ld-card[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--blue)}
/* A tap has to answer at once on a phone, before the pack repaints. */
.ld-card,.ld-pill,.ld-chip,.ld-layout,.ld-font{touch-action:manipulation}
.ld-card:active,.ld-card.is-tap,
.ld-pill:active,.ld-pill.is-tap,
.ld-chip:active,.ld-chip.is-tap,
.ld-layout:active,.ld-layout.is-tap{background:var(--light);box-shadow:inset 0 0 0 3px var(--dark)}
.ld-card__fig{display:block;width:100%;height:56px;display:flex;align-items:center;justify-content:center}
.ld-card__fig svg{display:block;width:auto;height:52px;fill:var(--ld-accent,#2f4030);stroke:var(--dark);stroke-width:1.5}
.ld-card__name{font-family:var(--font-b);font-weight:600;font-size:12px;line-height:1.25;overflow-wrap:anywhere}
.ld-card__note{font-size:11px;line-height:1.3;color:var(--gray);overflow-wrap:anywhere}

/* 6c. Layout thumbnails, painted by the same canvas renderer as the pack */
.ld-layouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ld-layout{background:var(--white);border:var(--border);padding:6px;cursor:pointer;border-radius:0;
  display:flex;flex-direction:column;gap:6px;color:var(--dark);min-width:0}
.ld-layout:hover{background:var(--light)}
.ld-layout:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ld-layout[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--blue)}
.ld-layout canvas{display:block;width:100%;height:auto;aspect-ratio:3/4;background:var(--light)}
.ld-layout__name{font-family:var(--font-b);font-weight:600;font-size:11px;line-height:1.25;
  overflow-wrap:anywhere}

/* 6d. Palette chips */
.ld-chips{display:flex;flex-wrap:wrap;gap:6px}
.ld-chip{
  display:flex;align-items:center;gap:8px;cursor:pointer;border:var(--border);
  background:var(--white);padding:6px 10px 6px 6px;min-height:44px;border-radius:0;
  font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--dark);
}
.ld-chip:hover{background:var(--light)}
.ld-chip:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ld-chip[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--dark)}
.ld-chip__dots{display:flex;flex:0 0 auto}
.ld-chip__dot{width:15px;height:22px;display:block}
.ld-chip__dot + .ld-chip__dot{margin-left:-2px}

/* 6e. Contrast readout */
.ld-contrast{
  display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;line-height:1.35;
  border-left:4px solid var(--dark);padding:6px 0 6px 10px;color:var(--gray);
}
.ld-contrast strong{font-variant-numeric:tabular-nums;color:var(--dark)}
.ld-contrast.is-warn{border-left-color:var(--blue);color:var(--dark);font-weight:500}

/* 6f. Font pairing cards, set in the fonts they offer */
.ld-fonts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ld-font{
  background:var(--white);border:var(--border);padding:10px 12px;cursor:pointer;border-radius:0;
  text-align:left;color:var(--dark);min-width:0;
}
.ld-font:hover{background:var(--light)}
.ld-font:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ld-font[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--blue)}
.ld-font__head{display:block;font-weight:700;font-size:20px;line-height:1.1;overflow-wrap:anywhere}
.ld-font__body{display:block;font-size:12px;line-height:1.4;color:var(--gray);margin-top:3px;
  overflow-wrap:anywhere}
.ld-font--0 .ld-font__head{font-family:"Ubuntu","Trebuchet MS",Arial,sans-serif}
.ld-font--0 .ld-font__body{font-family:"Poppins",Helvetica,Arial,sans-serif}
.ld-font--1 .ld-font__head{font-family:Georgia,"Times New Roman",serif}
.ld-font--1 .ld-font__body{font-family:"Poppins",Helvetica,Arial,sans-serif}
.ld-font--2 .ld-font__head{font-family:"Arial Narrow",Impact,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.05em}
.ld-font--2 .ld-font__body{font-family:"Poppins",Helvetica,Arial,sans-serif}

/* 7. Match my brand ----------------------------------------------------------- */
.ld-match{border:var(--border);background:var(--light);padding:var(--s-2)}
.ld-match__row{display:flex;flex-wrap:wrap;gap:8px}
.ld-match__row input[type="url"]{flex:1 1 160px;min-width:0}
.ld-match__row .btn{flex:0 0 auto}
.ld-match__note{font-size:11px;line-height:1.4;color:var(--gray);margin:8px 0 0}
.ld-found{list-style:none;margin:var(--s-2) 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ld-found li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--white);border:var(--border);padding:6px 8px;min-width:0}
.ld-found__key{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);
  flex:0 0 auto}
.ld-found__val{font-size:12px;font-weight:600;min-width:0;overflow-wrap:anywhere;flex:1 1 auto}
.ld-found__sw{display:flex;gap:3px;flex:0 0 auto}
.ld-found__sw span{width:18px;height:18px;display:block;border:1px solid var(--dark)}
.ld-found__use{
  flex:0 0 auto;font-family:var(--font-b);font-weight:600;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;border:var(--border);background:var(--white);color:var(--dark);
  padding:6px 9px;min-height:32px;cursor:pointer;border-radius:0;
}
.ld-found__use[aria-pressed="true"]{background:var(--dark);color:var(--white)}
.ld-found__use:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ld-found__img{width:34px;height:34px;object-fit:contain;flex:0 0 auto;background:var(--light)}

/* 7a. Logo upload area */
.ld-upload{border:2px dashed var(--dark);background:var(--white);padding:var(--s-2);text-align:center}
.ld-upload.is-over{background:var(--blue)}
.ld-thumb{display:flex;align-items:center;gap:10px;margin-top:var(--s-2)}
.ld-thumb img{width:56px;height:56px;object-fit:contain;border:var(--border);background:var(--light)}
.ld-thumb__name{font-size:12px;color:var(--gray);overflow-wrap:anywhere;min-width:0}

/* 8. Review ------------------------------------------------------------------- */
.ld-review{border:var(--border);background:var(--white)}
.ld-review__row{display:flex;justify-content:space-between;gap:var(--s-2);
  padding:8px 10px;border-bottom:1px solid var(--light);font-size:13px;line-height:1.35}
.ld-review__row:last-child{border-bottom:0}
.ld-review__k{color:var(--gray);flex:0 0 auto}
.ld-review__v{font-weight:600;text-align:right;overflow-wrap:anywhere;min-width:0}
.ld-review__sw{display:inline-flex;gap:4px;vertical-align:middle}
.ld-review__sw span{width:18px;height:18px;display:block;border:1px solid var(--dark)}

/* 9. The flat label -----------------------------------------------------------
   Three layouts, the same three the WebGL texture paints, so the flat preview
   and the pack never show two different designs. */
.ld-sheets{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
@media(min-width:760px){.ld-sheets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ld-sheet{min-width:0}
.ld-sheet__cap{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gray);margin:0 0 8px}
/* the flat panel takes the proportion of the container it stands for, so a
   tall slim jar, a wide tin and a pouch do not all print on the same box */
.ld-panel{
  border:var(--border);background:var(--ld-bg);color:var(--ld-fg);
  padding:var(--s-3);min-height:240px;aspect-ratio:var(--ld-panel-ar, 3 / 4);
  overflow-wrap:anywhere;display:flex;
}
@supports not (aspect-ratio:1/1){.ld-panel{min-height:300px}}

/* label content, shared by the wrapped and the flat rendering */
.ld-tool{
  /* live design tokens, rewritten by the script */
  --ld-bg:#9caf98;
  --ld-fg:#16211a;
  --ld-accent:#2f4030;
  --ld-font-h:"Ubuntu","Trebuchet MS","Segoe UI",Arial,sans-serif;
  --ld-font-b:"Poppins","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ld-head-tt:none;
  --ld-head-ls:0;
}
.ld-art{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0;flex:1 1 auto}
.ld-art__top,.ld-art__bottom,.ld-art__foot{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;min-width:0;
}
.ld-art__foot{margin-top:auto;gap:2px}
.ld-art__logo{display:flex;align-items:center;justify-content:center;min-width:0;max-width:100%}
.ld-art__logo img{display:block;max-width:100%;max-height:70px;height:auto;width:auto}
.ld-art__word{
  font-family:var(--ld-font-h);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:2px solid currentColor;padding:6px 10px;font-size:11px;line-height:1;white-space:nowrap;
}
/* the brand wordmark, in the logo slot and in a lighter weight, shown only
   while no logo file is loaded */
.ld-art__mark{font-family:var(--ld-font-h);font-weight:600;line-height:1.1;
  text-transform:var(--ld-head-tt);letter-spacing:.06em;max-width:100%;
  font-size:clamp(12px,1.5vw,18px)}
/* the product name is the hero on every layout */
.ld-art__product{font-family:var(--ld-font-h);font-weight:700;line-height:1;
  text-transform:var(--ld-head-tt);letter-spacing:var(--ld-head-ls);
  font-size:clamp(26px,5vw,50px)}
.ld-art__claim{font-family:var(--ld-font-b);font-weight:400;line-height:1.35;
  font-size:clamp(10px,1.2vw,13px);opacity:.85}
.ld-art__count{font-family:var(--ld-font-b);font-weight:600;color:var(--ld-accent);
  font-size:clamp(10px,1.1vw,12px);line-height:1.2;letter-spacing:.07em;text-transform:uppercase}
.ld-art__legal{font-family:var(--ld-font-b);font-size:clamp(9px,1vw,11px);line-height:1.35;opacity:.75;
  letter-spacing:.06em;text-transform:uppercase}
.ld-art__net{font-family:var(--ld-font-b);font-weight:600;font-size:clamp(9px,1vw,11px);line-height:1.35;opacity:.8}

/* 9a. Logo top, product large: the product name is the artwork */
.ld-art--wordmark .ld-art__count{margin-top:6px}
.ld-art--wordmark .ld-art__top{margin-top:4%;gap:10px}

/* 9b. Split colour: the accent block bleeds to the panel edge */
.ld-art--split{gap:0;margin:calc(var(--s-3) * -1)}
.ld-art--split .ld-art__top{
  flex:0 0 62%;justify-content:center;padding:var(--s-3);gap:10px;
}
.ld-art--split .ld-art__bottom,
.ld-art--split .ld-art__foot{background:var(--ld-accent);color:var(--ld-on-accent,#ffffff)}
.ld-art--split .ld-art__bottom{flex:1 1 auto;justify-content:center;padding:var(--s-3) var(--s-3) 6px}
.ld-art--split .ld-art__foot{margin-top:0;padding:0 var(--s-3) var(--s-3)}
.ld-art--split .ld-art__count{color:var(--ld-on-accent,#ffffff);margin-top:4px}
.ld-art--split .ld-art__product{font-size:clamp(20px,3.8vw,38px)}
.ld-art--split .ld-art__mark{font-size:clamp(11px,1.3vw,15px)}

/* 9c. Minimal line: a thin frame, brand centred, product and count on one line */
.ld-art--line{border:2px solid currentColor;padding:var(--s-3);gap:14px;justify-content:center}
.ld-art--line .ld-art__top{margin-top:2%}
.ld-art--line .ld-art__product{font-size:clamp(20px,3.4vw,34px)}
.ld-art--line .ld-art__mark{font-size:clamp(11px,1.3vw,15px)}
.ld-art--line .ld-art__bottom{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}
.ld-art--line .ld-art__claim{flex:1 0 100%}
.ld-art--line .ld-art__count{color:var(--ld-accent)}
.ld-art--line .ld-art__foot{padding-top:6px}

/* 9d. The label wrapped on the flat container drawing, the no script state */
.ld-wrap{
  position:absolute;overflow:hidden;background:var(--ld-bg);color:var(--ld-fg);
  clip-path:polygon(0% 4%, 50% 0%, 100% 4%, 100% 96%, 50% 100%, 0% 96%);
}
.ld-wrap--flat{clip-path:none}
.ld-wrap__inner{position:absolute;inset:0;display:flex;padding:6% 8%}
.ld-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(7,19,26,.26) 0%, rgba(7,19,26,.10) 12%,
    rgba(255,255,255,.10) 34%, rgba(255,255,255,.02) 54%,
    rgba(7,19,26,.06) 76%, rgba(7,19,26,.16) 91%, rgba(7,19,26,.28) 100%);
}
.ld-wrap--flat::after{
  background:linear-gradient(90deg,rgba(255,255,255,.07) 0%,rgba(7,19,26,.07) 100%);
}
.ld-wrap .ld-art{gap:5px}
.ld-wrap .ld-art--split{margin:-6% -8%}
.ld-wrap .ld-art--split .ld-art__top,
.ld-wrap .ld-art--split .ld-art__bottom{padding:6% 8% 3%}
.ld-wrap .ld-art--split .ld-art__foot{padding:0 8% 5%}
.ld-wrap .ld-art--line{padding:6% 8%;gap:7px;border-width:1px}
.ld-wrap .ld-art__word{font-size:8px;padding:3px 6px;letter-spacing:.1em;border-width:1px}
.ld-wrap .ld-art__logo img{max-height:26px}
.ld-wrap .ld-art__mark{font-size:8px;line-height:1.05;letter-spacing:.08em}
.ld-wrap .ld-art__product{font-size:17px;line-height:.98}
.ld-wrap .ld-art--split .ld-art__product,
.ld-wrap .ld-art--line .ld-art__product{font-size:14px}
.ld-wrap .ld-art__claim{font-size:7px}
.ld-wrap .ld-art__count{font-size:7px;letter-spacing:.05em}
.ld-wrap .ld-art__legal,.ld-wrap .ld-art__net{font-size:6px}

/* 10. Back panel, the mandatory zones ----------------------------------------- */
.ld-zones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ld-zones li{border:1px dashed currentColor;padding:6px 8px;font-family:var(--ld-font-b);
  font-size:11px;line-height:1.35}
.ld-zones strong{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ld-accent);margin-bottom:2px}
.ld-zones__org{display:flex;align-items:center;gap:8px}
.ld-zones__leaf{flex:0 0 auto;width:40px;height:28px;border:1px solid currentColor;
  display:flex;align-items:center;justify-content:center;font-size:8px;text-align:center;line-height:1.1}

/* 11. Readout ------------------------------------------------------------------ */
.ld-out{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);margin-top:var(--s-3)}
@media(min-width:620px){.ld-out{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ld-out__tile{border-left:4px solid var(--dark);padding-left:var(--s-2);min-width:0}
.ld-out__num{font-family:var(--font-h);font-weight:700;font-size:clamp(17px,2vw,24px);
  line-height:1.1;display:block;overflow-wrap:anywhere}
.ld-out__label{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gray);display:block;margin-top:6px}

/* 12. Summary box --------------------------------------------------------------- */
.ld-summary{width:100%;max-width:100%;min-height:150px;padding:10px;border:var(--border);
  font-family:var(--font-b);font-size:13px;line-height:1.5;color:var(--dark);background:var(--white);
  border-radius:0;resize:vertical}
.ld-summary:focus-visible{outline:3px solid var(--blue);outline-offset:0}

/* 13. Motion and print ---------------------------------------------------------- */
.ld-wrap,.ld-panel,.ld-out__num{transition:background-color .18s linear,color .18s linear}
@media(prefers-reduced-motion:reduce){
  .ld-wrap,.ld-panel,.ld-out__num{transition:none}
}
@media print{
  .ld-rail,.ld-ctx,.ld-toolbar,.ld-btnrow,.ld-summary,.ld-bar__actions{display:none}
  .has-ix .ld-grid{grid-template-columns:minmax(0,1fr)}
  .has-ix .ld-stagewrap{overflow:visible}
  .has-ix .ld-drawer{position:static;transform:none;border:0;padding:0;max-height:none}
  .ld-stage{min-height:0}
}

/* 14. The label inside the drawer ------------------------------------------
   With scripting on, the drawer is only as wide as the stage, so the artwork
   type is stepped down to fit the smaller panel. The back panel is a list of
   zones rather than a proportioned artwork, so it drops the pack proportion
   and the drawer scrolls instead of the panel clipping its own content. */
.ld-panel{overflow:hidden}
.has-ix .ld-drawer .ld-panel{padding:var(--s-2)}
.has-ix .ld-drawer .ld-art{gap:6px}
.has-ix .ld-drawer .ld-art--split{margin:calc(var(--s-2) * -1)}
.has-ix .ld-drawer .ld-art--split .ld-art__top,
.has-ix .ld-drawer .ld-art--split .ld-art__bottom{padding:var(--s-2)}
.has-ix .ld-drawer .ld-art--split .ld-art__foot{padding:0 var(--s-2) var(--s-2)}
.has-ix .ld-drawer .ld-art--line{padding:var(--s-2);gap:8px}
.has-ix .ld-drawer .ld-art__word{font-size:9px;padding:4px 7px;letter-spacing:.1em}
.has-ix .ld-drawer .ld-art__logo img{max-height:34px}
.has-ix .ld-drawer .ld-art__mark{font-size:clamp(9px,1vw,12px)}
.has-ix .ld-drawer .ld-art__product{font-size:clamp(15px,2.4vw,28px)}
.has-ix .ld-drawer .ld-art__claim{font-size:clamp(8px,0.9vw,10px)}
.has-ix .ld-drawer .ld-art__count{font-size:9px;letter-spacing:.05em}
.has-ix .ld-drawer .ld-art__legal,
.has-ix .ld-drawer .ld-art__net{font-size:8px}
.has-ix .ld-drawer #ld-back .ld-panel{aspect-ratio:auto;min-height:0}
.has-ix .ld-drawer .ld-zones{gap:4px}
.has-ix .ld-drawer .ld-zones li{font-size:9px;line-height:1.3;padding:4px 6px}
.has-ix .ld-drawer .ld-zones strong{font-size:8px;margin-bottom:1px}
.has-ix .ld-drawer .ld-note{font-size:11px}

/* ==========================================================================
   15. The phone wizard, under 1000 px only
   --------------------------------------------------------------------------
   One step per screen, in the order the job is done. Nothing is fixed over
   the page except the two bars, the page scrolls normally, and no class is
   toggled by scrolling at all, so the layout cannot answer itself.
   Every rule here is inside the media query and behind .has-ix, so the
   desktop studio and the no-script page are untouched.
   ========================================================================== */
.ld-mtop,.ld-mprev,.ld-mbar,.ld-mclose,.ld-upload__ico,.ld-upload__btn{display:none}

@media(max-width:999.98px){

  /* 15a. Sticky top bar: the step name, jumpable, and a thin progress bar. */
  .has-ix .ld-mtop{
    display:block;position:sticky;top:var(--ld-navh,70px);z-index:60;
    background:var(--white);border:var(--border);margin-bottom:var(--s-2);
  }
  .ld-mtop__btn{
    display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--s-2);
    min-height:48px;padding:10px 14px;background:var(--white);border:0;cursor:pointer;
    font-family:var(--font-b);font-weight:600;font-size:14px;line-height:1.2;
    color:var(--dark);text-align:left;border-radius:0;
  }
  .ld-mtop__btn:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
  .ld-mtop__ico{flex:0 0 auto;font-size:13px}
  .ld-mtop__track{height:4px;background:var(--light);border-top:1px solid var(--dark)}
  .ld-mtop__track i{display:block;height:100%;background:var(--dark);transition:width .2s linear}
  .ld-mlist{list-style:none;margin:0;padding:0;border-top:var(--border);background:var(--white)}
  .ld-mlist[hidden]{display:none}
  .ld-mlist__btn{
    display:block;width:100%;min-height:48px;padding:12px 14px;text-align:left;cursor:pointer;
    background:var(--white);border:0;border-bottom:1px solid var(--light);border-radius:0;
    font-family:var(--font-b);font-weight:600;font-size:14px;color:var(--dark);
  }
  .ld-mlist__btn[aria-current="true"]{background:var(--dark);color:var(--white)}
  .ld-mlist__btn:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}

  /* 15b. The live preview strip, 140 px, a 2D snapshot of the pack. */
  .has-ix .ld-mprev{
    display:block;position:relative;width:100%;height:var(--ld-mprev-h);
    padding:0;margin:0 0 var(--s-2);border:var(--border);background:#ebe7e0;
    cursor:pointer;overflow:hidden;border-radius:0;
  }
  .ld-mprev:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
  .ld-mprev__c{display:block;width:100%;height:100%;object-fit:cover}
  .ld-mprev__tag{
    position:absolute;right:8px;bottom:8px;background:var(--white);border:var(--border);
    font-family:var(--font-b);font-weight:600;font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;padding:4px 7px;color:var(--dark);
  }

  /* 15c. The full screen preview the strip opens. */
  .has-ix .ld-mclose{display:inline-block}
  .has-ix .ld-toolbar #ld-spin,
  .has-ix .ld-toolbar #ld-view-reset,
  .has-ix .ld-toolbar #ld-flat{display:none}
  html.ld-mfull,html.ld-mfull body{overflow:hidden}

  /* 15d. The flow: preview, step body, then the flat sheets on the last step. */
  .has-ix .ld-grid{display:flex;flex-direction:column;gap:var(--s-3)}
  .has-ix .ld-ctx{order:2}
  .has-ix .ld-stagewrap{order:3;overflow:visible}
  .has-ix .ld-drawer{
    position:static;transform:none;border:var(--border);max-height:none;
    overflow:visible;padding:var(--s-3);
  }
  .has-ix .ld-stagewrap{display:none}
  .has-ix.ld-mfull .ld-stagewrap{display:block}
  .has-ix .ld-tool:not(.ld-s5) .ld-drawer{display:none}
  .has-ix .ld-drawer{margin-top:var(--s-3)}
  .ld-drawer__head .ld-tbtn{display:none}
  .has-ix .ld-sheets{grid-template-columns:minmax(0,1fr)}

  /* every tap target on a phone, including the small toolbar buttons and the
     Undo button in the summary bar, clears 44 px */
  .has-ix .ld-tbtn{min-height:44px;padding:10px 12px;font-size:12px}
  .has-ix .ld-tbtn--zoom{min-width:44px;padding:10px 0;font-size:17px}

  /* 15e. Step bodies. Every tap target is at least 44 px and no affordance
     depends on hover. Inputs are 16 px so iOS does not zoom the page. */
  .has-ix .ld-step h4{font-size:13px;margin-top:var(--s-3)}
  .has-ix .ld-field input[type="text"],
  .has-ix .ld-field input[type="url"],
  .has-ix .ld-summary,
  .has-ix .ld-field input[type="file"]{font-size:16px;min-height:48px}

  /* containers: a single column list, silhouette left, name and note right,
     64 px rows, the chosen one carrying a filled check */
  .has-ix .ld-cards{grid-template-columns:minmax(0,1fr);gap:6px}
  .has-ix .ld-card{
    display:grid;grid-template-columns:34px minmax(0,1fr) 24px;
    grid-template-rows:auto auto;column-gap:12px;align-items:center;
    min-height:64px;padding:7px 10px;gap:0 12px;
  }
  .has-ix .ld-card__fig{grid-column:1;grid-row:1 / span 2;width:34px;height:46px}
  .has-ix .ld-card__fig svg{height:42px}
  .has-ix .ld-card__name{grid-column:2;grid-row:1;align-self:end;font-size:14px}
  .has-ix .ld-card__note{grid-column:2;grid-row:2;align-self:start;font-size:11px}
  .has-ix .ld-card::after{
    content:"";grid-column:3;grid-row:1 / span 2;justify-self:end;
    width:24px;height:24px;border:var(--border);background:var(--white);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;line-height:1;
  }
  .has-ix .ld-card[aria-pressed="true"]::after{
    content:"\2713";background:var(--dark);color:var(--white);border-color:var(--dark);
  }

  /* capsule count: three large segmented buttons */
  .has-ix #ld-grp-caps{gap:0;flex-wrap:nowrap}
  .has-ix #ld-grp-caps .ld-pill{
    flex:1 1 0;min-height:56px;font-size:17px;border-right-width:0;
  }
  .has-ix #ld-grp-caps .ld-pill:last-child{border-right:var(--border)}

  /* cap shape, cap colour and coverage as segmented rows */
  .has-ix #ld-grp-capshape,.has-ix #ld-grp-capcol,.has-ix #ld-grp-wrap,
  .has-ix #ld-grp-finish,.has-ix #ld-grp-logomode,.has-ix #ld-grp-case{
    gap:0;flex-wrap:nowrap;
  }
  .has-ix #ld-grp-capshape .ld-pill,.has-ix #ld-grp-capcol .ld-pill,
  .has-ix #ld-grp-wrap .ld-pill,.has-ix #ld-grp-finish .ld-pill,
  .has-ix #ld-grp-logomode .ld-pill,.has-ix #ld-grp-case .ld-pill{
    flex:1 1 0;min-height:48px;padding:9px 6px;font-size:13px;border-right-width:0;
    text-align:center;
  }
  .has-ix #ld-grp-capshape .ld-pill:last-child,.has-ix #ld-grp-capcol .ld-pill:last-child,
  .has-ix #ld-grp-wrap .ld-pill:last-child,.has-ix #ld-grp-finish .ld-pill:last-child,
  .has-ix #ld-grp-logomode .ld-pill:last-child,.has-ix #ld-grp-case .ld-pill:last-child{
    border-right:var(--border);
  }

  /* palettes: one horizontal scroll row of 56 px swatches, name underneath */
  .has-ix .ld-chips{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;gap:8px;
  }
  .has-ix .ld-chip{
    flex:0 0 auto;flex-direction:column;align-items:center;gap:6px;width:76px;
    padding:6px;min-height:92px;font-size:10px;line-height:1.2;text-align:center;
  }
  .has-ix .ld-chip__dots{width:56px;height:56px}
  .has-ix .ld-chip__dot{width:auto;flex:1 1 0;height:56px}
  .has-ix .ld-chip__dot + .ld-chip__dot{margin-left:0}

  /* the three layout thumbnails stay in one row, about 30 % each */
  .has-ix .ld-layouts{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}

  /* switch rows for the two yes or no choices */
  .has-ix .ld-check{
    align-items:center;justify-content:space-between;gap:12px;
    border:var(--border);background:var(--white);padding:10px 12px;min-height:56px;
  }
  .has-ix .ld-check label{order:1;flex:1 1 auto;font-size:14px}
  .has-ix .ld-check input[type="checkbox"]{
    order:2;flex:0 0 auto;-webkit-appearance:none;appearance:none;margin:0;
    width:52px;height:30px;min-width:52px;border:var(--border);background:var(--light);
    position:relative;cursor:pointer;border-radius:0;
  }
  .has-ix .ld-check input[type="checkbox"]::after{
    content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;
    background:var(--dark);transition:left .16s ease;
  }
  .has-ix .ld-check input[type="checkbox"]:checked{background:var(--blue)}
  .has-ix .ld-check input[type="checkbox"]:checked::after{left:26px}
  .has-ix .ld-check input[type="checkbox"]:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

  /* match my brand: the address row first, the button under it. The basis on
     the input is a width on the desktop row, so it is cleared here or it
     becomes a 160 px tall box in a column. */
  .has-ix .ld-match__row{flex-direction:column;align-items:stretch}
  .has-ix .ld-match__row input[type="url"]{flex:0 0 auto}
  .has-ix .ld-match__row .btn{width:100%;min-height:48px}

  /* the logo drop area, a full width dashed panel with its own button */
  .has-ix .ld-upload{padding:var(--s-3) var(--s-2);text-align:center}
  .has-ix .ld-upload__ico{display:block;width:40px;height:40px;margin:0 auto 8px}
  .has-ix .ld-upload__ico svg{width:40px;height:40px;fill:none;stroke:var(--dark);stroke-width:1.5}
  .has-ix .ld-upload__btn{display:inline-block;width:100%;min-height:48px;margin-top:10px}
  .has-ix .ld-upload .ld-field > label{text-align:center;font-size:13px;margin-bottom:0}
  /* the native file row is replaced by the button above, and stays reachable
     for a screen reader through its own label */
  .has-ix .ld-upload .ld-field input[type="file"]{
    position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;
    border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }

  /* review: the buttons are full width and stack */
  .has-ix #ld-step-5 .ld-btnrow{flex-direction:column}
  .has-ix #ld-step-5 .ld-btnrow .btn{width:100%;min-height:48px;text-align:center}

  /* 15f. The sticky action bar at the foot of the studio. */
  .has-ix .ld-mbar{
    display:flex;position:sticky;bottom:0;z-index:59;gap:var(--s-2);align-items:center;
    background:var(--white);border:var(--border);margin-top:var(--s-3);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .ld-mbar__back{flex:0 0 auto;min-height:48px}
  .ld-mbar__back[hidden]{display:none}
  .ld-mbar__next{flex:1 1 auto;min-height:48px;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  .ld-mtop__track i,.has-ix .ld-check input[type="checkbox"]::after{transition:none}
}
@media print{
  .ld-mtop,.ld-mprev,.ld-mbar{display:none}
}

/* Chooser previews use the same authored models as the turntable. */
.ld-card__fig img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain}
.ld-card__fig{height:84px}
@media(max-width:999.98px){.has-ix .ld-card__fig{width:44px;height:56px}.has-ix .ld-card{grid-template-columns:44px minmax(0,1fr) 24px}}

/* Product and pack, 24 October 2026: format, formula and jar come before the
   label. The pack configurator and formula builder bring their own styles. */
.ld-product-pack{margin:0 0 20px;padding:20px;border:1px solid #b8c9c1;border-radius:14px;background:#fbfcfa;min-width:0}
.ld-product-pack[hidden]{display:none!important}
.ld-pp__head h3{margin:0 0 6px;font-size:1.35rem}
.ld-pp__head h3:focus{outline:none}
.ld-pp__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:14px}
.ld-pp__block{min-width:0;padding:14px;border:1px solid #d6e0db;border-radius:12px;background:#fff}
.ld-pp__block>h4,.ld-pp__block>summary{margin:0 0 10px;font-weight:600;font-size:1rem}
.ld-pp__block>summary{cursor:pointer}
.ld-pp__host{min-width:0;overflow-wrap:anywhere}
.ld-pp__next{display:flex;justify-content:flex-end;margin-top:14px}
.ld-workspace-active[data-workspace-view=pack] .ld-grid,
.ld-workspace-active[data-workspace-view=pack] .ld-out,
.ld-workspace-active[data-workspace-view=pack] > .ld-note{display:none!important}
@media(max-width:999.98px){
  .ld-product-pack{padding:14px 12px;border-radius:12px}
  .ld-pp__grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .ld-pp__block{padding:12px 10px}
  .ld-pp__next .btn{width:100%}
}
/* scale reference and pack status on the 3D stage */
.ld-scalebar,.ld-pack-badge{position:absolute;left:12px;z-index:2;font:500 12px/1.3 var(--font-b,"Poppins",Helvetica,Arial,sans-serif);color:#12323c;background:rgba(255,255,255,.86);border-radius:6px;padding:4px 8px;pointer-events:none}
.ld-scalebar{bottom:12px;padding-left:18px}
.ld-scalebar::before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:#12323c}
.ld-pack-badge{top:12px;max-width:calc(100% - 24px);border:1px solid #d9a441}
.ld-scalebar[hidden],.ld-pack-badge[hidden]{display:none}
#ld-step1-workspace[hidden],#ld-step1-previous[hidden]{display:none}
#ld-step1-workspace .btn{margin-top:8px}
.ld-confirm{display:inline-block;margin-left:6px;font-size:.75em;font-weight:500;color:#7a5a12;border-bottom:1px dotted currentColor;cursor:help}
/* the thumbnails are white matte renders; black jars are shown dark */
.ld-card__fig--B img{filter:brightness(.28) contrast(1.15)}
/* start screen: two own-product routes side by side */
.tls__own{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.tls__own [aria-pressed=true]{text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* Without scripting the studio controls do nothing: hide them and the save
   status, keep the static example pack, the tables and the enquiry route. */
html:not(.has-ix) #ld-save-state,
html:not(.has-ix) .ld-bar__actions,
html:not(.has-ix) .ld-rail,
html:not(.has-ix) .ld-toolbar,
html:not(.has-ix) .ld-routes,
html:not(.has-ix) .ld-previous-access,
html:not(.has-ix) #ld-workspace-nav,
html:not(.has-ix) .ld-mtop,
html:not(.has-ix) .ld-mprev,
html:not(.has-ix) .ld-mbar,
html:not(.has-ix) .ld-ctx,
html:not(.has-ix) .ld-stage__hint,
html:not(.has-ix) #ld-zoom-hint{display:none!important}

/* Restyle, 24 October 2026: the Studio follows the current site language
   (home hero, lp.css): cream ground, navy text, white rounded panels with a
   1 px light line and a soft shadow, kicker labels, light blue selected state
   and blue only as an accent. Visual only: no behaviour, ids or hooks change.
   Selectors start at #tool so they hold against the workspace sheets loaded
   later in the page. */
#tool{--border:1px solid #d3dcd8;--st-navy:#102c36;--st-muted:#4d6269;--st-line:#d3dcd8;
  --st-line-strong:#a9b8bc;--st-blue:#0879a9;--st-ice:#e4f1f6;--st-ice-line:#9cc9dc;--st-paper:#fcfcf8;
  --st-shadow:0 18px 44px rgba(16,44,54,.08)}
#tool.ld-studio{background:#f4f4ed;border-top:1px solid #d3dcd8;border-bottom:1px solid #d3dcd8}

/* Product and pack: one white panel, two quiet columns, cards inside */
#tool .ld-product-pack{padding:28px;border:1px solid var(--st-line);border-radius:16px;background:#fff;box-shadow:var(--st-shadow)}
#tool .ld-pp__head h3{font-family:var(--font-h);font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-.025em;color:var(--st-navy);margin:0 0 8px}
#tool .ld-pp__head .ld-hint{font-size:15px;line-height:1.6;color:var(--st-muted);max-width:760px;margin:0}
#tool .ld-product-pack > .ld-status:not(:empty){display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:7px 14px;
  background:var(--st-ice);border:1px solid var(--st-ice-line);border-radius:99px;font-size:13px;font-weight:500;line-height:1.4;color:var(--st-navy)}
#tool .ld-pp__grid{gap:24px;margin-top:22px}
#tool .ld-pp__block{padding:20px;border:1px solid var(--st-line);border-radius:14px;background:var(--st-paper)}
#tool .ld-pp__block>h4,#tool .ld-pp__block>summary{font-family:var(--font-h);font-weight:700;font-size:18px;line-height:1.3;letter-spacing:-.01em;color:var(--st-navy);margin:0 0 16px}
#tool .ld-pp__block>summary{display:list-item;min-height:44px;padding:8px 0 0;list-style-position:inside}
#tool .ld-pp__block>summary:focus-visible{outline:2px solid var(--st-blue);outline-offset:3px;border-radius:4px}
#tool .ld-pp__block>summary::marker{color:var(--st-blue)}
#tool .ld-product-pack > .ld-note{font-size:13px;line-height:1.6;color:var(--st-muted);margin:20px 0 0;max-width:820px}
#tool .ld-pp__next{margin-top:20px;padding-top:20px;border-top:1px solid var(--st-line)}
#tool .ld-pp__next .btn{min-height:48px;border-radius:4px}
@media(max-width:999.98px){
  #tool .ld-product-pack{padding:18px 14px;border-radius:14px}
  #tool .ld-pp__grid{gap:16px}
  #tool .ld-pp__block{padding:14px 12px;border-radius:12px}
}

/* Review, summary box, uploads and notes: 1 px lines, rounded */
#tool .ld-review{border:1px solid var(--st-line);border-radius:10px;overflow:hidden;background:#fff}
#tool .ld-review__row{border-bottom:1px solid #e3e8e5}
#tool .ld-summary{border:1px solid var(--st-line-strong);border-radius:8px;padding:12px}
#tool .ld-summary:focus-visible{outline:2px solid var(--st-blue);outline-offset:2px}
#tool .ld-upload{border:1px dashed var(--st-line-strong);border-radius:12px;background:var(--st-paper)}
#tool .ld-upload.is-over{background:var(--st-ice);border-color:var(--st-blue)}
#tool .ld-thumb img{border:1px solid var(--st-line);border-radius:8px}
#tool .ld-err{border-left:0;border:1px solid #e3bdb5;border-radius:8px;background:#fff7f4;box-shadow:inset 3px 0 0 #a3261b}
#tool .ld-out__tile{border-left:1px solid var(--st-line)}
#tool .tls__status{border-left:0;border:1px solid #b9dbe8;border-radius:8px;box-shadow:inset 3px 0 0 #168aab}
#tool .tls__status.is-error{border-color:#e3c4ad;box-shadow:inset 3px 0 0 #b37548}

/* step navigation: one segmented control, the current step in the light blue state */
#tool .ld-workspace-nav{gap:4px;padding:4px;margin:0 0 20px;border:1px solid var(--st-line);border-radius:14px;
  background:#fff;box-shadow:0 6px 18px rgba(16,44,54,.05);width:fit-content;max-width:100%}
#tool .ld-workspace-nav button{border:1px solid transparent;border-radius:10px;background:transparent;color:var(--st-navy);font-weight:500;transition:background-color .15s,border-color .15s}
#tool .ld-workspace-nav button:hover{background:var(--st-paper);border-color:var(--st-line)}
#tool .ld-workspace-nav button[aria-pressed=true]{background:var(--st-ice);border-color:var(--st-blue);color:var(--st-navy);font-weight:600}
#tool .ld-workspace-nav button:focus-visible{outline:2px solid var(--st-blue);outline-offset:2px}
#tool .ld-tbtn[aria-pressed=true]{background:var(--st-ice);color:var(--st-navy);border-color:var(--st-blue)}
@media(max-width:999.98px){#tool .ld-workspace-nav{width:100%}}
@media(prefers-reduced-motion:reduce){#tool .ld-workspace-nav button{transition:none}}

/* start screen direction chips: pills with the light blue selected state */
#tool .tls__categories button{border:1px solid var(--st-line-strong);border-radius:99px;background:#fff;padding:10px 16px;font-weight:500;color:var(--st-navy)}
#tool .tls__categories button:hover{border-color:var(--st-navy);background:var(--st-paper)}
#tool .tls__categories button[aria-pressed=true]{background:var(--st-ice);border-color:var(--st-blue);color:var(--st-navy);font-weight:600;box-shadow:inset 0 0 0 1px var(--st-blue)}

#tool .tls__own [aria-pressed=true]{color:var(--st-blue)}

/* editor side tabs: the selected tab keeps its 2 px accent line, drawn as an inset shadow */
#tool .lw__tabs>button{border-bottom:0;box-shadow:inset 0 -2px 0 transparent}
#tool .lw__tabs>button[aria-selected=true]{box-shadow:inset 0 -2px 0 var(--lw-blue,#0879a9)}

/* Touch targets on a phone: every control in the Studio is at least 44 px */
@media(max-width:999.98px){
  #tool .tls .tls__details>summary{min-height:44px;padding-block:10px}
  #tool .tls input[type=color]{width:44px;height:44px}
  #tool .tls .tls__text-button{min-height:44px}
  #tool .tls .tls__live-heading button{min-height:44px}
  #tool .ld-show-preview,#tool .ld-tbtn.ld-show-preview{min-height:44px}
  #tool .lw__zoom-controls>button{min-width:44px}
  #tool .lw__handoff a{display:inline-flex;align-items:center;min-height:44px}
}

/* Project file input: a full touch target on phones */
.ld-project-files input[type=file]{display:block;min-height:44px;width:100%;max-width:100%;padding:10px 0;box-sizing:border-box;font-size:16px}
/* label workspace: the formula does not fit yet */
.lw__notice--formula{border-left:4px solid #c0392b}

/* Start from a ready formula (label-ready.js), 25 October 2026: in Product and pack, above the two blocks */
#ld-ready-box{margin-top:18px}
#ld-ready-box[hidden]{display:none!important}
.ld-ready-note{margin:14px 0 0;padding:10px 14px;border:1px solid var(--st-ice-line,#9cc9dc);border-radius:10px;background:var(--st-ice,#e4f1f6);font-size:14px;line-height:1.5;color:var(--st-navy,#102c36)}
.ld-ready-note[hidden]{display:none!important}
.ld-kept{margin:0 0 16px;padding:10px 14px;border:1px solid var(--st-ice-line,#9cc9dc);border-radius:10px;background:var(--st-ice,#e4f1f6);font-size:14px;line-height:1.5;color:var(--st-navy,#102c36)}
.ld-kept p{margin:0}
.ld-kept ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.ld-kept li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.ld-kept small{color:var(--st-muted,#4b6470)}
.ld-kept .btn{min-height:44px}
.ld-kept[hidden],#ld-tool:not(.ld-workspace-active) .ld-kept{display:none!important}
.lr__lead{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--st-muted,#4d6269)}
.lr__label{display:block;font-size:14px;font-weight:600;margin:0 0 6px}
.lr__search{width:100%;max-width:520px;min-height:48px;padding:10px 12px;border:1px solid var(--st-line-strong,#a9b8bc);border-radius:8px;background:#fff;font:400 15px/1.4 Poppins,sans-serif;box-sizing:border-box}
.lr__search:focus-visible{outline:2px solid var(--st-blue,#0879a9);outline-offset:2px}
.lr__count{margin:8px 0 10px;font-size:13px;color:var(--st-muted,#4d6269)}
.lr__tree{display:grid;gap:8px}
.lr__cat{border:1px solid var(--st-line,#d3dcd8);border-radius:12px;background:#fff}
.lr__cat>summary{min-height:44px;padding:10px 14px;cursor:pointer;font-weight:600;font-size:15px;display:list-item;list-style-position:inside}
.lr__cat>summary span{font-weight:400;color:var(--st-muted,#4d6269)}
.lr__cat>summary:focus-visible{outline:2px solid var(--st-blue,#0879a9);outline-offset:2px;border-radius:10px}
.lr__group{padding:0 14px 12px}
.lr__gname{margin:4px 0 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--st-muted,#4d6269)}
.lr__group ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.lr__item{display:grid;gap:2px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--st-line,#d3dcd8);border-radius:10px;background:var(--st-paper,#fcfcf8);color:var(--st-navy,#102c36);text-align:left;cursor:pointer;font:400 13px/1.4 Poppins,sans-serif}
.lr__item strong{font-size:14px;font-weight:600}
.lr__item span{color:var(--st-muted,#4d6269)}
.lr__item em{font-style:normal;font-weight:600;color:var(--st-blue,#0879a9)}
.lr__item:hover{border-color:var(--st-navy,#102c36)}
.lr__item:focus-visible{outline:2px solid var(--st-blue,#0879a9);outline-offset:2px}
.lr__item.is-current{background:var(--st-ice,#e4f1f6);border-color:var(--st-blue,#0879a9)}
@media(max-width:600px){.lr__group ul{grid-template-columns:minmax(0,1fr)}}
#ld-ready-box:not([open])>summary{margin-bottom:0}