/* ============================================================================
   Concept 1A, "Winkel voorop".

   Hoort bij het blok hype_concept_1a in system_blocks.ctp en wordt alleen
   geladen op de CMS-pagina die dat blok aanroept. Alles hangt onder .c1a of
   onder een class die concept-1a.js op de pagina zet, zodat geen enkele regel
   naar de rest van de shop lekt.

   Layout komt van Bootstrap 4 (row, col-*, utilities). Deze CSS doet alleen
   wat Bootstrap niet doet: kleur, typografie, beeldverhoudingen en de
   neutralisatie van de SW-Retail blokwrappers.

   Opbouw volgt ITCSS. Alle media queries staan in sectie 15.
   ========================================================================= */

/* 1. TOKENS ----------------------------------------------------------------
   Ook op de body, want de paginaopmaak in sectie 2 gebruikt dezelfde tokens
   en die regels hangen aan body.c1a-page, buiten .c1a.
   ------------------------------------------------------------------------- */

.c1a,
body.c1a-page {
    --c1a-bg: #f3f1ec;
    --c1a-ink: #1a1c17;
    --c1a-plum: #3b2433;
    --c1a-cream: #f1eee6;
    --c1a-coral: #e8917a;
    --c1a-rose: #e3dbd6;
    --c1a-magenta: #b5416a;
    --c1a-petrol: #1b8388;
    --c1a-dark: #1a1c17;
    --c1a-muted: #6a665c;
    --c1a-body: #4d4a42;
    --c1a-sand: #e6e1d6;
    --c1a-sand-dark: #ded8cb;
    --c1a-open: #7fc47f;
    --c1a-closed: #b3563f;

    --c1a-display: 'Big Shoulders Display', 'Archivo', system-ui, sans-serif;
    --c1a-text: 'Archivo', system-ui, -apple-system, sans-serif;
    --c1a-accent: 'Cormorant Garamond', Georgia, serif;
}

/* 2. DE PAGINA ZELF --------------------------------------------------------
   De live header en footer blijven in de DOM staan, zodat de SW-Retail JS
   zijn eigen elementen (winkelwagenteller, zoekveld, inlogknop) blijft
   vinden. Ze worden hier alleen verborgen. !important is nodig omdat
   .fixed-top in style.css per breakpoint een eigen display-waarde krijgt.
   ------------------------------------------------------------------------- */

body.c1a-page .fixed-top,
body.c1a-page .footer,
body.c1a-page .footer-bottom,
body.c1a-page .breadcrumb-container {
    display: none !important;
}

/* style.css regel 20 compenseert de drie vaste balken met 188px. Die balken
   staan hier niet, dus die marge moet weg. */
html body.c1a-page {
    margin-top: 0;
    background: var(--c1a-bg);
}

/* Dit bestand laadt alleen op de conceptpagina, dus dit raakt de rest van de
   shop niet. Springen naar een anker glijdt nu in plaats van hakken. */
html {
    scroll-behavior: smooth;
}

/* De vier regels die Lenis nodig heeft, overgenomen uit lenis.css zodat er
   geen apart verzoek bij komt. Zodra Lenis draait staat de class op html. */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
}

.lenis [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* De wrappers die SW-Retail om CMS-content zet lopen tot de rand open, zodat
   een sectie edge to edge kan. Alleen de wrappers die dit concept bevatten,
   niet de containers die binnen het concept zelf staan. */
body.c1a-page #content .container:has(.c1a),
body.c1a-page #content .row.cms_content:has(.c1a),
body.c1a-page #content [class*="col-"]:has(.c1a),
body.c1a-page .c1a-unwrap {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* 3. GENERIEK -------------------------------------------------------------- */

.c1a {
    color: var(--c1a-ink);
    font-family: var(--c1a-text);
    font-size: 15px;
    line-height: 1.55;
}

/* style.css zet #content a op goud met een onderstreping, en dat weegt
   zwaarder dan een losse class. Daarom hier met dezelfde id erbij. */
.c1a a,
#content .c1a a {
    color: inherit;
    text-decoration: none;
}

/* style.css geeft h1, h2 en h3 een vaste donkere kleur. Op de donkere
   panelen van dit concept moeten ze de kleur van hun omgeving volgen. */
.c1a h1,
.c1a h2,
.c1a h3 {
    margin: 0;
    color: inherit;
}

.c1a p {
    margin: 0;
}

.c1a img {
    max-width: 100%;
}

/* 4. TYPOGRAFIE ------------------------------------------------------------ */

.c1a-eyebrow {
    font: italic 500 20px/1.3 var(--c1a-accent);
}

.c1a-eyebrow--coral {
    color: var(--c1a-coral);
}

.c1a-eyebrow--cream {
    color: var(--c1a-cream);
}

.c1a-eyebrow--petrol {
    color: var(--c1a-petrol);
}

.c1a-eyebrow--magenta {
    color: var(--c1a-magenta);
}

.c1a-sectionhead__title {
    font: 700 34px/1 var(--c1a-display);
    text-transform: uppercase;
}

.c1a-sectionhead__link {
    font: 500 13px/1 var(--c1a-text);
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid;
    white-space: nowrap;
}

/* 5. KNOPPEN ---------------------------------------------------------------
   Bootstrap-knoppen, omgekleurd met de tokens van het concept.
   ------------------------------------------------------------------------- */

.c1a .btn {
    padding: 14px 22px;
    font: 600 13px/1 var(--c1a-text);
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 0;
}

#content .c1a .btn-light {
    background: var(--c1a-cream);
    border-color: var(--c1a-cream);
    color: var(--c1a-plum);
}

#content .c1a .btn-warning {
    background: var(--c1a-coral);
    border-color: var(--c1a-coral);
    color: var(--c1a-plum);
}

#content .c1a .btn-outline-light {
    border-color: var(--c1a-rose);
    color: var(--c1a-rose);
}

#content .c1a .btn-outline-warning {
    border-color: var(--c1a-coral);
    color: var(--c1a-coral);
}

.c1a .btn:hover {
    opacity: .85;
}

/* 6. HEADER ---------------------------------------------------------------- */

.c1a-promo {
    background: var(--c1a-plum);
    color: var(--c1a-rose);
    text-align: center;
    padding: 7px 16px;
    font: 500 11px/1.2 var(--c1a-text);
}

.c1a-header {
    background: var(--c1a-bg);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.c1a-header__bar {
    min-height: 64px;
}

.c1a-nav {
    font: 500 13px/1 var(--c1a-text);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.c1a-nav a + a {
    margin-left: 28px;
}

.c1a-nav--right a + a {
    margin-left: 18px;
}

.c1a-nav a:hover {
    color: var(--c1a-magenta);
}

/* Het logo in zijn eigen kleuren, net als in de footer. */
.c1a-logo {
    height: 40px;
    width: auto;
}

.c1a-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: 0;
}

.c1a-burger span {
    display: block;
    height: 2px;
    background: var(--c1a-ink);
}

.c1a-drawer a {
    display: block;
    padding: 14px 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
    font: 500 14px/1 var(--c1a-text);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* 7. HERO ------------------------------------------------------------------ */

/* Vaste hoogte, anders bepaalt de foto zelf hoe hoog de hero wordt en loopt
   het paneel ernaast mee. Met een vaste hoogte kan de foto vullend snijden. */
.c1a-hero__media {
    height: 840px;
    overflow: hidden;
    background: var(--c1a-sand);
}

.c1a-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 40%;
}

.c1a .c1a-hero__panel {
    background: var(--c1a-plum);
    color: var(--c1a-cream);
    padding: 56px;
}

.c1a-hero__title {
    font: 900 72px/.92 var(--c1a-display);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.c1a-hero__text {
    font: 400 15px/1.55 var(--c1a-text);
    max-width: 400px;
    color: var(--c1a-rose);
}

.c1a-status {
    font: 500 13px/1 var(--c1a-text);
    color: var(--c1a-rose);
}

.c1a-status__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--c1a-muted);
}

.c1a-status.is-open .c1a-status__dot {
    background: var(--c1a-open);
}

.c1a-status.is-closed .c1a-status__dot {
    background: var(--c1a-closed);
}

/* 8. VERDIEPINGEN ---------------------------------------------------------- */

.c1a-floor {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 640px;
    padding: 40px;
    overflow: hidden;
    background: var(--c1a-sand);
}

.c1a-floor__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.c1a-floor__scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(20, 10, 20, .8));
}

.c1a-floor__scrim--green {
    background: linear-gradient(180deg, transparent 35%, rgba(10, 20, 15, .8));
}

.c1a-floor__body {
    position: relative;
    color: var(--c1a-cream);
}

.c1a-floor__title {
    font: 900 96px/.9 var(--c1a-display);
    text-transform: uppercase;
}

.c1a-floor__text {
    font: 400 14px/1.5 var(--c1a-text);
    color: var(--c1a-sand);
    max-width: 340px;
}

/* 9. PRODUCTEN -------------------------------------------------------------
   De kaarten komen uit article_list_small.ctp van het thema, dus de markup
   ligt vast. Hieronder alleen de opmaak van het concept eroverheen: merk
   boven de naam, geen USP-regel, vaste beeldverhouding.
   ------------------------------------------------------------------------- */

.c1a .article-list.mini {
    gap: 20px;
}

.c1a .article_item {
    cursor: pointer;
}

.c1a .article_content_list {
    padding: 0;
}

/* Het thema geeft .article_image_list per breakpoint een vaste hoogte.
   Die moet uit, anders wint hij van de beeldverhouding hieronder. */
.c1a .article_image_list {
    height: auto;
    padding-bottom: 133%;
    background-size: cover;
    background-position: center;
    border: 0;
    margin-bottom: 0;
}

.c1a .article_header {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.c1a .article_header .brand_name {
    order: -1;
    font: 500 11px/1.2 var(--c1a-text);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c1a-muted);
    margin-bottom: 4px;
}

.c1a .article_header p {
    font: 500 14px/1.3 var(--c1a-text);
    margin: 0;
}

.c1a .article_header p b {
    font-weight: 500;
}

.c1a .usp-article {
    display: none;
}

.c1a .article-price h3 {
    font: 400 14px/1.3 var(--c1a-text);
    margin: 4px 0 0;
    color: var(--c1a-ink);
}

/* Het beeldvlak als een rustig kader. De foto's staan zelf vaak op wit, dus
   het kader is bijna wit en niet zandkleurig: anders krijg je een wit vierkant
   in een zandkleurige rand. */
.c1a .article_image_list_container {
    overflow: hidden;
    background: #fff;
}

.c1a .article_image_list {
    transition: transform .4s ease;
}

.c1a .article_item:hover .article_image_list {
    transform: scale(1.03);
}

.c1a .article_item:hover .article_header p {
    color: var(--c1a-magenta);
}

/* Een artikel zonder foto rendert als background-image: url(/image/). Dat
   krijgt dezelfde gestreepte plaatshouder als de teamfoto's, zodat het leest
   als "komt nog" in plaats van als een gat. !important is hier nodig omdat
   article_list_small.ctp de achtergrond als inline style meegeeft, en inline
   wint van een stylesheet. */
.c1a .article_image_list[style*="url(/image/)"] {
    background-image: repeating-linear-gradient(135deg, var(--c1a-sand) 0 8px, var(--c1a-sand-dark) 8px 16px) !important;
    background-size: auto !important;
}

/* 9b. BADGES ---------------------------------------------------------------
   Het thema zet ze in petrol met wit. Hier in de kleuren van het concept.
   ------------------------------------------------------------------------- */

.c1a .badges-article {
    top: 12px;
    left: 12px;
    gap: 6px;
}

.c1a .article-item-overlayer {
    background: var(--c1a-plum);
    color: var(--c1a-cream);
    font: 600 10px/1 var(--c1a-text);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 9px;
    border-radius: 0;
}

.c1a .sale_badge {
    background: var(--c1a-magenta);
    color: #fff;
}

.c1a .sustainable-icon {
    background: var(--c1a-cream);
    height: 22px;
    padding: 3px 5px;
}

/* 9c. OVER ONS -------------------------------------------------------------
   De pagina Over ons hergebruikt de panelen van de hero. Hier alleen wat
   daar niet in zit.
   ------------------------------------------------------------------------- */

.c1a-intro__media {
    height: 620px;
    overflow: hidden;
    background: var(--c1a-sand);
}

.c1a-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c1a-intro__title {
    font: 900 56px/.95 var(--c1a-display);
    text-transform: uppercase;
}

/* de twee werelden */
.c1a-wereld__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--c1a-sand);
}

.c1a-wereld__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.c1a-wereld__media:hover img {
    transform: scale(1.03);
}

.c1a-wereld__title {
    font: 700 40px/1 var(--c1a-display);
    text-transform: uppercase;
}

.c1a-wereld__text {
    font: 400 15px/1.6 var(--c1a-text);
    color: var(--c1a-body);
    max-width: 46ch;
}

.c1a-wereld__merken {
    font: 500 12px/1.6 var(--c1a-text);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c1a-muted);
}

/* Het team op Over ons: portretten over de volle hoogte in plaats van
   pasfoto's, want het zijn outfitbeelden. */
.c1a-portret {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--c1a-sand);
}

.c1a-portret img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.c1a-portret:hover img {
    transform: scale(1.03);
}

.c1a-team__col .c1a-member__name {
    font-size: 19px;
}

.c1a-team__col .c1a-member__role {
    font-size: 13px;
}

/* De merkenwand. Eigen markup via het blok hype_c1a_merken, want het blok
   van het thema zit vast aan een andere opmaak. Witte tegel, logo erin met
   lucht eromheen, naam eronder. */
.c1a-merkenwand {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.c1a-merk {
    display: block;
    text-align: center;
}

.c1a-merk__tegel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    padding: 16px;
    background: #fff;
}

.c1a-merk__tegel img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    /* het witte vlak van de jpeg valt zo weg tegen de tegel */
    mix-blend-mode: multiply;
    transition: transform .3s ease;
}

.c1a-merk:hover .c1a-merk__tegel img {
    transform: scale(1.05);
}

.c1a-merk__naam {
    display: block;
    margin-top: 8px;
    font: 500 11px/1.4 var(--c1a-text);
    letter-spacing: .04em;
    color: var(--c1a-muted);
}

.c1a-afsluiter {
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.c1a-afsluiter__tekst {
    font: 400 16px/1.7 var(--c1a-text);
    color: var(--c1a-body);
    max-width: 52ch;
}

/* 9d. CONTACT --------------------------------------------------------------
   De kaarten met de drie manieren, en het formulier dat SW-Retail levert.
   Dat formulier is geen <form> maar een div met inputs die automatisch
   .form-control krijgen, en een knop met .sw-form-submit. De opmaak van het
   thema daarvoor heeft een schaduw en vette letters; hier plat en rustig.
   ------------------------------------------------------------------------- */

.c1a-kaart {
    background: #fff;
    padding: 28px;
}

.c1a-kaart__tekst {
    font: 400 16px/1.7 var(--c1a-text);
    color: var(--c1a-ink);
    margin-bottom: 12px;
}

.c1a-kaart__tekst a {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.c1a-kaart__tekst--klein {
    font-size: 14px;
    color: var(--c1a-muted);
}

/* het formulier.
   De labels zijn kale tekst tussen de tags, geen <label>, dus die krijgen
   hun opmaak van de container. De velden moeten met element en al worden
   aangesproken: het thema richt zich op input[type=text].form-control, en
   dat weegt zwaarder dan een losse class. Zonder dat blijft de schaduw van
   20px staan en lopen de drie velden visueel in elkaar over. */
.c1a-formulier {
    font: 500 12px/1.4 var(--c1a-text);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c1a-muted);
}

/* Het thema zet .col-12 op padding 0, en die class staat ook op deze
   kolommen. Daardoor raken de drie velden elkaar en verdubbelen de randen. */
.c1a-formulier .row {
    margin-left: -8px;
    margin-right: -8px;
}

.c1a-formulier .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

.c1a-formulier input.form-control,
.c1a-formulier select.form-control,
.c1a-formulier textarea.form-control {
    display: block;
    width: 100%;
    font: 400 15px/1.5 var(--c1a-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--c1a-ink);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 0;
    box-shadow: none;
    padding: 12px 14px;
    margin-top: 6px;
}

.c1a-formulier input.form-control:focus,
.c1a-formulier textarea.form-control:focus {
    border-color: var(--c1a-plum);
    box-shadow: none;
    outline: none;
}

.c1a-formulier textarea.form-control {
    height: 170px;
}

.c1a-formulier .sw-form-submit {
    margin-top: 16px;
    padding: 14px 26px;
    font: 600 13px/1 var(--c1a-text);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c1a-plum);
    background: var(--c1a-coral);
    border: 0;
}

.c1a-formulier .sw-form-submit:hover {
    opacity: .85;
}

/* 10. INSTAGRAM ------------------------------------------------------------ */

.c1a-social {
    background: var(--c1a-dark);
    color: var(--c1a-cream);
    padding-bottom: 56px;
}

.c1a-social .c1a-sectionhead__title {
    color: var(--c1a-cream);
}

.c1a-social__handles a {
    font: 500 13px/1 var(--c1a-text);
    color: var(--c1a-coral);
    white-space: nowrap;
}

.c1a-social__handles a + a {
    margin-left: 10px;
}

/* De instafeed-plugin rendert per item een <a> met daarin een div die de foto
   als achtergrond krijgt. Het aantal kolommen zet de plugin zelf met
   !important, dus hier alleen de ruimte ertussen en de beeldverhouding. */
.c1a-social #instafeed {
    display: grid;
    gap: 8px;
}

.c1a-social #instafeed > a {
    display: block;
}

.c1a-social #instafeed div {
    padding-bottom: 100%;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, .06);
}

/* 11. DE WINKEL ------------------------------------------------------------ */

.c1a-store__media {
    height: 760px;
    overflow: hidden;
    background: var(--c1a-sand);
}

.c1a-store__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c1a .c1a-store__panel {
    padding: 56px;
}

.c1a-store__title {
    font: 900 60px/.95 var(--c1a-display);
    text-transform: uppercase;
}

.c1a-store__text {
    font: 400 15px/1.6 var(--c1a-text);
    color: var(--c1a-body);
    max-width: 420px;
}

.c1a-hours {
    margin: 0;
    font: 400 14px/1.5 var(--c1a-text);
    color: var(--c1a-body);
}

.c1a-hours dt {
    font-weight: 600;
    color: var(--c1a-ink);
}

.c1a-hours dd {
    margin: 0;
}

.c1a-ps {
    padding: 24px;
    background: var(--c1a-plum);
    color: var(--c1a-cream);
}

.c1a-ps__title {
    font: 700 24px/1 var(--c1a-display);
    text-transform: uppercase;
}

.c1a-ps__text {
    font: 400 14px/1.5 var(--c1a-text);
    color: var(--c1a-rose);
}

/* 12. TEAM ----------------------------------------------------------------- */

.c1a-team {
    border-top: 1px solid rgba(0, 0, 0, .1);
}

/* Zonder foto blijft de gestreepte plaatshouder staan, met foto vult die het
   rondje. Zo hoeft er per teamlid niets aan de css te veranderen. */
.c1a-member__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: repeating-linear-gradient(135deg, var(--c1a-sand) 0 6px, var(--c1a-sand-dark) 6px 12px);
    flex: none;
    overflow: hidden;
}

.c1a-member__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c1a-member__name {
    display: block;
    font: 600 14px/1.3 var(--c1a-text);
}

.c1a-member__role {
    display: block;
    font: 400 12px/1.4 var(--c1a-text);
    color: var(--c1a-muted);
}

/* 13. FOOTER --------------------------------------------------------------- */

.c1a-footer {
    background: var(--c1a-plum);
    color: var(--c1a-rose);
    font: 400 14px/1.7 var(--c1a-text);
}

.c1a-footer a:hover {
    color: var(--c1a-coral);
}

.c1a-footer h3 {
    font: 700 22px/1 var(--c1a-display);
    text-transform: uppercase;
    color: var(--c1a-cream);
    margin-bottom: 14px;
}

.c1a-footer__col a {
    display: block;
}

.c1a-footer__logo {
    height: 50px;
    width: auto;
    margin-bottom: 20px;
}

.c1a-hours--footer {
    color: var(--c1a-rose);
}

.c1a-hours--footer dt {
    color: var(--c1a-cream);
}

.c1a-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    font: 400 12px/1.5 var(--c1a-text);
    color: rgba(233, 217, 222, .7);
}

.c1a-footer__pay img {
    height: 20px;
    width: auto;
    margin-left: 10px;
}

/* 15. MEDIA QUERIES -------------------------------------------------------- */

/* Wie beweging heeft uitgezet in zijn systeem krijgt de pagina gewoon stil.
   !important is nodig om de transitions van AOS te overrulen. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .c1a .article_image_list,
    .c1a .btn {
        transition: none !important;
    }
}

/* Breder dan de 1140 van Bootstrap, zoals het ontwerp het heeft: daar begint
   de tekst op 160px van de rand bij een scherm van 1920. Alleen vanaf 1200px,
   daaronder houdt Bootstrap zijn eigen maten. */
@media (min-width: 1200px) {
    .c1a .container {
        max-width: 1620px;
    }
}

/* De schetsen uit het ontwerp: plantentekeningen die terugslaan op de
   planten in de winkel zelf. Kleur en dekking zitten in de svg, 5 tot 7
   procent, dus ze blijven ver onder de leesbaarheid van de tekst.

   Drie regels waar ik me aan hou: nooit achter foto's, productkaarten of de
   merkenwand, want daar worden het vlekken tussen de witte tegels. Altijd
   groot en over de rand heen, zodat het textuur is en geen illustratie. En
   maximaal twee per pagina, anders wordt het behang.

   Alleen vanaf 992px: op een smal scherm staat zo'n tekening toch achter een
   tekstkolom, en dan haalt de bezoeker 50 kB op voor een veeg. */
@media (min-width: 992px) {
    .c1a--home .c1a-team,
    .c1a--home .c1a-store__panel,
    .c1a--contact .c1a-bereiken,
    .c1a--over-ons .c1a-werelden,
    .c1a--over-ons .c1a-afsluiter {
        background-repeat: no-repeat;
    }

    .c1a--home .c1a-team {
        background-image: url("../img/concept-1a/schets/schets-a.svg");
        background-position: left -240px bottom -160px;
        background-size: 760px auto;
    }

    /* In de hero een lichte variant, want het paneel is donker pruim en een
       bruine tekening op 5 procent zie je daar niet. Creme op 10 procent,
       alleen in de hero van de homepage: de andere panelen met dezelfde
       class, op Over ons, blijven leeg. */
    .c1a--home .c1a-hero__panel {
        background-image: url("../img/concept-1a/schets/schets-d-licht-135.svg");
        background-repeat: no-repeat;
        background-position: right -300px bottom -340px;
        background-size: 1020px auto;
    }

    .c1a--home .c1a-store__panel {
        background-image: url("../img/concept-1a/schets/schets-c.svg");
        background-position: right -300px top -120px;
        background-size: 820px auto;
    }

    .c1a--contact .c1a-bereiken {
        background-image: url("../img/concept-1a/schets/schets-c.svg");
        background-position: right -280px bottom -200px;
        background-size: 760px auto;
    }

    .c1a--over-ons .c1a-werelden {
        background-image: url("../img/concept-1a/schets/schets-e.svg");
        background-position: right -260px top -180px;
        background-size: 700px auto;
    }

    .c1a--over-ons .c1a-afsluiter {
        background-image: url("../img/concept-1a/schets/schets-b.svg");
        background-position: left -220px center;
        background-size: 640px auto;
    }
}

/* Vijf teamleden naast elkaar. Bootstrap heeft geen vijfde deel, dus hier
   met de hand, in dezelfde vorm als een Bootstrap-kolom. */
@media (min-width: 992px) {
    .c1a .c1a-team__col {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (max-width: 1199px) {
    .c1a-hero__media {
        height: 680px;
    }

    .c1a-intro__media {
        height: 560px;
    }

    .c1a-merkenwand {
        grid-template-columns: repeat(4, 1fr);
    }

    .c1a-intro__title {
        font-size: 44px;
    }

    .c1a-store__media {
        height: 640px;
    }

    .c1a-hero__title {
        font-size: 56px;
    }

    .c1a-floor__title {
        font-size: 72px;
    }

    .c1a-store__title {
        font-size: 48px;
    }

    .c1a .c1a-hero__panel,
    .c1a .c1a-store__panel {
        padding: 40px;
    }
}

@media (max-width: 991px) {
    /* onder elkaar, dus de hoogte volgt de beeldverhouding */
    .c1a-hero__media,
    .c1a-store__media,
    .c1a-intro__media {
        height: auto;
    }

    .c1a-intro__media img {
        aspect-ratio: 4 / 3;
    }

    .c1a-hero__media img {
        aspect-ratio: 1;
    }

    .c1a-store__media img {
        aspect-ratio: 4 / 3;
    }

    .c1a-floor {
        min-height: 420px;
    }

}

@media (max-width: 767px) {
    .c1a-logo {
        height: 34px;
    }

    .c1a .c1a-hero__panel {
        padding: 28px 20px 32px;
    }

    .c1a-hero__title {
        font-size: 44px;
    }

    .c1a-hero__text {
        font-size: 14px;
        max-width: none;
    }

    .c1a .btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 16px;
    }

    .c1a-floor {
        padding: 24px 20px;
    }

    .c1a-floor__title {
        font-size: 72px;
    }

    .c1a-sectionhead__title {
        font-size: 28px;
    }

    .c1a .c1a-store__panel {
        padding: 32px 20px 40px;
    }

    .c1a-store__title {
        font-size: 44px;
    }

    .c1a-intro__title {
        font-size: 36px;
    }

    .c1a-wereld__title {
        font-size: 32px;
    }

    .c1a-merkenwand {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .c1a-merk__tegel {
        height: 84px;
        padding: 12px;
    }

    .c1a-store__text {
        max-width: none;
    }

    .c1a-ps {
        padding: 20px;
    }

    .c1a-social #instafeed {
        gap: 6px;
    }
}