html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(8, 2fr);
    grid-auto-rows: auto;
    background-color: rgb(218, 167, 134);
    background-image: url("Bilder/Mönster4.png");
    background-repeat: repeat;
    color: rgb(40, 25, 15);
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

@font-face {
    font-family: "Butler";
    src: url("Font/Butler-Free-Med.otf");
}

@font-face {
    font-family: "Kenyan";
    src: url("Font/Kenyan Coffee Bd.otf");
}

@font-face {
    font-family: "Bank";
    src: url("Font/F25_Bank_Printer.otf");
}

@font-face {
    font-family: "Scaver";
    src: url("Scaver.ttf");
}

@font-face {
    font-family: "Modern";
    src: url("Font/Modern\ Romance.otf");
}

@font-face {
    font-family: "Creato";
    src: url("Font/CreatoDisplay-Light.otf");
}


.navbar {
    grid-column: 1 / 9;
    grid-row: 1 / 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5.2vw;
    background-color: rgba(40, 25, 15, .55);
    position: relative;
    z-index: 10;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.nav-logo img {
    width: 15vw;
    height: 13vw;
    object-fit: contain;
    display: block;
    padding-top: 0.4vw;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 3vw;
}

.nav-links a {
    color: white;
    font-family: "Bank";
    font-size: clamp(13px, 1vw, 18px);
    letter-spacing: .1vw;
    display: flex;
    align-items: center;
    transition: .2s ease;
}

.nav-links a:hover {
    color: #d8b08c;
    transform: translateY(-1px);
}

.nav-links a.aktiv {
    color: #d8b08c;
}

.nav-links a img {
    width: 1.8vw;
    height: 1.8vw;
    min-width: 22px;
    min-height: 22px;
    object-fit: contain;
}

.Designstudio {
    grid-column: 1 / 9;
    grid-row: 7 / 66;
    padding: 3vw 3vw 5vw;
}

.Intro {
    max-width: 65vw;
    margin: 0 auto 2.5vw;
    text-align: center;
    color: white;
}

.LitenRubrik {
    margin: 0 0 .5vw;
    font-family: "Modern";
    letter-spacing: .16vw;
    font-size: .9vw;
}

.Intro h1 {
    margin: 0;
    font-family: "Butler";
    font-size: 3vw;
    font-weight: 500;
}

.Intro p:last-child {
    margin: 1vw auto 0;
    max-width: 55vw;
    font-family: "Creato";
    font-size: 1vw;
    line-height: 1.5;
}

.Editor {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 4.3fr 2.2fr;
    gap: 1.3vw;
    align-items: start;
}

.Panel,
.Arbetsyta,
.Forfhandsvisning {
    background: rgba(247, 236, 226, .96);
    border: 1px solid rgba(40, 25, 15, .2);
    box-shadow: 0 .4vw 1.4vw rgba(40, 25, 15, .08);
}

.Verktyg {
    max-height: calc(100vh - 7vw);
    overflow-y: auto;
    padding-right: .25vw;
    scrollbar-width: thin;
}

.Verktyg::-webkit-scrollbar {
    width: .35vw;
}

.Verktyg::-webkit-scrollbar-thumb {
    background: rgba(40, 25, 15, .3);
}

.Panel {
    padding: 1vw;
    margin-bottom: .8vw;
}

.Panel h2 {
    margin: 0 0 .8vw;
    font-family: "Modern";
    font-size: .95vw;
    letter-spacing: .12vw;
}

.PanelText {
    margin: .4vw 0 .7vw;
    font-family: "Creato";
    font-size: .75vw;
    line-height: 1.4;
}

label {
    display: block;
    margin-bottom: .3vw;
    font-family: "Creato";
    font-size: .7vw;
}

input,
select {
    width: 100%;
    height: 2.15vw;
    border: 1px solid rgba(40, 25, 15, .25);
    background: rgb(255, 250, 246);
    color: rgb(40, 25, 15);
    padding: 0 .55vw;
    font-family: "Creato";
    font-size: .74vw;
    outline: none;
}

input:focus,
select:focus {
    border-color: rgb(40, 25, 15);
}

.FaltRad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6vw;
    margin-bottom: .7vw;
}

.SekundarKnapp,
.PrimarKnapp,
.KundvagnKnapp {
    border: 0;
    cursor: pointer;
    font-family: "Modern";
    letter-spacing: .06vw;
    transition: .15s ease;
}

.SekundarKnapp {
    background: rgba(40, 25, 15, .08);
    color: rgb(40, 25, 15);
    padding: .65vw .8vw;
    font-size: .68vw;
}

.SekundarKnapp:hover {
    background: rgba(40, 25, 15, .16);
}

.FullKnapp {
    width: 100%;
}

.PrimarKnapp,
.KundvagnKnapp {
    width: 100%;
    padding: .85vw;
    background: rgb(40, 25, 15);
    color: white;
    font-size: .72vw;
}

.PrimarKnapp:hover,
.KundvagnKnapp:hover {
    background: rgb(70, 45, 30);
}

#NyForm {
    margin-top: .65vw;
}

#KlarForm {
    margin-top: .45vw;
}

.Sidor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4vw;
}

.SidaKnapp {
    border: 1px solid rgba(40, 25, 15, .18);
    background: transparent;
    padding: .5vw .3vw;
    cursor: pointer;
    font-family: "Modern";
    font-size: .61vw;
}

.SidaKnapp:hover,
.aktivSida {
    background: rgb(40, 25, 15);
    color: white;
}

.VerktygsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4vw;
}

.VerktygKnapp {
    min-height: 3.4vw;
    border: 1px solid rgba(40, 25, 15, .18);
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .2vw;
    font-size: 1.1vw;
}

.VerktygKnapp span {
    font-family: "Modern";
    font-size: .53vw;
}

.VerktygKnapp:hover,
.aktivVerktyg {
    background: rgb(40, 25, 15);
    color: white;
}

.KontrollGrupp {
    margin-top: .5vw;
}

.dold {
    display: none !important;
}

#penSize {
    padding: 0;
}

#penSizeValue {
    display: block;
    margin-top: .25vw;
    font-family: "Creato";
    font-size: .68vw;
}

.UndoRad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5vw;
}

.Arbetsyta {
    padding: 1vw;
    position: sticky;
    top: 1vw;
    align-self: start;
}

.EditorTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .8vw;
}

.EditorLabel {
    display: block;
    font-family: "Modern";
    font-size: .58vw;
    letter-spacing: .1vw;
    opacity: .65;
}

#AktuellSida {
    display: block;
    margin-top: .15vw;
    font-family: "Butler";
    font-size: 1.2vw;
    font-weight: 500;
}

.CanvasBox {
    position: relative;
    width: 100%;
    height: min(38vw, calc(100vh - 15vw));
    min-height: 400px;
    overflow: hidden;
    background:
        linear-gradient(45deg, rgba(40,25,15,.035) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(40,25,15,.035) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(40,25,15,.035) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(40,25,15,.035) 75%);
    background-size: 2vw 2vw;
    background-position: 0 0, 0 1vw, 1vw -1vw, -1vw 0;
    border: 1px solid rgba(40,25,15,.2);
}

#DesignCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

#DesignCanvas.select {
    cursor: default;
}

#DesignCanvas {
    touch-action: none;
    user-select: none;
}

#DesignCanvas.draw,
#DesignCanvas.form {
    cursor: crosshair;
}

#CanvasHint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-family: "Modern";
    font-size: .68vw;
    opacity: .4;
    text-align: center;
}

.CanvasInfo {
    display: flex;
    justify-content: center;
    gap: .5vw;
    margin-top: .6vw;
    font-family: "Creato";
    font-size: .62vw;
    opacity: .65;
}

.Forfhandsvisning {
    position: sticky;
    top: 1vw;
    align-self: start;
}

.PreviewHeader {
    padding: 1vw 1vw 0;
}

.PreviewHeader h2 {
    margin: 0;
    font-family: "Butler";
    font-size: 1.7vw;
    font-weight: 500;
}

#PreviewSide {
    display: block;
    margin-top: .35vw;
    font-family: "Modern";
    font-size: .65vw;
    letter-spacing: .08vw;
    opacity: .6;
}

.Board3DBox {
    height: 28vw;
    min-height: 390px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    perspective: 1300px;
    padding: 1vw;
    user-select: none;
    touch-action: none;
    cursor: grab;
}

.Board3DBox.dragging {
    cursor: grabbing;
}

.Board3D {
    position: relative;
    width: var(--board-w, 16vw);
    height: var(--board-h, 9.14vw);
    transform-style: preserve-3d;
    transform: rotateX(58deg) rotateY(-28deg);
    transition: transform .08s linear;
    will-change: transform;
    transform-origin: center center;
}

/* Den riktiga ovansidan och undersidan */
.BoardTop,
.BoardBottom {
    position: absolute;
    width: var(--board-w);
    height: var(--board-h);
    left: 0;
    top: 0;
    overflow: hidden;
    background: transparent;
    border: 1px solid rgba(55,31,16,.48);
    border-radius: var(--board-radius, 1.05vw);
}

.BoardTop {
    transform: translateZ(calc(var(--board-d) / 2));
    filter: drop-shadow(.4vw .55vw .5vw rgba(40,25,15,.28));
}

.BoardBottom {
    transform: translateZ(calc(var(--board-d) / -2));
    filter: brightness(.72);
    backface-visibility: visible;
}

/* Fram / bak = korta kanter (bredden på brädan) */
.BoardFront,
.BoardBack {
    position: absolute;
    width: var(--board-w);
    height: var(--board-d);
    left: 0;
    top: calc((var(--board-h) - var(--board-d)) / 2);
    overflow: hidden;
    border: 1px solid rgba(55,31,16,.58);
    background: transparent;
}

.BoardFront {
    transform: rotateX(-90deg) translateZ(calc(var(--board-h) / 2));
}

.BoardBack {
    transform: rotateX(90deg) translateZ(calc(var(--board-h) / 2));
}

/* Höger / vänster: kortändarnas sidoytor ska följa brädans plan.
   Bredden löper längs brädans korta dimension och höjden är bara 18 mm.
   Rotationen lägger tjockleken i Z-led i stället för att skapa en hög vägg. */
.BoardRight,
.BoardLeft {
    position: absolute;
    width: var(--board-h);
    height: var(--board-d);
    left: calc((var(--board-w) - var(--board-h)) / 2);
    top: calc((var(--board-h) - var(--board-d)) / 2);
    overflow: hidden;
    border: 1px solid rgba(55,31,16,.58);
    background: transparent;
    backface-visibility: visible;
}

.BoardRight {
    transform: translateX(calc(var(--board-w) / 2)) rotateZ(90deg) rotateX(90deg);
}

.BoardLeft {
    transform: translateX(calc(var(--board-w) / -2)) rotateZ(90deg) rotateX(90deg);
}

.BoardFace .SidePreview {
    width: 100%;
    height: 100%;
    display: block;
}

.BoardTop::after,
.BoardBottom::after,
.BoardFront::after,
.BoardBack::after,
.BoardRight::after,
.BoardLeft::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset 0 .08vw .15vw rgba(255,255,255,.12),
        inset 0 -.08vw .18vw rgba(40,20,10,.18);
}

.EditorTopActions {
    display: flex;
    align-items: center;
    gap: .45vw;
}

.PreviewControls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5vw;
    padding: 0 1vw 1vw;
}

.OrderBox {
    margin: 0 1vw 1vw;
    padding-top: .8vw;
    border-top: 1px solid rgba(40,25,15,.18);
}

.OrderBox > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5vw 0;
    font-family: "Creato";
    font-size: .72vw;
}

.OrderBox strong {
    font-weight: normal;
}

.PrisRad {
    border-top: 1px solid rgba(40,25,15,.15);
    margin-top: .3vw;
    padding-top: .7vw !important;
    font-family: "Butler";
    font-size: 1.1vw !important;
}

.OrderBox .KundvagnKnapp {
    margin-top: .7vw;
}

footer {
    grid-column: 1 / 9;
    grid-row: 66 / 74;
    background-color: rgb(40,25,15);
    color: white;
    padding: 3.5vw 8vw;
    display: grid;
    grid-template-columns: 2fr repeat(3,1fr);
    gap: 3vw;
}

footer img {
    width: 7vw;
    display: block;
    padding-top: 1.2vw;
}

.footer-brand p {
    font-family: "Butler";
    font-size: 1.1vw;
    margin-top: 1vw;
    color: white;
}

footer h4 {
    margin: 0 0 1.2vw;
    font-family: "Bank";
    font-size: 1.1vw;
    letter-spacing: .15vw;
    color: white;
    opacity: .55;
}

footer a {
    display: block;
    color: white;
    text-decoration: none;
    font-family: "Creato";
    font-size: .95vw;
    opacity: .75;
    margin-bottom: .7vw;
    transition: .2s ease;
}

footer a:hover {
    opacity: 1;
    color: rgb(188,171,140);
}


/* Formad 3D-förhandsvisning */
.Board3D.customShape .BoardTop,
.Board3D.customShape .BoardBottom,
.Board3D.starShape .BoardTop,
.Board3D.starShape .BoardBottom,
.Board3D.heartShape .BoardTop,
.Board3D.heartShape .BoardBottom {
    border-radius: 0;
    overflow: hidden;
    clip-path: polygon(var(--custom-clip));
}

.Board3D.ovalShape .BoardTop,
.Board3D.ovalShape .BoardBottom {
    border-radius: 0;
    overflow: hidden;
    clip-path: polygon(var(--custom-clip));
}

/* Former som inte är rektangulära har ingen enkel rak sidoyta.
   Vi visar därför den riktiga formen utan en felaktig rektangulär baksida. */
.Board3D.customShape .BoardFront,
.Board3D.customShape .BoardBack,
.Board3D.customShape .BoardLeft,
.Board3D.customShape .BoardRight,
.Board3D.starShape .BoardFront,
.Board3D.starShape .BoardBack,
.Board3D.starShape .BoardLeft,
.Board3D.starShape .BoardRight,
.Board3D.heartShape .BoardFront,
.Board3D.heartShape .BoardBack,
.Board3D.heartShape .BoardLeft,
.Board3D.heartShape .BoardRight,
.Board3D.ovalShape .BoardFront,
.Board3D.ovalShape .BoardBack,
.Board3D.ovalShape .BoardLeft,
.Board3D.ovalShape .BoardRight {
    visibility: hidden;
}

.SidaKnapp:disabled {
    opacity: .28;
    cursor: not-allowed;
    transform: none !important;
}

.AutoJuiceRow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 15px;
    border: 2px solid #b9a18a;
    border-radius: 10px;
    background: #f8f1e8;
    color: #35251b;
    font-family: "Creato", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.25;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.AutoJuiceRow:hover {
    border-color: #815333;
}

.AutoJuiceRow input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 44px;
    width: 44px;
    height: 25px;
    margin: 0;
    border: 2px solid #8c7b6c;
    border-radius: 999px;
    background: #d8cfc5;
    cursor: pointer;
    position: relative;
    transition: background .18s ease, border-color .18s ease;
}

.AutoJuiceRow input::before {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px #0003;
    transition: transform .18s ease;
}

.AutoJuiceRow input:checked {
    background: #47734f;
    border-color: #355b3c;
}

.AutoJuiceRow input:checked::before {
    transform: translateX(19px);
}

.AutoJuiceRow input:focus-visible {
    outline: 3px solid #b88a59;
    outline-offset: 3px;
}

.AutoJuiceCopy {
    display: grid;
    gap: 3px;
    flex: 1;
}

.AutoJuiceCopy strong {
    font-size: 16px;
    font-weight: 700;
}

.AutoJuiceCopy small {
    font-size: 13px;
    color: #69584b;
}

.AutoJuiceStatus {
    justify-self: start;
    margin-top: 3px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.AutoJuiceStatus::after {
    content: "AV";
    display: inline-block;
    padding: 3px 7px;
    border-radius: 4px;
    background: #e6ddd3;
    color: #5c4b3d;
}

.AutoJuiceRow:has(input:checked) {
    border-color: #47734f;
    background: #edf5ec;
    box-shadow: 0 0 0 2px #47734f18;
}

.AutoJuiceRow:has(input:checked) .AutoJuiceStatus::after {
    content: "PÅ";
    background: #d7e9d5;
    color: #285b31;
}

.AutoJuiceHint {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.45;
}


/* Gör hela 3D-brädan synlig även när text ligger på sidoytorna. */
.Forfhandsvisning {
    overflow: visible;
}

.Board3D {
    flex: 0 0 auto;
}


/* Förbättrad 3D-form: samma fysiska form på båda plana sidorna. */
.BoardBottom {
    transform: translateZ(calc(var(--board-d) / -2));
    backface-visibility: visible;
}

/* Fri form ska inte få en rektangulär "låda" runt sig. En tydligare
   extrusion/skugga gör att den fortfarande ser sammanhängande ut. */
.Board3D.customShape .BoardTop,
.Board3D.customShape .BoardBottom,
.Board3D.starShape .BoardTop,
.Board3D.starShape .BoardBottom,
.Board3D.heartShape .BoardTop,
.Board3D.heartShape .BoardBottom {
    filter: drop-shadow(.18vw .18vw 0 rgba(52,29,14,.45))
            drop-shadow(.34vw .34vw 0 rgba(52,29,14,.22));
}

/* Håll 3D-visaren inom sin yta men låt själva brädan synas. */
.Board3DBox {
    overflow: visible;
}


/* Riktiga sidoytor för fria/polygonala former. De följer varje kant i formen
   i stället för att använda sex felaktiga rektanglar. */
.CustomExtrusionSide {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #9b673f, #704326);
    border: 1px solid rgba(55,31,16,.55);
    transform-style: preserve-3d;
    backface-visibility: visible;
    transform-origin: 50% 50%;
    z-index: 1;
    pointer-events: none;
}

.BoardTop,
.BoardBottom {
    z-index: 2;
}


/* Rensa-menyn för egen form */
#ClearMenu {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,12,7,.42);
    backdrop-filter: blur(3px);
}
.ClearMenuBox {
    position: relative;
    width: min(28vw, 430px);
    padding: 2vw;
    box-sizing: border-box;
    background: rgb(245,224,201);
    border: 1px solid rgba(40,25,15,.35);
    box-shadow: 0 1vw 3vw rgba(40,25,15,.25);
}
.ClearMenuBox h3 { margin: 0 0 .5vw; font-family: "Butler"; font-size: 1.6vw; color: rgb(40,25,15); }
.ClearMenuBox p { margin: 0 0 1.1vw; font-family: "Creato"; font-size: .8vw; line-height: 1.4; color: rgb(70,45,30); }
.ClearMenuClose {
    position: absolute; top: .55vw; right: .65vw;
    border: 0; background: transparent; cursor: pointer;
    font-size: 1.5vw; color: rgb(40,25,15);
}
.ClearMenuOption {
    display: block; width: 100%; margin-top: .55vw; padding: .8vw 1vw;
    border: 1px solid rgba(40,25,15,.35); background: rgba(40,25,15,.92); color: white;
    font-family: "Bank"; font-size: .72vw; letter-spacing: .08vw; cursor: pointer;
}
.ClearMenuOption:hover { background: rgb(65,42,27); }

/* Bildens kantutbredning */
#ImageFadeRow {
    margin-top: .7vw;
}

.ImageFadeControl {
    display: flex;
    align-items: center;
    gap: .5vw;
}

.ImageFadeControl input[type="range"] {
    flex: 1;
    width: 100%;
}

#imageFadeValue {
    min-width: 2.2vw;
    text-align: right;
    font-family: "Creato";
    font-size: .7vw;
    opacity: .75;
}


/* Bildredigering */
#ImageEditControls {
    margin-top: .55vw;
    padding-top: .55vw;
    border-top: 1px solid rgba(40, 25, 15, .12);
}

#ImageEditControls .ImageFadeControl {
    margin-bottom: .45vw;
}

#ImageEditControls input[type="range"] {
    cursor: pointer;
}

/* Finjustering för exakt placering av markerade objekt */
.ObjektJustering {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
}

.ObjektJustering .SekundarKnapp {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 11px;
}

.ObjektMatt {
    margin-top: 8px;
    line-height: 1.45;
}

/* Gemensam navbar och footer – måtten följer Shop.css. Endast aktiv länk varierar per sida. */
.navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 5.2vw !important;
    box-sizing: border-box !important;
    background-color: rgba(40, 25, 15, 0.55) !important;
    position: relative !important;
    z-index: 10 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    min-height: 0 !important;
}
.nav-logo { display: flex !important; align-items: center !important; flex: 0 0 auto !important; }
.nav-logo img {
    width: 15vw !important; height: 13vw !important; max-width: none !important;
    object-fit: contain !important; display: block !important; padding-top: 0.4vw !important;
}
.nav-links { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 3vw !important; max-width: none !important; flex-wrap: nowrap !important; }
.nav-links a {
    color: white; font-family: "Bank", sans-serif !important;
    font-size: clamp(13px, 1vw, 18px) !important; letter-spacing: 0.1vw !important;
    text-decoration: none !important; display: flex !important; align-items: center !important;
    white-space: nowrap !important; transition: color 0.2s ease, transform 0.2s ease !important;
}
.nav-links a:hover { color: #d8b08c !important; transform: translateY(-1px) !important; }
.nav-links a.aktiv { color: #d8b08c !important; }
.nav-links a img { width: 1.8vw !important; height: 1.8vw !important; min-width: 22px !important; min-height: 22px !important; object-fit: contain !important; display: block !important; }
footer {
    background-color: rgb(40, 25, 15) !important; color: white !important;
    padding: 3.5vw 8vw !important; display: grid !important;
    grid-template-columns: 2fr repeat(3, 1fr) !important; gap: 3vw !important;
    box-sizing: border-box !important; width: 100% !important;
}
footer .footer-brand img, footer > div:first-child > img { width: 7vw !important; max-width: none !important; height: auto !important; object-fit: contain !important; display: block !important; padding-top: 1.2vw !important; }
footer h4 { margin: 0 0 1.2vw !important; font-family: "Bank", sans-serif !important; font-size: 1.1vw !important; letter-spacing: 0.15vw !important; color: white !important; opacity: 0.55 !important; }
footer a { display: block !important; color: white !important; text-decoration: none !important; font-family: "Creato", sans-serif !important; font-size: 0.95vw !important; opacity: 0.75 !important; margin-bottom: 0.7vw !important; transition: 0.2s ease !important; }
footer a:hover { color: #d8b08c !important; }
@media (max-width: 760px) {
  .navbar { padding: 0 5.2vw !important; }
  .nav-logo img { width: 15vw !important; height: 13vw !important; }
  .nav-links { gap: 2vw !important; }
  .nav-links a { font-size: clamp(10px, 1.6vw, 13px) !important; }
  .nav-links a img { width: 22px !important; height: 22px !important; }
  footer { grid-template-columns: 2fr repeat(3, 1fr) !important; gap: 2vw !important; padding: 3.5vw 5vw !important; }
  footer h4 { font-size: clamp(10px, 1.5vw, 12px) !important; }
  footer a { font-size: clamp(10px, 1.4vw, 12px) !important; }
}


/* Reglage for att runda av skarbradans horn */
#cornerRadius {
    width: 100%;
    height: 1.2vw;
    padding: 0;
    accent-color: rgb(40, 25, 15);
    cursor: pointer;
}

.RangeValueRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5vw;
    margin-top: .15vw;
    font-family: "Creato";
    font-size: .65vw;
    opacity: .78;
}

.RangeValueRow strong {
    font-weight: 600;
    font-size: .75vw;
}


/* Läsbarhetslyft för Designstudion: tydligare neutral sans-serif och större text. */
body, .PanelText, label, input, select, .CanvasInfo, .OrderBox > div,
footer a, .Intro p:last-child {
    font-family: "Creato", Arial, sans-serif;
}
.Panel h2, .SekundarKnapp, .PrimarKnapp, .KundvagnKnapp,
.SidaKnapp, .VerktygKnapp span, .EditorLabel, #PreviewSide,
.RangeValueRow, .LitenRubrik {
    font-family: "Creato", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: .025em;
}
.PanelText { font-size: clamp(12px, .88vw, 15px); line-height: 1.55; }
label { font-size: clamp(12px, .82vw, 14px); line-height: 1.35; }
input, select { font-size: clamp(13px, .86vw, 15px); min-height: 34px; }
.Panel h2 { font-size: clamp(14px, 1vw, 17px); }
.SekundarKnapp { font-size: clamp(11px, .76vw, 14px); }
.PrimarKnapp, .KundvagnKnapp { font-size: clamp(12px, .82vw, 15px); }
.SidaKnapp { font-size: clamp(11px, .72vw, 13px); }
.VerktygKnapp span { font-size: clamp(10px, .67vw, 12px); }
.CanvasInfo { font-size: clamp(11px, .72vw, 13px); }
.EditorLabel, #PreviewSide { font-size: clamp(11px, .72vw, 13px); }
.OrderBox > div { font-size: clamp(12px, .82vw, 15px); }
#CanvasHint { font-family: "Creato", Arial, sans-serif; font-size: clamp(12px, .8vw, 14px); }
#AktuellSida { font-size: clamp(18px, 1.25vw, 23px); }
@media (max-width: 1200px) {
    .Editor { grid-template-columns: minmax(220px, 1.1fr) minmax(360px, 2.4fr) minmax(220px, 1fr); gap: 12px; }
    .Panel { padding: 12px; margin-bottom: 10px; }
}


/* Footerplacering: designstudion får växa efter innehållet och footern hamnar direkt efter den. */
.Designstudio {
    grid-row: 7 / 8 !important;
    align-self: stretch;
    min-height: 0;
}

footer {
    grid-column: 1 / 9 !important;
    grid-row: 8 / 9 !important;
    align-self: start;
    margin-top: 0 !important;
}

/* Motivväljare */
.MotifPickerOverlay{position:fixed;inset:0;z-index:1000;background:rgba(25,16,10,.72);display:flex;align-items:center;justify-content:center;padding:24px}
.MotifPickerOverlay.dold{display:none!important}
.MotifPickerDialog{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fffaf5;border:1px solid rgba(40,25,15,.2);box-shadow:0 24px 80px #0005;padding:clamp(18px,3vw,32px)}
.MotifPickerHeader{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}
.MotifPickerHeader h2{font-family:"Butler";font-size:clamp(25px,3vw,36px);font-weight:500;margin:4px 0}
.MotifPickerHeader p:not(.LitenRubrik){font-family:"Creato";font-size:14px;line-height:1.5;margin:8px 0 0}
.MotifClose{border:0;background:#eee1d5;color:#30231b;font-size:28px;line-height:1;width:38px;height:38px;cursor:pointer}
.MotifGallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.MotifCard{border:1px solid #ddcfc2;background:#fffdf9;padding:12px 8px;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;color:#30231b;transition:background .15s,border-color .15s,transform .15s}
.MotifCard:hover,.MotifCard:focus-visible{background:#f0e2d4;border-color:#8e6d55;transform:translateY(-2px);outline:none}
.MotifCard img{width:58px;height:58px;object-fit:contain}
.MotifCard span{font-family:"Creato";font-size:13px;text-align:center}
@media(max-width:600px){.MotifPickerOverlay{padding:10px}.MotifGallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.MotifCard{min-height:100px}.MotifCard img{width:46px;height:46px}}



/* RESPONSIVITET – endast responsiva tillägg */
@media (max-width: 900px) {
  html, body { max-width: 100%; }
  img, video, iframe { max-width: 100%; }
  .navbar { min-height: 72px; height: auto; padding: 12px 4%; gap: 14px; flex-wrap: wrap; }
  .nav-logo { flex: 0 0 auto; }
  .nav-logo img { width: clamp(95px, 18vw, 145px); height: auto; max-height: 76px; }
  .nav-links { gap: clamp(10px, 2vw, 20px); flex-wrap: wrap; justify-content: center; }
  .nav-links a { font-size: clamp(11px, 1.6vw, 15px); letter-spacing: .04em; }
}
@media (max-width: 600px) {
  .navbar { justify-content: center; padding: 10px 4%; }
  .nav-logo img { width: 105px; max-height: 58px; }
  .nav-links { width: 100%; gap: 10px 14px; }
  .nav-links a { font-size: 11px; white-space: normal; }
  button, input, select, textarea { max-width: 100%; }
  p, li { overflow-wrap: anywhere; }
}

@media (max-width: 1100px) {
  .Editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .Forfhandsvisning { grid-column: 1 / -1; }
  .Designstudio { padding: 24px 3%; }
  .Intro { max-width: 100%; }
  .Intro h1 { font-size: clamp(28px, 5vw, 42px); }
  .Intro p:last-child { max-width: 760px; font-size: 15px; }
}
@media (max-width: 700px) {
  .Editor { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .Panel, .Arbetsyta, .Forfhandsvisning { width: 100%; min-width: 0; grid-column: 1 / -1; }
  .Designstudio { grid-column: 1 / -1; grid-row: auto; }
  .Intro { padding: 0 8px; }
  .LitenRubrik { font-size: 12px; }
}

/* Designstudion: på smala mobiler visas editorn i liggande läge för att behålla en användbar arbetsyta. */
@media screen and (max-width: 760px) and (orientation: portrait) {
    body::before {
        content: "Vrid mobilen till liggande läge för att använda Designstudion. Då får du mer plats för verktygen och din skärbräda.";
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
        background: #2c211b url("Bilder/Mönster4.png") repeat;
        color: #fff8ef;
        font-family: "Creato", Arial, sans-serif;
        font-size: clamp(20px, 5vw, 28px);
        line-height: 1.5;
        text-align: center;
    }
}

/* I liggande mobilvy hålls verktyg, arbetsyta och förhandsvisning bredvid varandra. */
@media screen and (max-width: 900px) and (orientation: landscape) {
    .navbar {
        min-height: 56px !important;
        padding: 4px 14px !important;
    }
    .nav-logo img {
        width: 88px !important;
        height: 48px !important;
        padding: 0 !important;
    }
    .nav-links {
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }
    .nav-links a {
        font-size: 10px !important;
        letter-spacing: 0 !important;
    }
    .nav-links a img {
        width: 20px !important;
        height: 20px !important;
    }
    .Designstudio {
        padding: 12px 10px 20px !important;
    }
    .Intro {
        max-width: 100% !important;
        margin: 0 auto 10px !important;
    }
    .Intro h1 {
        font-size: clamp(22px, 4vh, 32px) !important;
    }
    .Intro p:last-child {
        font-size: 12px !important;
        margin-top: 5px !important;
    }
    .Editor {
        grid-template-columns: minmax(145px, .8fr) minmax(230px, 1.8fr) minmax(145px, .8fr) !important;
        gap: 8px !important;
        align-items: start !important;
    }
    .Panel,
    .Arbetsyta,
    .Forfhandsvisning {
        min-width: 0 !important;
        width: 100% !important;
        grid-column: auto !important;
    }
    .Panel {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }
    .PanelText,
    label,
    .CanvasInfo,
    .EditorLabel {
        font-size: 11px !important;
    }
    .Panel h2 {
        font-size: 13px !important;
    }
    .VerktygKnapp span,
    .SekundarKnapp,
    .SidaKnapp {
        font-size: 10px !important;
    }
    input,
    select {
        min-height: 28px !important;
        font-size: 12px !important;
    }
    footer {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        padding: 20px !important;
    }
}

/* ===== SLUTLIG LÄSBARHETS- OCH INTERAKTIONSFIX ===== */
.PanelText { font-size: clamp(13px, .9vw, 16px) !important; line-height: 1.5 !important; }
label { font-size: clamp(13px, .82vw, 15px) !important; }
input, select, textarea { font-size: clamp(14px, .9vw, 16px) !important; }
.Panel h2 { font-size: clamp(16px, 1.05vw, 19px) !important; }
.SekundarKnapp, .PrimarKnapp, .KundvagnKnapp { font-size: clamp(12px, .8vw, 15px) !important; line-height: 1.35 !important; }
.SidaKnapp { font-size: clamp(12px, .78vw, 14px) !important; }
.VerktygKnapp { min-height: 54px; padding: 6px 4px; }
.VerktygKnapp span { font-size: clamp(11px, .72vw, 13px) !important; line-height: 1.2; text-align: center; }
.EditorLabel, #PreviewSide, .CanvasInfo { font-size: clamp(12px, .75vw, 14px) !important; }
#CanvasHint { font-size: clamp(13px, .85vw, 16px) !important; line-height: 1.4; padding: 0 12px; }
.OrderBox > div { font-size: clamp(13px, .85vw, 16px) !important; }
.PrisRad { font-size: clamp(16px, 1.1vw, 20px) !important; }
input, select, button { touch-action: manipulation; }
#DesignCanvas { cursor: crosshair; }

@media (min-width: 701px) and (max-width: 1200px) {
  .Editor { grid-template-columns: minmax(235px, .95fr) minmax(0, 1.8fr) !important; gap: 14px !important; }
  .Verktyg { max-height: none !important; overflow: visible !important; }
  .Forfhandsvisning { grid-column: 1 / -1 !important; position: relative !important; top: auto !important; }
  .Board3DBox { height: clamp(260px, 35vw, 420px) !important; min-height: 260px !important; }
  .CanvasBox { height: clamp(340px, 55vw, 620px) !important; min-height: 340px !important; }
  .Panel { padding: 14px !important; margin-bottom: 12px !important; }
}

@media screen and (max-width: 760px) and (orientation: landscape) {
  .Editor { grid-template-columns: minmax(160px, .85fr) minmax(260px, 1.7fr) minmax(170px, .9fr) !important; gap: 8px !important; }
  .Verktyg { max-height: none !important; overflow: visible !important; }
  .Panel, .Arbetsyta, .Forfhandsvisning { padding: 8px !important; }
  .PanelText, label { font-size: 12px !important; line-height: 1.4 !important; }
  .Panel h2 { font-size: 14px !important; }
  input, select { font-size: 13px !important; min-height: 32px !important; }
  .SekundarKnapp, .PrimarKnapp, .KundvagnKnapp, .SidaKnapp { font-size: 11px !important; padding: 7px 5px !important; }
  .VerktygKnapp { min-height: 44px !important; }
  .VerktygKnapp span { font-size: 10px !important; }
  .CanvasBox { height: min(52vh, 340px) !important; min-height: 210px !important; }
  .Board3DBox { height: 230px !important; min-height: 210px !important; }
  .PreviewHeader h2 { font-size: 20px !important; }
  .OrderBox > div { font-size: 12px !important; }
  .Intro h1 { font-size: clamp(22px, 4vh, 30px) !important; }
  .Intro p:last-child { font-size: 12px !important; }
}

@media (max-width: 700px) and (orientation: portrait) {
  /* Innehållet täcks av den befintliga rotera-telefonen-skärmen. */
  .Designstudio { padding: 18px 12px 24px !important; }
  .Intro h1 { font-size: clamp(27px, 7vw, 38px) !important; }
  .Intro p:last-child { font-size: 15px !important; }
  .PanelText, label { font-size: 14px !important; }
  input, select { min-height: 40px !important; font-size: 15px !important; }
  .SekundarKnapp, .PrimarKnapp, .KundvagnKnapp { min-height: 40px; font-size: 13px !important; }
}

/* ===== LAYOUTJUSTERING V3: surfplatta och mindre laptop ===== */
@media screen and (min-width: 701px) and (max-width: 1200px) {
  .Designstudio {
    padding: clamp(18px, 2.4vw, 30px) clamp(18px, 3vw, 36px) 36px !important;
  }

  .Editor {
    grid-template-columns: minmax(230px, .82fr) minmax(0, 1.65fr) !important;
    align-items: start !important;
    gap: 16px !important;
  }

  .Verktyg {
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .Arbetsyta {
    position: relative !important;
    top: auto !important;
    min-width: 0 !important;
  }

  .CanvasBox {
    height: clamp(340px, 48vw, 520px) !important;
    min-height: 340px !important;
  }

  /* Samla 3D-brädan och beställningsinformationen i ett kompakt block.
     Det undviker en stor tom förhandsvisning med orderrutan långt nedanför. */
  .Forfhandsvisning {
    grid-column: 1 / -1 !important;
    position: relative !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .85fr) !important;
    grid-template-areas:
      "heading heading"
      "board order"
      "controls order" !important;
    align-items: center !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    padding: 16px !important;
    min-width: 0 !important;
  }

  .PreviewHeader { grid-area: heading !important; padding: 0 0 8px !important; }
  .Board3DBox {
    grid-area: board !important;
    height: clamp(220px, 27vw, 300px) !important;
    min-height: 220px !important;
    padding: 8px !important;
    overflow: visible !important;
  }
  .Board3D {
    zoom: 1.12;
  }
  .PreviewControls {
    grid-area: controls !important;
    padding: 0 0 8px !important;
    gap: 8px !important;
  }
  .OrderBox {
    grid-area: order !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 8px 0 0 16px !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(40,25,15,.18) !important;
    min-width: 0 !important;
  }
  .OrderBox > div { gap: 12px !important; }
  .OrderBox strong { text-align: right !important; }
  .OrderBox .KundvagnKnapp { min-height: 42px !important; }
}

@media screen and (max-width: 700px) and (orientation: landscape) {
  .Forfhandsvisning {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(190px, .85fr) !important;
    grid-template-areas:
      "heading heading"
      "board order"
      "controls order" !important;
    gap: 0 10px !important;
    padding: 8px !important;
  }
  .PreviewHeader { grid-area: heading !important; padding: 0 0 5px !important; }
  .Board3DBox { grid-area: board !important; height: 190px !important; min-height: 180px !important; padding: 4px !important; }
  .PreviewControls { grid-area: controls !important; padding: 0 0 6px !important; gap: 5px !important; }
  .OrderBox { grid-area: order !important; margin: 0 !important; padding: 5px 0 0 9px !important; border-left: 1px solid rgba(40,25,15,.18) !important; border-top: 0 !important; }
  .Board3D { zoom: 1.05; }
}