/* Diodtuning Dekalstudio – allt avgränsat under .diod-ds så att temat inte påverkas. */
.diod-ds{
  /* temats tokens när studion visas i Diodtunings tema, annars egna värden */
  --dds-ink:var(--ink,#1B1D1F); --dds-muted:var(--muted,#5D6166); --dds-line:var(--line,#E3E1DE); --dds-ground:var(--ground,#F5F4F2); --dds-panel:#fff;
  --dds-brand:var(--brand,#E86717); --dds-action:var(--action,#C2530E); --dds-action-hover:var(--action-hover,#9E430B); --dds-soft:var(--soft,#FFF1E8);
  --dds-ok:var(--ok,#1E7A46); --dds-warn:#9A5B00; --dds-warn-bg:#FFF6E0; --dds-danger:var(--danger,#B3261E);
  --dds-fs-xs:var(--fs-xs,12px); --dds-fs-sm:var(--fs-sm,14px); --dds-fs-base:var(--fs-base,16px); --dds-fs-md:var(--fs-md,18px); --dds-fs-price:32px;
  --dds-r-sm:var(--radius-sm,3px); --dds-r:var(--radius,6px); --dds-control:var(--control-h,46px); --dds-control-lg:var(--control-h-lg,52px);
  color:var(--dds-ink); font-size:var(--dds-fs-sm); line-height:1.45; display:flex; flex-direction:column; gap:14px;
  /* Bryt ut ur smala temakolumner: full bredd upp till 1440 px, centrerat. */
  /* !important behövs mot block-temans "constrained layout" som tvingar max-width/marginaler. */
  width:min(1440px, calc(100vw - 48px)) !important; max-width:none !important;
  margin-left:calc(50% - min(720px, 50vw - 24px)) !important; margin-right:0 !important;
}
@media (max-width:720px){ .diod-ds{ width:calc(100vw - 32px) !important; margin-left:calc(50% - 50vw + 16px) !important; } }
.diod-ds *{box-sizing:border-box}
.diod-ds button,.diod-ds input,.diod-ds select,.diod-ds textarea{font:inherit;color:inherit}
.diod-ds button{cursor:pointer}
.diod-ds :focus-visible{outline:3px solid var(--dds-brand);outline-offset:2px}
.dds-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dds-intro p{margin:0;color:var(--dds-muted);max-width:60ch}
.dds-usps{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:var(--dds-fs-sm);color:var(--dds-muted)}
.dds-usps li::before{content:"✓";color:var(--dds-brand);font-weight:700;margin-right:6px}

.dds-studio{display:grid;grid-template-columns:230px minmax(0,1fr) 320px;gap:14px;align-items:start}
.dds-card{background:var(--dds-panel);border:1px solid var(--dds-line);border-radius:var(--dds-r)}
.dds-tools{padding:12px;display:flex;flex-direction:column;gap:14px}
.dds-h{margin:0;font-size:var(--dds-fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dds-muted)}
.dds-group{display:flex;flex-direction:column;gap:6px}
.dds-tbtn{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:8px 10px;border:1px solid var(--dds-line);border-radius:var(--dds-r-sm);background:var(--dds-panel);text-align:left;font-weight:500;cursor:pointer;margin:0}
.dds-tbtn:hover{border-color:var(--dds-brand);background:var(--dds-soft)}
.dds-cats{display:flex;gap:4px;flex-wrap:wrap}
.dds-cats button{border:1px solid var(--dds-line);background:var(--dds-panel);border-radius:14px;padding:4px 10px;font-size:var(--dds-fs-xs);min-height:30px}
.dds-cats button[aria-pressed="true"]{background:var(--dds-ink);border-color:var(--dds-ink);color:#fff}
.dds-motifs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:260px;overflow:auto}
.dds-motifs button{aspect-ratio:1/1;border:1px solid var(--dds-line);border-radius:var(--dds-r-sm);background:var(--dds-panel);display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px}
.dds-motifs button:hover{border-color:var(--dds-brand);background:var(--dds-soft)}
.dds-motifs img{width:100%;height:100%;object-fit:contain}
.dds-hist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dds-hist button{min-height:40px;border:1px solid var(--dds-line);border-radius:var(--dds-r-sm);background:var(--dds-panel);font-weight:500}
.dds-hist button:disabled{opacity:.4;cursor:default}
.dds-hist .dds-hist__all{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:500}
.dds-hint{font-size:var(--dds-fs-xs);color:var(--dds-muted);margin:0}

.dds-stagecol{display:flex;flex-direction:column;gap:10px;min-width:0}
.dds-stagebar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px}
.dds-bgpick{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dds-bgpick span{font-size:var(--dds-fs-sm);color:var(--dds-muted)}
.dds-bgpick button{border:1px solid var(--dds-line);border-radius:var(--dds-r-sm);background:var(--dds-panel);padding:7px 10px;min-height:36px;font-size:var(--dds-fs-sm)}
.dds-bgpick button[aria-pressed="true"]{border-color:var(--dds-ink);font-weight:700}
.dds-toggles{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--dds-fs-sm)}
.dds-toggles label{display:flex;gap:6px;align-items:center;margin:0}
.dds-toggles input{width:16px;height:16px;accent-color:var(--dds-action);margin:0}
.dds-dims{font-variant-numeric:tabular-nums;font-weight:700}
.dds-stage{position:relative;aspect-ratio:900/640;border-radius:var(--dds-r);overflow:hidden;border:1px solid var(--dds-line);touch-action:none} /* samma proportion som arbetsytan (LW×LH i editor.js): ingen layoutförskjutning när JS ritar */
.dds-stage[data-bg="glas"]{background:radial-gradient(120% 90% at 25% 15%,#5b6a78 0%,#2a333c 45%,#151a1f 100%)}
.dds-stage[data-bg="morklack"]{background:linear-gradient(160deg,#3a3f45 0%,#1d2024 60%,#121416 100%)}
.dds-stage[data-bg="ljuslack"]{background:linear-gradient(160deg,#f2f2f0 0%,#d9dbdd 60%,#c7cacd 100%)}
.dds-stage[data-bg="rod"]{background:linear-gradient(160deg,#b4232a 0%,#7d151a 70%,#5e0f13 100%)}
.dds-stage canvas{display:block}
.dds-gridlayer{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px)}
.dds-stage[data-bg="ljuslack"] .dds-gridlayer{background-image:linear-gradient(rgba(0,0,0,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.12) 1px,transparent 1px)}
.dds-zoombar{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.95);border:1px solid var(--dds-line);border-radius:var(--dds-r-sm);padding:3px;box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:2}
.dds-zoombar button{min-width:36px;height:36px;border:0;background:transparent;border-radius:var(--dds-r-sm);font-weight:700;font-size:var(--dds-fs-base);color:var(--dds-ink);padding:0 8px}
.dds-zoombar .dds-zfit{font-size:var(--dds-fs-sm)}
.dds-zoombar button:hover{background:#EFEDEA}
.dds-zoombar button[aria-pressed="true"]{background:var(--dds-ink);color:#fff}
.dds-zoombar output{min-width:48px;text-align:center;font-size:var(--dds-fs-sm);font-variant-numeric:tabular-nums;color:var(--dds-muted)}
.dds-warns{display:flex;flex-direction:column;gap:6px}
.dds-warn{background:var(--dds-warn-bg);color:var(--dds-warn);border:1px solid #F1D9A6;border-radius:var(--dds-r-sm);padding:8px 10px;font-size:var(--dds-fs-sm)}
.dds-error{background:#FCECEB;color:var(--dds-danger);border:1px solid #F3C2BF;border-radius:var(--dds-r-sm);padding:8px 10px;font-size:var(--dds-fs-sm)}

.dds-side{display:flex;flex-direction:column;gap:14px}
.dds-sec{padding:14px;display:flex;flex-direction:column;gap:10px}
.dds-swatches{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.dds-sw{aspect-ratio:1/1;border-radius:50%;border:2px solid var(--dds-line);min-height:36px;padding:0}
.dds-sw[aria-pressed="true"]{border-color:var(--dds-ink);box-shadow:0 0 0 2px var(--dds-panel) inset}
.dds-vinylname{font-size:var(--dds-fs-sm);color:var(--dds-muted)}
.dds-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dds-between{justify-content:space-between}
.dds-field{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 120px}
.dds-field label,.dds-flabel{font-size:var(--dds-fs-xs);color:var(--dds-muted)}
.dds-field input,.dds-field select,.dds-field textarea{height:var(--dds-control);border:1px solid #BDBAB6;border-radius:var(--dds-r-sm);padding:0 12px;background-color:var(--dds-panel);width:100%;margin:0}
.dds-field textarea{height:64px;padding:8px 10px;resize:vertical}
/* segmentväljare (justering): ljus bakgrund, valt alternativ vitt med orange text */
.dds-seg{display:flex;gap:3px;padding:3px;border-radius:var(--dds-r);background:var(--dds-ground);box-shadow:inset 0 0 0 1px var(--dds-line)}
.diod-ds .dds-seg button{flex:1 1 0;min-height:36px;padding:0 8px;border:0;border-radius:var(--dds-r-sm);background:transparent;color:var(--dds-muted);font-weight:500}
.diod-ds .dds-seg button:hover{color:var(--dds-ink)}
.diod-ds .dds-seg button[aria-pressed="true"]{background:var(--dds-panel);color:var(--dds-action-hover);font-weight:700;box-shadow:0 1px 3px rgba(18,20,22,.12)}
.dds-check{display:flex;gap:8px;align-items:flex-start;font-size:var(--dds-fs-sm);margin:0}
.dds-check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--dds-action)}
.dds-empty{font-size:var(--dds-fs-sm);color:var(--dds-muted);background:var(--dds-ground);border-radius:var(--dds-r-sm);padding:10px}
.dds-ghost{border:1px solid var(--dds-ink);border-radius:var(--dds-r-sm);background:var(--dds-panel);font-weight:700;min-height:40px;padding:0 12px}
.dds-ghost.dds-del{border-color:var(--dds-danger);color:var(--dds-danger)}
/* åtgärder för markerat lager */
.dds-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.dds-acts--2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:6px}
.diod-ds .dds-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:6px 4px;border:1px solid var(--dds-line);border-radius:var(--dds-r-sm);background:var(--dds-panel);color:var(--dds-ink);font-size:var(--dds-fs-xs);font-weight:500;line-height:1.2;text-align:center}
.diod-ds .dds-acts--2 .dds-act{flex-direction:row;min-height:40px;gap:8px;font-size:var(--dds-fs-sm)}
.diod-ds .dds-act:hover{border-color:var(--dds-ink);background:var(--dds-ground)}
.diod-ds .dds-act svg{flex:none;color:var(--dds-action)}
.diod-ds .dds-act--del,.diod-ds .dds-act--del svg{color:var(--dds-danger)}
.diod-ds .dds-act--del:hover{border-color:var(--dds-danger);background:#FCECEB}

.dds-layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto}
.dds-layer{display:flex;align-items:center;gap:2px;border:1px solid var(--dds-line);border-radius:var(--dds-r-sm);padding:3px;margin:0}
.dds-layer.sel{border-color:var(--dds-brand);background:var(--dds-soft)}
.dds-lname{flex:1 1 auto;min-width:0;height:36px;border:0;background:transparent;text-align:left;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.dds-ib{width:36px;height:36px;border:0;background:transparent;border-radius:var(--dds-r-sm);display:flex;align-items:center;justify-content:center;color:var(--dds-muted);flex:0 0 auto;padding:0}
.dds-ib:hover{background:#EFEDEA;color:var(--dds-ink)}
.dds-ib[aria-pressed="true"]{color:var(--dds-action)}

.dds-price{padding:16px;display:flex;flex-direction:column;gap:10px;position:sticky;top:12px}
.dds-pbig{font-size:var(--dds-fs-price);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dds-pline{display:flex;justify-content:space-between;font-size:var(--dds-fs-sm);color:var(--dds-muted);font-variant-numeric:tabular-nums}
.diod-ds .dds-cta{border:0;border-radius:var(--dds-r-sm);background:var(--dds-action);color:#fff;font-weight:700;font-size:var(--dds-fs-base);min-height:var(--dds-control-lg);padding:0 18px}
.diod-ds .dds-cta:hover{background:var(--dds-action-hover)}
.diod-ds .dds-cta:disabled{opacity:.5;cursor:not-allowed}
.dds-qty{display:flex;align-items:center;border:1px solid #BDBAB6;border-radius:var(--dds-r-sm)}
.dds-qty button{width:40px;height:calc(var(--dds-control) - 2px);border:0;background:var(--dds-panel);font-size:var(--dds-fs-md);padding:0}
.dds-qty output{min-width:32px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.dds-addon{display:flex;gap:10px;align-items:center;border:1px dashed #D9CFC6;border-radius:var(--dds-r-sm);padding:8px;margin:0;cursor:pointer}
.dds-addon input{width:18px;height:18px;accent-color:var(--dds-action);margin:0}
.dds-addon img{width:44px;height:44px;object-fit:cover;border-radius:var(--dds-r-sm);background:var(--dds-ground)}
.dds-toast{background:#E6F4EC;color:var(--dds-ok);border:1px solid #BFE0CC;border-radius:var(--dds-r-sm);padding:10px;font-size:var(--dds-fs-sm)}
.dds-toast a{color:var(--dds-ok);font-weight:700}

@media (max-width:1100px){.dds-studio{grid-template-columns:200px minmax(0,1fr)}.dds-side{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.dds-price{position:static}}
@media (max-width:720px){
  .dds-studio{grid-template-columns:minmax(0,1fr)}
  .dds-stagecol{order:1}.dds-tools{order:2}.dds-side{order:3;display:flex}
  .dds-motifs{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.diod-ds *{transition:none!important;animation:none!important}}

/* Tips på mobil: studion är enklast på större skärm (blockerar inget) */
.dds-mobiletip{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding:14px 16px;border-radius:var(--dds-r);background:#FFF1E8;color:#1B1D1F;box-shadow:inset 0 0 0 1px #F6C9AC}
.dds-mobiletip[hidden]{display:none}
@media (min-width:821px){.dds-mobiletip{display:none}} /* visas av CSS på mobil från start – ingen layoutförskjutning */
.dds-mobiletip svg{flex:none;color:#C2530E;margin-top:2px}
.dds-mobiletip p{margin:0 0 6px;font-size:var(--dds-fs-base);line-height:1.45}
.dds-mobiletip__t{font-weight:700}
.dds-mobiletip__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.diod-ds .dds-mobiletip__btns button{min-height:44px;padding:0 16px;border-radius:var(--dds-r);font:inherit;font-size:var(--dds-fs-base);font-weight:700;cursor:pointer}
.diod-ds .dds-mobiletip__share{background:#C2530E;color:#fff;border:0}
.diod-ds .dds-mobiletip__share:hover{background:#9E430B}
.diod-ds .dds-mobiletip__close{background:#fff;color:#1B1D1F;border:1px solid #BDBAB6}
.diod-ds input[type=range]{accent-color:var(--dds-action)}
/* Mobil: fält med minst 16 px text, annars zoomar iOS in när man trycker i dem */
@media (max-width:820px){.diod-ds input,.diod-ds select,.diod-ds textarea{font-size:16px}}