/* packs module styles (Grafiche confezione, Avvertenze e loghi): every rule under .m-packs; the shell's s-* classes do the rest */
.m-packs{display:flex;flex-direction:column;gap:0;min-width:0}
.m-packs .pk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 24px;padding-top:14px;border-top:1px solid var(--line)}
.m-packs .pk-grow{flex:1}
.m-packs .pk-h3{margin:18px 0 8px;font-size:18px;font-weight:800;color:var(--ink)}
.m-packs .pk-big{font-size:20px;font-weight:700;margin:4px 0 8px}
.m-packs .pk-note{border:1px solid #F1D48A;background:var(--warn-soft);border-radius:14px;padding:14px 16px;margin:0 0 14px;font-size:16px;line-height:1.45}
.m-packs .pk-note .s-btn{margin-left:8px}
.m-packs .pk-msg{margin:0;min-height:1.4em;color:var(--bad);font-weight:700}
.m-packs .pk-progress{font-size:17px;font-weight:700;min-height:1.4em;margin:12px 0 4px}
.m-packs .pk-why{display:block;font-size:15px;color:var(--bad);margin-top:2px}
.m-packs .pk-hand{margin:6px 0 0;color:var(--warn);font-weight:700}

/* lists of things with an action */
.m-packs .pk-list{list-style:none;margin:8px 0 0;padding:0}
.m-packs .pk-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 0;border-top:1px solid var(--line)}
.m-packs .pk-list li:first-child{border-top:0}
.m-packs .pk-list li>div{flex:1 1 260px;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.m-packs .pk-list .s-help{flex-basis:100%}
.m-packs .pk-codes{list-style:none;margin:10px 0;padding:0;border:0;display:flex;flex-direction:column;gap:6px}
.m-packs .pk-codes li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:17px}

/* the sheet drawings */
.m-packs .pk-svg{display:block;width:100%;height:auto;max-height:440px}
.m-packs .pk-cut{fill:#fff;stroke:var(--pink);stroke-width:.6;vector-effect:non-scaling-stroke}
.m-packs .pk-safe{fill:none;stroke:#7A8B80;stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.m-packs .pk-fold{stroke:var(--pink-ink);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:8 4}
.m-packs .pk-fold.mountain{stroke-dasharray:8 3 2 3}
.m-packs .pk-hole{fill:#E9ECEA;stroke:var(--pink-ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.m-packs .pk-pan rect{fill:none;stroke:none}
.m-packs .pk-pan.front rect{fill:var(--green-soft)}
.m-packs .pk-pan.back rect{fill:#F4EEE6}
.m-packs .pk-pan.flap rect{fill:#F3F5F2}
.m-packs .pk-pan text{fill:var(--ink);font-family:inherit;font-weight:700}
.m-packs .pk-sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px}
.m-packs .pk-sides figure,.m-packs .pk-flat{margin:0}
.m-packs figcaption{font-size:15px;font-weight:700;color:var(--mut);text-align:center;margin-top:6px}
.m-packs .pk-draw{min-height:180px;display:grid;place-items:center}

/* Format Sheet cards */
.m-packs .pk-sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:12px}
.m-packs .pk-sheet{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;border:2px solid var(--line);border-radius:14px;background:#fff;font:inherit;color:inherit;cursor:pointer;min-height:44px}
.m-packs .pk-sheet:hover{border-color:var(--green)}
.m-packs .pk-sheet[aria-pressed="true"]{border-color:var(--green);background:var(--green-soft)}
.m-packs .pk-sheet[aria-pressed="true"] b::before{content:"✓ ";color:var(--green)}
.m-packs .pk-sheet b{font-size:18px}
.m-packs .pk-sheet .tags{display:flex;flex-wrap:wrap;gap:6px}
.m-packs .pk-thumb{display:block;height:130px;margin-bottom:6px}
.m-packs .pk-thumb .pk-svg{height:130px;max-height:130px}
.m-packs .pk-fams{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:8px}
.m-packs .pk-fam{flex-direction:row;align-items:center;gap:12px}
.m-packs .pk-letter{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--green-soft);color:var(--green);font-size:22px;font-weight:800}
.m-packs .pk-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px}
.m-packs .pk-fold-row{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:10px;align-items:end}
.m-packs .pk-fold-row legend{padding:0 6px}
.m-packs .pk-pans{list-style:none;margin:0;padding:0}
.m-packs .pk-pans li{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px solid var(--line)}
.m-packs .pk-pans label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.m-packs .pk-pans .s-btn{align-self:flex-start}
.m-packs .pk-sheetpic{position:relative}
.m-packs .pk-supimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.5;pointer-events:none}

/* step 3 */
.m-packs .pk-adds{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.m-packs .pk-data{margin:6px 0 0;display:flex;flex-direction:column}
.m-packs .pk-data>div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:4px 16px;padding:10px 0;border-top:1px solid var(--line)}
.m-packs .pk-data>div:first-child{border-top:0}
.m-packs .pk-data dt{font-weight:700}
.m-packs .pk-data dd{margin:0;overflow-wrap:anywhere}
.m-packs .pk-data dd span{display:block;font-size:15px;color:var(--mut)}
.m-packs .pk-check{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.m-packs .pk-check li{display:flex;gap:12px;align-items:flex-start;padding:8px 10px;border-radius:10px}
.m-packs .pk-check li>span{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;font-weight:800}
.m-packs .pk-check li.ok>span{background:var(--green);color:#fff}
.m-packs .pk-check li.bad{background:var(--bad-soft)}
.m-packs .pk-check li.bad>span{background:var(--bad);color:#fff}
.m-packs .pk-check li.opt>span{background:#ECEFED;color:#4A524C}
.m-packs .pk-check p{margin:2px 0 0;font-size:16px}
.m-packs .pk-check li.bad p{color:var(--bad);font-weight:700}

/* step 4 */
.m-packs .pk-color{display:flex;align-items:center;gap:12px;font-weight:700;margin-top:12px}
.m-packs .pk-color input{width:64px;height:48px;padding:2px;border:1px solid var(--line-2);border-radius:10px;background:#fff}
.m-packs .pk-artthumb{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
.m-packs .pk-artthumb img{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}

/* step 5 */
.m-packs .pk-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.m-packs .pk-wait{display:flex;align-items:center;gap:14px;font-size:18px}
.m-packs .pk-spin{border-color:var(--green-line);border-top-color:var(--green)}
.m-packs .pk-pic{position:relative;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.m-packs .pk-pic img{display:block;width:100%;height:100%;object-fit:fill}
.m-packs .pk-over{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.m-packs .pk-over .pk-cut{fill:none}
.m-packs #pkflat{display:flex;flex-direction:column;gap:16px}
.m-packs .pk-folded{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:14px;align-items:start}
.m-packs .pk-fpanel{margin:0}
.m-packs .pk-fpanel>div{width:100%;border:1px solid var(--line);border-radius:6px;background-repeat:no-repeat;background-color:#fff}
.m-packs .pk-fbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--green-soft)}
.m-packs .pk-fbox span{font-weight:800}
.m-packs .pk-fbox b{font-size:28px;color:var(--green)}
.m-packs .pk-std{list-style:none;margin:8px 0 0;padding:0}
.m-packs .pk-std .s-toggle{align-items:flex-start;padding:6px 0}
.m-packs .pk-std .s-toggle input{margin-top:2px;flex:none}

/* label data and library */
.m-packs .pk-changes{list-style:none;margin:8px 0 0;padding:0;max-height:420px;overflow:auto}
.m-packs .pk-changes li{padding:10px 0;border-top:1px solid var(--line)}
.m-packs .pk-changes div{font-size:16px;overflow-wrap:anywhere}
.m-packs .pk-changes span{font-weight:700;margin-right:8px}
.m-packs .pk-changes s{color:var(--mut)}
.m-packs .pk-changes ins{text-decoration:none;background:#FFE9A8;border-radius:3px;padding:0 2px}
.m-packs .pk-inline{display:flex;flex-direction:column;gap:6px;font-weight:700;min-width:min(260px,100%)}
.m-packs .pk-langs{margin:0;padding-left:0;list-style:none}
.m-packs .pk-langs li{padding:12px 0;border-top:1px solid var(--line)}
.m-packs .pk-langs li:first-child{border-top:0}
.m-packs .pk-langs b{display:inline-block;min-width:48px;font-size:17px}
.m-packs .pk-langs p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.m-packs .pk-was{color:var(--mut)}
.m-packs .pk-was span{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.m-packs .pk-diff{color:var(--warn);font-weight:700}
.m-packs .s-answers .s-ans{min-height:56px}

@media (max-width:900px){
  .m-packs .pk-split{grid-template-columns:minmax(0,1fr)}
  .m-packs .pk-data>div{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .m-packs .pk-foot .s-btn{flex:1 1 100%}
  .m-packs .pk-foot .pk-grow{display:none}
  .m-packs .s-hero .s-actions .s-btn{flex:1 1 100%}
}

@media (max-width:520px){ .m-packs .s-btn{white-space:normal;text-align:center} }
.m-packs .s-btn:disabled{opacity:.45;cursor:not-allowed}
.m-packs .pk-ptitle{margin:0;font-size:17px}

/* phase 2: "Grafica creata", the special shape's text rectangle, the packaged product pictures */
.m-packs .pk-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));gap:8px;margin-bottom:12px}
.m-packs .pk-style{flex-direction:row;align-items:center;gap:12px}
.m-packs .pk-swatch{width:48px;height:48px;flex:none;border-radius:10px;border:1px solid var(--line)}
.m-packs .pk-artside{display:flex;flex-direction:column;gap:8px;flex:1 1 220px;min-width:0}
.m-packs .pk-artside .s-btn{align-self:flex-start}
.m-packs .pk-usable{fill:rgba(0,122,52,.12);stroke:var(--green);stroke-width:1.5;vector-effect:non-scaling-stroke}
.m-packs .pk-usablebox{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.m-packs .pk-usablebox legend{padding:0 6px;font-weight:700}
.m-packs .s-pcard.pk-off{opacity:.55;cursor:not-allowed}
.m-packs .pk-group{border:0;padding:0;margin:14px 0 0}
.m-packs .pk-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:14px}
.m-packs .pk-shots figure{margin:0;display:flex;flex-direction:column;gap:6px}
.m-packs .pk-shots img{width:100%;border-radius:10px;border:1px solid var(--line);background:#fff}
.m-packs .pk-corners{position:relative;width:calc(100% - 44px);max-width:720px;margin:22px auto;touch-action:none}   /* room for the handles at the edges */
.m-packs .pk-corners img{display:block;width:100%;height:100%;object-fit:fill;border-radius:8px;border:1px solid var(--line)}
.m-packs .pk-corners svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.m-packs .pk-corners polygon{fill:rgba(223,90,128,.18);stroke:var(--pink-ink);stroke-width:3;vector-effect:non-scaling-stroke}
.m-packs .pk-handle{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid #fff;background:var(--pink-ink);
  box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:grab;padding:0}
.m-packs .pk-handle:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.m-packs .s-chip{white-space:normal;max-width:100%}
.m-packs .s-form .s-toggle{flex-direction:row;align-items:center;font-weight:600}

/* the supplier's base PDF: the zone editor over the PDF picture */
.m-packs .pk-zonepic{position:relative;width:calc(100% - 44px);margin:22px auto;touch-action:none;background:#fff;border:1px solid var(--line);border-radius:6px}
.m-packs .pk-zonepic img{display:block;width:100%;height:100%;object-fit:fill}
.m-packs .pk-zonepic svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.m-packs .pk-die{fill:none;stroke:var(--pink-ink);stroke-width:1.5;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.m-packs .pk-zone{position:absolute;box-sizing:border-box;border:2px solid var(--green);background:rgba(0,122,52,.14)}
.m-packs .pk-zone.back{border-color:#8A5300;background:rgba(138,83,0,.14)}
.m-packs .pk-zone.flap,.m-packs .pk-zone.blank{border-color:#4A524C;background:rgba(74,82,76,.10);border-style:dashed}
.m-packs .pk-zmove{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;cursor:move;display:flex;align-items:flex-start;justify-content:flex-start;
  padding:4px 6px;font:inherit;font-size:15px;font-weight:800;color:var(--ink);text-align:left;overflow:hidden}
.m-packs .pk-zmove:focus-visible,.m-packs .pk-zsize:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.m-packs .pk-zsize{position:absolute;right:-22px;bottom:-22px;width:44px;height:44px;border-radius:50%;border:3px solid #fff;background:var(--green);
  box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:nwse-resize;padding:0}
/* «Carica il documento Word»: the preview per language */
.m-packs .pk-wbad{border:1px solid var(--bad);background:var(--bad-soft);border-radius:14px;padding:14px 16px;margin:0 0 14px;font-size:16px;line-height:1.45}
.m-packs .pk-wbad ul,.m-packs .pk-note ul{margin:6px 0 0;padding-left:20px}
.m-packs .pk-wbad li,.m-packs .pk-note li{margin:4px 0;overflow-wrap:anywhere}
.m-packs .pk-langs ins{text-decoration:underline 2px;text-underline-offset:3px;background:var(--green-soft);color:inherit}
.m-packs .pk-langs del,.m-packs .s-help del{text-decoration:line-through 2px;color:var(--bad)}
.m-packs .s-help ins{text-decoration:underline 2px;background:var(--green-soft)}
.m-packs .pk-langs .s-chip{vertical-align:middle}
.m-packs .pk-langs del+ins,.m-packs .pk-langs ins+del{margin-left:.3em}