/* ============================================================
   HUISSTIJL GEMEENTE AMSTERDAM (tenant "ams")
   Alleen kleuren, lettertype, koppen en hoeken; de opbouw van de
   pagina's en blokken blijft gelijk aan het ontwerp.
   Kleuren komen uit het Amsterdam Design System (amsterdam.nl):
     interactief blauw  #004699  (hover #003677)
     logo-rood          #EC0000
     tekst              #181818  /  secundair #767676
     scheidingslijn     #D1D1D1
     groepskleuren      paars #A00078, magenta #E50082, oranje #FF9100,
                        geel #FFE600, lime #BED200, groen #00A03C, azuur #009DE6
   ============================================================ */

/* Lettertype Amsterdam Sans
   Eigendom van de gemeente Amsterdam; More Than Gifts heeft toestemming
   om het in deze webshop voor de gemeente te gebruiken (oktober 2026).
   Niet gebruiken voor andere klanten. Bestanden: huisstijl/fonts/ */
@font-face { font-family: "Amsterdam Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/AmsterdamSans-Light.woff2") format("woff2"); }
@font-face { font-family: "Amsterdam Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/AmsterdamSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Amsterdam Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/AmsterdamSans-Italic.woff2") format("woff2"); }
@font-face { font-family: "Amsterdam Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/AmsterdamSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "Amsterdam Sans"; font-weight: 700; font-style: italic; font-display: swap; src: url("fonts/AmsterdamSans-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Amsterdam Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/AmsterdamSans-ExtraBold.woff2") format("woff2"); }

[data-tenant="ams"] {
  /* merkladder (lichte tinten, achtergrondtint) op het Amsterdamse blauw */
  --brand-h: 258; --brand-c: 0.15;
  /* rechte hoeken, zoals op amsterdam.nl */
  --radius-scale: 0;
  --font-brand: "Amsterdam Sans", Arial, sans-serif;
  --font-ui: "Amsterdam Sans", Arial, sans-serif;

  --ams-blauw: #004699; --ams-blauw-hover: #003677; --ams-rood: #EC0000;
  --ams-paars: #A00078; --ams-magenta: #E50082; --ams-oranje: #FF9100;
  --ams-geel: #FFE600; --ams-lime: #BED200; --ams-groen: #00A03C; --ams-azuur: #009DE6;

  --action: var(--ams-blauw); --action-hi: var(--ams-blauw-hover); --action-on: #FFFFFF;
  --brand-text: var(--ams-blauw);
  --deep: var(--ams-blauw);
  --focus: #181818;

  /* neutraal grijs in plaats van warm papier */
  --ink: #181818; --ink-2: #3F3F3F; --ink-3: #666666;   /* #666 i.p.v. #767676: ook op grijze vlakken voldoende contrast (WCAG AA) */
  --paper-2: #F3F3F3; --paper-3: #E6E6E6; --line: #D1D1D1;

  /* de "goudfolie" van het ontwerp wordt Amsterdams blauw: rustig wit met blauw, geen geel (feedback 22-10) */
  --gold-1: #003677; --gold-2: var(--ams-blauw); --gold-3: var(--ams-blauw-hover); --gold-4: #E5EEF8; --gold-ink: #FFFFFF;
  /* ook de signaalkleuren voor "op voorraad" en "aftellen" in blauw */
  --ok: var(--ams-blauw); --warn: var(--ams-blauw);
}

/* goudfolie-tekst (saldo, "ster" in de kop) wordt effen Amsterdams rood: geel is op wit onleesbaar */
[data-tenant="ams"] .foil { background-image: none; color: var(--ams-rood); }
[data-tenant="ams"] .quote__mark { color: var(--ams-rood); }
[data-tenant="ams"] :is(.stars, .rstarbtns button[aria-pressed="true"], .rstarbtns button.on) { color: var(--ams-blauw); }

/* koppen: Amsterdam Sans extra vet, zonder de krappe letterafstand van het ontwerp */
[data-tenant="ams"] :is(h1, h2, h3, h4) { font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
[data-tenant="ams"] :is(.logo__txt, .bal__n, .impact b, .fcard--count .big) { letter-spacing: -0.01em; }

/* logo-blok in het Amsterdamse rood, zoals het embleem */
[data-tenant="ams"] .logo__mark { background: var(--ams-rood); }

/* labels op productkaarten: allemaal Amsterdams blauw; alleen "uitverkocht" in rood */
[data-tenant="ams"] .lb2 { background: var(--ams-blauw); color: #fff; }
[data-tenant="ams"] .lb2[data-t="out"] { background: var(--ams-rood); color: #fff; }

/* cadeaulabel in de hero: zonder gaatje en touwtje aan de bovenkant */
[data-tenant="ams"] .hero__art::before, [data-tenant="ams"] .hero__art::after { display: none; }

/* keuzetegels ("Waar wil je kijken?"): iconen zonder blokje erachter, links uitgelijnd met de tekst */
[data-tenant="ams"] .tile__ico { background: none !important; width: auto; place-items: center start; }
[data-tenant="ams"] .tile__ico svg { width: 26px; height: 26px; }

/* ---------- Sober (aanbesteding K-3) ---------- */
/* Drie Amsterdamse kruisjes die naar beneden vallen, in plaats van confetti */
.kp-kruisjes { position: fixed; inset: 0; z-index: 88; pointer-events: none; overflow: hidden; }
.kp-kruisjes span {
  position: absolute; top: -90px; display: grid; gap: 3px; color: var(--ams-rood, #EC0000);
  transform: scale(var(--s, 1)); animation: kp-kruisval linear forwards;
}
.kp-kruisjes svg { display: block; }
@keyframes kp-kruisval { 0% { translate: 0 0; opacity: 1; } 85% { opacity: 1; } 100% { translate: 0 calc(100vh + 120px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kp-kruisjes { display: none; } }

/* Rustige inlogpagina: geen overbodige onderdelen */
[data-tenant="ams"] .login .checkrow { display: none; }
[data-tenant="ams"] .login__form { gap: 1rem; }
[data-tenant="ams"] .login__form .field .hint { font-size: var(--s-2); }

/* ---------- Rustig: wit met blauw, rood als accent, geen blokjes in blokjes (feedback 22-10) ---------- */
/* Klantenservice aan de zijkant: het rode accent */
[data-tenant="ams"] .helpdesk { background: var(--ams-rood); color: #fff; box-shadow: none; }
[data-tenant="ams"] .helpdesk:hover { background: #c40000; }
/* kaartenmaker en aftellen: lichtblauw en blauw in plaats van geel en bruin */
[data-tenant="ams"] .kk__ster { background: var(--brand-surf, #E5EEF8); color: var(--ams-blauw); }
[data-tenant="ams"] .rimg { color: var(--ams-blauw); }
[data-tenant="ams"] .ecotag, [data-tenant="ams"] .rcard .ecotag { background: var(--ams-blauw); color: #fff; }

/* productkaart: geen gaatje bovenaan, geen apart fotovlak, hartje zonder vakje */
[data-tenant="ams"] .card::before { display: none; }
[data-tenant="ams"] .card__media { background: transparent; margin-top: 0; }
[data-tenant="ams"] .card__fav { background: transparent; box-shadow: none; border-color: transparent; }
[data-tenant="ams"] .card__fav:hover { background: transparent; border-color: transparent; color: var(--ams-blauw); }
[data-tenant="ams"] .card__fav:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }

/* productpagina: geen grijze vlakken; "Toon meer" vervaagt naar wit */
[data-tenant="ams"] .pdpbox .clamp[data-open="0"]::after { background: linear-gradient(to top, var(--paper, #fff), transparent); }
[data-tenant="ams"] .pdpbox .speclist .specrow { background: transparent !important; }
[data-tenant="ams"] .revown, [data-tenant="ams"] .revsect .revown { background: transparent; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0; padding-inline: 0; }

/* webshop-zijbalk: categorie-icoontjes en subcategorieën zonder eigen vlak */
[data-tenant="ams"] .ctree__kids { background: transparent; }
[data-tenant="ams"] .crow__ico, [data-tenant="ams"] .ctree .crow__ico--img { background: transparent; }

/* startpagina: minder witruimte tussen de secties dan het ontwerp (dat had tot 2 × 120 px), maar niet krap: tot 2 × 72 px */
[data-tenant="ams"] #app .skin[id^="sec-"] > .wrap.sect { padding-block: clamp(2.25rem, 4.5vw, 4.5rem); }
[data-tenant="ams"] #app .skin[id^="sec-"] + .skin[id^="sec-"] > .wrap.sect { padding-top: clamp(2.25rem, 4.5vw, 4.5rem); }
/* productfoto's zonder kader (alleen bij toetsenbordbediening een focusrand) en labels zonder schaduw */
[data-tenant="ams"] .shot { outline: none; box-shadow: none; }
[data-tenant="ams"] .shot:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[data-tenant="ams"] .lb2 { box-shadow: none; }
/* productkaarten zonder stippellijn boven de prijs */
[data-tenant="ams"] .card__foot, [data-tenant="ams"] .feat .card__foot { border-top: 0; padding-top: .35rem; }
/* winkelwagenknop op de productkaart: alleen het icoon, zonder vakje */
[data-tenant="ams"] .card__add, [data-tenant="ams"] .card__add--off { border-color: transparent; background: transparent; box-shadow: none; color: var(--ams-blauw); }
[data-tenant="ams"] .card__add:hover { border-color: transparent; background: transparent; color: var(--ams-blauw-hover); transform: scale(1.12); }
[data-tenant="ams"] .card__add--off { color: var(--ink-3); }
[data-tenant="ams"] .card__add svg { width: 22px; height: 22px; }

/* ---------- Startpagina "Waar wil je kijken?": drie hele lichte tinten blauw, geen verloop, geen schaduw ---------- */
[data-tenant="ams"] {
  --ams-tint-a: #F2F6FB;   /* lichtst */
  --ams-tint-b: #E8EFF8;
  --ams-tint-c: #DCE7F5;   /* "Alle cadeaus" */
}
[data-tenant="ams"] .bento .tile { background: var(--ams-tint-a); background-image: none; color: var(--ink); box-shadow: none; border: 0; }
[data-tenant="ams"] .bento .tile.tile--ams-b { background: var(--ams-tint-b); }
[data-tenant="ams"] .bento .tile.tile--ams-c { background: var(--ams-tint-c); }
[data-tenant="ams"] .bento .tile::before, [data-tenant="ams"] .bento .tile::after { display: none; }
[data-tenant="ams"] .bento .tile :is(h3, p, .eyebrow) { color: var(--ink); }
[data-tenant="ams"] .bento .tile p { color: var(--ink-2); max-width: 42ch; }
[data-tenant="ams"] .bento .tile .eyebrow { color: var(--ams-blauw); }
[data-tenant="ams"] .bento .tile .tile__go { color: var(--ams-blauw); }
[data-tenant="ams"] .bento .tile .tile__ico { background: transparent; color: var(--ams-blauw); box-shadow: none; padding: 0; width: auto; height: auto; }
[data-tenant="ams"] .bento .tile .tile__ico svg { width: 26px; height: 26px; }
[data-tenant="ams"] .bento .tile:hover { transform: translateY(-2px); box-shadow: none; outline: 2px solid var(--ams-blauw); outline-offset: -2px; }

/* ---------- De kaart: de Amsterdamse plaat met genummerde punten ---------- */
[data-tenant="ams"] .kp-hot { position: relative; aspect-ratio: 3 / 2; max-width: 1000px; background: var(--ams-tint-a); overflow: visible; }
[data-tenant="ams"] .kp-hot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
[data-tenant="ams"] .kp-hot .hot__p { z-index: 2; background: var(--ams-blauw); color: #fff; border-color: #fff; }
[data-tenant="ams"] .kp-hot .hot__c { z-index: 3; }
[data-tenant="ams"] .kp-kaart { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 1.5rem; align-items: start; }
[data-tenant="ams"] .kp-kaart .kp-hot { max-width: none; }
[data-tenant="ams"] .kp-hot__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (max-width: 900px) { [data-tenant="ams"] .kp-kaart { grid-template-columns: 1fr; } }
[data-tenant="ams"] .kp-hot__lijst a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .75rem 1rem; background: var(--ams-tint-a); color: var(--ink); text-decoration: none; }
[data-tenant="ams"] .kp-hot__lijst a:hover { background: var(--ams-tint-b); }
[data-tenant="ams"] .kp-hot__lijst a > span:nth-child(2) { display: grid; gap: .1rem; }
[data-tenant="ams"] .kp-hot__lijst a > span:nth-child(2) > span { font-size: var(--s-1); color: var(--ink-2); }
[data-tenant="ams"] .kp-hot__lijst svg { color: var(--ams-blauw); }

/* recept van de week (venster) */
.kp-recept { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; margin-top: .8rem; }
@media (max-width: 640px) { .kp-recept { grid-template-columns: minmax(0, 1fr); } }
.kp-recept h3 { font-size: var(--s0); margin-bottom: .4rem; }
.kp-recept ul, .kp-recept ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: var(--s-1); }

/* het Amsterdamse mysterie */
.kp-mysterie { display: grid; gap: .8rem; max-width: 760px; }
.kp-mysterie h2 { font-size: var(--s1); margin-top: .6rem; }
.kp-mysterie ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.kp-mysterie__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.kp-mysterie__antwoord { padding: 1rem; background: var(--ams-tint-a, #F2F6FB); }
.kp-mysterie__antwoord img { display: block; max-width: 100%; }
.kp-mysterie-rij { display: grid; grid-template-columns: minmax(0, 760px) minmax(260px, 340px); gap: 2rem; align-items: start; }
.kp-mysterie__zij { display: grid; gap: .9rem; padding: 1.5rem; background: var(--ams-tint-a, #F2F6FB); }
.kp-mysterie__zij h2 { font-size: var(--s1); margin: 0; }
.kp-mysterie__zij dl { margin: 0; display: grid; gap: .7rem; }
.kp-mysterie__zij dt { font-weight: 700; }
.kp-mysterie__zij dd { margin: 0; color: var(--ink-2); }
.kp-mysterie__tip { margin: 0; padding-top: .8rem; border-top: 1px solid var(--ams-tint-c, #DCE7F5); }
.kp-mysterie__zij .btn { justify-self: start; }
@media (max-width: 900px) { .kp-mysterie-rij { grid-template-columns: 1fr; } }
/* kaart: het gekozen punt is duidelijk anders dan de rest (niet alleen kleur: rood, groter, dikke rand) */
[data-tenant="ams"] .kp-hot .hot__p[aria-pressed="true"] { background: var(--ams-rood, #EC0000); border-color: #fff; box-shadow: 0 0 0 3px var(--ams-blauw), 0 4px 12px #0005; transform: translate(-50%, -50%) scale(1.15); }

/* duurzaamheidssectie zonder film: tekst over de hele breedte */
[data-tenant="ams"] .duo.kp-zonder-film { grid-template-columns: minmax(0, 1fr); }
[data-tenant="ams"] .duo.kp-zonder-film .dz { max-width: 72ch; }

/* Banner boven de webshop: alleen de tekening, helemaal zichtbaar (zelfde verhouding als het beeld, 2172×724) */
[data-tenant="ams"] .bnr--beeld .bnr__tx, [data-tenant="ams"] .bnr--beeld .bnr__scrim { display: none; }
[data-tenant="ams"] .bnr--beeld { aspect-ratio: 2172 / 724 !important; min-height: 0 !important; height: auto !important; }
[data-tenant="ams"] .bnr--beeld .bnr__img { position: absolute !important; inset: 0 !important; height: auto !important; min-height: 0 !important; }
[data-tenant="ams"] .bnr__img.kp-heeft-beeld .kp-beeld { object-position: center !important; }

/* Inlogpagina op telefoon: de brede banner, helemaal zichtbaar */
@media (max-width: 860px) {
  [data-tenant="ams"] .login__art--foto.kp-beeld--met-mobiel { height: auto !important; aspect-ratio: 2172 / 724; }
}

/* Duurzaamheidspagina */
[data-tenant="ams"] .kp-dz .step .kp-dz__kop { font-size: var(--s0); margin: 0 0 .3rem; line-height: 1.3; }
[data-tenant="ams"] .kp-dz .step p { margin: 0; }
[data-tenant="ams"] .kp-dz__labels { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: var(--s-1); line-height: 1.55; color: var(--ink-2); }
[data-tenant="ams"] .kp-dz__labels b { display: inline; }