/* TISCA DESIGNSTUDIO – KOMPLETT CSS */
/* Färgprover: 2 per rad dator/surfplatta, 1 per rad mobil (max 700px). */
/* Ersätter enbart tidigare CSS för mattväljaren. */
#tiscaGuide{--ink:#292724;--muted:#77736e;--line:#e6e2dc;--paper:#f7f5f1;box-sizing:border-box;width:100%;max-width:1400px;margin:30px auto 55px;padding:36px 40px;border:1px solid var(--line);background:#fff;color:var(--ink);font:14px/1.6 'Open Sans',sans-serif;white-space:normal!important}
#tiscaGuide *,#tiscaGuide *:before,#tiscaGuide *:after{box-sizing:border-box}
#tiscaGuide h2,#tiscaGuide h3,#tiscaGuide p{white-space:normal}
/* Rubrik och kompakt specifikation */
#tiscaGuide .tisca-studio-header{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:35px;align-items:start;margin-bottom:30px}
#tiscaGuide .tisca-guide-heading{display:block;min-width:0;margin:0;padding:15px 0 0}
#tiscaGuide .tisca-eyebrow{display:block;margin-bottom:12px;color:#8a7966;font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase}
#tiscaGuide .tisca-guide-heading h2{margin:0 0 14px;color:var(--ink);font-size:clamp(28px,3vw,40px);font-weight:400;line-height:1.2}
#tiscaGuide .tisca-guide-heading p{max-width:660px;margin:0;color:var(--muted);font-size:14px;line-height:1.8}
#tiscaGuide .tisca-studio-side{display:flex;flex-direction:column;gap:10px;width:260px;max-width:100%}
#tiscaGuide .tisca-step-count{align-self:flex-end;padding:6px 11px;background:#ece8e2;color:#6c6258;font-size:11px;border-radius:3px;white-space:nowrap}
#tiscaGuide .tisca-summary{display:block;position:static;width:100%;min-width:0;max-width:none;height:auto;min-height:0;margin:0;padding:15px 17px;border:1px solid var(--line);border-radius:4px;background:var(--paper);box-shadow:none}
#tiscaGuide .tisca-summary h3{margin:0 0 10px;font-size:14px;font-weight:600}
#tiscaGuide .tisca-summary-item,#tiscaGuide .tisca-summary-price{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-height:0;margin:0;padding:7px 0;border-bottom:1px solid #e4dfd8;font-size:11px}
#tiscaGuide .tisca-summary-price{border-bottom:0;padding-top:10px}
#tiscaGuide .tisca-summary-item span,#tiscaGuide .tisca-summary-price span{flex-shrink:0;color:var(--muted)}
#tiscaGuide .tisca-summary-item strong,#tiscaGuide .tisca-summary-price strong{min-width:0;text-align:right;overflow-wrap:anywhere;font-size:11px}
#tiscaGuide .tisca-summary-price strong{font-size:13px}
/* Stegindikator */
#tiscaGuide .tisca-progress{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 35px}
#tiscaGuide .tisca-progress-step{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;margin:0;padding:0;border:0;background:none;color:#9c968f;font:12px 'Open Sans',sans-serif;cursor:pointer}
#tiscaGuide .tisca-progress-line{display:block;width:100%;height:3px;background:var(--line);border-radius:3px}
#tiscaGuide .tisca-progress-step.active,#tiscaGuide .tisca-progress-step.completed{color:var(--ink)}
#tiscaGuide .tisca-progress-step.active .tisca-progress-line,#tiscaGuide .tisca-progress-step.completed .tisca-progress-line{background:#38342f}
/* Paneler */
#tiscaGuide .tisca-guide-layout,#tiscaGuide .tisca-guide-main{display:block;width:100%;max-width:none;min-width:0;margin:0;padding:0}
#tiscaGuide .tisca-panel{display:none}
#tiscaGuide .tisca-panel.active{display:block}
#tiscaGuide .tisca-panel h3{margin:0 0 9px;color:var(--ink);font-size:23px;font-weight:500}
#tiscaGuide .tisca-description{max-width:760px;margin:0 0 25px;color:var(--muted);font-size:14px}
/* Strukturkort */
#tiscaGuide .tisca-structure-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#tiscaGuide .tisca-structure-card{display:flex;flex-direction:column;min-width:0;width:100%;padding:9px;border:1px solid var(--line);border-radius:4px;background:#fff;text-align:left;color:var(--ink);font:inherit;cursor:pointer;overflow:hidden;transition:border-color .2s,box-shadow .2s}
#tiscaGuide .tisca-structure-card:hover{border-color:#a79c8f;box-shadow:0 5px 20px #0000000d}
#tiscaGuide .tisca-structure-card.selected{border:2px solid #38342f;padding:8px}
#tiscaGuide .tisca-structure-card img{display:block;width:100%;aspect-ratio:5/3;object-fit:cover;border-radius:2px}
#tiscaGuide .tisca-structure-card>span{display:block;padding:14px 8px 5px;font-size:15px;font-weight:600}
#tiscaGuide .tisca-structure-price{display:block;padding:0 8px 12px;color:var(--muted);font-size:12px;font-weight:400}
/* Färgkort */
#tiscaGuide .tisca-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
#tiscaGuide .tisca-color-card{display:flex;flex-direction:column;min-width:0;width:100%;padding:8px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);font:inherit;cursor:pointer;text-align:center;transition:border-color .2s}
#tiscaGuide .tisca-color-card:hover{border-color:#a79c8f}
#tiscaGuide .tisca-color-card.selected{border:2px solid #38342f;padding:7px}

/* TISCA – FÄRGPROVER UTAN INZOOMNING */

#tiscaGuide .tisca-color-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    overflow: hidden;
    background: #f5f4f1;
}

#tiscaGuide .tisca-color-swatch img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
    max-width: 100%;
    max-height: 100%;
}



/* ==========================================
   FÄRGKORT – TEXT
========================================== */

#tiscaGuide .tisca-color-card > span:last-child {
    display: block;
    padding: 12px 4px 7px;
    font-size: 12px;
    font-weight: 500;
}

/* ==========================================
   STEG 3 – MÅTT OCH PROPORTIONSRITNING
========================================== */

#tiscaGuide .tisca-panel[data-panel="4"].active {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
    width: 100%;
}

#tiscaGuide .tisca-panel[data-panel="4"] > h3,
#tiscaGuide .tisca-panel[data-panel="4"] > .tisca-description {
    grid-column: 1 / -1;
}

#tiscaGuide .tisca-panel[data-panel="4"] > .tisca-description {
    margin-bottom: 24px;
}

/* Måttfälten till vänster */

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-size-inputs {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 22px;
    border: 1px solid #e6e2dc;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: #f8f6f2;
}

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-size-inputs > div {
    min-width: 0;
}

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-size-inputs label {
    display: block;
    margin: 0 0 9px;
    font-size: 13px;
    font-weight: 600;
    color: #39342f;
}

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-size-inputs input {
    display: block;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #d6d0c8;
    border-radius: 3px;
    background: #fff;
    color: #292724;
    font: 16px "Open Sans", sans-serif;
}

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-size-inputs input:focus {
    outline: 2px solid #8a7966;
    outline-offset: 2px;
}

/* Mattans beräknade yta */

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-area-row {
    grid-column: 1;
    grid-row: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 19px 22px;
    border: 1px solid #e6e2dc;
    border-radius: 0 0 4px 4px;
    background: #f8f6f2;
    color: #39342f;
    font-size: 14px;
}

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-area-row strong {
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
}

/* Felmeddelande */

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-error {
    grid-column: 1;
    grid-row: 5;
    margin: 10px 0 0;
    color: #a12e2e;
    font-size: 13px;
}

/* Proportionsritningen till höger */

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-rug-preview {
    grid-column: 2;
    grid-row: 3 / span 3;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 20px 20px 24px;
    border: 1px solid #e6e2dc;
    border-radius: 4px;
    background: #f5f2ed;
    text-align: center;
}

/* Centrera ritningen */

#tiscaGuide #tiscaRugPreviewArea {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 310px !important;
    min-height: 310px;
    margin: 0 auto;
    padding: 8px;
    box-sizing: border-box;
}

/* Mattans proportioner och färg styrs av JavaScript */

#tiscaGuide #tiscaRugShape {
    display: block;
    position: relative;
    flex: 0 0 auto !important;
    margin: auto !important;
    max-width: none;
    max-height: none;
    background-image: none !important;
    border: 1px solid rgba(67, 60, 51, 0.25);
    border-radius: 1px;
    box-shadow: 0 8px 22px rgba(49, 42, 35, 0.10);
}

/* Måttangivelser under ritningen */

#tiscaGuide .tisca-preview-dimensions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 25px;
    margin: 12px 0 6px;
    color: #39342f;
    font-size: 13px;
}

#tiscaGuide .tisca-preview-dimensions strong {
    font-weight: 600;
}

#tiscaGuide .tisca-rug-preview p {
    margin: 8px 0 0;
    color: #81796f;
    font-size: 12px;
    line-height: 1.5;
}

/* ==========================================
   STEG 4 – BESTÄLLNING
========================================== */

#tiscaGuide .tisca-order-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 850px;
}

#tiscaGuide .tisca-order-choice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
}

#tiscaGuide .tisca-order-choice:has(input:checked) {
    border-color: #38342f;
    background: var(--paper);
}

#tiscaGuide .tisca-order-choice input {
    margin-top: 4px;
    accent-color: #38342f;
}

#tiscaGuide .tisca-order-choice strong,
#tiscaGuide .tisca-order-choice small {
    display: block;
}

#tiscaGuide .tisca-order-choice strong {
    font-size: 14px;
}

#tiscaGuide .tisca-order-choice small {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
}

#tiscaGuide .tisca-order-notice {
    max-width: 850px;
    margin: 20px 0;
    color: var(--muted);
    font-size: 13px;
}

/* ==========================================
   KNAPPAR
========================================== */

#tiscaGuide .tisca-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 32px;
    padding-top: 25px;
    border-top: 1px solid var(--line);
}

#tiscaGuide .tisca-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 13px 25px;
    border: 1px solid var(--ink);
    border-radius: 3px;
    background: var(--ink);
    color: #fff;
    font: 600 14px "Open Sans", sans-serif;
    cursor: pointer;
}

#tiscaGuide .tisca-primary-button:hover:not(:disabled) {
    background: #50483f;
}

#tiscaGuide .tisca-primary-button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

#tiscaGuide .tisca-back-button {
    min-height: 46px;
    padding: 12px 22px;
    border: 1px solid #d9d4ce;
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
    font: 14px "Open Sans", sans-serif;
    cursor: pointer;
}

#tiscaGuide .tisca-back-button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

#tiscaGuide #tiscaOrderButton {
    margin-top: 5px;
}

/* ==========================================
   SURFPLATTA
========================================== */

@media (max-width: 900px) {

    #tiscaGuide {
        padding: 28px 26px;
    }

    #tiscaGuide .tisca-studio-header {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 22px;
    }

    #tiscaGuide .tisca-studio-side {
        width: 240px;
    }

    #tiscaGuide .tisca-structure-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #tiscaGuide .tisca-color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) and (min-width: 701px) {

    #tiscaGuide .tisca-panel[data-panel="4"].active {
        column-gap: 18px;
    }

    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-size-inputs {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 18px;
    }

    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-area-row {
        padding: 17px 18px;
    }
}

/* ==========================================
   MOBIL
========================================== */

@media (max-width: 700px) {

    /* Steg 3 staplas på mobil */

    #tiscaGuide .tisca-panel[data-panel="4"].active {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: 0;
    }

    #tiscaGuide .tisca-panel[data-panel="4"] > h3,
    #tiscaGuide .tisca-panel[data-panel="4"] > .tisca-description,
    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-size-inputs,
    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-area-row,
    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-error,
    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-rug-preview {
        grid-column: 1;
        grid-row: auto;
    }

    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-size-inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 16px;
    }

    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-area-row {
        padding: 16px;
    }

    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-rug-preview {
        margin-top: 18px;
        padding: 14px 12px 18px;
    }

    #tiscaGuide #tiscaRugPreviewArea {
        height: 280px !important;
        min-height: 280px;
    }
}

@media (max-width: 650px) {

    #tiscaGuide {
        margin: 22px auto 35px;
        padding: 22px 16px;
        border-left: 0;
        border-right: 0;
    }

    #tiscaGuide .tisca-studio-header {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 24px;
    }

    #tiscaGuide .tisca-guide-heading {
        padding: 0;
    }

    #tiscaGuide .tisca-guide-heading h2 {
        font-size: clamp(25px, 6.5vw, 32px);
    }

    #tiscaGuide .tisca-guide-heading p {
        font-size: 13px;
    }

    #tiscaGuide .tisca-studio-side {
        width: 100%;
    }

    #tiscaGuide .tisca-step-count {
        align-self: flex-start;
    }

    #tiscaGuide .tisca-summary {
        padding: 12px 14px;
    }

    #tiscaGuide .tisca-summary-item,
    #tiscaGuide .tisca-summary-price {
        padding: 5px 0;
    }

    #tiscaGuide .tisca-progress {
        gap: 6px;
        margin-bottom: 26px;
    }

    #tiscaGuide .tisca-progress-step {
        font-size: 11px;
    }

    #tiscaGuide .tisca-panel h3 {
        font-size: 21px;
    }

    #tiscaGuide .tisca-description {
        font-size: 13px;
        margin-bottom: 18px;
    }

/* Strukturkort – fortsatt 2 per rad */
#tiscaGuide .tisca-structure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Färgkort – 1 per rad på mobil */
#tiscaGuide .tisca-color-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* Greenland – också 1 per rad */
#tiscaGuide .tisca-color-grid[data-structure="greenland"] {
    grid-template-columns: minmax(0, 1fr);
}

    #tiscaGuide .tisca-structure-card {
        padding: 5px;
    }

    #tiscaGuide .tisca-structure-card.selected {
        padding: 4px;
    }

    #tiscaGuide .tisca-structure-card img {
        aspect-ratio: 4 / 3;
    }

    #tiscaGuide .tisca-structure-card > span {
        padding: 10px 5px 3px;
        font-size: 13px;
    }

    #tiscaGuide .tisca-structure-price {
        padding: 0 5px 9px;
        font-size: 11px;
    }

    #tiscaGuide .tisca-color-card {
        padding: 6px;
    }

    #tiscaGuide .tisca-color-card.selected {
        padding: 5px;
    }

    #tiscaGuide .tisca-color-card > span:last-child {
        padding: 9px 2px 5px;
        font-size: 11px;
    }

    #tiscaGuide .tisca-size-inputs input {
        height: 48px;
        padding: 10px;
    }

    #tiscaGuide .tisca-preview-dimensions {
        gap: 12px;
        font-size: 12px;
    }

    #tiscaGuide .tisca-order-choices {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #tiscaGuide .tisca-order-choice {
        padding: 16px;
    }

    #tiscaGuide .tisca-navigation {
        gap: 10px;
    }

    #tiscaGuide .tisca-primary-button,
    #tiscaGuide .tisca-back-button {
        padding: 12px 15px;
        font-size: 13px;
    }

    #tiscaGuide #tiscaOrderButton {
        width: 100%;
    }
}

@media (max-width: 380px) {

    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-size-inputs {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   MINSKAD RÖRELSE
========================================== */

@media (prefers-reduced-motion: reduce) {

    #tiscaGuide *,
    #tiscaGuide *::before,
    #tiscaGuide *::after {
        transition: none !important;
    }
}



/* ==========================================
   TISCA – FINJUSTERING DESIGN
========================================== */

/* Mindre tomrum ovanför stegindikatorn */

#tiscaGuide .tisca-studio-header {
    margin-bottom: 18px;
    gap: 25px;
}

/* Något mindre specifikation */

#tiscaGuide .tisca-summary {
    padding: 12px 15px;
    background: #f8f7f4;
}

/* Tydligare pris */

#tiscaGuide .tisca-summary-price strong {
    font-size: 13px;
    font-weight: 700;
}

/* Strukturkort – lite mer kompakta */

#tiscaGuide .tisca-structure-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* Behåll vävbildens proportioner */

#tiscaGuide .tisca-structure-card img {
    aspect-ratio: 5 / 3;
    object-fit: cover;
}

/* Mindre luft före nästa steg */

#tiscaGuide .tisca-navigation {
    margin-top: 25px;
}

/* Mobil */

@media (max-width: 600px) {

    #tiscaGuide .tisca-structure-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #tiscaGuide .tisca-studio-header {
        gap: 15px;
    }
}


/* ==========================================
   TISCA – VARM DESIGNSTUDIO
   BAKGRUND I ÖVRE DELEN
========================================== */

/* Mattväljarens ytterram */

#tiscaGuide {
    padding: 0 !important;
    background: #ffffff;
    border: 1px solid #e4dfd7;
    overflow: hidden;
}

/* Övre delen – sandbeige bakgrund */

#tiscaGuide .tisca-studio-header {
    background: #eeeae3;
    padding: 32px 38px;
    margin: 0 !important;
    gap: 28px;
}

/* Rubrik */

#tiscaGuide .tisca-guide-heading {
    padding: 0;
}

#tiscaGuide .tisca-eyebrow {
    color: #88745e;
}

#tiscaGuide .tisca-guide-heading h2 {
    color: #302c28;
}

/* Specifikationsrutan */

#tiscaGuide .tisca-summary {
    background: #faf9f6;
    border: 1px solid #dcd6cc;
}

/* Stegindikator på vit bakgrund */

#tiscaGuide .tisca-progress {
    padding: 26px 38px 0;
    margin: 0 0 30px;
}

/* Valområdet */

#tiscaGuide .tisca-guide-layout {
    padding: 0 38px 35px;
}

/* Mobilanpassning */

@media (max-width: 700px) {

    #tiscaGuide .tisca-studio-header {
        padding: 24px 18px;
        gap: 18px;
    }

    #tiscaGuide .tisca-progress {
        padding: 22px 18px 0;
        margin-bottom: 25px;
    }

    #tiscaGuide .tisca-guide-layout {
        padding: 0 18px 25px;
    }
}


/* ==========================================
   TISCA DESIGNSTUDIO – INFORMATIONSRAD
   HANDVÄVD · LEVERANSTID · MATERIALPROV
========================================== */

/* Informationsrad med tre centrerade kolumner */

#tiscaGuide .tisca-studio-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 20px;

    width: 100%;
    margin: 0;
    padding: 24px 30px;

    background: #eeeae3;
    border-top: 1px solid #d8d1c7;
}

/* Varje informationspunkt */

#tiscaGuide .tisca-studio-benefit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Ikoner */

#tiscaGuide .tisca-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    color: #88745e;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
}

/* Textbehållare */

#tiscaGuide .tisca-studio-benefit > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;

    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* Rubrik */

#tiscaGuide .tisca-studio-benefit strong {
    display: block;
    margin: 0;
    padding: 0;

    color: #302c28;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* Beskrivning */

#tiscaGuide .tisca-studio-benefit > div > span {
    display: block;
    margin: 0;
    padding: 0;

    color: #777168;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}

/* ==========================================
   SURFPLATTA
========================================== */

@media (max-width: 900px) and (min-width: 601px) {

    #tiscaGuide .tisca-studio-benefits {
        gap: 12px;
        padding: 20px 15px;
    }

    #tiscaGuide .tisca-studio-benefit {
        gap: 7px;
    }

    #tiscaGuide .tisca-benefit-icon {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        font-size: 21px;
    }

    #tiscaGuide .tisca-studio-benefit strong {
        font-size: 12px;
    }

    #tiscaGuide .tisca-studio-benefit > div > span {
        font-size: 11px;
    }
}

/* ==========================================
   MOBIL
========================================== */

@media (max-width: 600px) {

    #tiscaGuide .tisca-studio-benefits {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 10px 22px;
    }

    #tiscaGuide .tisca-studio-benefit {
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid #dcd6cc;
    }

    #tiscaGuide .tisca-studio-benefit:last-child {
        border-bottom: none;
    }

    #tiscaGuide .tisca-benefit-icon {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        font-size: 22px;
    }

    #tiscaGuide .tisca-studio-benefit strong {
        font-size: 13px;
    }

    #tiscaGuide .tisca-studio-benefit > div > span {
        font-size: 12px;
    }
}



/* ==========================================
   LÜPPERTS MATTOR
   TISCA MÖNSTERSTUDIO – NYA TILLÄGG
   FEM STEG · MÖNSTER · FÄRGLÄGGNING
========================================== */

/* ==========================================
   1. STEGINDIKATOR – FEM STEG
========================================== */

#tiscaGuide .tisca-progress {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

#tiscaGuide .tisca-progress-step {
    min-width: 0;
    white-space: normal;
    text-align: center;
}

/* ==========================================
   2. MÖNSTERKORT
========================================== */

#tiscaGuide .tisca-pattern-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

/* Hela mönsterkortet är klickbart */

#tiscaGuide .tisca-pattern-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 18px;

    border: 1px solid #e6e2dc;
    border-radius: 4px;
    background: #fff;
    color: #292724;

    font-family: "Open Sans", sans-serif;
    text-align: center;
    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

#tiscaGuide .tisca-pattern-card:hover {
    border-color: #a79c8f;
    box-shadow: 0 5px 20px rgba(0,0,0,.05);
}

#tiscaGuide .tisca-pattern-card.selected {
    border: 2px solid #38342f;
    padding: 17px;
}

#tiscaGuide .tisca-pattern-card:focus-visible {
    outline: 2px solid #8a7966;
    outline-offset: 3px;
}

/* Mönsterritning inuti kortet */

#tiscaGuide .tisca-pattern-thumbnail {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 150px;
    aspect-ratio: 3 / 4;

    margin: 0 auto;
    padding: 0;
    overflow: hidden;

    border: 1px solid #a9a092;
    background: #c9bdab;
    box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

#tiscaGuide .tisca-pattern-thumbnail > div {
    width: 100%;
    min-height: 0;
    flex-shrink: 1;
}

/* Mönsternamn */

#tiscaGuide .tisca-pattern-card > strong {
    display: block;
    margin: 0;
    padding: 0;
    color: #292724;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* Eventuell beskrivning */

#tiscaGuide .tisca-pattern-card > small {
    display: block;
    color: #77736e;
    font-size: 12px;
    line-height: 1.5;
}

/* ==========================================
   3. FÄRGLÄGGNINGSSTUDIO
========================================== */

/* Färgval till vänster, ritning till höger */

#tiscaGuide .tisca-pattern-workspace {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(260px, .7fr);

    align-items: start;
    gap: 28px;
    width: 100%;
}

#tiscaGuide .tisca-pattern-colors {
    min-width: 0;
}

/* ==========================================
   4. FÄLTVÄLJARE
========================================== */

#tiscaGuide .tisca-field-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
}

#tiscaGuide .tisca-field-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 10px 16px;

    border: 1px solid #dcd6cc;
    border-radius: 3px;
    background: #fff;
    color: #39342f;

    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
}

#tiscaGuide .tisca-field-tab:hover {
    border-color: #8a7966;
}

#tiscaGuide .tisca-field-tab.selected {
    border-color: #38342f;
    background: #eeeae3;
    color: #292724;
    font-weight: 600;
}

#tiscaGuide .tisca-field-tab:focus-visible {
    outline: 2px solid #8a7966;
    outline-offset: 2px;
}

/* ==========================================
   5. MÖNSTERRITNING
========================================== */

#tiscaGuide .tisca-pattern-preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;

    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 24px 20px;

    border: 1px solid #e6e2dc;
    border-radius: 4px;
    background: #f5f2ed;
}

#tiscaGuide .tisca-pattern-preview-wrap > strong {
    display: block;
    color: #292724;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

/* Själva mattan */

#tiscaGuide .tisca-pattern-preview {
    display: flex;
    flex-direction: column;

    width: min(100%, 240px);
    aspect-ratio: 3 / 4;

    margin: 0 auto;
    padding: 0;
    overflow: hidden;

    border: 1px solid #8a8176;
    border-radius: 1px;
    background: #c9bdab;
    box-shadow: 0 8px 22px rgba(49,42,35,.10);
}

/* Klickbara fält */

#tiscaGuide .tisca-pattern-band {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 0;

    border: 0;
    border-bottom: 1px solid rgba(70,60,50,.12);
    border-radius: 0;

    color: #292724;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

#tiscaGuide .tisca-pattern-band:last-child {
    border-bottom: 0;
}

/* Markerat färgfält */

#tiscaGuide .tisca-pattern-band.active {
    outline: 2px solid #292724;
    outline-offset: -2px;
    z-index: 1;
}

/* Fälten i proportionsritningen är inte klickbara */

#tiscaGuide #tiscaRugShape .tisca-pattern-band {
    pointer-events: none;
    cursor: default;
    outline: none;
    font-size: 11px;
}

/* Hjälptext under ritningen */

#tiscaGuide .tisca-pattern-preview-wrap > small {
    display: block;
    max-width: 250px;
    color: #77736e;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

/* ==========================================
   6. STORLEKSSTEGET ÄR NU STEG 4
   Behåll tidigare tvåkolumnslayout
========================================== */

#tiscaGuide .tisca-panel[data-panel="4"].active {
    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);
    column-gap: 32px;
    align-items: start;
}

#tiscaGuide .tisca-panel[data-panel="4"] > h3,
#tiscaGuide .tisca-panel[data-panel="4"] > .tisca-description {
    grid-column: 1 / -1;
}

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-size-inputs {
    grid-column: 1;
    grid-row: 3;
}

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-area-row {
    grid-column: 1;
    grid-row: 4;
}

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-error {
    grid-column: 1;
    grid-row: 5;
}

#tiscaGuide .tisca-panel[data-panel="4"] .tisca-rug-preview {
    grid-column: 2;
    grid-row: 3 / span 3;
    width: 100%;
    max-width: none;
}

/* ==========================================
   7. SURFPLATTA
========================================== */

@media (max-width: 900px) {

    #tiscaGuide .tisca-pattern-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    #tiscaGuide .tisca-pattern-workspace {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(220px, .8fr);
        gap: 18px;
    }

    #tiscaGuide .tisca-panel[data-panel="4"].active {
        column-gap: 18px;
    }
}

/* ==========================================
   8. MOBIL
========================================== */

@media (max-width: 700px) {

    /* Färgprover – en per rad på mobil */
    #tiscaGuide .tisca-color-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* Fem steg på samma rad */

    #tiscaGuide .tisca-progress {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
        gap: 5px;
    }

    #tiscaGuide .tisca-progress-step {
        font-size: 10px;
        gap: 7px;
    }

    /* Två mönsterkort per rad */

    #tiscaGuide .tisca-pattern-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #tiscaGuide .tisca-pattern-card {
        padding: 10px;
        gap: 9px;
    }

    #tiscaGuide .tisca-pattern-card.selected {
        padding: 9px;
    }

    #tiscaGuide .tisca-pattern-thumbnail {
        max-width: 125px;
    }

    #tiscaGuide .tisca-pattern-card > strong {
        font-size: 13px;
    }

    /* Färgläggning staplas */

    #tiscaGuide .tisca-pattern-workspace {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    /* Visa ritningen före färgproverna */

    #tiscaGuide .tisca-pattern-preview-wrap {
        grid-row: 1;
        padding: 18px 14px;
    }

    #tiscaGuide .tisca-pattern-colors {
        grid-row: 2;
    }

    #tiscaGuide .tisca-pattern-preview {
        width: min(100%, 190px);
    }

    #tiscaGuide .tisca-field-tabs {
        gap: 8px;
        margin-bottom: 15px;
    }

    #tiscaGuide .tisca-field-tab {
        min-height: 40px;
        padding: 9px 12px;
        font-size: 11px;
    }

    /* Storlekssteget staplas */

    #tiscaGuide .tisca-panel[data-panel="4"].active {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    #tiscaGuide .tisca-panel[data-panel="4"] > h3,
    #tiscaGuide .tisca-panel[data-panel="4"] > .tisca-description,
    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-size-inputs,
    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-area-row,
    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-error,
    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-rug-preview {
        grid-column: 1;
        grid-row: auto;
    }

    #tiscaGuide .tisca-panel[data-panel="4"] .tisca-rug-preview {
        margin-top: 18px;
    }
}

/* ==========================================
   9. MINSKAD RÖRELSE
========================================== */

@media (prefers-reduced-motion: reduce) {

    #tiscaGuide .tisca-pattern-card,
    #tiscaGuide .tisca-field-tab {
        transition: none;
    }
}



/* ==========================================
   TISCA – AKTIVT FÄRGFÄLT
========================================== */

#tiscaGuide .tisca-field-tab.selected {
    border: 2px solid #292724;
    background: #292724;
    color: #fff;
    font-weight: 700;
}

/* Mattans färger och mönster ska vara orörda */

#tiscaGuide .tisca-pattern-preview
.tisca-pattern-band.active {
    outline: none;
    box-shadow: none;
    filter: none;
    animation: none;
}

/* TISCA – STRUKTURKORT, FÄRGÖVERSIKT OCH POPUP */
#tiscaGuide .tisca-structure-wrapper{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #e6e2dc;border-radius:4px;overflow:hidden}
#tiscaGuide .tisca-structure-wrapper .tisca-structure-card{flex:1;border:0;border-radius:0;box-shadow:none}
#tiscaGuide .tisca-structure-wrapper .tisca-structure-card.selected{border:2px solid #38342f;padding:7px}
#tiscaGuide .tisca-structure-wrapper:has(.tisca-structure-card.selected){border-color:#38342f}
#tiscaGuide .tisca-structure-palette{display:flex!important;align-items:center;flex-wrap:wrap;gap:6px;padding:0 8px 12px!important;margin-top:auto}
#tiscaGuide .tisca-structure-dot{display:block;width:19px;height:19px;flex:0 0 19px;border:1px solid #0002;border-radius:50%}
#tiscaGuide .tisca-structure-palette small{font-size:11px;color:#77736e}
#tiscaGuide .tisca-structure-status{display:block;padding:0 8px 10px;color:#88745e;font-size:11px}
#tiscaGuide .tisca-structure-info{width:100%;min-height:44px;border:0;border-top:1px solid #e6e2dc;background:#faf9f7;color:#39342f;font:600 12px 'Open Sans',sans-serif;cursor:pointer}
#tiscaGuide .tisca-structure-info:hover{background:#eeeae3}
#tiscaGuide .tisca-structure-info:focus-visible{outline:2px solid #292724;outline-offset:-3px}
body.tisca-info-open{overflow:hidden}
.tisca-info-modal[hidden]{display:none!important}
.tisca-info-modal{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:20px;font-family:'Open Sans',sans-serif}
.tisca-info-overlay{position:absolute;inset:0;background:rgba(25,23,21,.78)}
.tisca-info-dialog{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:26px;width:min(100%,1000px);max-height:calc(100dvh - 40px);overflow:auto;padding:28px;background:#fff;color:#292724;border-radius:5px;box-shadow:0 15px 60px #0003}
.tisca-info-close{position:absolute;top:9px;right:12px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;background:#f5f2ed;color:#292724;font:28px Arial,sans-serif;cursor:pointer}
.tisca-info-gallery{min-width:0}
.tisca-info-image-box{position:relative;display:flex;align-items:center;justify-content:center;min-height:250px;background:#f5f2ed}
.tisca-info-image{display:block;width:100%;max-height:440px;object-fit:contain}
.tisca-info-prev,.tisca-info-next{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:40px;border:0;background:#fffffff0;color:#292724;font-size:30px;cursor:pointer}
.tisca-info-prev{left:8px}.tisca-info-next{right:8px}
.tisca-info-prev[hidden],.tisca-info-next[hidden]{display:none}
.tisca-info-thumbs{display:flex;gap:8px;overflow-x:auto;padding:12px 0}
.tisca-info-thumb{flex:0 0 65px;width:65px;height:56px;padding:2px;border:1px solid #e6e2dc;background:#fff;cursor:pointer}
.tisca-info-thumb.selected{border:2px solid #292724;padding:1px}
.tisca-info-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.tisca-info-content{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:15px 12px 5px 0}
.tisca-info-content>small{color:#88745e;font-size:11px;letter-spacing:1.3px}
.tisca-info-content h2{margin:0;color:#292724;font-size:30px;font-weight:400}
.tisca-info-description,.tisca-info-note{margin:0;color:#77736e;font-size:13px;line-height:1.8}
.tisca-info-price{font-size:17px}
.tisca-info-colors{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.tisca-info-colors>strong{flex-basis:100%;font-size:12px}
.tisca-info-dot{width:23px;height:23px;border:1px solid #0002;border-radius:50%}
.tisca-info-select{margin-top:auto;padding:13px 18px;border:1px solid #292724;background:#292724;color:#fff;font:600 13px 'Open Sans',sans-serif;cursor:pointer}
@media(max-width:700px){.tisca-info-modal{padding:10px}.tisca-info-dialog{grid-template-columns:1fr;gap:12px;padding:16px;max-height:calc(100dvh - 20px)}.tisca-info-image-box{min-height:180px}.tisca-info-image{max-height:300px}.tisca-info-content{padding:0}.tisca-info-content h2{font-size:24px}.tisca-info-close{top:7px;right:7px}}



/* ==========================================
   TISCA – GREENLAND
   EXAKT LIKA STORA FÄRGBILDER
========================================== */

/* Samma storlek på alla kort */

#tiscaGuide .tisca-color-grid[data-structure="greenland"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

/* Enhetliga kort */

#tiscaGuide .tisca-color-grid[data-structure="greenland"]
.tisca-color-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 6px;
    box-sizing: border-box;
}

/* Exakt samma bildyta */

#tiscaGuide .tisca-color-grid[data-structure="greenland"]
.tisca-color-swatch {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 1;
    overflow: hidden;
    background: #f5f4f1;
}

/* Alla bilder fyller bildytan */

#tiscaGuide .tisca-color-grid[data-structure="greenland"]
.tisca-color-swatch img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    object-fit: cover !important;
    object-position: center;
    transform: none !important;
}

/* Färgnummer */

#tiscaGuide .tisca-color-grid[data-structure="greenland"]
.tisca-color-card > span:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 28px;
    padding: 5px 3px;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
}

/* Mobil – Greenland har en färg per rad */

@media (max-width: 700px) {
    #tiscaGuide .tisca-color-grid[data-structure="greenland"] {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}



/* ==========================================
   TISCA – FÖRSTORA FÄRGPROV
========================================== */

/* Behåll färgkortens rutnät */

#tiscaGuide .tisca-color-zoom-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #e6e2dc;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

/* Färgkortet */

#tiscaGuide .tisca-color-zoom-item
.tisca-color-card {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
}

/* Markerad färg */

#tiscaGuide .tisca-color-zoom-item:has(
    .tisca-color-card.selected
) {
    border: 2px solid #292724;
}

#tiscaGuide .tisca-color-zoom-item
.tisca-color-card.selected {
    border: 0;
    padding: 8px;
}

/* Förstoringsknapp */

#tiscaGuide .tisca-color-zoom-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    width: 100%;
    min-height: 32px;
    margin: 0;
    padding: 6px 8px;

    border: 0;
    border-top: 1px solid #eeeae5;
    border-radius: 0;

    background: #faf9f7;
    color: #625b52;

    font: 500 11px "Open Sans", sans-serif;
    cursor: zoom-in;
    transition: background .2s ease;
}

#tiscaGuide .tisca-color-zoom-trigger:hover {
    background: #eeeae3;
    color: #292724;
}

#tiscaGuide .tisca-color-zoom-trigger span {
    font-size: 17px;
    line-height: 1;
}

/* ==========================================
   POPUP
========================================== */

.tisca-color-zoom-modal[hidden] {
    display: none !important;
}

.tisca-color-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
}

.tisca-color-zoom-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 19, 18, .82);
}

.tisca-color-zoom-dialog {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    width: min(950px, 100%);
    max-height: 92vh;
    overflow: hidden;

    background: #fff;
    border-radius: 5px;
    box-shadow: 0 15px 60px rgba(0,0,0,.25);
}

/* Bild */

.tisca-color-zoom-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 180px;
    padding: 30px;
    overflow: auto;
    background: #f5f3f0;
}

.tisca-color-zoom-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 65vh;
    object-fit: contain;
}

/* Bildinformation */

.tisca-color-zoom-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 18px;
    font-family: "Open Sans", sans-serif;
    text-align: center;
}

.tisca-color-zoom-footer strong {
    color: #292724;
    font-size: 17px;
    font-weight: 600;
}

.tisca-color-zoom-footer span {
    color: #77736e;
    font-size: 12px;
}

/* Stängknapp */

.tisca-color-zoom-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    padding: 0;

    border: 1px solid #e6e2dc;
    border-radius: 50%;

    background: #fff;
    color: #292724;
    font-size: 27px;
    cursor: pointer;
}

body.tisca-color-zoom-open {
    overflow: hidden;
}

/* ==========================================
   MOBIL
========================================== */

@media (max-width: 650px) {

    #tiscaGuide .tisca-color-zoom-trigger {
        min-height: 34px;
        font-size: 11px;
    }

    .tisca-color-zoom-modal {
        padding: 12px;
    }

    .tisca-color-zoom-image-wrap {
        padding: 15px;
    }

    .tisca-color-zoom-image {
        max-height: 60vh;
    }

    .tisca-color-zoom-footer {
        padding: 14px;
    }
}


/* =========================================
   TISCA DESIGNSTUDIO
   FLYTANDE NAVIGERING
========================================= */

#tisca-floating-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(250, 249, 246, .97);
  border-top: 1px solid #e6e3dd;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .07);
  font-family: 'Open Sans', Arial, sans-serif;
  transform: translateY(110%);
  transition: transform .25s ease;
}

#tisca-floating-nav.is-visible {
  transform: translateY(0);
}

#tisca-floating-nav .tisca-nav-inner {
  max-width: 1160px;
  margin: auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#tisca-floating-nav .tisca-nav-center {
  min-width: 0;
  text-align: center;
  flex: 1;
}

#tisca-floating-nav .tisca-nav-step {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #777;
}

#tisca-floating-nav .tisca-nav-summary {
  font-size: 13px;
  color: #242424;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}

#tisca-floating-nav button {
  font: 600 13px 'Open Sans', Arial, sans-serif;
  padding: 11px 19px;
  border: 1px solid #252525;
  background: transparent;
  color: #252525;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s;
}

#tisca-floating-nav .tisca-nav-next {
  background: #252525;
  color: white;
}

#tisca-floating-nav button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

#tisca-floating-nav button:not(:disabled):hover {
  background: #555;
  color: white;
}

body.tisca-floating-nav-active {
  padding-bottom: 75px;
}

/* =========================================
   MOBILANPASSNING
========================================= */

@media (max-width: 600px) {

  #tisca-floating-nav .tisca-nav-inner {
    padding: 9px 12px;
    gap: 8px;
  }

  #tisca-floating-nav button {
    font-size: 12px;
    padding: 10px 12px;
  }

  #tisca-floating-nav .tisca-nav-summary {
    font-size: 11px;
  }

  #tisca-floating-nav .tisca-nav-step {
    font-size: 10px;
  }

  body.tisca-floating-nav-active {
    padding-bottom: 70px;
  }

}

/* =========================================
   MINSKAD ANIMERING
========================================= */

@media (prefers-reduced-motion: reduce) {

  #tisca-floating-nav {
    transition: none;
  }

}