/*
 * Toestelkiezer — "Selecteer een smartphone".
 *
 * HERKOMST VAN DE WAARDEN
 * -----------------------
 * Zelfde werkwijze als `comparison.css`: de originele vergelijker is een
 * React-widget met styled-components, dus er bestaat geen bron-CSS-bestand. De
 * waarden hieronder komen uit de geëxtraheerde componenten in
 * `_migration/raw/tds/extracted_css.txt` en uit het thema in
 * `_migration/raw/tds/extracted_theme.json`.
 *
 *   [TDS]   letterlijk uit de bron; de componentId staat erbij.
 *   [SHOT]  gereconstrueerd uit de schermafdruk van de opdrachtgever.
 *   [GTA]   eigen keuze, meestal omdat wij server-side renderen waar de bron
 *           een Redux-store heeft.
 *
 * De relevante componenten:
 *   nmnoey-0/1        de vensterinhoud en de kop
 *   sc-11a0f2x-0..26  het lijf: tabbladen, zoekveld, merknavigatie, rasters
 *   sc-1rxwno9-1/2    het zoekveld
 *   kbtez5-0          de opslagbadge (en identiek: sc-1vqvi6j-0, sc-5uis2e-0)
 *   f635ir-0..3       de naam van een toestel met zijn badges
 *   guq94t-1..12      de vensterschil — dezelfde als bij "Alle shops"
 *
 * Het thema levert een eigen tak `phonePicker` (uit `pc-inpage.js`, naast
 * `phoneInfoBar`); die staat niet in `extracted_theme.json` omdat de extractie
 * alleen de portal-override las:
 *   brandsNavTextColor : cornFlowerBlue  #4A90E2
 *   brandTextColor     : cornFlowerBlue  #4A90E2
 *   itemHoverColor     : aliceBlue       #ECF3FC
 *   tabsColor          : cornFlowerBlue  #4A90E2
 *   tabsSearchColor    : whiteSmoke      #EEEEEE
 *
 * ZONDER JAVASCRIPT is dit een gewone `<details>` die onder de knop openklapt.
 * Alle vensteropmaak hangt aan `.gta-dp--dialog`, een klasse die pas door
 * `assets/js/device-picker.js` wordt gezet — dezelfde werkwijze als
 * `.gta-shops--dialog` en `.gta-filters--drawer`.
 */

/* ==========================================================================
   1. Tokens van de kiezer
   ========================================================================== */

.gta-dp {
	--gta-dp-tabs: var(--gta-c-cornflower);   /* [TDS] phonePicker.tabsColor */
	--gta-dp-tabs-search: var(--gta-c-smoke); /* [TDS] phonePicker.tabsSearchColor */
	--gta-dp-brand: var(--gta-c-cornflower);  /* [TDS] phonePicker.brandTextColor */
	--gta-dp-nav: var(--gta-c-cornflower);    /* [TDS] phonePicker.brandsNavTextColor */
	--gta-dp-hover: var(--gta-c-alice);       /* [TDS] phonePicker.itemHoverColor */
}

/*
 * BEWUST GEEN `display` hier. Het element draagt óók de klasse
 * `.gta-filters__device-picker` uit comparison.css §10; die bepaalt dat de
 * knop pas vanaf 992px in de zijkolom staat, precies zoals de bron hem toont.
 * Zou deze stylesheet daar een eigen `display` overheen zetten, dan verscheen
 * de knop opeens ook in de smalle filterbalk en zou de gemeten filterzone niet
 * meer kloppen (RESPONSIVE_GAPS.md A5).
 *
 * De ENIGE `display` die deze stylesheet aan een van de twee exemplaren geeft,
 * staat in par. 3 en geldt uitsluitend onder `html:not(.js)`; met script kan hij
 * per definitie niets verschuiven.
 */

/* ==========================================================================
   2. De opener
   ==========================================================================
   De `<summary>` neemt de plaats en de opmaak over van de knop die hier stond:
   `.gta-btn-outline` staat al in comparison.css §10. Alleen het driehoekje van
   het `<details>` moet weg.

   NIET over de volle kolombreedte. Dat stond hier eerst (`display: block;
   width: 100%`), maar [SHOT] `shots/original/1280/vergelijker-met-toestel.png`
   en de drie merkpagina's @1280 tonen een knop van 166 px in een kolom van
   220 px, met het knopmidden op 179,5 — precies het midden van de kolom. De
   knop staat dus op zijn eigen breedte en wordt gecentreerd door de
   `text-align: center` van het blok eromheen. */

.gta-dp__opener {
	cursor: pointer;
	display: inline-block;
	list-style: none;
}

.gta-dp__opener::-webkit-details-marker {
	display: none;
}

.gta-dp__opener::marker {
	content: '';
}

.gta-dp__opener:focus-visible {
	outline: 2px solid var(--gta-c-cornflower); /* [GTA] toegankelijkheid */
	outline-offset: 2px;
}

/* ==========================================================================
   3. Terugval zonder JavaScript
   ==========================================================================
   Zonder script klapt het venster gewoon open onder de knop. De sluitknoppen
   zijn `<button>`s en zouden daar niets doen: de knop "Kies Smartphone" is dan
   zelf de sluitknop. De verduisterde achtergrond hoort er evenmin, want er is
   niets om te verduisteren. */

.gta-dp__backdrop {
	display: none;
}

html:not(.js) .gta-dp__close,
html:not(.js) .gta-dp__close-bar {
	display: none;
}

/*
 * DE INGANG ZELF MAG NIET VAN JAVASCRIPT AFHANGEN.
 *
 * `comparison.css` §10 toont de twee exemplaren van de kiezer zo:
 *   `.gta-filters__device-picker`  -> alleen vanaf 992 px (zijkolom);
 *   `.gta-results__device-picker`  -> alleen `.js`, tot 991 px (knoppenrij).
 * Onder 992 px viel de ingang zonder script dus volledig weg: gemeten op
 * `/goedkoopste-telefoon-abonnement-met-telefoon` waren er nul ingangen op
 * 375 en 768 px, tegen een op 1280 px. De bron heeft er op elke breedte een,
 * en het uitgangspunt van deze herbouw is dat alles zonder JavaScript werkt.
 * Het venster is een `<details>` en heeft het script ook helemaal niet nodig.
 *
 * Daarom staat de knop hier ook zonder script in de knoppenrij, met exact de
 * `display`/`flex`-waarden die de `.js`-regel hem geeft. Bewust onder
 * `html:not(.js)` in plaats van de `.js`-eis simpelweg te laten vervallen: zo
 * kan deze regel de weergave MET script per definitie niet raken, en blijft de
 * op de bron afgestelde knoppenrij (rij 52 px, filterzone 149, beide knoppen
 * 32 px, 10 px ertussen, rechts uitgelijnd) onaangetast.
 *
 * De rijmaten van de `.js`-weergave staan in `comparison.css` op `.js
 * .gta-results__head`; die regel geldt zonder script niet. De knoppenrij krijgt
 * daarom hier dezelfde lucht (8 px boven, 12 px onder), zodat de rij ook zonder
 * script op de 52 px van de bron uitkomt in plaats van tegen de kaarten te
 * plakken.
 */
@media (max-width: 991px) {
	html:not(.js) .gta-results__device-picker {
		display: inline-block;
		flex: 0 0 auto;
	}

	html:not(.js) .gta-results__head--device {
		padding: var(--gta-sp-smm) 0 12px;
	}
}

/* ==========================================================================
   4. Het venster
   ========================================================================== */

/*
 * `text-align: left` stond eerst op `.gta-dp` zelf. Maar `.gta-dp` is óók
 * `.gta-filters__device-picker`, en die moet zijn knop juist CENTREREN
 * (comparison.css §10; [SHOT] knopmidden 179,5 = kolommidden). Omdat deze
 * stylesheet ná comparison.css laadt, won `left` en plakte de knop tegen de
 * linkerkant van de kolom. De uitlijning hoort bij het venster, dus staat hij
 * hier.
 */
/* Zelfde reden als bij de winkelpop-up in `comparison.css`: een dichtgeklapte
   `<details>` telt in Chrome mee in de min-content van zijn voorouders, en de
   kiezer draagt een raster van 122 tegels. Zie daar voor de meting. */
.gta-dp:not([open]) > .gta-dp__viewport,
.gta-dp:not([open]) > .gta-dp__backdrop {
	display: none;
}

.gta-dp__panel {
	background-color: var(--gta-c-white); /* [TDS] modal.backgroundColor */
	border: 1px solid var(--gta-c-smoke);
	border-radius: var(--gta-radius);
	margin-top: var(--gta-sp-sm);
	position: relative;
	text-align: left;
}

/* [TDS] guq94t-10 { padding: spacing.md } */
.gta-dp__inner {
	padding: var(--gta-sp-md);
}

/*
 * [TDS] nmnoey-1 { font-weight: weightBold; padding-bottom: spacing.lg } —
 * links uitgelijnd, met rechts 35px vrij voor het sluitkruis. [SHOT]
 * GEEN eigen korpsgrootte: de kop valt terug op `font.size` (14px) van de
 * widgetreset. Hier stond `--gta-fs-lg` (16px); nagemeten gaf dat 16px/18,4px
 * tegen 14px/16,1px bij de bron. [TDS] [DOM]
 */
.gta-dp__title {
	font-size: var(--gta-fs);
	font-weight: var(--gta-fw-bold);
	margin: 0;
	padding: 0 35px var(--gta-sp-lg) 0;
}

/*
 * [TDS] sc-11a0f2x-0 { display:flex; flex-direction:column;
 *                      justify-content:space-between; min-height:365px;
 *                      width:695px }
 *
 * `width`, niet `max-width`. Het lijf van de bron heeft een VASTE breedte per
 * maatstap en het venster eromheen (`guq94t-8`, `flex:0 0 auto; margin:auto`)
 * krimpt naar die inhoud. Hier stond `max-width: 695px; width: 100%`, waardoor
 * het venster juist zo breed werd als de plek die het kreeg: 750 in plaats van
 * 715 op 1280px, 355 in plaats van 320 op 375px.
 *
 * De maatstappen staan in §10. Ze hangen bij de bron aan `outer-<maat>-down`,
 * en die klasse volgt de breedte van het VERGELIJKERBLOK, niet van het scherm —
 * zie §10 voor de omrekening en de nameting per breedte.
 */
.gta-dp__body {
	display: flex;
	flex-direction: column;
	min-height: 365px;
	width: 695px;
}

/*
 * GEEN `justify-content: space-between`, hoewel `sc-11a0f2x-0` dat wél zegt.
 * De bron GEDRAAGT zich daar als `flex-start`, en dat is nagemeten in plaats
 * van aangenomen: @1280 is het lijf 365 hoog (de ondermaat) met een kopregel
 * van 36,09 en een raster van 300 — 28,91 px vrije ruimte. Bij `space-between`
 * zou die ruimte TUSSEN kop en raster komen; bij de bron staat het raster
 * strak onder de kop (gat 1,01 px, het randje van de tabbladen) en ligt de
 * 27,9 px ONDER het raster. Nagemeten rasterrijen @1280: bron 248,19 / 318,19 /
 * 388,19 / 458,19. Met `space-between` erbij kwamen wij op 276,09 / 346,09 /
 * 416,09 / 486,09 — precies 27,9 px te laag, op elk van de vier rijen.
 * Waar de bron die regel mee neutraliseert is niet te zien (er hangt geen
 * zichtbaar element onder het raster); de MAAT is eenduidig, dus die telt.
 */

/* ==========================================================================
   5. Kopregel: tabbladen links, zoekveld rechts
   ========================================================================== */

/* [TDS] sc-11a0f2x-3 { color: tabsColor; display:flex; justify-content:space-between } */
.gta-dp__head {
	color: var(--gta-dp-tabs);
	display: flex;
	justify-content: space-between;
}

/* [TDS] sc-11a0f2x-4 { border-bottom:1px solid tabsColor; display:flex;
                        flex:0 1 auto; justify-content:space-between;
                        padding:0 spacing.md; order:0 } */
.gta-dp__tabs {
	border-bottom: 1px solid var(--gta-dp-tabs);
	display: flex;
	flex: 0 1 auto;
	justify-content: space-between;
	order: 0;
	padding: 0 var(--gta-sp-md);
}

/* [TDS] sc-11a0f2x-6 { align-items:center; color:tabsColor; cursor:pointer;
                        display:flex; flex:1 1 auto; padding:0 spacing.lg }
   en `&.-selected { border-bottom:3px solid tabsColor; cursor:auto;
                     font-weight:700; padding-top:3px }` */
/*
 * Zonder `overflow`/`text-overflow` op het tabblad zelf: `sc-11a0f2x-6` heeft
 * die niet. Ze staan bij de bron op `sc-11a0f2x-7`, en dat omhult ALLEEN het
 * label "Alle Smartphones" — "Populair" zit in een kale `<div>`. Met
 * `overflow: hidden` hier werd `min-width: auto` van het flexitem 0, en dan
 * kromp het gekozen tabblad onder 350px tot 55 px terwijl de bron er 75 van
 * maakt (allebei de tabbladen lopen daar op hun bovengrens vast en steken
 * samen 10 px buiten hun omhulsel).
 */
.gta-dp__tab {
	align-items: center;
	color: var(--gta-dp-tabs);
	cursor: pointer;
	display: flex;
	flex: 1 1 auto;
	line-height: 2;
	padding: 0 var(--gta-sp-lg);
	text-decoration: none;
	white-space: nowrap;
}

.gta-dp__tab:hover,
.gta-dp__tab:focus {
	color: var(--gta-dp-tabs);
	text-decoration: none;
}

/* De focusring van de browser is hier een zwarte rechthoek over de blauwe
   onderstreping heen. Dezelfde ring als elders in de vergelijker. [GTA] */
.gta-dp__tab:focus-visible,
.gta-dp__back:focus-visible,
.gta-dp__brand-all:focus-visible {
	outline: 2px solid var(--gta-c-cornflower);
	outline-offset: -2px;
}

.gta-dp__tab.is-selected {
	border-bottom: 3px solid var(--gta-dp-tabs);
	cursor: auto;
	font-weight: var(--gta-fw-bold);
	padding-top: 3px;
}

/*
 * DE TEKST IN HET TABBLAD IS NIET VET, ook niet in het gekozen tabblad.
 * `sc-11a0f2x-6` zet `&.-selected { font-weight: 700 }` op de tab, maar de
 * bron zet de tekst in een `<div>` en de widgetreset (`sc-520g17-0`) geeft elke
 * `div` binnen de widget `font-weight: font.weightNormal` — dat overschrijft
 * de 700 van de ouder. Wat er van het gekozen tabblad overblijft is dus alleen
 * de streep van 3px eronder.
 * Nagemeten aan de bron @1280: het tabblad zelf is 84,64 breed met de tekst-div
 * op 54,64 en `font-weight: 400`; bij ons was dat 88,89 / 58,89 in 700.
 * "Alle Smartphones" (niet gekozen, dus aan beide kanten 400) mat aan beide
 * kanten 145,34 — het bewijs dat het niet het lettertype maar het gewicht is.
 * [TDS] [DOM]
 */
.gta-dp__tab-label {
	font-weight: var(--gta-fw-normal);
}

/* [TDS] sc-11a0f2x-7 { overflow:hidden; text-overflow:ellipsis;
   white-space:nowrap } — alléén om "Alle Smartphones". */
.gta-dp__tab-label--clip {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* [TDS] sc-11a0f2x-5 { border-bottom:1px solid tabsSearchColor; display:flex;
                        flex:1 1 auto; justify-content:flex-end;
                        max-width:250px; order:1 } */
.gta-dp__search {
	border-bottom: 1px solid var(--gta-dp-tabs-search);
	display: flex;
	flex: 1 1 auto;
	justify-content: flex-end;
	max-width: 250px;
	order: 1;
}

/*
 * [TDS] sc-1rxwno9-1 { input { appearance:none;
 *   background: white url(static/media/search.svg) no-repeat 95%;
 *   border:none; border-radius:0; box-sizing:border-box; color:darkSlateGray;
 *   font-size:font.size; outline:none; padding:spacing.md; width:100% }
 *   input:focus { background-color: snow; border-radius:2px;
 *                 box-shadow: inset 0 1px 4px 0 lavender }
 *   input::placeholder { color: darkGray } }
 *
 * Het vergrootglas is `static/media/search.d4307443.svg`. Dat bestand is niet
 * mee opgeslagen; hier staat het als inline `data:`-URI in dezelfde kleur als
 * de plaatshoudertekst (darkGray #AAAAAA), zodat er geen extra verzoek nodig
 * is. Vorm: het Material-Icons-glyph `search`.
 */
.gta-dp__search input[type="search"] {
	appearance: none;
	-webkit-appearance: none;
	background: var(--gta-c-white) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23AAAAAA'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 95%;
	background-size: 16px 16px;
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	color: var(--gta-c-slate);
	font-family: var(--gta-font);
	font-size: var(--gta-fs);
	outline: none;
	padding: var(--gta-sp-md);
	width: 100%;
}

.gta-dp__search input[type="search"]:focus {
	background-color: var(--gta-c-snow);
	border-radius: var(--gta-radius);
	box-shadow: inset 0 1px 4px 0 var(--gta-c-lavender);
}

.gta-dp__search input[type="search"]::placeholder {
	color: var(--gta-c-gray);
	opacity: 1;
}

/* [TDS] `input::-webkit-search-cancel-button { display:none }` */
.gta-dp__search input[type="search"]::-webkit-search-cancel-button,
.gta-dp__search input[type="search"]::-ms-clear {
	display: none;
}

/* ==========================================================================
   6. Merkbalk (alleen op het merkniveau)
   ==========================================================================
   [TDS] sc-11a0f2x-11 { align-items:flex-end; display:flex; flex-wrap:wrap;
                         justify-content:space-between; padding-top:spacing.md }
   Links `-12` de terugweg, rechts `-13` "Vergelijk alle {merk} phones", en
   daaronder over de volle breedte `-14` met het logo `-15` en de naam `-16`. */

.gta-dp__brandbar {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: var(--gta-sp-md);
}

.gta-dp__brandbar[hidden] {
	display: none;
}

/* [TDS] sc-11a0f2x-12 { color: brandsNavTextColor; cursor:pointer;
                         flex:1 0 100px; ellipsis } */
.gta-dp__back {
	align-items: center;
	color: var(--gta-dp-nav);
	display: flex;
	flex: 1 0 100px;
	gap: var(--gta-sp-xs);
	overflow: hidden;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* [TDS] sc-11a0f2x-13 { color: brandsNavTextColor; flex:1 0 100px;
                         text-align:right; ellipsis } */
.gta-dp__brand-all {
	align-items: center;
	color: var(--gta-dp-nav);
	display: flex;
	flex: 1 0 100px;
	gap: var(--gta-sp-xs);
	justify-content: flex-end;
	overflow: hidden;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gta-dp__back:hover,
.gta-dp__back:focus,
.gta-dp__brand-all:hover,
.gta-dp__brand-all:focus {
	color: var(--gta-dp-nav);
	text-decoration: underline;
}

.gta-dp__arrow {
	display: inline-flex;
	flex: 0 0 auto;
}

/* [TDS] sc-11a0f2x-14 { align-items:center; display:flex; flex:0 1 100%;
                         padding: spacing.md spacing.md 0 } */
.gta-dp__brand-head {
	align-items: center;
	display: flex;
	flex: 0 1 100%;
	margin: 0;
	padding: var(--gta-sp-md) var(--gta-sp-md) 0;
}

/* [TDS] sc-11a0f2x-15 { img { height:40px; padding-right: spacing.md } } */
.gta-dp__brand-head img {
	height: 40px;
	padding-right: var(--gta-sp-md);
	width: auto;
}

/* [TDS] sc-11a0f2x-16 { font-weight: weightBold } */
.gta-dp__brand-head strong {
	font-weight: var(--gta-fw-bold);
}

/* ==========================================================================
   7. De rasters
   ==========================================================================
   [TDS] sc-11a0f2x-17 { display:flex; flex-wrap:wrap;
                         justify-content:space-between; padding: spacing.md 0 }

   DRIE KOLOMMEN op een lijf van 695px. `sc-11a0f2x-18` is `flex: 0 0 220px`
   MET `padding: 10px`, en de tegel staat op `border-box` — de widgetreset
   `sc-520g17-0` in `raw/tds/pc-inpage.js` zet letterlijk
   `div,span,a,img,input,… { border:0; box-sizing:border-box; … }` binnen de
   widgetwortel. Een tegel is daar dus 220px BREED INCLUSIEF padding, en in
   695px passen er drie: 3 × 220 = 660, met `justify-content: space-between`
   verdeeld over 695.

   Hier stond eerder 240px, met in het commentaar de redenering dat de bron
   `content-box` zou gebruiken. Dat was aantoonbaar onjuist; het leverde 2×6 in
   plaats van 3×4 op. Nagemeten aan de LIVE bron @1280: tegel 220 breed,
   3 kolommen × 4 rijen. [TDS] [DOM] */

.gta-dp__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: var(--gta-sp-md) 0;
}

.gta-dp__grid[hidden] {
	display: none;
}

/*
 * Het raster schuift NIET zelf. Bij de bron is `guq94t-2` de schuiflaag — een
 * `position: fixed`-vlak over de hele viewport met `overflow-y: auto` — en het
 * venster groeit daarbinnen gewoon door tot het klaar is. Hier stond eerder
 * `max-height: 60vh; overflow-y: auto` op het raster; dat gaf op 375px een
 * venster van vaste hoogte met een sluitbalk die altijd in beeld bleef, terwijl
 * de bron daar vanaf y=0 het scherm vult en je gewoon doorscrollt.
 * [TDS] guq94t-2 / [DOM] bron @375: schuiflaag 375×667 met scrollHeight 983.
 */

/* [TDS] sc-11a0f2x-18 { cursor:pointer; display:flex; flex:0 0 220px;
                         padding: spacing.md; &:hover { background: itemHoverColor } } */
.gta-dp__tile {
	color: inherit;
	cursor: pointer;
	display: flex;
	flex: 0 0 220px;
	padding: var(--gta-sp-md);
	text-decoration: none;
}

.gta-dp__tile[hidden] {
	display: none;
}

.gta-dp__tile:hover,
.gta-dp__tile:focus {
	background-color: var(--gta-dp-hover);
	color: inherit;
	text-decoration: none;
}

.gta-dp__tile:focus-visible {
	outline: 2px solid var(--gta-c-cornflower); /* [GTA] toegankelijkheid */
	outline-offset: -2px;
}

/* Het gekozen toestel blijft zichtbaar aangevinkt. [GTA] */
.gta-dp__tile[aria-current] {
	background-color: var(--gta-c-lavender);
}

/* [TDS] sc-11a0f2x-19 { order:0; padding-right: spacing.sm; img { height:50px } } */
.gta-dp__tile-image {
	flex: 0 0 auto;
	order: 0;
	padding-right: var(--gta-sp-sm);
}

.gta-dp__tile-image img {
	height: 50px;
	width: auto;
}

/* [TDS] sc-11a0f2x-20 { order:1 } */
.gta-dp__tile-text {
	display: block;
	min-width: 0;
	order: 1;
}

/*
 * [TDS] f635ir-1 { font-size: font.sizeSm; font-weight: weightBold } — en
 * VERDER NIETS. Er staat geen `color` in, dus de naam valt terug op wat de
 * widgetreset zet: `color: font.color` = darkSlateGray #4B4D54, óók binnen een
 * `<a>` (de reset noemt `a` expliciet). De tegelnaam van de bron is dus zwart
 * en vet en ziet er niet uit als een link.
 * Hier stond `var(--gta-dp-brand)`; nagemeten gaf dat rgb(74,144,226) tegen
 * rgb(75,77,84) bij de bron, op elke breedte. [TDS] [DOM]
 */
.gta-dp__tile-name {
	color: var(--gta-c-slate);
	display: block;
	font-size: var(--gta-fs-sm);
	font-weight: var(--gta-fw-bold);
}

/* [TDS] f635ir-2 { line-height:18px } met per badge f635ir-3
   { padding-right: spacing.xs } */
/*
 * BLOK, en dat is bewust ANDERS dan de bron. `f635ir-0/-1/-2` zijn daar drie
 * `<span>`s zonder `display`, dus inline; naam en badges staan in één
 * regelstroom en de badge zakt naar de tweede regel zodra hij niet meer past
 * (tekstkolom 145 px, naam 103,64 + spatie 3,38 + badge 43,11 = 150,13).
 *
 * Die inline-variant is gebouwd en GEMETEN, en hij is slechter: de naamdoos
 * werd wel 18 hoog zoals bij de bron (blok geeft 14,94), maar hij kwam 1 px te
 * laag te staan (257,19 tegen 256,19) en dat kost op elke tegel een regel
 * afwijkende pixels: @1280 0,937 → 1,505 %, @375 1,566 → 3,078 %. De
 * regelmaten waren daarbij aan beide kanten identiek (kolom 14px/16,1px, naam
 * 13px/14,95px, badges 18px), dus de 1 px zit in de opbouw van het regelvak en
 * niet in een maat die hier te zetten is. Blok laat de tekst op de goede
 * beeldrij vallen; dat weegt zwaarder dan een DOM-maat die niemand ziet.
 * Openstaand punt — zie het rapport bij scherm A.
 */
.gta-dp__tile-badges {
	display: block;
	line-height: 18px;
}

/* [TDS] kbtez5-0 (opslag), sc-1vqvi6j-0 (simkaarten) en sc-5uis2e-0 (staat)
   zijn alle drie identiek:
   { color: darkSlateGray; border: 1px darkSlateGray solid;
     border-radius: generic.borderRadius; background-color: white;
     font-size: font.sizeXs; font-weight: weightNormal; line-height:13px;
     padding: spacing.xxs spacing.xs } */
.gta-dp__badge {
	background-color: var(--gta-c-white);
	border: 1px solid var(--gta-c-slate);
	border-radius: var(--gta-radius);
	color: var(--gta-c-slate);
	display: inline-block;
	font-size: var(--gta-fs-xs);
	font-weight: var(--gta-fw-normal);
	line-height: 13px;
	margin-right: var(--gta-sp-xs);
	padding: var(--gta-sp-xxs) var(--gta-sp-xs);
}

/* --- De merktegel — [TDS] sc-11a0f2x-21 t/m -25 -------------------------- */

/* [TDS] sc-11a0f2x-21 { align-items:center; cursor:pointer; display:flex;
                         flex:0 0 220px; justify-content:space-between;
                         padding: spacing.md; &:hover { itemHoverColor } } */
.gta-dp__tile--brand {
	align-items: center;
	justify-content: space-between;
}

/* [TDS] sc-11a0f2x-22 { align-items:center; display:flex } */
.gta-dp__brand-cell {
	align-items: center;
	display: flex;
	min-width: 0;
}

/* [TDS] sc-11a0f2x-23 { img { height:40px; padding-right: spacing.md } } */
.gta-dp__brand-cell img {
	height: 40px;
	padding-right: var(--gta-sp-md);
	width: auto;
}

/* [TDS] sc-11a0f2x-24 { color: brandTextColor; font-weight: weightBold } */
.gta-dp__brand-name {
	color: var(--gta-dp-brand);
	font-weight: var(--gta-fw-bold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* [TDS] sc-11a0f2x-25 { .material-icon { color: brandTextColor;
                          font-size:20px; font-weight:700 } } */
.gta-dp__chevron {
	color: var(--gta-dp-brand);
	display: inline-flex;
	flex: 0 0 auto;
}

/* Geen treffers. [GTA] — de bron toont hier een leeg raster. */
.gta-dp__empty {
	color: var(--gta-c-gray);
	margin: 0;
	padding: var(--gta-sp-lg) var(--gta-sp-md);
}

.gta-dp__empty[hidden] {
	display: none;
}

/* ==========================================================================
   8. Sluitknoppen — [TDS] guq94t-11 en guq94t-12
   ==========================================================================
   Exact dezelfde twee knoppen als bij de winkel-pop-up; de bron gebruikt er
   dezelfde componenten voor. */

.gta-dp__close {
	background-color: var(--gta-c-alice); /* [TDS] modal.closeButtonsBackgroundColor */
	border: 0;
	border-radius: var(--gta-radius);
	color: var(--gta-c-cornflower);       /* [TDS] modal.textColor */
	cursor: pointer;
	display: block;
	height: 35px;
	line-height: 35px;
	padding: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	user-select: none;
	width: 35px;
	z-index: 1;
}

.gta-dp__close:hover,
.gta-dp__close:focus {
	background-color: #D6E5F9;            /* [TDS] darken(.05, aliceBlue) */
}

.gta-dp__close svg {
	vertical-align: middle;
}

.gta-dp__close-bar {
	background-color: var(--gta-c-alice); /* [TDS] modal.closeButtonsBackgroundColor */
	border: 0;
	border-radius: var(--gta-radius);
	color: var(--gta-c-cornflower);       /* [TDS] modal.textColor */
	cursor: pointer;
	display: block;
	font-family: var(--gta-font);
	font-size: var(--gta-fs);
	height: 35px;
	line-height: 35px;
	padding: 0;
	text-align: center;
	user-select: none;
	width: 100%;
}

.gta-dp__close-bar:hover,
.gta-dp__close-bar:focus {
	background-color: #C0D7F5;            /* [TDS] darken(.1, aliceBlue) */
}

/* ==========================================================================
   9. Als venster, zodra JavaScript het overneemt
   ==========================================================================
   `body.gta-modal-open` bestaat al voor de winkel-pop-up (comparison.css §13)
   en wordt hier hergebruikt: de pagina eronder mag niet meeschuiven. */

.gta-dp--dialog[open] .gta-dp__backdrop {
	/* [TDS] guq94t-1 { background-color: black; opacity:.5; position:fixed } */
	background-color: #000000;
	bottom: 0;
	display: block;
	left: 0;
	opacity: 0.5;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1060;
}

/*
 * DE VENSTERSCHIL, één op één uit `raw/tds/pc-inpage.js`:
 *
 *   guq94t-2  { position:fixed; inset:0; overflow-x:hidden; overflow-y:auto }
 *   guq94t-3  { display:flex; flex-direction:column; height:100%;
 *               justify-content:space-between }
 *   guq94t-4  { flex:0 1 20%; order:1 }     de ruimte BOVEN het venster
 *   guq94t-6  { display:flex; flex:0 0 auto; justify-content:space-between;
 *               order:2 }                    de rij MET het venster
 *   guq94t-8  { background:#FFF; border-radius:2px; flex:0 0 auto;
 *               margin:auto; order:2; position:relative }
 *   guq94t-5  { flex:1 1 auto; order:3 }     de ruimte ERONDER
 *
 * Twee dingen volgen daaruit, en allebei stonden hier eerder anders:
 *
 * 1. HET VENSTER HANGT OP 20 % VAN BOVEN, niet in het midden. `guq94t-4` heeft
 *    `flex-basis: 20%` en groeit niet mee; de ruimte eronder groeit wél. Passen
 *    doet het venster, dan begint het op 0,20 × viewporthoogte. Nagemeten aan de
 *    bron, tien breedtes, telkens exact: @375 133,39 (= 20 % van 667), @390
 *    168,80 (van 844), @414 179,19 (van 896), @768 204,80 (van 1024), @1024
 *    153,59 (van 768), @1280 160,00 (van 800). Hier stond
 *    `top:50%; transform:translateY(-50%)`.
 *
 * 2. PAST HET VENSTER NIET, DAN SCHUIFT DE HELE LAAG. `guq94t-4` mag krimpen
 *    (`flex-shrink: 1`), dus de bovenruimte gaat naar 0 en het venster begint op
 *    y=0; `guq94t-2` scrollt. Nagemeten @375: vensterhoogte 983,19 in een laag
 *    van 375×667 met scrollHeight 983 — het venster vult het scherm vanaf y≈0 en
 *    je scrollt er doorheen, met de sluitbalk helemaal onderaan. Hier stond
 *    `max-height: calc(100vh - 2*40px); overflow-y:auto` op het venster zelf,
 *    wat een venster van vaste hoogte met een altijd zichtbare sluitbalk gaf.
 *
 * `.gta-dp__viewport` is de tegenhanger van guq94t-2 + guq94t-3; de twee
 * ruimtes zijn `::before` en `::after`, zodat er maar één extra element nodig is.
 */
/*
 * De schuiflaag vangt GEEN muisklikken. Bij de bron dragen de vier lege vlakken
 * om het venster heen (`guq94t-4`, `-5`, `-7`, `-9`) allemaal
 * `onClick: resetModal`: klikken naast het venster sluit het. Bij ons doet de
 * verduistering eronder dat al, en die zou door deze laag afgedekt worden.
 * `pointer-events: none` laat de klik erdoorheen vallen; het venster zelf zet
 * hem weer aan, zodat klikken IN het venster gewoon werken.
 */
.gta-dp--dialog[open] .gta-dp__viewport {
	display: flex;
	pointer-events: none;
	flex-direction: column;
	inset: 0;
	overflow-x: hidden;
	overflow-y: auto;
	position: fixed;
	z-index: 1070;
}

/* [TDS] guq94t-4 { flex: 0 1 20%; order: 1 } */
.gta-dp--dialog[open] .gta-dp__viewport::before {
	content: "";
	flex: 0 1 20%;
}

/* [TDS] guq94t-5 { flex: 1 1 auto; order: 3 } */
.gta-dp--dialog[open] .gta-dp__viewport::after {
	content: "";
	flex: 1 1 auto;
}

.gta-dp--dialog[open] .gta-dp__panel {
	pointer-events: auto;
	/* [TDS] guq94t-8 { flex:0 0 auto; margin:auto; position:relative } plus
	   nmnoey-0 { max-width:750px; min-width:300px }. Alleen de ZIJmarges op
	   `auto`: `margin: auto` zou in een kolom ook de vrije ruimte VERTICAAL
	   opslokken en daarmee de 20 % van guq94t-4 tenietdoen. */
	border: 0;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
	flex: 0 0 auto;
	margin: 0 auto;
	max-width: 750px;
	position: relative;
	width: auto;
}

/*
 * [TDS] nmnoey-0 { max-width:750px; min-width:300px } — de ondermaat zit op het
 * blok MET de titel en het lijf, niet op de vensterschil. Met `box-sizing:
 * border-box` en 10px padding is dat hier 320px op het omhulsel. Dat is precies
 * waarom de bron op 320px en op 375px allebei een venster van 320 breed toont
 * terwijl de maatstappen daar 230 respectievelijk 300 zeggen.
 */
.gta-dp--dialog[open] .gta-dp__inner {
	min-width: 320px;
}

.gta-dp--dialog[open] .gta-dp__panel:focus {
	/* Het venster krijgt focus bij openen; dat mag geen ring om het hele
	   venster opleveren. De links en knoppen erin houden die wel. */
	outline: none;
}

/* ==========================================================================
   10. Smallere vensters — [TDS] sc-11a0f2x-0
   ==========================================================================

   DE MAATSTAPPEN VAN DE BRON, letterlijk uit `chunks/10_6a4d6028_chunk.js`:

     basis                     width 695  min-height 365
     outer-mdtablet-down       width 580  min-height 510
     outer-smtablet-down       width 390  min-height 510
     outer-lgphone-down        width 340  min-height 510
     outer-mdphone-down        width 300  min-height 450
     outer-smphone-down        width 230  min-height 345
     outer-xsphone-down        width 230  min-height 345

   WAAR DIE KLASSEN VANDAAN KOMEN, en waarom de omslagpunten hier ANDERE
   getallen zijn dan 768/600/414/360/320. `tds-<maat>-down` is geen media query
   maar een KLASSE die de widget zelf zet, na meting van zijn eigen omhulsel
   (`pc-inpage.js`, `mediaClassNames`): hij zoekt de eerste maat uit
   `{xsphone:250, smphone:320, mdphone:360, lgphone:414, smtablet:600,
     mdtablet:768, lgtablet:800, smdesktop:992, mddesktop:1280, lgdesktop:1600}`
   die niet kleiner is dan die breedte, en zet die maat en alle grotere. De
   `outer-`-variant meet daarbij het BUITENSTE omhulsel — het vergelijkerblok in
   de pagina, niet het scherm.

   Dat blok is bij ons en bij de bron even breed (dat staat vast sinds par. 25):
   onder 768px is het `viewport − 30`, van 768 tot 991 is het 720, van 992 tot
   1199 is het 940 en daarboven 1140. Omgerekend naar schermbreedte:

     blok ≤ 320  ⟺  viewport ≤ 350   →  230
     blok ≤ 360  ⟺  viewport ≤ 390   →  300
     blok ≤ 414  ⟺  viewport ≤ 444   →  340
     blok ≤ 600  ⟺  viewport ≤ 630   →  390
     blok ≤ 768  ⟺  viewport ≤ 991   →  580   (720 blijft ≤768 tot 992px)
     daarboven                        →  695

   NAGEMETEN AAN DE BRON, vensterbreedte (= lijf + 2×10 padding), tien
   breedtes in één run: @320 320, @360 320, @375 320, @390 320, @414 360,
   @600 410, @601 410, @768 600, @1024 715, @1280 715. Dat is exact deze reeks,
   met de ondermaat van 300 uit nmnoey-0 op de drie smalste.
   ========================================================================== */

@media (max-width: 991px) {
	.gta-dp__body {
		min-height: 510px;
		width: 580px;
	}
}

@media (max-width: 630px) {
	.gta-dp__body {
		width: 390px;
	}

	/*
	 * [TDS] sc-11a0f2x-5 onder `outer-smtablet-down`: het zoekveld krijgt de
	 * tabskleur als onderrand en mag de volle breedte innemen.
	 */
	.gta-dp__search {
		border-bottom-color: var(--gta-dp-tabs);
		max-width: 100%;
	}

	/*
	 * HET SMALLE ZOEKVELD. De bron rendert onder `outer-smtablet-down` een
	 * ANDER zoekveld: `sc-11a0f2x-9` (het brede) gaat op `display:none` en
	 * `sc-11a0f2x-10` op `display:block`, en dat tweede bevat
	 * `PhoneSearch small={true}` — de tak zonder `placeholder`, met
	 * `sc-1rxwno9-2`:
	 *
	 *   input { …; padding: 10px 10px 10px 20px; width: 24px }
	 *   input:focus { background:#FBFBFB; border-radius:2px;
	 *                 box-shadow: inset 0 1px 4px 0 #E1F0FC;
	 *                 padding: 10px; width: 100% }
	 *
	 * Met `box-sizing: border-box` en 30px padding kan 24px niet: Chrome klemt
	 * de doos op de padding en het veld meet 30px. Nagemeten aan de bron op
	 * 320, 360, 375, 390, 414, 600 en 601px: telkens 30px breed, plaatshouder
	 * leeg. Bij ons stond hier het brede veld met de tekst "Zoeken" erin, dat
	 * met `flex: 1 1 auto` de hele restbreedte opat (20 tot 250px).
	 *
	 * Wij hebben één veld in plaats van twee (twee velden met dezelfde `name`
	 * zouden allebei meeversturen), dus de plaatshouder wordt hier onzichtbaar
	 * gezet in plaats van weggelaten.
	 */
	.gta-dp__search input[type="search"] {
		padding: var(--gta-sp-md) var(--gta-sp-md) var(--gta-sp-md) var(--gta-sp-xl);
		width: 24px;
	}

	.gta-dp__search input[type="search"]::placeholder {
		color: transparent;
	}

	.gta-dp__search input[type="search"]:focus {
		padding: var(--gta-sp-md);
		width: 100%;
	}
}

@media (max-width: 444px) {
	.gta-dp__body {
		width: 340px;
	}
}

@media (max-width: 390px) {
	.gta-dp__body {
		min-height: 450px;
		width: 300px;
	}
}

@media (max-width: 350px) {
	.gta-dp__body {
		min-height: 345px;
		width: 230px;
	}

	/*
	 * [TDS] sc-11a0f2x-4 onder `outer-smphone-down` { max-width: 150px } en
	 * sc-11a0f2x-6 { max-width: 75px }. De tabbladen krimpen dus met een
	 * BOVENGRENS, niet met minder padding. Nagemeten aan de bron @320: beide
	 * tabbladen exact 75×36,09 op x 22,5 en 97,5. Hier stond in plaats daarvan
	 * `padding: 0 5px` vanaf 414px.
	 */
	.gta-dp__tabs {
		max-width: 150px;
	}

	.gta-dp__tab {
		max-width: 75px;
	}
}

/* ==========================================================================
   11. De toestelbalk — [TDS] `phoneInfoBar`
   ==========================================================================

   Verschijnt zodra er een toestel gekozen is. Componenten in
   `raw/tds/chunks/15_a4150aa2_chunk.js`:
     sc-1dlhbm2-0..21  de balk zelf
     j4rxj4-0..6       de productfoto met de kleine ronde knop eronder
     sc-1680rph-0      die knop: 35 x 35, alleen het glyph `edit`
     sc-1ylp0a2-0..2   de kleurstalen
     d0mdnp-0..2       de opslagknoppen
     sc-1we0urp-0/1    de kleurbadge naast de modelnaam
   Themawaarden uit `pc-inpage.js`, tak `phoneInfoBar`:
     mobilePhoneVariantAndMemorySelectorBackgroundColor            aliceBlue #ECF3FC
     mobilePhoneVariantAndMemorySelectorCloseButtonBackgroundColor lavender  #E1F0FC
     mobilePhoneVariantAndMemorySelectorCloseButtonColor           cornFlowerBlue #4A90E2
     openMobilePhoneVariantAndMemorySelectorColor                  cornFlowerBlue #4A90E2

   WAAR DE FOTO STAAT. De bron heeft één component (`PhoneChanger`) die het
   toestel-glyph toont zolang er niets gekozen is en de productfoto zodra dat wel
   zo is. Op brede schermen staat hij in de LINKERKOLOM boven de filters
   (`r7ha0i-1`/`-2`), op smalle schermen ín de balk (`sc-1dlhbm2-3`). Hier is dat
   letterlijk zo overgenomen: `.gta-devicebar__photobox` in de filterkolom vanaf
   992px, `.gta-devicebar__photo-cell` in de balk daaronder.
   ========================================================================== */

.gta-devicebar {
	display: block;
	margin-bottom: var(--gta-sp-sm);   /* [TDS] r7ha0i-6 { padding-bottom: spacing.sm } */
	/*
	 * Het resultatenblok is een flexcontainer (`.gta-comparison__results`), dus
	 * zonder deze twee regels krimpt de balk tot de breedte van zijn tekst.
	 * Ze zijn ook onschadelijk als het blok ooit weer een gewone blokcontainer
	 * wordt. [GTA]
	 */
	flex: 0 0 auto;
	width: 100%;
}

/* [TDS] sc-1dlhbm2-1 { display:flex; flex-wrap:wrap } */
.gta-devicebar__row {
	display: flex;
	flex-wrap: wrap;
}

/* [TDS] sc-1dlhbm2-2 { display:flex; flex:1 1 auto; justify-content:flex-start; order:0 } */
.gta-devicebar__media {
	display: flex;
	flex: 0 0 auto;
	justify-content: flex-start;
	order: 0;
}

/*
 * [TDS] sc-1dlhbm2-3 { display:none; order:0 } en pas onder `lgtablet-down`
 * (bij ons 991px) `display:block`. Daarboven staat de foto in de filterkolom.
 */
.gta-devicebar__photo-cell {
	display: none;
	order: 0;
	position: relative;
}

/* [TDS] j4rxj4-1 { align-items:center; display:flex; height:120px;
                    justify-content:center; padding-right: spacing.sm } */
.gta-devicebar__photo {
	align-items: center;
	display: flex;
	height: 120px;
	justify-content: center;
	padding-right: var(--gta-sp-sm);
}

/* [TDS] j4rxj4-2 { img { max-height:120px; max-width:120px } } */
.gta-devicebar__photo img {
	max-height: 120px;
	max-width: 120px;
	width: auto;
}

/*
 * [TDS] sc-1680rph-0 { button { height:35px; padding:0; width:35px;
 *                      .material-icon { font-size:20px } } }
 * plus j4rxj4-6 { display:none; position:absolute; top:83px } — dus linksonder
 * de foto van 120px. Rond: [SHOT], de schermafdruk van de opdrachtgever toont
 * een cirkel; de bron zet die vorm op de knopcomponent zelf.
 */
.gta-devicebar__edit {
	align-items: center;
	background-color: var(--gta-c-white);
	border: 1px solid var(--gta-c-cornflower);
	border-radius: 50%;
	color: var(--gta-c-cornflower);
	display: none;
	height: 35px;
	justify-content: center;
	left: 0;
	position: absolute;
	text-decoration: none;
	top: 83px;
	width: 35px;
}

.gta-devicebar__edit:hover,
.gta-devicebar__edit:focus {
	background-color: var(--gta-c-alice);
	color: var(--gta-c-cornflower);
	text-decoration: none;
}

.gta-devicebar__edit .fa {
	font-size: 20px;   /* [TDS] sc-1680rph-0 */
	margin: 0;
}

/* [TDS] sc-1dlhbm2-4 { display:flex; justify-content:space-between;
                        flex:1 1 auto; flex-wrap:wrap; order:1 } */
.gta-devicebar__main {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	justify-content: space-between;
	min-width: 0;
	order: 1;
}

/* [TDS] sc-1dlhbm2-5 { order:0; padding: 0 0 spacing.md 0 } */
.gta-devicebar__title {
	order: 0;
	padding: 0 0 var(--gta-sp-md) 0;
}

.gta-devicebar__brand {
	align-items: center;
	display: flex;
	margin: 0;
}

/* [TDS] sc-1dlhbm2-7 { width:28px; vertical-align:-3px; img { max-width:28px } } */
.gta-devicebar__brand-logo {
	display: inline-block;
	vertical-align: -3px;
	width: 28px;
}

.gta-devicebar__brand-logo img {
	max-width: 28px;
	width: auto;
}

/* [TDS] sc-1dlhbm2-8 { font-size: font.sizeXs; padding-left: spacing.md;
                        text-transform: uppercase } */
.gta-devicebar__brand-name {
	font-size: var(--gta-fs-xs);
	padding-left: var(--gta-sp-md);
	text-transform: uppercase;
}

/* [TDS] sc-1dlhbm2-9 { display:flex; flex-wrap:wrap } */
.gta-devicebar__name {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

/* [TDS] sc-1dlhbm2-10 { font-size:25px; font-weight:600;
                         padding-right: spacing.md } */
.gta-devicebar__model {
	font-size: 25px;
	font-weight: var(--gta-fw-semi);
	padding-right: var(--gta-sp-md);
}

/* [TDS] sc-1dlhbm2-11 { align-self:center; line-height:18px } */
.gta-devicebar__badges {
	align-self: center;
	line-height: 18px;
}

/* [TDS] sc-1we0urp-1: het vierkantje van 9 x 9 in de kleurbadge. */
.gta-devicebar__color-dot {
	border-radius: var(--gta-radius);
	display: inline-block;
	height: 9px;
	margin-right: var(--gta-sp-xs);
	vertical-align: middle;
	width: 9px;
}

/* --- Kleur- en opslagkeuze ----------------------------------------------- */

/*
 * Eén blok in de opmaak, twee verschijningsvormen in de bron: vanaf 992px staat
 * het gewoon naast de titel (`sc-1dlhbm2-13`), daaronder klapt het uit
 * (`sc-1dlhbm2-15`). Het is daarom een `<details>` — zonder JavaScript werkt het
 * uitklappen dan gewoon, en op brede schermen staat het altijd open.
 */
.gta-devicebar__options {
	display: block;
	order: 1;
}

/* [TDS] sc-1dlhbm2-14 { color: openMobile…Color; cursor:pointer; display:none;
                         flex:1 1 100%; order:2; user-select:none } */
.gta-devicebar__toggle {
	color: var(--gta-c-cornflower);
	cursor: pointer;
	display: none;
	list-style: none;
	user-select: none;
}

.gta-devicebar__toggle::-webkit-details-marker {
	display: none;
}

/*
 * Vanaf 992px staat het keuzeblok gewoon in beeld, ook al is het `<details>`
 * dicht: op die breedte is er in de bron geen uitklap maar een vaste kolom
 * (`sc-1dlhbm2-13`). Nieuwere browsers verbergen de inhoud van een gesloten
 * `<details>` met `::details-content`; oudere deden dat met een `display` op de
 * inhoud zelf. Beide worden hier opengezet.
 */
@media (min-width: 992px) {
	.gta-devicebar__options::details-content {
		block-size: auto;
		content-visibility: visible;
	}
}

/* [TDS] sc-1dlhbm2-13 { display:flex; flex-wrap:wrap;
                         justify-content:flex-start; order:1 } */
.gta-devicebar__options-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

/* [TDS] sc-1dlhbm2-17 { order:0 } en -19 { padding: 0 spacing.lg } als
   tussenruimte tussen de twee groepen. */
.gta-devicebar__group--colors {
	order: 0;
	padding-right: var(--gta-sp-lg);
}

/* [TDS] sc-1dlhbm2-20 { order:1 } */
.gta-devicebar__group--storage {
	order: 1;
}

/* [TDS] sc-1dlhbm2-18 en -21 { padding-bottom: spacing.sm } */
.gta-devicebar__label {
	margin: 0;
	padding-bottom: var(--gta-sp-sm);
}

.gta-devicebar__swatches,
.gta-devicebar__memories {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gta-devicebar__swatches li,
.gta-devicebar__memories li {
	margin: 0;
	padding: 0;
}

/*
 * [TDS] sc-1ylp0a2-1 { background: white; border-radius:2px;
 *   box-shadow: 0 1px 3px 0 darkLavender; cursor:pointer; display:inline-block;
 *   height:34px; position:relative; width:42px }
 *   selected -> { background: lavender; box-shadow: inset 0 1px 2px 0 silver;
 *                 cursor:auto }
 *   hover    -> { background: aliceBlue }
 * en d0mdnp-1 met dezelfde waarden, maar 70px breed.
 */
.gta-devicebar__swatch,
.gta-devicebar__memory {
	background-color: var(--gta-c-white);
	border: 0;
	border-radius: var(--gta-radius);
	box-shadow: 0 1px 3px 0 #D0E2F7;   /* [TDS] color.darkLavender */
	cursor: pointer;
	display: inline-block;
	height: 34px;
	position: relative;
	text-decoration: none;
}

.gta-devicebar__swatch {
	width: 42px;
}

/* [TDS] d0mdnp-1 { width:70px } met d0mdnp-2 { color: cornFlowerBlue;
                    font-weight:700; line-height:34px; text-align:center } */
.gta-devicebar__memory {
	color: var(--gta-c-cornflower);
	font-weight: var(--gta-fw-bold);
	line-height: 34px;
	min-width: 70px;
	padding: 0 var(--gta-sp-sm);
	text-align: center;
	user-select: none;
}

a.gta-devicebar__swatch:hover,
a.gta-devicebar__swatch:focus,
a.gta-devicebar__memory:hover,
a.gta-devicebar__memory:focus {
	background-color: var(--gta-c-alice);   /* [TDS] color.aliceBlue */
	color: var(--gta-c-cornflower);
	text-decoration: none;
}

.gta-devicebar__swatch.is-selected,
.gta-devicebar__memory.is-selected {
	background-color: var(--gta-c-lavender);          /* [TDS] color.lavender */
	box-shadow: inset 0 1px 2px 0 var(--gta-c-silver); /* [TDS] color.silver */
	cursor: auto;
}

/* [TDS] `-first-phone-variant` / `-last-phone-variant` /
         `-first-and-last-phone-variant`: de rij vormt samen één pil. */
.gta-devicebar__swatch.is-first,
.gta-devicebar__memory.is-first {
	border-radius: 100px 0 0 100px;
}

.gta-devicebar__swatch.is-last,
.gta-devicebar__memory.is-last {
	border-radius: 0 100px 100px 0;
}

.gta-devicebar__swatch.is-only,
.gta-devicebar__memory.is-only {
	border-radius: 100px;
}

/* [TDS] sc-1ylp0a2-2 { background-color: primaryColor; border-radius:2px;
                        display:inline-block; height:14px; left:50%;
                        position:absolute; top:50%;
                        transform:translate(-50%,-50%); width:14px } */
.gta-devicebar__swatch-dot {
	background-color: var(--gta-c-smoke);
	border-radius: var(--gta-radius);
	display: inline-block;
	height: 14px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
}

/*
 * Hier stond een haarlijn (`box-shadow: inset 0 0 0 1px rgba(0,0,0,.12)`) om het
 * staal, zodat een heel lichte kleur niet op wit zou verdwijnen. De bron heeft
 * die lijn NIET — `sc-1ylp0a2-2` hierboven is de volledige regel — en dit was
 * dus een "wij zijn correcter"-afwijking. De opdrachtgever koos in ronde 14 voor
 * het gedrag van de bron, ook waar dat gedrag fout is; de lijn is daarom weg.
 */

a.gta-devicebar__swatch:focus-visible,
a.gta-devicebar__memory:focus-visible,
.gta-devicebar__edit:focus-visible,
.gta-devicebar__toggle:focus-visible {
	outline: 2px solid var(--gta-c-cornflower);   /* [GTA] toegankelijkheid */
	outline-offset: 2px;
}

/* [TDS] sc-1dlhbm2-16 — de sluitregel, alleen in het uitklapvak. */
.gta-devicebar__close {
	display: none;
	margin: 0;
}

/* --- De foto in de filterkolom — [TDS] r7ha0i-1 / r7ha0i-2 --------------- */

/*
 * [TDS] r7ha0i-2 { border-color: secondaryFiltersBorderColor; border-radius:
 *   2px 2px 0 0; border-style: solid; border-width: 1px 1px 0 1px;
 *   padding: spacing.md; text-align:center }
 * en r7ha0i-1 { order:0; padding-right: spacing.sm } met `display:none` onder
 * lgtablet — bij ons dus alleen vanaf 992px.
 */
.gta-devicebar__photobox {
	display: none;
}

@media (min-width: 992px) {
	.gta-devicebar__photobox {
		border: 1px solid var(--gta-c-smoke);   /* [TDS] filter.secondaryFiltersBorderColor */
		border-bottom: 0;
		border-radius: var(--gta-radius) var(--gta-radius) 0 0;
		display: block;
		padding: var(--gta-sp-md);
		text-align: center;
	}

	.gta-devicebar__photobox .gta-devicebar__photo {
		justify-content: center;
		padding-right: 0;
	}

	/*
	 * De foto NEEMT DE PLAATS IN van het toestel-glyph. In de bron is dat
	 * letterlijk hetzelfde onderdeel: `PhoneChanger` rendert `j4rxj4-3` (het
	 * glyph `phone_android` op 120px) zolang er niets gekozen is en `j4rxj4-2`
	 * (de foto) zodra dat wel zo is. Het glyph staat bij ons in filters.php als
	 * `.gta-filters__icon--device`; deze regel geldt alleen wanneer de fotobox
	 * er werkelijk vóór staat, dus alleen bij een gekozen toestel.
	 */
	.gta-devicebar__photobox ~ .gta-filters .gta-filters__icon--device {
		display: none;
	}
}

/* --- Smalle schermen — [TDS] `lgtablet-down`, bij ons 991px -------------- */

@media (max-width: 991px) {
	/* De foto verhuist naar de balk. [TDS] sc-1dlhbm2-3 */
	.gta-devicebar__photo-cell {
		display: block;
	}

	.gta-devicebar__edit {
		display: flex;   /* [TDS] j4rxj4-6 { display:block } onder lgtablet */
	}

	/* [TDS] sc-1dlhbm2-14 { display:block } — de uitklapregel verschijnt. */
	.gta-devicebar__toggle {
		display: block;
		padding-top: var(--gta-sp-sm);
	}

	.gta-devicebar__options {
		flex: 1 1 100%;
		order: 2;
	}

	/* Dicht: geen keuzeblok in beeld. */
	.gta-devicebar__options:not([open]) .gta-devicebar__options-inner {
		display: none;
	}

	/* [TDS] sc-1dlhbm2-15 { background-color: mobile…BackgroundColor;
	                         display:flex; flex-wrap:wrap;
	                         justify-content:flex-start; margin-top:5px;
	                         order:1; padding: spacing.md; width:100% } */
	.gta-devicebar__options[open] .gta-devicebar__options-inner {
		background-color: var(--gta-c-alice);
		margin-top: var(--gta-sp-sm);
		padding: var(--gta-sp-md);
		width: 100%;
	}

	/* [TDS] sc-1dlhbm2-16 { background-color: …CloseButtonBackgroundColor;
	                         color: …CloseButtonColor; cursor:pointer;
	                         flex:1 0 100%; margin: 10px -10px 0 -10px; order:2;
	                         padding:5px; text-align:center } */
	.gta-devicebar__options[open] .gta-devicebar__close {
		display: block;
		flex: 1 0 100%;
		margin: var(--gta-sp-md) calc( -1 * var(--gta-sp-md) ) 0;
		order: 2;
	}

	.gta-devicebar__close button {
		background-color: var(--gta-c-lavender);
		border: 0;
		color: var(--gta-c-cornflower);
		cursor: pointer;
		display: block;
		font-family: var(--gta-font);
		font-size: var(--gta-fs);
		padding: var(--gta-sp-sm);
		text-align: center;
		width: 100%;
	}
}

/* [TDS] sc-1dlhbm2-10 onder `lgphone-down` { font-size:15px } en
         j4rxj4-1/-2 { height:65px; img max 65px } */
@media (max-width: 414px) {
	.gta-devicebar__model {
		font-size: 15px;
	}

	.gta-devicebar__photo {
		height: 65px;
	}

	.gta-devicebar__photo img {
		max-height: 65px;
		max-width: 65px;
	}

	.gta-devicebar__edit {
		top: 28px;   /* [TDS] j4rxj4-6 onder lgphone-down */
	}
}

/*
 * De ingang in de ZIJKOLOM, op de maat van de bron.
 *
 * [DOM] bron @1280: de knop meet 166,64 x 32,09 en staat op x 96,67 binnen de
 * kolom van 198 px. De inhoud is "Kies Smartphone" (119 px) plus een spatie
 * (3,64) plus het glyph `add_circle` van Material Icons, dat 14 px breed is.
 * Bij ons was het glyph 12 px breed en stond er nog 5 px marge voor: de knop
 * werd 169,64 breed en begon op 95,17 — drie pixels te breed en anderhalve
 * pixel te ver naar links, over de volle hoogte van de knop.
 *
 * Alleen vanaf 992 px: onder die breedte staat dezelfde knop in de knoppenrij
 * naast de tellerregel, en die rij is op de bron afgesteld (52 px, knop 32 px).
 */
@media (min-width: 992px) {
	.gta-filters__device-picker .gta-dp__opener .fa {
		margin-left: 0;
		text-align: center;
		width: 14px;
	}
}