/* TopTex productpagina - texworx.be (accent #e9500e) */
:root { --tt-accent: #e9500e; --tt-ink: #1f1d1b; --tt-muted: #6b665f; --tt-line: #e6e1da; --tt-soft: #fbf3ee; }

.toptex-prijs-op-aanvraag { font-weight: 600; color: var(--tt-accent); }

.toptex-config { margin: 8px 0 24px; font-size: 15px; color: var(--tt-ink); }
.toptex-config__ref { display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; color: var(--tt-muted); font-size: 14px; }
.toptex-config__brand { font-weight: 700; color: var(--tt-ink); text-transform: uppercase; letter-spacing: .04em; }
.toptex-config__row { margin-bottom: 16px; }
.toptex-config__label { font-weight: 600; margin-bottom: 8px; }
.toptex-config__current { font-weight: 400; color: var(--tt-muted); margin-left: 6px; }
.toptex-config__hint { margin: 6px 0 0; font-size: 13px; color: var(--tt-muted); }

.toptex-swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.toptex-swatch { width: 46px; height: 46px; border-radius: 8px; border: 2px solid var(--tt-line); background: #fff; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 2px; transition: border-color .15s, transform .15s; }
.toptex-swatch img { width: 100%; height: 100%; object-fit: contain; display: block; }
.toptex-swatch__dot { width: 100%; height: 100%; border-radius: 6px; display: block; }
.toptex-swatch:hover { border-color: #c9c2b8; transform: translateY(-1px); }
.toptex-swatch.is-active { border-color: var(--tt-accent); box-shadow: 0 0 0 2px rgba(233,80,14,.2); }
.toptex-swatch:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 2px; }

/* Aantal per maat, meteen zichtbaar */
.toptex-qtygrid { display: flex; flex-wrap: wrap; gap: 8px; }
.toptex-qtycell { display: flex; flex-direction: column; gap: 3px; width: 68px; }
.toptex-qtycell__lbl { font-size: 12.5px; font-weight: 600; text-align: center; }
.toptex-qtycell__lbl.is-new::after { content: "•"; color: var(--tt-accent); margin-left: 3px; }
.toptex-qtycell input { width: 100%; padding: 8px 6px; text-align: center; border: 1px solid var(--tt-line); border-radius: 6px; background: #fff; font-size: 15px; -moz-appearance: textfield; }
.toptex-qtycell input:focus { outline: none; border-color: var(--tt-accent); box-shadow: 0 0 0 2px rgba(233,80,14,.18); }
.toptex-qtygrid--flash .toptex-qtycell input { border-color: var(--tt-accent); box-shadow: 0 0 0 2px rgba(233,80,14,.28); }
.toptex-config__total { margin: 10px 0 0; font-size: 14px; }
.toptex-config__total strong { color: var(--tt-accent); }
.toptex-quote__recap { padding: 10px 12px; background: #fff; border: 1px solid var(--tt-line); border-radius: 8px; margin-bottom: 14px; font-size: 14px; }

.toptex-config__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.toptex-fiche-fab { font-size: 13px; color: var(--tt-muted); text-decoration: underline; }
.toptex-fiche-fab:hover { color: var(--tt-accent); }
.toptex-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 8px; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; border: 2px solid var(--tt-accent); transition: background .15s, color .15s, transform .15s; }
.toptex-btn--primary { background: var(--tt-accent); color: #fff !important; }
.toptex-btn--primary:hover { background: #cf460c; border-color: #cf460c; color: #fff; }
.toptex-btn--ghost { background: #fff; color: var(--tt-accent) !important; }
.toptex-btn--ghost:hover { background: var(--tt-soft); }
.toptex-btn:disabled { opacity: .6; cursor: wait; }

.toptex-quote { margin-top: 20px; padding: 20px; border: 1px solid var(--tt-line); border-radius: 12px; background: var(--tt-soft); }
.toptex-quote[hidden] { display: none; }
.toptex-quote__title { margin: 0 0 4px; font-size: 20px; }
.toptex-quote__intro { margin: 0 0 14px; color: var(--tt-muted); font-size: 14px; }
.toptex-quote__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.toptex-qty { display: flex; flex-direction: column; gap: 4px; width: 78px; }
.toptex-qty span { font-size: 12.5px; font-weight: 600; text-align: center; }
.toptex-qty input { width: 100%; padding: 8px 6px; text-align: center; border: 1px solid var(--tt-line); border-radius: 6px; background: #fff; font-size: 15px; }
.toptex-quote__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.toptex-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.toptex-field span { font-size: 13px; font-weight: 600; }
.toptex-field input, .toptex-field textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--tt-line); border-radius: 6px; background: #fff; font-size: 15px; font-family: inherit; }
.toptex-field input:focus, .toptex-field textarea:focus, .toptex-qty input:focus { outline: none; border-color: var(--tt-accent); box-shadow: 0 0 0 2px rgba(233,80,14,.18); }
.toptex-field--full { grid-column: 1 / -1; }
.toptex-field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.toptex-quote__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.toptex-quote__msg { margin: 12px 0 0; font-weight: 600; }
.toptex-quote__msg.is-ok { color: #2e7d32; }
.toptex-quote__msg.is-error { color: #c62828; }
@media (max-width: 640px) { .toptex-quote__grid { grid-template-columns: 1fr; } }

/* Tabs: specificaties en maattabel */
.toptex-table-wrap { overflow-x: auto; }
.toptex-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0 0 12px; }
.toptex-table th, .toptex-table td { padding: 8px 10px; border-bottom: 1px solid var(--tt-line); text-align: left; vertical-align: top; }
.toptex-table--specs th { width: 180px; color: var(--tt-muted); font-weight: 600; }
.toptex-table--sizes thead th { background: var(--tt-soft); font-weight: 700; white-space: nowrap; }
.toptex-table--sizes tbody th { font-weight: 700; }
.toptex-table--sizes td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.toptex-note { font-size: 13px; color: var(--tt-muted); }
.toptex-specs__h { margin: 18px 0 8px; font-size: 16px; }
.toptex-picto { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.toptex-picto li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--tt-line); border-radius: 999px; font-size: 13.5px; background: #fff; }
.toptex-picto img { width: 22px; height: 22px; object-fit: contain; }
.toptex-specs__fiche { margin-top: 14px; }

/* Vierkant beeldkader in rasters: beelden zijn al vierkant, kader houdt verhouding vast */
.woocommerce ul.products li.product .toptex-bekijk { margin-top: 8px; }

/* FAQ (AEO) */
.toptex-faq__item { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--tt-line); }
.toptex-faq__item:last-child { border-bottom: 0; }
.toptex-faq__q { margin: 0 0 4px; font-size: 16px; }
.toptex-faq__a { color: var(--tt-ink); font-size: 14.5px; }

/* Voorraad-indicatie per maat */
.toptex-stock { display:block; margin-top:3px; font-size:10.5px; line-height:1.2; text-align:center; }
.toptex-stock--in  { color:#3d7a4a; }
.toptex-stock--low { color:#a3630f; }
.toptex-stock--out { color:#8a8078; }
.toptex-stock--in::before, .toptex-stock--low::before, .toptex-stock--out::before { content:"●"; margin-right:3px; }

/* Kleur toevoegen aan aanvraag */
.toptex-addcolour { margin-top:10px; background:none; border:0; padding:2px 0; color:var(--tt-accent); font-weight:600; font-size:14px; cursor:pointer; }
.toptex-addcolour:hover { text-decoration:underline; }

/* Aanvraaglijst (meerdere kleuren) */
.toptex-lines__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.toptex-lines__item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--tt-line); border-radius:8px; background:#fff; font-size:14px; }
.toptex-lines__sw { width:16px; height:16px; border-radius:4px; border:1px solid #ccc; flex:0 0 auto; }
.toptex-lines__txt { flex:1; }
.toptex-lines__del { background:none; border:0; color:var(--tt-muted); font-size:20px; line-height:1; cursor:pointer; padding:0 4px; }
.toptex-lines__del:hover { color:#c62828; }
.toptex-recap__tot { margin-top:8px; padding-top:6px; border-top:1px solid var(--tt-line); }