/* ===========================================================================
   EYOX phone-case ROUND 11 (iteratie na founder-review 27/28-08).
   Feedback verwerkt: beige als basis, logo en naam bij elkaar (de lockup),
   maar kleiner en zo laag mogelijk zodat het niet afleidt wanneer de klant
   in de camera kijkt. Twee reeksen:
   1. formaat-01..05: een formaat- en plaatsingsladder op beige, van het
      gekozen ontwerp (referentie) tot de kleinste en laagste plaatsing.
   2. winkel-01..05: exact dezelfde print (formaat 3) op vijf hoeskleuren,
      voor KJ's vraag of beige genoeg opvalt in de winkel tegenover een
      blauwere kleur.
   Kleuren en cameraovergangen komen uit designs.css en print.css; dit
   bestand voegt alleen de lockup-plaatsingen en de lichte merkkleur toe.
   =========================================================================== */

.lockup {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; z-index: 2;
}
.lockup .mk { display: block; }
.lockup img.wm { display: block; }

/* mark colour on donkere hoezen (teal-mid, deep); licht genoeg voor ~3:1 op #4D757F */
.mk-light { color: #B7D8DE; }

/* De cameramodule is van de telefoon, niet van het hoesje: in deze ronde
   blijft hij op elke hoeskleur identiek zilver, zodat de kleurvergelijking
   zuiver over de hoeskleur gaat (overschrijft de toon-op-toon module die
   print.css aan flat-teal-mid en flat-deep geeft). */
.r11 .camera { background: linear-gradient(150deg, #D6DDE1, #BFC9CE); }

/* formaat 1: het gekozen ontwerp als referentie (identiek aan print-18) */
.f01 { top: 198px; gap: 46px; }
.f01 .mk { width: 120px; height: 120px; }
.f01 .wm { width: 128px; }

/* formaat 2: driekwart, in het onderste deel */
.f02 { bottom: 96px; gap: 34px; }
.f02 .mk { width: 90px; height: 90px; }
.f02 .wm { width: 100px; }

/* formaat 3: klein en laag (het midden van de ladder; ook de winkel-reeks) */
.f03 { bottom: 64px; gap: 26px; }
.f03 .mk { width: 72px; height: 72px; }
.f03 .wm { width: 84px; }

/* formaat 4: zo klein en laag mogelijk met de naam nog goed leesbaar */
.f04 { bottom: 46px; gap: 16px; }
.f04 .mk { width: 56px; height: 56px; }
.f04 .wm { width: 68px; }

/* formaat 5: liggende lockup, de laagste plaatsing die kan */
.f05 { flex-direction: row; bottom: 34px; gap: 13px; align-items: center; }
.f05 .mk { width: 36px; height: 36px; }
.f05 .wm { width: 76px; }