/* ==========================================================================
   LOGISZ Texture Generator — design-styling (L2601036)
   Vervangt de Tailwind-runtime + Material Icons uit de POC; iconen = inline SVG.
   Naamgeving: alle classes geprefixt met tg- (BEM-achtig), gebruikt door
   Views/MacroPartials/TextureGenerator.cshtml (fase 4).
   ========================================================================== */

.tg {
    --tg-green: #384E46;
    --tg-green-dark: #2C3E38;
    --tg-green-light: #9DA7A3;
    --tg-gold: #C9AC68;
    --tg-black: #030303;
    --tg-white: #FFFFFF;
    --tg-gray-100: #F5F5F5; /* Figma: zwart 4% op wit (invoervelden) */
    --tg-gray-200: #ECEEED;
    --tg-gray-300: #E8E9E8;
    --tg-gray-400: #C7CCCA;
    --tg-line: rgba(0, 0, 0, 0.1);
    /* Uitgeschakelde knoppen (niet in Figma): dicht grijs i.p.v. transparant. */
    --tg-disabled-text: #B5B5B5;
    --tg-disabled-bg: #E8E8E8;
    /* Placeholders (niet in Figma): grijs zodat ze niet op ingevulde tekst lijken. */
    --tg-placeholder: #8A8A8A;
    /* Invoervlak bij focus/hover/open (zwart 8% op wit). */
    --tg-field-focus: #EBEBEB;
    /* Eén stijl voor lijsten in alle tabs (Steen, Formaat, ...):
       secundaire tekst (aantallen, uitleg, maten, hints) = 600 12/16 in zwart 45%;
       namen van items = 700 12/16; beeld 88x37 tegen de linkerrand, 12px tot de tekst; 8px tussen rijen. */
    /* 58% zwart: contrast ± 4,6:1 op wit (toegankelijkheid; was 45% = 3,3:1). */
    --tg-text-secondary: rgba(0, 0, 0, 0.58);
    --tg-item-gap: 8px;
    --tg-thumb-width: 88px;
    --tg-thumb-height: 37px;
    --tg-thumb-text-gap: 12px;
    --tg-text: #000000;
    --tg-text-muted: #6B7470;
    --tg-error: #B93434;
    /* Figma: strakke hoeken (alleen bolletjes/knoppen van sliders zijn rond). */
    --tg-radius: 0;
    --tg-radius-lg: 0;
    --tg-stage-bg: #EAEBE9;
    --tg-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    --tg-shadow-soft: 0 4px 35px rgba(0, 0, 0, 0.15);
    --tg-rail-width: 80px;
    --tg-panel-width: 340px;
    --tg-edge-offset: 20px;
    --tg-panel-offset: calc(var(--tg-edge-offset) + var(--tg-rail-width) + var(--tg-panel-width));
    --tg-font: "Nunito Sans", "Nunito", Arial, sans-serif;
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    font-family: var(--tg-font);
    font-size: 14px;
    color: var(--tg-text);
    background: var(--tg-stage-bg);
}

.tg *,
.tg *::before,
.tg *::after {
    box-sizing: border-box;
}

/* Achtergrond-gradient: flush tegen de rand (0,0 links/boven/onder) en loopt door tot ~de helft van
   het paneel; ligt boven de stage-textuur maar onder rail (z30) en paneel (z20). */
.tg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: calc(var(--tg-rail-width) + var(--tg-panel-width) * 0.5);
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(44, 62, 56, 0.92) 0%, rgba(56, 78, 70, 0.55) 45%, rgba(56, 78, 70, 0) 100%);
}

/* View-only (andermans textuur): rail + paneel zijn verborgen, dus ook de linker achtergrond-gradient weg zodat de stage full-bleed is. */
.tg.is-viewonly::before {
    display: none;
}

/* De widget staat ingebed in een pagina met eigen globale CSS. Deze reset (`.tg button`, 0,1,1)
   blokkeert lekkende site-knopstijlen (achtergrond/kleur/rand/padding); component-regels winnen
   met een `.tg `-prefix (0,2,0). Zo bloedt de sitehuisstijl niet door in de generator. */
.tg button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    color: var(--tg-text);
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}

/* Inputs binnen de widget: idem afschermen tegen globale site-invoerstijlen. */
.tg input,
.tg select,
.tg textarea {
    font-family: inherit;
    color: var(--tg-text);
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
}

/* De site zet text-indent: 24px op invoervelden via `body input[type="..."]` (0,1,2); met [type] wint dit (0,2,1). */
.tg input[type],
.tg select,
.tg textarea {
    text-indent: 0;
}

/* De site zet `body p { padding-top: 26px; font-family: Nunito; ... }` (0,0,2). Padding en lettertype hier
   neutraliseren (0,1,1); grootte/regelhoogte/kleur regelen de eigen classes (die winnen van body p). */
.tg p {
    padding: 0;
    font-family: inherit;
}

.tg[x-cloak],
.tg [x-cloak] {
    display: none !important;
}

.tg svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

/* Gevulde iconen uit het Figma-design (Font Awesome 6 Regular); maat per context. */
.tg .tg-icon {
    fill: currentColor;
    stroke: none;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Linksrail: logo + tabs (Steen/Formaat/Verband/Voeg) + acties onderin
   -------------------------------------------------------------------------- */

.tg-rail {
    position: relative;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: var(--tg-rail-width);
    flex: 0 0 var(--tg-rail-width);
    /* Nav houdt een marge van de rand (zwevend), zoals in het design; achtergrond-gradient loopt eromheen door. */
    margin: var(--tg-edge-offset) 0 var(--tg-edge-offset) var(--tg-edge-offset);
    overflow: hidden;
    /* Figma: rail zelf transparant (logo staat op de achtergrond), alleen de items zijn gevuld. */
    background: none;
    color: var(--tg-white);
}

.tg-rail__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    padding: 20px 16px;
    flex: 0 0 auto;
}

.tg-rail__logo img,
.tg-rail__logo svg {
    width: 48px;
    height: 48px;
    fill: currentColor;
    stroke: none;
}

.tg-rail__tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.tg .tg-rail__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 92px;
    padding: 20px 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    color: var(--tg-white);
    text-align: center;
    /* Items zijn dekkend groen (geen transparantie) en staan zo over de gradient. */
    background: var(--tg-green);
    transition: background-color 0.15s ease;
}

.tg .tg-rail__item .tg-icon {
    width: 28px;
    height: 32px;
}

/* Figma (hover-variant): wit 10% over het groen. */
.tg .tg-rail__item:hover {
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), var(--tg-green);
}

.tg .tg-rail__item.is-active {
    background: var(--tg-white);
    color: var(--tg-text);
}

/* Zwart actieblok onderin (Figma): staat tegen de onderkant, hoogte volgt de inhoud (76–100px per item).
   Aan/uit via features.railActions in TextureGenerator.cshtml. */
.tg-rail__actions {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    background: var(--tg-black);
}

.tg .tg-rail__item--action {
    height: auto;
    background: var(--tg-black);
}

.tg .tg-rail__item--action:hover {
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), var(--tg-black);
}

.tg .tg-rail__item--action .tg-icon--save { width: 16px; height: 16px; }
.tg .tg-rail__item--action .tg-icon--folder { width: 27px; height: 24px; }
.tg .tg-rail__item--action .tg-icon--download { width: 18px; height: 24px; margin-bottom: 4px; }
.tg .tg-rail__item--action .tg-icon--sample { width: 30px; height: 24px; }

/* --------------------------------------------------------------------------
   Zijpaneel (wit): kop, scrollgebied
   -------------------------------------------------------------------------- */

.tg-panel {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: var(--tg-panel-width);
    flex: 0 0 var(--tg-panel-width);
    margin: var(--tg-edge-offset) 0;
    overflow: hidden;
    background: var(--tg-white);
}

/* Figma: paneel-padding 40 boven/links/onder, 10 rechts (daar zit de scrollbalk). */
.tg-panel__title {
    flex: 0 0 auto;
    margin: 0;
    padding: 40px 40px 0;
    font-size: 20px;
    font-weight: 900;
    line-height: 27px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--tg-green);
}

/* Voorzet vaste titel bij scrollen: zodra de inhoud gescrolld is (.is-scrolled op .tg-panel__body, gezet in de
   markup) verschijnt onder de titel een dunne lijn + 24px wit verloop, zodat inhoud er zacht onder verdwijnt
   i.p.v. hard afgesneden. Het verloop stopt vóór de scrollbalk. */
.tg-panel__title {
    position: relative;
    z-index: 2;
}

.tg-panel__title::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 40px;
    right: 38px;
    height: 34px;
    border-top: 1px solid var(--tg-line);
    background: linear-gradient(var(--tg-white) 10px, rgba(255, 255, 255, 0));
    /* Volgt de scrollpositie direct (0 bovenaan → 1 na 32px scrollen), dus geen sprong of vertraging. */
    opacity: var(--tg-scroll-fade, 0);
    pointer-events: none;
}

.tg-panel__intro {
    margin: -8px 0 8px;
    padding: 0 24px;
    color: var(--tg-text-muted);
}

/* Subtekst onder een sectietitel (bv. "lengte x hoogte van het zichtvlak"). */
.tg-panel__subtext {
    margin: 8px 40px 0;
    font-size: 12px;
    color: var(--tg-text-muted);
}

/* Binnen het scrollbare body (onder een tg-subtitle) tuckt de subtekst direct onder de subtitel. */
.tg-panel__body .tg-panel__subtext {
    margin: -8px 0 14px;
}

/* Content 262px breed + 10px ruimte + 18px scrollbalk + 10px rechtermarge (Figma). */
.tg-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0 10px 40px 0;
    padding: 10px 10px 0 40px;
    scrollbar-gutter: stable;
}

/* Firefox kent geen ::-webkit-scrollbar; Chrome negeert die juist zodra scrollbar-width/-color gezet is. */
@supports not selector(::-webkit-scrollbar) {
    .tg-panel__body {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.07);
    }
}

/* Figma: track zwart 7%, duim zwart 40%, beide 8px breed en afgerond binnen een 18px kolom. */
.tg-panel__body::-webkit-scrollbar {
    width: 18px;
}

.tg-panel__body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.07);
    background-clip: padding-box;
    border: 5px solid transparent;
    border-radius: 20px;
}

.tg-panel__body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
    background-clip: padding-box;
    border: 5px solid transparent;
    border-radius: 20px;
}

.tg-divider {
    height: 1px;
    margin: 24px 0;
    background: var(--tg-line);
    border: 0;
}

/* Regel: scheidingslijnen alleen tússen secties, nooit direct onder de paneeltitel. De inhoud begint overal
   10px onder de titel (padding-top van .tg-panel__body). Mocht er toch een lijn als eerste staan: 24px onder de titel. */
.tg-panel__body > .tg-divider:first-child {
    margin-top: 14px;
}

.tg-subtitle {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tg-green);
}

/* --------------------------------------------------------------------------
   Formuliercontrols: zoekveld, dropdown/accordion
   -------------------------------------------------------------------------- */

/* Figma: velden 46px hoog (12/16 padding), tekst 600 14/22, achtergrond zwart 4%. Afstand zoek → structuur 8px. */
.tg-search {
    position: relative;
    margin-bottom: 8px;
}

.tg .tg-search__input {
    width: 100%;
    height: 46px;
    padding: 12px 44px 12px 16px;
    font: inherit;
    font-weight: 600;
    line-height: 22px;
    color: var(--tg-text);
    background: var(--tg-gray-100);
    border: 0;
    border-radius: var(--tg-radius);
    -webkit-appearance: none;
    appearance: none;
}

/* Native decoraties van type="search" uit: we gebruiken een eigen wis-knop (.tg-search__clear). */
.tg .tg-search__input::-webkit-search-cancel-button,
.tg .tg-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Afwijking van Figma (bewust): placeholder grijs, anders lijkt het al ingevulde tekst. */
.tg .tg-search__input::placeholder {
    color: var(--tg-placeholder);
    opacity: 1;
}

/* Focus: geen dikke rand, maar het vlak wordt iets donkerder (zwart 4% → 8%). Dropdown doet hetzelfde. */
.tg .tg-search__input {
    transition: background-color 0.15s ease;
}

.tg .tg-search__input:focus {
    outline: none;
    background: var(--tg-field-focus);
}

.tg-search .tg-search__icon {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--tg-text);
    pointer-events: none;
}

/* Wis-knop op de plek van het vergrootglas; klikvlak 32px, icoon 10x12. */
.tg .tg-search__clear {
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--tg-text);
    transform: translateY(-50%);
}

.tg .tg-search__clear .tg-icon {
    width: 10px;
    height: 12px;
}

.tg .tg-search__clear:hover {
    color: var(--tg-green);
}

.tg-dropdown {
    position: relative;
}

.tg .tg-dropdown__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 46px;
    padding: 12px 16px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    color: var(--tg-text);
    background: var(--tg-gray-100);
    border-radius: var(--tg-radius);
}

.tg .tg-dropdown__chevron {
    width: 11px;
    height: 6px;
    color: #18181B;
    transition: transform 0.15s ease;
}

.tg .tg-dropdown__toggle:hover,
.tg-dropdown.is-open .tg-dropdown__toggle {
    background: var(--tg-field-focus);
}

/* Toetsenbordfocus (alleen bij tabben, niet bij klikken): subtiele groene ring binnen het vlak. */
.tg .tg-dropdown__toggle:focus-visible,
.tg .tg-search__clear:focus-visible {
    outline: 2px solid var(--tg-green);
    outline-offset: -2px;
}

.tg-dropdown.is-open .tg-dropdown__chevron {
    transform: rotate(180deg);
}

/* Waarde-zijde van de toggle: swatch + naam naast elkaar (voegkleur). */
.tg-dropdown__value {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tg-dropdown__value span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Echte dropdown: zweeft over de content (overlay) i.p.v. de lijst uit te klappen. */
/* Uitklaplijst (Figma, Voeg-kleur): grijs vlak #F5F5F5, hoek 3px, 16px binnenruimte, diepe zachte schaduw,
   max. 7 regels zichtbaar (dan scrollen). Geldt voor alle dropdowns (Structuur, Voegkleur). */
.tg-dropdown__body {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 25;
    max-height: 256px;
    overflow-y: auto;
    padding: 16px;
    background: var(--tg-gray-100);
    border: 0;
    border-radius: 3px;
    box-shadow: 0 34px 50px rgba(0, 0, 0, 0.35);
}

/* Firefox: eigen scrollbalkkleur. (Chrome negeert ::-webkit-scrollbar zodra scrollbar-width gezet is, vandaar apart.) */
@supports not selector(::-webkit-scrollbar) {
    .tg-dropdown__body {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
    }
}

.tg-dropdown__body::-webkit-scrollbar { width: 8px; }
.tg-dropdown__body::-webkit-scrollbar-track { background: var(--tg-white); border-radius: 20px; }
.tg-dropdown__body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.4); border-radius: 20px; }

/* Regel (Figma): 32px hoog, 600 14/32, bolletje 27px, 8px tussen bolletje en naam. Gekozen: groen vinkje rechts.
   Hover: naam groen (zelfde idee als de lijsten). */
.tg .tg-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 32px;
    text-align: left;
    text-decoration: none;
    color: var(--tg-text);
    background: none;
    border-radius: 0;
    transition: color 0.15s ease;
}

.tg .tg-option:hover {
    color: var(--tg-green);
}

.tg-option__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tg .tg-option .tg-item-check {
    margin-left: auto;
}

.tg .tg-option .tg-swatch {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Bolletje in het gesloten veld: past binnen de 22px tekstregel. */
.tg .tg-dropdown__value .tg-swatch {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------------------
   Kleurgroep-swatches (cirkels, vinkje bij selectie)
   -------------------------------------------------------------------------- */

/* Basis (o.a. kleine bolletjes in de voegkleur-dropdown). */
.tg .tg-swatch {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

/* Figma: klikvlak 32px, 6px tussenruimte, 24px onder het structuurveld. */
.tg-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
}

/* Voorzet v2: geen ring + haarlijn meer. Het bolletje is één vlak (::before) dat via transform schaalt:
   24px in rust, 28px bij hover, 32px (volle klikvlak) als hij gekozen is. Diepte via een zachte schaduw i.p.v. een lijn. */
.tg-swatches .tg-swatch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--tg-white);
    background: none;
    border: 0;
    border-radius: 50%;
}

.tg-swatches .tg-swatch::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--tg-swatch-color, #ccc);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transform: scale(0.75);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease;
}

.tg-swatches .tg-swatch:hover::before {
    transform: scale(0.875);
}

.tg-swatches .tg-swatch.is-selected::before {
    transform: scale(1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.tg-swatches .tg-swatch:focus-visible {
    outline: 2px solid var(--tg-green);
    outline-offset: 2px;
}

/* Gekozen (Figma): vinkje 14x16 in het midden. */
.tg .tg-swatch__check {
    position: relative;
    width: 14px;
    height: 16px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tg-swatch.is-selected .tg-swatch__check {
    opacity: 1;
    transform: scale(1);
}

/* Lichte kleur (isLightColor in app.js): donker vinkje, anders valt het weg. */
.tg-swatches .tg-swatch--light {
    color: var(--tg-text);
}

/* --------------------------------------------------------------------------
   Selectie (voorzet v2): kop met aantal, verdeelbalk als bediening, compacte rijen
   -------------------------------------------------------------------------- */

.tg .tg-selection__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 22px;
    padding: 0;
    text-align: left;
    background: none;
}

/* Gelijkgetrokken met "Alle stenen"/"Lengteformaat": 800 14/22 zwart, 24px onder de lijn, 12px tot de inhoud.
   (Figma had hier groen en een kop van 30px hoog.) */
.tg-selection__heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 800;
    line-height: 22px;
    color: var(--tg-text);
}

.tg-selection__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--tg-text-secondary);
}

.tg .tg-selection__chevron {
    width: 11px;
    height: 6px;
    color: var(--tg-text);
    transition: transform 0.15s ease;
}

.tg .tg-selection__chevron.is-open {
    transform: rotate(180deg);
}

/* Verdeelbalk. Ingeklapt: 6px dun (samenvatting). Uitgeklapt: 32px hoog met 6 vakjes en sleepbare scheidingen. */
.tg-distribution {
    margin-top: 12px;
}

.tg-distribution__bar {
    position: relative;
    display: flex;
    height: 6px;
    overflow: visible;
    transition: height 0.2s ease;
}

.tg-distribution.is-open .tg-distribution__bar {
    height: 32px;
}

.tg-distribution__segment {
    flex-basis: 0;
    min-width: 0;
    background-color: var(--tg-gray-200);
    background-position: center;
    background-size: cover;
    transition: flex-grow 0.2s ease, opacity 0.15s ease, filter 0.15s ease;
}

/* 2px witte naad tussen stenen. */
.tg-distribution__segment + .tg-distribution__segment {
    box-shadow: inset 2px 0 0 var(--tg-white);
}

/* Andere stenen dimmen als je boven een rij/segment hangt. */
.tg-distribution__segment.is-dimmed {
    opacity: 0.35;
    filter: saturate(0.4);
}

/* Tijdens slepen geen animatie: de balk volgt de muis direct. */
.tg-distribution__bar.is-dragging .tg-distribution__segment {
    transition: none;
}

/* De vakjes: dunne witte streepjes per deel (1/n, 2/n ...); n = --tg-parts-total, gezet op de balk vanuit partsTotal (CMS).
   Alleen uitgeklapt zichtbaar. */
.tg-distribution__cells {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgba(255, 255, 255, 0.55) calc(100% - 1px));
    background-size: calc(100% / var(--tg-parts-total, 6)) 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tg-distribution.is-open .tg-distribution__cells {
    opacity: 1;
}

/* Sleepgreep op een scheiding: 20px klikvlak, zichtbaar als wit staafje met schaduw. */
.tg-distribution__handle {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 20px;
    margin-left: -10px;
    cursor: ew-resize;
    touch-action: none;
}

.tg-distribution__handle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 6px;
    margin-left: -3px;
    background: var(--tg-white);
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease;
}

.tg-distribution__handle:hover::before,
.tg-distribution__bar.is-dragging .tg-distribution__handle::before {
    transform: scaleX(1.35);
}

.tg-distribution__handle:focus-visible {
    outline: none;
}

.tg-distribution__handle:focus-visible::before {
    background: var(--tg-green);
}

.tg-distribution__hint {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--tg-text-secondary);
}

/* Rijen in dezelfde maatvoering als de stenenlijst: beeld 88x37, 12px tot de tekst, 8px tussen rijen, 12px onder de hint. */
.tg-selection__list {
    display: flex;
    flex-direction: column;
    gap: var(--tg-item-gap);
    margin-top: 12px;
}

.tg-selection__item {
    display: flex;
    align-items: center;
    gap: var(--tg-thumb-text-gap);
    min-height: var(--tg-thumb-height);
}

.tg-selection__thumb {
    flex: 0 0 var(--tg-thumb-width);
    width: var(--tg-thumb-width);
    height: var(--tg-thumb-height);
    object-fit: cover;
    border-radius: 1px;
    transition: box-shadow 0.15s ease;
}

.tg-selection__item.is-highlighted .tg-selection__thumb {
    box-shadow: 0 0 0 2px var(--tg-green);
}

/* Naam mag over twee regels lopen (net als bij Formaat), daarna afgekapt met … */
.tg-selection__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

/* Breuk als pil (bv. 2/6), vaste breedte zodat de kolom recht staat. */
.tg-selection__fraction {
    flex: 0 0 auto;
    min-width: 34px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
    color: var(--tg-green);
    background: rgba(56, 78, 70, 0.1);
    border-radius: 10px;
}

.tg .tg-selection__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-right: -5px;
    color: rgba(0, 0, 0, 0.2);
    background: none;
    transition: color 0.15s ease;
}

.tg .tg-selection__remove .tg-icon {
    width: 10px;
    height: 12px;
}

.tg .tg-selection__remove:hover {
    color: var(--tg-text);
}

/* --------------------------------------------------------------------------
   Productlijst (stenen)
   -------------------------------------------------------------------------- */

/* Sectiekop binnen een tab ("Alle stenen", "Lengteformaat", "Breedteformaat"): 800 14/22 zwart, optioneel met aantal.
   Met een uitleg eronder (.tg-section-hint) schuift die de 12px ondermarge over. */
.tg-products__header,
.tg-section-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 800;
    line-height: 22px;
}

.tg-section-header:has(+ .tg-section-hint) {
    margin-bottom: 0;
}

/* Uitleg onder een sectiekop: zelfde grijs en gewicht als het aantal naast een kop. */
.tg-section-hint {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--tg-text-secondary);
}

.tg-products__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--tg-text-secondary);
}

/* Rijen 37px hoog, 8px ertussen (Figma had 10px; gelijkgetrokken). Eigen stacking context voor het hover-vlak (::before). */
.tg-products {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tg-item-gap);
}

.tg .tg-product {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--tg-thumb-text-gap);
    width: 100%;
    height: var(--tg-thumb-height);
    padding: 0;
    text-align: left;
    color: var(--tg-text);
    background: none;
}

/* Hover: vlak van zwart 4% dat 6px buiten de rij valt (thumbs blijven uitgelijnd) + naam in groen. */
.tg .tg-product::before {
    content: "";
    position: absolute;
    inset: -4px -6px;
    z-index: -1;
    background: var(--tg-gray-100);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tg .tg-product:hover::before,
.tg .tg-product.is-highlighted::before {
    opacity: 1;
}

.tg .tg-product:hover .tg-product__name {
    color: var(--tg-green);
}

.tg-product__thumb {
    flex: 0 0 var(--tg-thumb-width);
    width: var(--tg-thumb-width);
    height: var(--tg-thumb-height);
    object-fit: cover;
    background: var(--tg-gray-200);
    border-radius: 1px;
}

/* Naam: 700 12/16 zoals in selectie en formaten (Figma had 600 10/13), één regel, afgekapt met … */
.tg-product__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tg-text);
    transition: color 0.15s ease;
}

/* Gekozen-aanduiding voor alle lijsten (stenen, formaten): groen rondje 16px met wit vinkje, rechts in de rij. */
.tg-item-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tg-green);
    color: var(--tg-white);
}

.tg .tg-item-check .tg-icon {
    width: 8px;
    height: 8px;
}

.tg-products__empty {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--tg-text-secondary);
}

/* --------------------------------------------------------------------------
   Formaat-rijen (gelijkgetrokken met de stenenlijst; Figma had kaarten met rand)
   -------------------------------------------------------------------------- */

.tg-cards {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tg-item-gap);
}

/* Rij: beeld 88x37 tegen de linkerrand, 12px tot de tekst, vinkje rechts als hij gekozen is.
   Bij een naam over twee regels groeit de rij mee. */
.tg-cards .tg-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--tg-thumb-text-gap);
    width: 100%;
    min-height: var(--tg-thumb-height);
    padding: 0;
    text-align: left;
    color: var(--tg-text);
    background: none;
    border: 0;
    box-shadow: none;
}

/* Hover: zelfde als de stenenlijst (grijs vlak iets buiten de rij + naam in groen). */
.tg-cards .tg-card::before {
    content: "";
    position: absolute;
    inset: -4px -6px;
    z-index: -1;
    background: var(--tg-gray-100);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tg-cards .tg-card:hover:not(:disabled)::before {
    opacity: 1;
}

.tg-cards .tg-card:hover:not(:disabled) .tg-card__name {
    color: var(--tg-green);
}

.tg-cards .tg-card:focus-visible {
    outline: 2px solid var(--tg-green);
    outline-offset: 4px;
}

/* Niet beschikbaar voor de gekozen stenen: beeld vervaagd, tekst grijs, niet klikbaar, met uitleg (.tg-card__note). */
.tg-cards .tg-card:disabled {
    cursor: not-allowed;
}

.tg-cards .tg-card:disabled .tg-card__visual {
    opacity: 0.4;
    filter: grayscale(1);
}

.tg-cards .tg-card:disabled .tg-card__name,
.tg-cards .tg-card:disabled .tg-card__size {
    color: var(--tg-disabled-text);
}

/* Beeldvak 88x37 (zelfde als de stenenfoto's), zwart 8%, hoek 1px. */
.tg-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--tg-thumb-width);
    width: var(--tg-thumb-width);
    height: var(--tg-thumb-height);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 1px;
}

/* Steen op schaal (breedte 60px, hoogte uit de maten, max 31px), gevuld met de foto van de eerste gekozen steen.
   Zonder foto een neutrale steentint (Figma: groen 20%). */
.tg-card__stone {
    display: block;
    background-color: rgba(56, 78, 70, 0.2);
    background-position: center;
    background-size: cover;
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: height 0.2s ease;
}

/* Terugval als een formaat geen maten heeft: de CMS-afbeelding. */
.tg-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tg-card__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

/* Naam 700 12/16 (zoals alle namen), maat als secundaire tekst 600 12/16 grijs. */
.tg-card__name {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--tg-text);
    transition: color 0.15s ease;
}

.tg-card__size,
.tg-card__note {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--tg-text-secondary);
}
/* --------------------------------------------------------------------------
   Verband-tegels (2 kolommen; zelfde regels als de lijsten: geen rand, naam 700 12/16, 8px tussenruimte,
   groen vinkje als aanduiding, grijs hover-vlak, niet-beschikbaar vervaagd met uitleg)
   -------------------------------------------------------------------------- */

.tg-bonds {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tg-item-gap);
    align-items: start;
}

.tg-bonds .tg-bond {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 0;
    text-align: left;
    color: var(--tg-text);
    background: none;
    border: 0;
    box-shadow: none;
}

/* Hover: grijs vlak iets buiten de tegel + naam groen (zelfde als stenen/formaten). */
.tg-bonds .tg-bond::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    background: var(--tg-gray-100);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tg-bonds .tg-bond:hover:not(:disabled)::before {
    opacity: 1;
}

.tg-bonds .tg-bond:hover:not(:disabled) .tg-bond__name {
    color: var(--tg-green);
}

.tg-bonds .tg-bond:focus-visible {
    outline: 2px solid var(--tg-green);
    outline-offset: 4px;
}

/* Beeldvak: volle tegelbreedte, 100px hoog, zwart 8% als achtergrond; vinkje rechtsboven. */
/* Beeldvak (Figma): grijs vak, tekening gecentreerd met 10px ruimte eromheen. De tekening zelf is al op hele stenen en
   hele lagen uitgesneden (renderBondPreview), dus hier niets afsnijden: alleen passend verkleinen. */
.tg-bond__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    padding: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 1px;
}

.tg-bond__image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tg-bond__visual .tg-item-check {
    position: absolute;
    top: 6px;
    right: 6px;
    box-shadow: 0 0 0 2px var(--tg-white);
}

.tg-bond__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    transition: color 0.15s ease;
}

.tg-bond__note {
    margin-top: -4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--tg-text-secondary);
}

.tg-bonds .tg-bond:disabled {
    cursor: not-allowed;
}

.tg-bonds .tg-bond:disabled .tg-bond__visual {
    opacity: 0.4;
    filter: grayscale(1);
}

.tg-bonds .tg-bond:disabled .tg-bond__name {
    color: var(--tg-disabled-text);
}
/* --------------------------------------------------------------------------
   Voegen: kop met waarde en eigen schuifbalk (zelfde regels als de andere tabs)
   -------------------------------------------------------------------------- */

/* Kop "Lintvoeg dikte" (800 14/22 zwart, zoals alle sectiekoppen) met de waarde rechts. */
.tg-joint__header {
    justify-content: space-between;
}

.tg-joint__value {
    font-variant-numeric: tabular-nums;
}

/* Eigen schuifbalk (Figma): balk 10px, zwart 10% met rand zwart 5%, afgerond; gevuld deel groen tot de waarde;
   knop 18px groen met witte rand. --tg-range-ratio (0..1) komt uit jointRatio() in de markup. */
.tg .tg-range {
    --tg-range-fill: calc(9px + (100% - 18px) * var(--tg-range-ratio, 0));
    display: block;
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.tg .tg-range:focus {
    outline: none;
}

.tg .tg-range::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 20px;
    background: linear-gradient(to right, var(--tg-green) 0, var(--tg-green) var(--tg-range-fill), rgba(0, 0, 0, 0.1) var(--tg-range-fill));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.tg .tg-range::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -4px;
    border: 1px solid var(--tg-white);
    border-radius: 50%;
    background: var(--tg-green);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    -webkit-appearance: none;
    appearance: none;
}

.tg .tg-range::-moz-range-track {
    height: 10px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.1);
}

.tg .tg-range::-moz-range-progress {
    height: 10px;
    border-radius: 20px;
    background: var(--tg-green);
}

.tg .tg-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 1px solid var(--tg-white);
    border-radius: 50%;
    background: var(--tg-green);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.tg .tg-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(56, 78, 70, 0.3);
}

.tg .tg-range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(56, 78, 70, 0.3);
}

/* --------------------------------------------------------------------------
   Canvas/stage: 3D-viewer of platte textuur + overlays
   -------------------------------------------------------------------------- */

/* Stage vult de volledige achtergrond (full-bleed) zodat de textuur/achtergrond ook boven en
   achter het paneel doorloopt; rail (z 30) en paneel (z 20) zweven erbovenop. */
.tg-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--tg-stage-bg);
    /* Subtiele diagonale ruit-lattice als watermerk (zichtbaar op de lege stage). */
    background-image:
        repeating-linear-gradient(45deg, rgba(56, 78, 70, 0.03) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(-45deg, rgba(56, 78, 70, 0.03) 0 1px, transparent 1px 24px);
}

.tg-stage__canvas,
.tg-stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   3D-weergave: beeldkader met achtergrond → woning (canvas) → voorgrond.
   Maat en positie van .tg-scene zet ThreeViewer.resize() (cover rond het ankerpunt); de drie lagen vullen
   het kader exact, dus ze schalen altijd samen. De container snijdt af wat buiten beeld valt.
   -------------------------------------------------------------------------- */

.tg-stage [x-ref="three"] {
    overflow: hidden;
}

.tg-scene {
    position: absolute;
    overflow: hidden;
}

/* Studio: geen omgevingsfoto, rustig lichtgrijs verloop (lichter boven, iets donkerder "vloer" onder) waarop de schaduw valt. */
.tg-scene--studio {
    background: linear-gradient(180deg, #F4F5F4 0%, #ECEDEB 55%, #DCDDDA 100%);
}

.tg-scene__background,
.tg .tg-stage .tg-scene__canvas,
.tg-scene__foreground {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.tg-scene__background,
.tg-scene__foreground {
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.tg-scene__foreground {
    z-index: 2;
}

/* Randverduistering over foto + render (TG.ThreeViewer, fotolook.vignet); verloop zelf wordt inline gezet. */
.tg-scene__vignette {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
}

/* Fotokorrel over foto + render (TG.ThreeViewer, instelling korrel). */
.tg-scene__grain {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background-size: 220px 220px;
    mix-blend-mode: overlay;
}

/* Instelmodus: roze hulplijn op de berekende horizon. */
.tg-scene__horizon {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed rgba(230, 0, 120, 0.85);
    pointer-events: none;
}

/* Instelmodus (?camera=instellen): camerawaarden linksonder in beeld, selecteerbaar om te kopiëren. */
.tg-scene__camera {
    position: absolute;
    z-index: 3;
    left: calc(var(--tg-panel-offset) + 40px);
    bottom: 80px;
    margin: 0;
    padding: 10px 14px;
    font: 600 12px/16px "IBM Plex Mono", Consolas, monospace;
    color: var(--tg-white);
    background: rgba(0, 0, 0, 0.75);
    border-radius: 3px;
    user-select: all;
    white-space: pre-wrap;
}

.tg-stage__flat {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--tg-stage-bg);
}

/* Bovenbalk rechts: taal + acties */

.tg-topbar {
    position: absolute;
    z-index: 40;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Uitklapmenu in de topbar (taal, woning): lijst zweeft rechts uitgelijnd onder de knop. */
.tg-menu {
    position: relative;
}

.tg .tg-menu__chevron {
    width: 11px;
    height: 6px;
    transition: transform 0.15s ease;
}

.tg-menu.is-open .tg-menu__chevron {
    transform: rotate(180deg);
}

.tg-menu__body {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 45;
    min-width: 100%;
    padding: 6px;
    white-space: nowrap;
    background: var(--tg-white);
    box-shadow: var(--tg-shadow);
}

.tg a.tg-option {
    text-decoration: none;
}

/* Taalkeuze: in Figma alleen witte tekst, maar die is onleesbaar op lichte texturen. Daarom als groene
   knop, zelfde hoogte (38px) en groen als de overige topbarknoppen; tekst blijft 600 12px. */
.tg .tg-lang__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    color: var(--tg-white);
    background: var(--tg-green);
    border: 1.5px solid var(--tg-green);
    box-shadow: var(--tg-shadow-soft);
    transition: background-color 0.15s ease;
}

.tg .tg-lang__toggle:hover {
    background: var(--tg-green-dark);
    border-color: var(--tg-green-dark);
}

.tg .tg-lang__toggle .tg-menu__chevron {
    width: 8px;
    height: 5px;
}

/* Figma: knoppen 38px hoog, 9/16.5 padding, 1.5px rand in knopkleur, 600 14/19.5.
   In Figma valt de rand binnen de maat; hier trekken we de 1.5px rand van de padding af. */
.tg .tg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7.5px;
    min-height: 38px;
    padding: 7.5px 15px;
    font-size: 14px;
    font-weight: 600;
    line-height: 19.5px;
    border-radius: var(--tg-radius);
    transition: background-color 0.15s ease;
}

.tg-btn svg {
    width: 16px;
    height: 16px;
}

/* .tg-prefix wint van de `.tg button { border:0 }`-reset zodat de knoprand rendert (zoals in het design). */
.tg .tg-btn--primary {
    background: var(--tg-green);
    color: var(--tg-white);
    border: 1.5px solid var(--tg-green);
}

.tg-topbar .tg-btn {
    box-shadow: var(--tg-shadow-soft);
}

.tg .tg-btn--primary:hover {
    background: var(--tg-green-dark);
    border-color: var(--tg-green-dark);
}

.tg .tg-btn--light {
    background: var(--tg-white);
    color: var(--tg-text);
    border: 1px solid var(--tg-gray-300);
}

.tg .tg-btn--light:hover {
    background: var(--tg-gray-100);
}

.tg .tg-btn--outline {
    background: rgba(43, 60, 54, 0.6);
    color: var(--tg-white);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.tg .tg-btn--outline:hover {
    background: rgba(43, 60, 54, 0.8);
}

/* Uitgeschakeld: geen transparantie (dan schijnt textuur/patroon erdoor), maar een dichte, gedempte knop.
   Een knop die bezig is (.is-busy, met spinner) houdt zijn gewone uiterlijk. */
.tg-btn:disabled {
    cursor: not-allowed;
}

.tg .tg-btn:disabled:not(.is-busy) {
    color: var(--tg-disabled-text);
    background: var(--tg-disabled-bg);
    border-color: var(--tg-disabled-bg);
}

/* Onderbalk midden: download/sample (latere fase zichtbaar) */

.tg-bottombar {
    position: absolute;
    z-index: 40;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

/* Decoratief ruitpatroon rechtsonder (Figma: 407x407, 50% x 50% dekking zit in de SVG zelf). */
.tg-stage__pattern {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    width: 407px;
    height: 407px;
    pointer-events: none;
    user-select: none;
}

/* Zoomknoppen (platte weergave): rechtsonder, boven elkaar zoals Google Maps. Ligt boven het patroon. */

.tg-zoom {
    position: absolute;
    z-index: 40;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 3D-standpunten (Woning / Gevel / Detail): rechtsonder, op de plek van de zoom, in de stijl van de tabs: groen, actief = wit (zoals een tab die open staat).
   Niet in Figma (daar zat vrij zoomen). Keuze 17-09-2026: vaste beelden die op elk scherm goed passen. */
.tg-standpunten {
    position: absolute;
    z-index: 40;
    right: 20px;
    bottom: 20px;
    display: flex;
    box-shadow: var(--tg-shadow-soft);
}

.tg .tg-standpunt {
    height: 38px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    color: var(--tg-white);
    background: var(--tg-green);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tg .tg-standpunt:hover {
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), var(--tg-green);
}

.tg .tg-standpunt.is-active {
    color: var(--tg-text);
    background: var(--tg-white);
}

/* Figma: witte vierkante knoppen 40px, zwart icoon 10-12px, 6px tussenruimte. */
.tg .tg-zoom__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--tg-text);
    background: var(--tg-white);
    border: 1.5px solid var(--tg-white);
    border-radius: 0;
}

.tg .tg-zoom__btn .tg-icon {
    width: 11px;
    height: 12px;
}

.tg .tg-zoom__btn:hover {
    background: var(--tg-gray-100);
}

/* Uitgeschakeld (max/min zoom): knop blijft wit en dicht, alleen het icoon wordt lichtgrijs. */
.tg .tg-zoom__btn:disabled {
    color: var(--tg-disabled-text);
    background: var(--tg-white);
    cursor: not-allowed;
}

/* Fout-/statusmelding op de stage (bv. niet-ondersteund verband) */

.tg-notice {
    position: absolute;
    z-index: 40;
    top: 50%;
    left: calc(50% + var(--tg-panel-offset) / 2);
    transform: translate(-50%, -50%);
    max-width: 420px;
    padding: 20px 24px;
    text-align: center;
    background: var(--tg-white);
    border-radius: var(--tg-radius);
    box-shadow: var(--tg-shadow);
}

.tg-notice--error {
    border-left: 4px solid var(--tg-error);
}

/* Foutmelding binnen een modal: overschrijf de absolute .tg-notice-positionering zodat de tekst gewoon inline in de
   modal staat (niet los zwevend/afgeknipt). Hoort in de basis-CSS, niet alleen in de media-query. */
.tg-modal .tg-modal__error {
    position: static;
    transform: none;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 10px 14px;
    text-align: left;
    box-shadow: none;
    border: 1px solid var(--tg-error);
}

/* Laadindicator */

.tg-loader {
    position: absolute;
    z-index: 50;
    top: 0;
    right: 0;
    bottom: 0;
    /* Over de hele stage, dus ook achter het zijpaneel (dat ligt er als eigen laag boven). De spinner blijft gecentreerd
       in het zichtbare deel naast het paneel. */
    left: 0;
    padding-left: var(--tg-panel-offset);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.65);
}

/* 3D laadt nog: dekkend, zodat het beeld niet zichtbaar half opbouwt. */
.tg-loader--dekkend {
    background: #EDEEEC;
}

/* Fade bij verdwijnen (x-transition:leave). */
.tg-loader--leave {
    transition: opacity 0.35s ease;
}

.tg-loader--visible {
    opacity: 1;
}

.tg-loader--hidden {
    opacity: 0;
}

.tg-loader__spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--tg-gray-300);
    border-top-color: var(--tg-green);
    border-radius: 50%;
    animation: tg-spin 0.8s linear infinite;
}

@keyframes tg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --------------------------------------------------------------------------
   Modal (download/leadformulier, latere fase — basis staat klaar)
   -------------------------------------------------------------------------- */

.tg-modal {
    position: absolute;
    z-index: 60;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 26, 34, 0.55);
}

.tg-modal__dialog {
    display: flex;
    flex-direction: column;
    width: 580px;
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow);
}

.tg-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 18px 24px;
    background: var(--tg-black);
    color: var(--tg-white);
}

.tg-modal__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.tg-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--tg-white);
    border: 1px solid var(--tg-white);
}

.tg-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 24px;
}

.tg-modal__section-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tg-green);
}

.tg-modal__summary {
    margin: 0 0 4px;
    color: var(--tg-text-muted);
}

.tg-modal__summary strong {
    color: var(--tg-text);
}

/* Formuliervelden met label op de rand (outlined) */

.tg-field {
    position: relative;
    margin-bottom: 16px;
}

.tg-field__label {
    position: absolute;
    top: -7px;
    left: 12px;
    padding: 0 4px;
    font-size: 12px;
    color: var(--tg-text-muted);
    background: var(--tg-white);
}

.tg-field__input,
.tg-field__select {
    width: 100%;
    padding: 13px 14px;
    font: inherit;
    color: var(--tg-text);
    background: var(--tg-white);
    border: 1px solid var(--tg-gray-400);
    border-radius: var(--tg-radius);
}

.tg-field__input:focus,
.tg-field__select:focus {
    outline: none;
    border-color: var(--tg-green);
}

.tg-field--invalid .tg-field__input,
.tg-field--invalid .tg-field__select {
    border-color: var(--tg-error);
}

.tg-field__error {
    margin-top: 4px;
    font-size: 12px;
    color: var(--tg-error);
}

.tg-field--row {
    display: flex;
    gap: 12px;
}

.tg-field--row > .tg-field {
    flex: 1 1 0;
    margin-bottom: 0;
}

.tg-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.tg-checkbox input {
    margin-top: 3px;
    accent-color: var(--tg-green);
}

.tg-checkbox a {
    color: inherit;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Onboarding: donkere overlay, uitgelicht element, tekst + voortgang
   -------------------------------------------------------------------------- */

.tg-onboarding {
    position: absolute;
    z-index: 200;
    inset: 0;
    /* Geen eigen achtergrond: het dimmen gebeurt via de box-shadow van het spotlight-gat. */
}

/* Spotlight-gat: transparant, maar de enorme box-shadow dimt de rest van de UI. */
.tg-onboarding__hole {
    position: absolute;
    border-radius: var(--tg-radius);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.tg-onboarding__text {
    position: absolute;
    left: calc(var(--tg-panel-offset) + 40px);
    max-width: 300px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tg-white);
}

.tg-onboarding__progress {
    position: absolute;
    bottom: 110px;
    left: calc(50% + var(--tg-panel-offset) / 2);
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.tg-onboarding__dash {
    width: 36px;
    height: 3px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
}

.tg-onboarding__dash.is-active {
    background: var(--tg-white);
}

.tg-onboarding__skip {
    position: absolute;
    bottom: 52px;
    left: calc(50% + var(--tg-panel-offset) / 2);
    transform: translateX(-50%);
}


/* --------------------------------------------------------------------------
   Onderbalk: zoom + acties (download textuur / sample aanvragen)
   -------------------------------------------------------------------------- */
/* Figma: 40px rechts van het paneel, 20px van de onderrand, 6px tussen de knoppen. */
.tg-stagebar {
    position: absolute;
    z-index: 40;
    bottom: 20px;
    left: calc(var(--tg-panel-offset) + 40px);
    right: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

.tg-stagebar > * {
    pointer-events: auto;
}

.tg-actions {
    display: flex;
    gap: 6px;
}

.tg .tg-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7.5px;
    height: 38px;
    padding: 7.5px 15px;
    font-size: 14px;
    font-weight: 600;
    line-height: 19.5px;
    border-radius: var(--tg-radius);
}

.tg .tg-action--download {
    color: var(--tg-green);
    background: var(--tg-white);
    border: 1.5px solid var(--tg-white);
}

.tg .tg-action--download:hover {
    background: var(--tg-gray-100);
    border-color: var(--tg-gray-100);
}

.tg .tg-action svg:not(.tg-icon) {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tg .tg-action .tg-icon {
    width: 12px;
    height: 16px;
}

.tg .tg-action .tg-icon--sample {
    width: 20px;
    height: 16px;
}

.tg-action__label {
    display: inline-flex;
    align-items: center;
    gap: 7.5px;
}

.tg-action.is-busy .tg-action__label {
    visibility: hidden;
}

.tg-action__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(0, 0, 0, 0.18);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: tg-action-spin 0.7s linear infinite;
}

@keyframes tg-action-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Modal: sample aanvragen (leadformulier)
   -------------------------------------------------------------------------- */
.tg-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(17, 17, 17, 0.55);
}

.tg-modal__dialog {
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--tg-white);
    border-radius: var(--tg-radius-lg);
    overflow: hidden;
    box-shadow: var(--tg-shadow);
}

.tg-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--tg-black);
    color: var(--tg-white);
}

.tg-modal__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.tg .tg-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 20px;
    line-height: 1;
    color: var(--tg-white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--tg-radius);
}

.tg-modal__body {
    padding: 24px;
    overflow-y: auto;
}

.tg-modal__label {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tg-text-muted);
    text-transform: uppercase;
}

.tg-config {
    margin: 0;
}

.tg-config__row {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 14px;
}

.tg-config__row dt {
    margin: 0;
    color: var(--tg-text-muted);
}

.tg-config__row dd {
    margin: 0;
    font-weight: 600;
    color: var(--tg-text);
}

.tg-modal__divider {
    border: 0;
    border-top: 1px solid var(--tg-gray-200);
    margin: 18px 0;
}

.tg-field {
    display: block;
    margin-bottom: 12px;
}

.tg-field__label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--tg-text-muted);
}

.tg .tg-field__input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--tg-text);
    background: var(--tg-white);
    border: 1px solid var(--tg-gray-400);
    border-radius: var(--tg-radius);
}

.tg .tg-field__input:focus {
    outline: 2px solid var(--tg-green);
}

.tg-field-row {
    display: flex;
    gap: 12px;
}

.tg-field-row .tg-field {
    flex: 1 1 0;
}

.tg-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--tg-text);
}

.tg-check input {
    margin-top: 2px;
}

.tg-modal__error {
    position: static;
    margin: 8px 0 0;
}

.tg-modal__files {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--tg-text-muted);
}

.tg-modal__submit {
    width: 100%;
    min-width: 0;
}

.tg-modal__done {
    text-align: center;
    padding: 12px 0 4px;
}

.tg-modal__done p {
    margin: 0 0 18px;
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   Responsive
   - Desktop (> 1200px): zoals Figma "→ Claude" (1728x1117).
   - Laptop / tablet liggend (901-1200px): zelfde opbouw, smaller paneel en marges.
   - Mobiel (<= 900px): opbouw volgens Figma pagina "Mobiel" (402x874): beeld bovenin, tabbalk eronder,
     paneel klapt uit onder de tabs (beeld wordt dan 245px), zwarte actiebalk vast onderin.
     Open/dicht via mobilePanelOpen (class .is-panel-open) in texture-generator.app.js; grens = MOBILE_BREAKPOINT.
   -------------------------------------------------------------------------- */

/* Desktop: de groep weergaveknoppen gedraagt zich als losse knoppen in de topbar; inklapknop alleen mobiel. */
.tg-viewswitch {
    display: contents;
}

.tg .tg-rail__collapse {
    display: none;
}

@media (max-width: 1200px) {
    .tg {
        --tg-rail-width: 72px;
        /* Paneel bijna even breed als desktop: smaller geeft afgekapte steennamen in de selectie. */
        --tg-panel-width: 330px;
        --tg-edge-offset: 12px;
    }

    .tg .tg-rail__item {
        height: 84px;
    }

    .tg-panel__title {
        padding: 32px 32px 0;
    }

    .tg-panel__title::after {
        left: 32px;
    }

    .tg-panel__body {
        padding-left: 32px;
    }

    .tg-stagebar {
        left: calc(var(--tg-panel-offset) + 20px);
    }
}

@media (max-width: 900px) {
    .tg {
        --tg-rail-width: 0px;
        --tg-panel-width: 0px;
        --tg-edge-offset: 0px;
        --tg-mobile-bar: 70px;
        --tg-mobile-tabs: 92px;
        --tg-mobile-stage-open: 245px;
        /* Beeldhoogte bij dicht paneel: schermhoogte min tabbalk en actiebalk (min. 560px totaal, zie min-height). */
        --tg-mobile-stage-full: calc(max(560px, 100vh) - var(--tg-mobile-bar) - var(--tg-mobile-tabs));
        flex-direction: column;
        /* Schermvullend (Figma), ook als de pagina de generator in een container met marges zet. */
        width: 100vw;
        margin-left: calc(50% - 50vw);
        height: 100vh;
        height: 100dvh;
        --tg-mobile-stage-full: calc(max(560px, 100dvh) - var(--tg-mobile-bar) - var(--tg-mobile-tabs));
        min-height: 560px;
        /* Ruimte voor de vaste actiebalk onderin. */
        padding-bottom: var(--tg-mobile-bar);
    }

    .tg::before {
        display: none;
    }

    /* Volgorde: beeld, tabs, paneel. */
    /* Beeld: vaste hoogte (scherm min tabbalk en actiebalk), bij open paneel 245px. Een echte hoogte (geen flex: auto) zodat
       de overgang soepel animeert; de 3D-weergave past zich elk tussenbeeld aan (ResizeObserver), dus het huis verkleint vloeiend. */
    .tg-stage {
        order: 1;
        position: relative;
        inset: auto;
        flex: 0 0 auto;
        height: var(--tg-mobile-stage-full);
        overflow: hidden;
        transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tg.is-panel-open .tg-stage {
        height: var(--tg-mobile-stage-open);
    }

    /* Platte textuur: altijd de volle hoogte, ook als het paneel open is (het beeld snijdt hem dan af). Zo hoeft hij bij
       in- en uitklappen niet opnieuw getekend te worden en verspringt of flikkert er niets. */
    .tg .tg-stage canvas.tg-stage__canvas {
        bottom: auto;
        height: var(--tg-mobile-stage-full);
    }

    /* Tabbalk: vier gelijke tabs over de volle breedte. Rail wordt "static" zodat het logo in het beeld kan staan. */
    .tg-rail {
        order: 2;
        position: static;
        flex: 0 0 var(--tg-mobile-tabs);
        width: 100%;
        margin: 0;
        overflow: visible;
    }

    .tg-rail__logo {
        position: absolute;
        z-index: 41;
        top: 20px;
        left: 20px;
        height: auto;
        padding: 0;
    }

    .tg-rail__logo img,
    .tg-rail__logo svg {
        width: 64px;
        height: 64px;
    }

    .tg-rail__tabs {
        position: relative;
        z-index: 30;
        flex-direction: row;
        height: var(--tg-mobile-tabs);
    }

    .tg .tg-rail__item {
        flex: 1 1 0;
        height: var(--tg-mobile-tabs);
        border-left: 1px solid rgba(0, 0, 0, 0.35);
    }

    .tg .tg-rail__item:first-child {
        border-left: 0;
    }

    /* Opslaan / Mijn collectie: nog geen mobiel ontwerp, voorlopig verborgen. */
    .tg-rail__actions {
        display: none;
    }

    .tg .tg-rail__collapse {
        position: absolute;
        z-index: 35;
        left: 50%;
        /* Op de naad tussen tabs en paneel (beeld is dan ingeklapt tot --tg-mobile-stage-open). */
        top: calc(var(--tg-mobile-stage-open) + var(--tg-mobile-tabs) - 18px);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        color: var(--tg-white);
        background: var(--tg-black);
        border-radius: 50%;
        transform: translateX(-50%);
    }

    /* Paneel: alleen zichtbaar als het is uitgeklapt, vult de ruimte tussen tabs en actiebalk. */
    .tg-panel {
        order: 3;
        display: none;
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        margin: 0;
    }

    .tg.is-panel-open .tg-panel {
        display: flex;
    }

    .tg-panel__title {
        padding: 28px 20px 0;
    }

    .tg-panel__title::after {
        left: 20px;
        right: 28px;
    }

    .tg-panel__body {
        margin-bottom: 0;
        padding: 10px 10px 24px 20px;
    }

    /* Beeld: taal rechtsboven, weergaveknoppen als icoongroepje linksonder (Figma). De topbar beslaat het hele beeld
       (klikken gaan erdoorheen), zodat beide groepjes t.o.v. het beeld geplaatst kunnen worden. */
    .tg-topbar {
        inset: 20px;
        display: block;
        pointer-events: none;
    }

    .tg-topbar > * {
        pointer-events: auto;
    }

    .tg-topbar .tg-lang {
        position: absolute;
        top: 0;
        right: 0;
    }

    .tg-viewswitch {
        position: absolute;
        z-index: 40;
        left: 0;
        bottom: 0;
        display: flex;
        gap: 0;
    }

    .tg .tg-viewswitch .tg-btn {
        min-height: 38px;
        padding: 9px 12px;
        gap: 8px;
        background: rgba(56, 78, 70, 0.9);
    }

    .tg-viewswitch .tg-btn__label {
        display: none;
    }

    .tg-viewswitch .tg-menu__body {
        top: auto;
        bottom: calc(100% + 4px);
        right: auto;
        left: 0;
    }

    .tg-stage__pattern {
        width: 230px;
        height: 230px;
    }

    .tg-zoom {
        right: 20px;
        bottom: 20px;
    }

    .tg-standpunten {
        right: 20px;
        bottom: 20px;
    }

    .tg .tg-standpunt {
        height: 38px;
        padding: 0 12px;
        font-size: 13px;
        line-height: 38px;
    }

    .tg .tg-zoom__btn {
        width: 36px;
        height: 36px;
    }

    /* Beeld ingeklapt tot 245px: zoom en patroon zouden het beeld volzetten. */
    .tg.is-panel-open .tg-zoom,
    .tg.is-panel-open .tg-stage__pattern {
        display: none;
    }

    /* Actiebalk: vast onderin het scherm, zwart, twee even brede knoppen. */
    .tg-stagebar {
        position: fixed;
        z-index: 60;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--tg-mobile-bar);
        padding: 16px 20px;
        background: var(--tg-black);
        pointer-events: auto;
    }

    .tg-stagebar .tg-actions {
        flex: 1 1 auto;
    }

    .tg .tg-stagebar .tg-action {
        flex: 1 1 0;
        min-width: 0;
        padding: 7.5px 10px;
        white-space: nowrap;
    }

    .tg .tg-stagebar .tg-btn--primary.tg-action {
        background: transparent;
        border: 1.5px solid var(--tg-white);
        color: var(--tg-white);
    }

    .tg-notice {
        left: 50%;
        max-width: calc(100% - 40px);
    }

    .tg-onboarding__text {
        max-width: calc(100% - 40px);
        font-size: 17px;
    }
}


/* Twee gestapelde keuzeknoppen (bijwerken / als nieuwe) in de opslaan-modal. */
.tg-modal__submit + .tg-modal__submit {
    margin-top: 10px;
}

/* Loader in de opslaan-modal (ingelogd, tijdens verzenden). */
.tg-modal__spinner {
    display: block;
    width: 40px;
    height: 40px;
    margin: 6px auto 16px;
}

/* Bevestigingsvinkje: verschijnt met een subtiele pop-in. */
.tg-modal__check {
    display: block;
    margin: 4px auto 14px;
    animation: tg-modal-check-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tg-modal-check-pop {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Toegankelijkheid en bediening (review 18-09-2026)
   - Toetsenbord: duidelijke focusrand (alleen bij tab-navigatie, niet bij klikken).
   - Tikdoelen: minimaal ± 44px raakvlak. Waar het ontwerp kleiner is, wordt alleen het raakvlak groter (onzichtbare rand
     via ::after), zodat het er hetzelfde uitziet. Op aanraakschermen (pointer: coarse) worden schuifregelaars ook groter.
   -------------------------------------------------------------------------- */
.tg button:focus-visible,
.tg a:focus-visible,
.tg [role="button"]:focus-visible,
.tg [tabindex]:focus-visible {
    outline: 2px solid var(--tg-green);
    outline-offset: 2px;
}

.tg .tg-rail__item:focus-visible {
    outline-color: var(--tg-white);
    outline-offset: -4px;
}

.tg .tg-selection__remove,
.tg .tg-selection__header,
.tg .tg-swatches .tg-swatch,
.tg .tg-zoom__btn,
.tg .tg-search__clear {
    position: relative;
}

.tg .tg-selection__remove::after { content: ""; position: absolute; inset: -12px; }
.tg .tg-selection__header::after { content: ""; position: absolute; inset: -11px 0; }
.tg .tg-swatches .tg-swatch::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.tg .tg-search__clear::after { content: ""; position: absolute; inset: -10px; }

@media (pointer: coarse) {
    .tg .tg-range {
        height: 40px;
    }

    .tg .tg-range::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
        margin-top: -9px;
    }

    .tg .tg-range::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }

    .tg .tg-range {
        --tg-range-fill: calc(14px + (100% - 28px) * var(--tg-range-ratio, 0));
    }

    .tg .tg-zoom__btn {
        width: 44px;
        height: 44px;
    }

    .tg .tg-standpunt {
        height: 44px;
        line-height: 44px;
    }
}

/* Formaat/breedte: naam op één regel (… + volledige naam als tooltip), zodat de maat er altijd direct onder staat en
   rijen gelijk blijven (review 18-09-2026; "BSF (British Standard Format)" brak over twee regels). */
.tg-card__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Overzicht "Jouw textuur" onderin het paneel (review 18-09-2026). Grijs vlak over de volle paneelbreedte, rond zwart
   bolletje met pijl op de bovenrand (zelfde als de inklapknop op mobiel). Regels in de stijl van de tabs: beeld 88x37,
   naam 700 12/16, maat/uitleg grijs 600 12/16, breuk als groene pil. Klik op een regel = naar die tab.
   -------------------------------------------------------------------------- */
.tg-panel__body {
    margin-bottom: 20px;
}

.tg-summary {
    position: relative;
    flex: 0 0 auto;
    padding: 22px 28px 20px 40px;
    background: var(--tg-gray-100);
}

.tg .tg-summary__toggle {
    position: absolute;
    top: -18px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--tg-white);
    background: var(--tg-black);
    border-radius: 50%;
    transform: translateX(-50%);
}

.tg .tg-summary__toggle .tg-icon {
    width: 11px;
    height: 6px;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.tg .tg-summary.is-open .tg-summary__toggle .tg-icon {
    transform: rotate(0deg);
}

.tg .tg-summary__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 0;
    text-align: left;
}

.tg-summary__title {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 800;
    line-height: 22px;
    color: var(--tg-text);
}

.tg-summary__line {
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--tg-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-summary__body {
    display: flex;
    flex-direction: column;
    gap: var(--tg-item-gap);
    margin-top: 12px;
}

.tg .tg-summary__row {
    display: flex;
    align-items: center;
    gap: var(--tg-thumb-text-gap);
    width: 100%;
    min-height: var(--tg-thumb-height);
    padding: 0;
    text-align: left;
}

.tg .tg-summary__row:hover .tg-summary__name {
    color: var(--tg-green);
}

.tg-summary__visual {
    flex: 0 0 var(--tg-thumb-width);
    width: var(--tg-thumb-width);
    height: var(--tg-thumb-height);
    overflow: hidden;
    border-radius: 1px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.08);
}

span.tg-summary__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tg-summary__visual--format {
    justify-content: flex-start !important;
    background: transparent;
}

.tg-summary__visual--bond {
    padding: 4px;
}

.tg-summary__visual--bond img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Voeg: vak in de voegkleur met de voegstructuur van de generator (vermenigvuldigd, zoals in de textuur). */
.tg-summary__visual--joint {
    background-image: url("/texturegenerator/img/voeg_textuur.jpg");
    background-size: 140px auto;
    background-blend-mode: multiply;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.tg-summary__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.tg-summary__name {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--tg-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.tg-summary__meta {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--tg-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1200px) {
    .tg-summary {
        padding-left: 32px;
    }
}

@media (max-width: 900px) {
    .tg-summary {
        padding: 22px 20px 16px;
    }

    .tg-summary__body {
        max-height: 40vh;
        overflow-y: auto;
    }
}

/* Knop "Andere verdeling": vierkant, wit (zoals Download), icoon met twee draaiende pijlen; draait kort bij klikken. */
.tg .tg-action--icon {
    width: 38px;
    padding: 0;
    color: var(--tg-green);
    background: var(--tg-white);
    border: 1.5px solid var(--tg-white);
}

.tg .tg-action--icon:hover {
    background: var(--tg-gray-100);
    border-color: var(--tg-gray-100);
}

.tg .tg-action__refresh {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.4s ease;
}

.tg .tg-action--icon:active .tg-action__refresh {
    transform: rotate(180deg);
}

@media (max-width: 900px) {
    .tg .tg-stagebar .tg-action--icon {
        flex: 0 0 38px;
    }
}

/* Mobiel: Opslaan en Mijn collectie als icoonknoppen rechtsboven (review 18-09-2026). Desktop/tablet: verborgen (rail). */
.tg-mobile-actions {
    display: none;
}

@media (max-width: 900px) {
    .tg-topbar .tg-mobile-actions {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        gap: 6px;
    }

    /* Taalkeuze schuift links naast de iconen. */
    .tg-topbar .tg-mobile-actions ~ .tg-lang,
    .tg-topbar .tg-lang {
        right: 100px;
    }

    .tg .tg-mobile-actions__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: var(--tg-white);
        background: rgba(3, 3, 3, 0.85);
    }

    .tg .tg-mobile-actions__btn .tg-icon--save { width: 16px; height: 16px; }
    .tg .tg-mobile-actions__btn .tg-icon--folder { width: 22px; height: 20px; }
}

/* Vergrootglas op een verbandtegel (linksboven; het vinkje zit rechtsboven). */
.tg-bond__zoom {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--tg-text);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: zoom-in;
}

.tg-bond__zoom::after {
    content: "";
    position: absolute;
    inset: -9px;
}

.tg .tg-bond__zoom svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.2;
}

.tg-bond:hover .tg-bond__zoom,
.tg-bond:focus-within .tg-bond__zoom,
.tg-bond__zoom:focus-visible {
    opacity: 1;
}

/* Aanraakschermen: vergrootglas altijd zichtbaar (geen hover). */
@media (hover: none) {
    .tg-bond__zoom {
        opacity: 1;
    }
}

/* Vergroting: over de stage, naast het paneel. Los (hover) = alleen kijken; vast = met achtergrond, kiezen en sluiten. */
.tg-bondzoom {
    position: absolute;
    z-index: 55;
    inset: 0 0 0 var(--tg-panel-offset);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    pointer-events: none;
}

.tg-bondzoom.is-pinned {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.35);
}

.tg-bondzoom__card {
    width: min(640px, 100%);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow);
    pointer-events: auto;
}

.tg-bondzoom__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: min(420px, 50vh);
    padding: 24px;
    background: rgba(0, 0, 0, 0.08);
}

.tg-bondzoom__visual img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.tg-bondzoom__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
}

.tg-bondzoom__name {
    font-size: 14px;
    font-weight: 800;
    line-height: 22px;
}

.tg-bondzoom__meta {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--tg-text-secondary);
}

.tg-bondzoom__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tg .tg-bondzoom__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--tg-gray-100);
}

.tg .tg-bondzoom__close .tg-icon {
    width: 10px;
    height: 12px;
}

@media (max-width: 900px) {
    .tg-bondzoom {
        position: fixed;
        inset: 0;
        padding: 16px;
    }

    .tg-bondzoom__visual {
        height: 44vh;
        padding: 16px;
    }
}

/* Laadvoortgang 3D onder de spinner (review 18-09-2026). */
.tg-loader {
    flex-direction: column;
    gap: 16px;
}

.tg-loader__progress {
    width: 220px;
    text-align: center;
}

.tg-loader__bar {
    height: 4px;
    overflow: hidden;
    background: var(--tg-gray-300);
    border-radius: 2px;
}

.tg-loader__bar span {
    display: block;
    height: 100%;
    background: var(--tg-green);
    transition: width 0.2s ease;
}

.tg-loader__label {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--tg-text-secondary);
}

/* Lichte stand (zwakker toestel of "verminder beweging"): geen overgangen/animaties in de interface, alles direct.
   De laadspinner blijft draaien (die laat zien dat er iets gebeurt). */
.tg.tg--lite *,
.tg.tg--lite *::before,
.tg.tg--lite *::after {
    transition: none !important;
}

/* Grotere raakvlakken mogen geen horizontale scrollbalk in het paneel geven. */
.tg-panel__body {
    overflow-x: hidden;
}

@media (max-width: 900px) {
    /* Vergroting verband: staat buiten de stage, over het hele scherm. */
    .tg-bondzoom {
        position: absolute;
        inset: 0;
        z-index: 70;
    }

    /* Actiebalk met drie knoppen: compacter, zodat Download en Sample er naast de variatieknop volledig in passen. */
    .tg .tg-stagebar .tg-actions {
        gap: 6px;
        min-width: 0;
    }

    .tg .tg-stagebar .tg-action:not(.tg-action--icon) {
        padding: 7.5px 8px;
        font-size: 13px;
        gap: 6px;
    }
}

@media (max-width: 420px) {
    .tg .tg-stagebar .tg-action:not(.tg-action--icon) .tg-icon {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Mobiel-herziening 18-09-2026: meer ruimte om te kiezen, scherper beeld, rustig en "premium" afgewerkt.
   - Tabs als echte tabs: de actieve tab is wit, steekt met een lipje van 6px boven de rij uit (over het beeld) en loopt
     naadloos over in het witte paneel, zoals een tabblad. Alle tabs houden dezelfde maat, dus bij wisselen verschuift niets. Onder de naam de gekozen waarde, zodat het grijze overzicht
     "Jouw textuur" op mobiel niet meer nodig is.
   - Paneel = "bottom sheet": greepje bovenin (tik = sluiten), slepen over greepje of tabs = compact (beeld 150px), open
     (245px) of dicht (beeldvullend), zie MOBILE_SHEET_SNAPS in app.js. Titel alleen voor schermlezers, zoeken en structuur
     op één regel, actiebalk alleen bij dicht paneel.
   - 3D: het huis blijft staan; alleen het zichtbare venster schuift mee (--tg-three-shift, _setThreeShift in app.js).
   -------------------------------------------------------------------------- */
.tg-filterbar {
    display: contents;
}

.tg-rail__value,
.tg-sheet-grip {
    display: none;
}

@media (max-width: 900px) {
    .tg {
        --tg-mobile-tabs: 84px;
        --tg-mobile-tab-rise: 6px;       /* lipje van de actieve tab boven de rij */
        /* Geen paginazoom door knijpen of dubbeltikken; scrollen mag (knijpen vangt de generator zelf af). */
        touch-action: pan-x pan-y;
    }

    /* Tijdens slepen volgt het beeld de vinger direct (geen transitie). */
    .tg.is-sheet-dragging .tg-stage,
    .tg.is-sheet-dragging .tg-stagebar,
    .tg.is-sheet-dragging .tg-stage div.tg-stage__canvas {
        transition: none;
    }

    /* De losse zwarte bolknop is vervangen door het greepje in het paneel. */
    .tg .tg-rail__collapse {
        display: none !important;
    }

    /* Tabbalk: vier tabs met een naad van 1px ertussen (zoals voorheen de lijn tussen de tabs); zachte schaduw omhoog over het beeld (paneel ligt "op" het beeld).
       De balk is ook de greep om te slepen, dus verticaal slepen mag de pagina niet laten scrollen. */
    .tg .tg-rail__tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: 100%;
        column-gap: 1px;
        align-items: stretch;
        overflow: visible;
        /* Dekkend (groen met 35% zwart), anders schijnt het beeld door de naden. */
        background: #25332e;
        /* Schaduw alleen omhoog (negatieve spreiding), niet als waas over het paneel eronder. */
        box-shadow: 0 -14px 24px -10px rgba(0, 0, 0, 0.3);
        touch-action: none;
    }

    .tg .tg-rail__item {
        gap: 0;
        min-width: 0;
        position: relative;
        height: 100%;
        padding: 10px 6px 12px;
        border-left: 0;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* Lipje: de open tab steekt boven de rij uit. Alleen transform (geen maat), dus niets verschuift. */
    .tg .tg-rail__item::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: var(--tg-mobile-tab-rise);
        background: var(--tg-white);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.2s ease;
        pointer-events: none;
    }

    .tg.is-panel-open .tg-rail__item.is-active::before {
        transform: scaleY(1);
    }

    /* Paneel dicht: er is niets open, dus ook geen actieve tab. */
    .tg:not(.is-panel-open) .tg-rail__item.is-active {
        background: var(--tg-green);
        color: var(--tg-white);
    }

    .tg .tg-rail__item > .tg-icon {
        width: 24px;
        height: 26px;
        margin-bottom: 5px;
    }

    .tg-rail__label {
        font-size: 12px;
        font-weight: 700;
        line-height: 14px;
    }

    .tg-rail__value {
        display: block;
        max-width: 100%;
        margin-top: 3px;
        font-size: 11px;
        font-weight: 600;
        line-height: 13px;
        text-align: center;
        opacity: 0.7;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tg-rail__dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        margin: -2px 4px 0 0;
        vertical-align: middle;
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
    }

    .tg .tg-rail__item.is-active .tg-rail__dot {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    }

    /* Greepje boven de tabs, op het beeld: wit met zachte schaduw (leesbaar op elke foto/textuur). Raakvlak 64x28px. */
    .tg .tg-sheet-grip {
        display: block;
        position: absolute;
        z-index: 3;
        left: 50%;
        bottom: calc(100% + 8px);
        width: 64px;
        height: 28px;
        margin-left: -32px;
        padding: 0;
        background: transparent;
        cursor: grab;
        touch-action: none;
        /* Schaduw over beide staafjes samen (per staafje gaf een grijs puntje waar ze overlappen). */
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    }

    /* Twee staafjes: dicht = één vlak streepje, open = gekanteld tot een pijl omlaag (sluiten). Dekkend wit, zodat je op de
       overlap geen dubbel wit ziet. */
    .tg-sheet-grip span {
        position: absolute;
        bottom: 6px;
        width: 21px;
        height: 5px;
        border-radius: 3px;
        background: #fff;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tg-sheet-grip span:first-child {
        right: 50%;
        margin-right: -1.5px;
        transform-origin: right center;
    }

    .tg-sheet-grip span:last-child {
        left: 50%;
        margin-left: -1.5px;
        transform-origin: left center;
    }

    .tg.is-panel-open .tg-sheet-grip span:first-child {
        transform: rotate(20deg);
    }

    .tg.is-panel-open .tg-sheet-grip span:last-child {
        transform: rotate(-20deg);
    }

    .tg .tg-sheet-grip:focus-visible {
        outline-offset: -2px;
    }

    /* Eerste bezoek: het paneel wipt één keer kort omhoog (hint: je kunt het omhoog halen). Zie _hintSheet in app.js. */
    .tg.is-sheet-hint .tg-rail {
        animation: tg-sheet-hint 0.9s cubic-bezier(0.3, 0, 0.3, 1) 1;
    }

    @keyframes tg-sheet-hint {
        0%, 100% { transform: translateY(0); }
        40% { transform: translateY(-14px); }
        70% { transform: translateY(0); }
        85% { transform: translateY(-4px); }
    }

    /* Scrollbalk van het paneel: telefoons tonen zelf een (verdwijnende) balk; de vaste grijze balk oogde als een blokje. */
    .tg .tg-panel__body {
        scrollbar-width: none;
    }

    .tg .tg-panel__body::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    /* Paneel: titel alleen voor schermlezers; het verloop bij scrollen (::after) blijft. */
    .tg .tg-panel__title {
        height: 0;
        padding: 0;
        font-size: 0;
        line-height: 0;
        color: transparent;
    }

    .tg .tg-panel__title::after {
        top: 0;
    }

    .tg .tg-panel__body {
        padding-top: 24px;
    }

    .tg-filterbar {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
    }

    .tg-filterbar .tg-search {
        flex: 1 1 58%;
        min-width: 0;
        margin: 0;
    }

    .tg-filterbar .tg-dropdown {
        flex: 1 1 42%;
        min-width: 0;
    }

    .tg-filterbar .tg-dropdown__body {
        left: auto;
        min-width: 220px;
    }

    /* Overzicht: de tabs tonen de keuzes al. */
    .tg .tg-summary {
        display: none;
    }

    /* Actiebalk schuift weg zodra het paneel open is; het paneel loopt dan door tot onderin. */
    .tg-stagebar {
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tg.is-panel-open .tg-stagebar {
        transform: translateY(100%);
        pointer-events: none;
    }

    .tg.is-panel-open {
        padding-bottom: 0;
    }

    /* 3D: altijd op volle hoogte (niet opnieuw berekenen); bij open paneel schuift het venster zodat het huis in beeld blijft.
       Zelfde duur en curve als de hoogte van het beeld, dus het huis staat stil terwijl het paneel eroverheen komt. */
    .tg .tg-stage div.tg-stage__canvas {
        bottom: auto;
        height: var(--tg-mobile-stage-full);
        transform: translateY(var(--tg-three-shift, 0px));
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Compacte stand (beeld 150px): logo en standpuntknoppen weg, anders staat het beeld vol. */
    .tg.is-sheet-compact .tg-rail__logo,
    .tg.is-sheet-compact .tg-standpunten {
        display: none;
    }
}

@media (max-width: 900px) {
    /* Scrollen in het paneel "lekt" niet door naar de pagina (anders: omlaag trekken = vernieuwen op de iPhone). */
    .tg .tg-panel__body {
        overscroll-behavior: contain;
    }
}