/* =============================================================================
   Hinke. Trendstore — beweging.

   Eén laag voor de hele site, zodat alles in hetzelfde tempo en met dezelfde
   curve beweegt (tokens staan in main.css: --hinke-ease, --hinke-dur-*).

   UITGANGSPUNT: de site had al ±50 hover-toestanden die allemaal hárd omsprongen.
   Het grootste deel van dit bestand geeft die bestaande toestanden dus alleen een
   transition — de kleuren en maten blijven van de pagina-CSS. Daar bovenop komt
   een handvol eigen beweging: beelden die inzoomen, iconen die even opveren,
   knoppen die indrukken en blokken die bij het scrollen in beeld komen.

   OPBOUW
     1. Basis — links, knoppen, velden
     2. Beelden — productkaarten, categorieën, lookbook, media-blokken
     3. Iconen — header, socials, hartje, prullenbak, pijlen
     4. Panelen — menu, zoekpaneel, FAQ, tooltips
     5. In beeld komen bij scrollen (.hinke-reveal, gezet door hinke.js)
     6. Wie beweging uit heeft staan
     7. De meeschuivende header (.is-stuck, gezet door hinke.js)

   REGEL: nooit `transition: all` — dat animeert ook layout-eigenschappen en
   maakt het schokkerig. Alleen opacity, transform, color, background, border en
   box-shadow, want die draaien op de compositor of zijn goedkoop.

   BELANGRIJK: alles wat iets verbérgt (§5) hangt achter `html.hinke-motion`.
   Die class zet hinke.js pas als beweging gewenst én mogelijk is, zodat de
   inhoud zonder JS gewoon zichtbaar blijft.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Basis — links, knoppen, velden
   -------------------------------------------------------------------------- */

/* Tekstlinks: menu, footer, kruimelpad, inhoudsopgave, contact, team, socials. */
.hinke-nav__menu > li > a,
.hinke-nav__menu .sub-menu a,
.hinke-footer__links a,
.hinke-footer__shop-link,
.hinke-crumb a,
.hinke-toc__list a,
.hinke-contact__rij a,
.hinke-team__links a,
.hinke-lookbook__social-link,
.hinke-cart__name a,
.woocommerce-checkout .hinke-co-coupon__toggle,
.woocommerce-checkout .hinke-co-login__link,
.woocommerce-checkout .hinke-co-terms__link,
.woocommerce-cart a.hinke-cart__continue,
.woocommerce-account .hinke-page__body .hinke-accnav__link {
	transition: color var(--hinke-dur-snel) var(--hinke-ease),
		opacity var(--hinke-dur-snel) var(--hinke-ease);
}

/* Knoppen: alle CTA's van de site, inclusief die van WooCommerce. */
.hinke-blkbtn,
.hinke-hero__cta,
.hinke-about__btn,
.hinke-404__cta,
.hinke-cats__btn,
.hinke-kaart__meer,
.hinke-newsletter__btn,
.hinke-promo__btn,
.hinke-contact__verzend,
.hinke-ty__cta,
.woocommerce .hinke-summary .single_add_to_cart_button,
.woocommerce .wc-proceed-to-checkout a.checkout-button.hinke-cart__checkout,
.woocommerce-checkout .woocommerce button.button.alt.hinke-co-submit,
.woocommerce-checkout .woocommerce button.button.hinke-co-coupon__apply,
.woocommerce-checkout .sellabees-cart-email__btn,
.woocommerce-account .hinke-page__body .hinke-btn,
.woocommerce-account .hinke-page__body .hinke-address__edit {
	transition: background-color var(--hinke-dur-snel) var(--hinke-ease),
		border-color var(--hinke-dur-snel) var(--hinke-ease),
		color var(--hinke-dur-snel) var(--hinke-ease),
		box-shadow var(--hinke-dur-snel) var(--hinke-ease),
		transform var(--hinke-dur-snel) var(--hinke-ease);
}

/* Indrukken: 1px meegeven. Genoeg om te voelen, te klein om op te vallen. */
.hinke-blkbtn:active,
.hinke-hero__cta:active,
.hinke-about__btn:active,
.hinke-404__cta:active,
.hinke-newsletter__btn:active,
.hinke-promo__btn:active,
.hinke-contact__verzend:active,
.hinke-ty__cta:active,
.woocommerce .hinke-summary .single_add_to_cart_button:active,
.woocommerce .wc-proceed-to-checkout a.checkout-button.hinke-cart__checkout:active,
.woocommerce-checkout .woocommerce button.button.alt.hinke-co-submit:active,
.woocommerce-checkout .woocommerce button.button.hinke-co-coupon__apply:active,
.woocommerce-checkout .sellabees-cart-email__btn:active {
	transform: translateY(1px);
}

/* Formuliervelden: het kader loopt zacht mee bij focus. */
.hinke-field,
.hinke-promo__field,
.hinke-newsletter__field,
.hinke-contact__form input,
.hinke-contact__form textarea,
.woocommerce-checkout .hinke-co-grid .form-row input.input-text,
.woocommerce-checkout .hinke-co-grid .form-row textarea,
.woocommerce-checkout .hinke-co-coupon__input,
.woocommerce-checkout .sellabees-cart-email__input,
/* De velden van de inlog-popup heten in de core `.sellabees-login__field`; hier
   stond `.hinke-auth__field` en die klasse bestaat nergens. */
.sellabees-login__field,
.sellabees-newsletter input {
	transition: border-color var(--hinke-dur-snel) var(--hinke-ease),
		box-shadow var(--hinke-dur-snel) var(--hinke-ease),
		background-color var(--hinke-dur-snel) var(--hinke-ease);
}

/* Maat- en kleurswatches op de productpagina + de maten op de productkaart. */
.hinke-swatch,
.hinke-card .sellabees-size,
.sellabees-wish-modal__opt {
	transition: border-color var(--hinke-dur-snel) var(--hinke-ease),
		background-color var(--hinke-dur-snel) var(--hinke-ease),
		color var(--hinke-dur-snel) var(--hinke-ease),
		box-shadow var(--hinke-dur-snel) var(--hinke-ease),
		transform var(--hinke-dur-snel) var(--hinke-ease);
}

/* ACHTER (hover: hover) — zie de toelichting bij §2. */
@media (hover: hover) {
	.hinke-swatch:not(.is-unavailable):hover,
	.sellabees-wish-modal__opt:hover {
		transform: scale(1.08);
	}
}

/* -----------------------------------------------------------------------------
   2. Beelden — kaarten, categorieën, lookbook, media

   Alle beeldhouders hebben al `overflow: hidden` (o.a. .hinke-card__media,
   .hinke-lookbook__item), dus een lichte zoom blijft binnen zijn kader. 1.05 is
   met opzet klein: bij fotografie van kleding is meer meteen goedkoop.
   -------------------------------------------------------------------------- */

/* LET OP — deze lijst stond deels op klassen die niet bestaan: `.hinke-kaart__media`
   en `.hinke-tm__media` komen in geen enkele template voor (nagemeten), dus de zoom
   op het kaartenblok deed nergens iets. De echte klasse is `.hinke-kaart__beeld`.
   Het beeld van tekst_media en het mediablok zitten NIET in een link en hebben dus
   geen hover-aangrijpingspunt; die staan hier daarom niet meer in. En de kaartfoto
   van Openingstijden (`.hinke-tm__kaartfoto`) mag juist NIET zoomen: dan schuift de
   locatiemarker van de winkel af. */
.hinke-card__media img,
.hinke-cats__card img,
.hinke-lookbook__item img,
.hinke-kaart__beeld,
.hinke-linkrij__card img {
	transition: transform var(--hinke-dur-traag) var(--hinke-ease);
}

/* Toetsenbordfocus staat BUITEN de hover-hek: die moet op elk apparaat werken,
   ook op een tablet met een toetsenbord eraan. */
.hinke-card__link:focus-visible .hinke-card__media img,
.hinke-cats__card:focus-within img,
.hinke-lookbook__item:focus-within img {
	transform: scale(1.05);
}

/*
 * De hover-zoom hangt achter `(hover: hover)`.
 *
 * WAAROM: op een touchscreen bestaat hover niet, maar de meeste mobiele browsers
 * laten `:hover` ná een tap wél staan — tot je iets anders aanraakt. Zonder dit
 * hek bleef een aangetikte kaart dus ingezoomd staan, en dat leest als een
 * vastgelopen pagina. Met het hek gebeurt er op touch niets en houdt de muis zijn
 * effect. Dezelfde reden geldt voor §1 (swatches) en §3 (iconen).
 */
@media (hover: hover) {
	.hinke-card__link:hover .hinke-card__media img,
	.hinke-cats__card:hover img,
	.hinke-lookbook__item:hover img,
	.hinke-kaart__link:hover .hinke-kaart__beeld,
	.hinke-linkrij__card:hover img {
		transform: scale(1.05);
	}
}

/* De titel van een productkaart kleurt mee naar het goud van de CTA's. */
.hinke-card__name,
.woocommerce .sellabees-shop__main ul.products li.product .woocommerce-loop-product__title {
	transition: color var(--hinke-dur-snel) var(--hinke-ease);
}

.hinke-card__link:focus-visible .hinke-card__name {
	color: var(--hinke-gold);
}

@media (hover: hover) {
	.hinke-card__link:hover .hinke-card__name,
	.woocommerce .sellabees-shop__main ul.products li.product:hover .woocommerce-loop-product__title {
		color: var(--hinke-gold);
	}
}

/*
 * Het winkelraster gebruikt niet .hinke-card maar het gewone WooCommerce-raster
 * (ul.products > li.product > a > img), en daar zit géén kader met overflow om
 * het beeld. De link krijgt die rol: er loopt normaal niets buiten die link, dus
 * dit clipt alleen de zoom. De sale-badge en het verlanglijst-hartje hangen aan
 * li.product (position: relative) en vallen daarmee buiten deze clip — die
 * blijven dus volledig zichtbaar.
 */
.woocommerce .sellabees-shop__main ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	overflow: hidden;
}

.woocommerce .sellabees-shop__main ul.products li.product a.woocommerce-loop-product__link img {
	transition: transform var(--hinke-dur-traag) var(--hinke-ease);
}

.woocommerce .sellabees-shop__main ul.products li.product:focus-within a.woocommerce-loop-product__link img {
	transform: scale(1.05);
}

@media (hover: hover) {
	.woocommerce .sellabees-shop__main ul.products li.product:hover a.woocommerce-loop-product__link img {
		transform: scale(1.05);
	}
}

/* -----------------------------------------------------------------------------
   3. Iconen — header, socials, hartje, prullenbak, carrouselpijlen
   -------------------------------------------------------------------------- */

.hinke-header__action,
.hinke-footer__social a,
.hinke-carousel__arrow,
.hinke-cart__remove a.remove,
.sellabees-wish-btn,
.hinke-tm__stip {
	transition: transform var(--hinke-dur-snel) var(--hinke-ease),
		opacity var(--hinke-dur-snel) var(--hinke-ease),
		color var(--hinke-dur-snel) var(--hinke-ease),
		background-color var(--hinke-dur-snel) var(--hinke-ease);
}

/*
 * Ook hier het hover-hek (zie §2). Bij deze groep was het effect op touch het
 * hinderlijkst: een aangetikt header-icoon of verlanglijst-hartje bleef op 1,12
 * staan en de prullenbak bleef een kwartslag gedraaid — precies bij de knoppen
 * die je op een telefoon het vaakst aanraakt.
 */
@media (hover: hover) {
	.hinke-header__action:hover,
	.hinke-footer__social a:hover,
	.hinke-carousel__arrow:hover,
	.sellabees-wish-btn:hover {
		transform: scale(1.12);
	}

	/* De schaal hoort op het BOLLETJE, niet op de marker.
	   De marker is het aanraakvlak van 44×44 met de tooltip erin: die opschalen
	   liet het gouden labeltje meegroeien, en het overschreef bovendien de
	   `translate` waarmee het bolletje op de winkel werd gecentreerd — het
	   bolletje sprong dan 5px van zijn plek en wees de winkel niet meer aan.
	   Het blok centreert nu met een negatieve marge, dus dit kan geen kwaad meer,
	   maar de schaal hoort inhoudelijk toch op de punt zelf. */
	.hinke-tm__marker:hover .hinke-tm__stip {
		transform: scale(1.12);
	}

	.hinke-cart__remove a.remove:hover {
		transform: rotate(90deg);
	}
}

/* Het verlanglijst-hartje veert één keer op zodra het aan gaat. De core zet
   .is-active op de knop na de AJAX-toggle, dus dit loopt gelijk met de server. */
.sellabees-wish-btn.is-active .sellabees-wish-btn__icon,
.sellabees-wish-btn.is-on .sellabees-wish-btn__icon {
	animation: hinke-pop var(--hinke-dur-mid) var(--hinke-ease);
}

@keyframes hinke-pop {
	0% { transform: scale(1); }
	45% { transform: scale(1.28); }
	100% { transform: scale(1); }
}

/* De winkelwagenteller in de header telt zichtbaar op. De teller komt uit de
   core-helper `sellabees_cart_count_html()` en heet daar `.sellabees-cart-count`;
   hier stond `.hinke-header__count` en die klasse bestaat nergens. */
.sellabees-cart-count {
	transition: transform var(--hinke-dur-mid) var(--hinke-ease),
		background-color var(--hinke-dur-snel) var(--hinke-ease);
}

/* -----------------------------------------------------------------------------
   4. Panelen — zoekpaneel, mobiel menu, submenu, FAQ, tooltip

   Deze elementen worden al door JS/CSS in- en uitgeklapt; hier komt alleen de
   overgang erbij. `visibility` schakelt op 0s aan het einde, zodat een gesloten
   paneel niet klikbaar blijft tijdens het uitfaden.
   -------------------------------------------------------------------------- */

/*
 * Submenu en tooltip klappen open met opacity + visibility (zie layout.css en
 * blocks/tekst_media.css), en dát is te animeren. `visibility` schakelt op 0s
 * aan het einde, zodat een gesloten paneel niet klikbaar blijft tijdens het
 * uitfaden.
 */
.hinke-nav__menu > li > .sub-menu,
.hinke-tm__tip {
	transition: opacity var(--hinke-dur-mid) var(--hinke-ease),
		transform var(--hinke-dur-mid) var(--hinke-ease),
		visibility 0s linear var(--hinke-dur-mid);
}

.hinke-nav__menu > li:hover > .sub-menu,
.hinke-nav__menu > li:focus-within > .sub-menu,
.hinke-tm__marker:hover .hinke-tm__tip,
.hinke-tm__marker:focus-visible .hinke-tm__tip {
	transition: opacity var(--hinke-dur-mid) var(--hinke-ease),
		transform var(--hinke-dur-mid) var(--hinke-ease),
		visibility 0s;
}

/*
 * Zoekpaneel — uitklappen onder de header.
 *
 * WAAROM DIT ANDERS MOET: dit paneel ging open door het `hidden`-attribuut weg te
 * halen, en `hidden` is `display: none`. Aan display valt niets te animeren, dus
 * klapte het paneel er hard in — hier stond eerder een regel op `.hinke-search`
 * met een class `.is-open` die nergens werd gezet, en die deed dus niets.
 *
 * Nu zet hinke.js (§2) `.is-open` op het paneel zélf, één frame nadat `hidden`
 * eraf gaat, en haalt hij `hidden` er bij het sluiten pas ná de overgang weer op.
 * Het paneel schuift daarmee open in hoogte (het duwt de pagina omlaag, dus dít
 * is de beweging die "uitklappen" leest) terwijl het formulier infadet.
 *
 * De max-hoogte is een plafond, geen maat: het paneel is 80px hoog (18px vulling
 * + veld 44 + 18). 160px vangt ook een tweede regel op als de tekst ooit langer
 * wordt — een hogere waarde maakt de beweging traag op het laatst, omdat de
 * overgang de vólle afstand naar het plafond verdeelt.
 *
 * De roze scheidingslijn hoort bij het paneel; die fadet mee, anders staat er
 * tijdens het openklappen een losse streep onder de header.
 */
.hinke-search-panel {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	border-top-color: transparent;
	transition: max-height var(--hinke-dur-mid) var(--hinke-ease),
		opacity var(--hinke-dur-snel) var(--hinke-ease),
		border-top-color var(--hinke-dur-mid) var(--hinke-ease);
}

.hinke-search-panel.is-open {
	max-height: 160px;
	opacity: 1;
	border-top-color: var(--hinke-pink);
}

/* Het veld komt nog 6px van boven mee, zodat het niet plat "verschijnt". */
.hinke-search-panel .hinke-search {
	transform: translateY(-6px);
	transition: transform var(--hinke-dur-mid) var(--hinke-ease);
}

.hinke-search-panel.is-open .hinke-search {
	transform: translateY(0);
}

/*
 * Mobiel menu — zelfde oorzaak: `.hinke-nav.is-open` schakelt alleen
 * `display: none` → `block`, en dat valt niet te animeren. Het menu is een
 * zwevend paneel (absoluut gepositioneerd, met schaduw), dus het duwt niets weg:
 * hier past een fade met een klein zetje van boven. Géén hoogte-animatie — die
 * zou vechten met de `max-height` waarmee een lang menu zelf kan scrollen
 * (layout.css §10c).
 *
 * Dit gaat OPZETTELIJK zonder JS: `transition-behavior: allow-discrete` houdt het
 * paneel tijdens het uitfaden in beeld en `@starting-style` levert de begintoestand
 * bij het openen. Zo blijft de openen/sluiten-logica van hinke.js (schermslot op
 * iOS, klik buiten het menu, opruimen bij draaien) volledig ongemoeid. Kent een
 * browser deze twee nog niet, dan klapt het menu open zoals voorheen — precies
 * het gedrag van nu, dus niets gaat kapot.
 */
@media (max-width: 1200px) {
	.hinke-nav {
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity var(--hinke-dur-snel) var(--hinke-ease),
			transform var(--hinke-dur-mid) var(--hinke-ease),
			display var(--hinke-dur-mid) allow-discrete;
	}

	.hinke-nav.is-open {
		opacity: 1;
		transform: translateY(0);
	}

	@starting-style {
		.hinke-nav.is-open {
			opacity: 0;
			transform: translateY(-8px);
		}
	}
}

/* -----------------------------------------------------------------------------
   Hamburger → kruis

   De vorm en de eindstanden staan in layout.css; hier alleen de overgang. De
   drie lijnen krijgen elk een kleine vertraging, zodat het kruis zich opbouwt in
   plaats van in één klap om te klappen: eerst schuift de korte middenlijn weg,
   dan draaien de buitenste twee naar elkaar toe. Bij sluiten loopt dat in
   omgekeerde volgorde, want dan gelden de vertragingen van de dichte staat.

   `transform-origin: center` is expliciet: de lijnen zijn 2px hoog en absoluut
   geplaatst, en zonder dit draait Chrome om het midden van de KNOP in plaats van
   om het midden van de lijn — dan zwiept het kruis scheef weg.
   -------------------------------------------------------------------------- */

.hinke-header__burger span {
	transform-origin: center;
	transition: transform var(--hinke-dur-mid) var(--hinke-ease),
		opacity var(--hinke-dur-snel) var(--hinke-ease);
}

/* Dicht: de buitenste lijnen draaien terug nádat de middenlijn weer in beeld is. */
.hinke-header__burger span:nth-child(1),
.hinke-header__burger span:nth-child(3) {
	transition-delay: 60ms;
}

.hinke-header__burger[aria-expanded="true"] span:nth-child(1),
.hinke-header__burger[aria-expanded="true"] span:nth-child(3) {
	transition-delay: 40ms;
}

.hinke-header__burger[aria-expanded="true"] span:nth-child(2) {
	transition-delay: 0s;
}

/* -----------------------------------------------------------------------------
   5. In beeld komen bij scrollen

   hinke.js zet `.hinke-reveal` op een vaste lijst blokken en `.is-in` zodra ze
   in beeld komen (IntersectionObserver). Rijen krijgen daarbij een index mee
   (--hinke-reveal-i), zodat kaarten na elkaar verschijnen in plaats van als één
   muur. De verschuiving is klein en altijd van onderaf: dat leest als "de pagina
   komt op gang", niet als een presentatie.
   -------------------------------------------------------------------------- */

html.hinke-motion .hinke-reveal {
	opacity: 0;
	transform: translate3d(0, var(--hinke-reveal-shift), 0);
	transition: opacity var(--hinke-dur-traag) var(--hinke-ease),
		transform var(--hinke-dur-traag) var(--hinke-ease);
	transition-delay: calc(var(--hinke-reveal-i, 0) * 80ms);
}

html.hinke-motion .hinke-reveal.is-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* -----------------------------------------------------------------------------
   6. Wie beweging uit heeft staan

   Geen transitions, geen keyframes, geen verschuiving — en vooral: de blokken
   uit §5 staan gewoon zichtbaar. hinke.js zet `html.hinke-motion` in dat geval
   niet, dit is het vangnet als de voorkeur ná het laden wordt omgezet.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html.hinke-motion .hinke-reveal,
	html.hinke-motion .hinke-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Zoekpaneel en mobiel menu staan er meteen, zonder uitklappen. De JS zet de
	   class nog steeds, dus openen en sluiten blijven werken. */
	.hinke-search-panel,
	.hinke-search-panel .hinke-search,
	.hinke-nav {
		transition: none;
	}

	/* De hamburger springt direct naar het kruis: de eindstand blijft (dat is
	   informatie — open of dicht), alleen het draaien en de vertragingen vervallen. */
	.hinke-header__burger span,
	.hinke-header__burger[aria-expanded="true"] span:nth-child(1),
	.hinke-header__burger[aria-expanded="true"] span:nth-child(2),
	.hinke-header__burger[aria-expanded="true"] span:nth-child(3) {
		transition: none;
		transition-delay: 0s;
	}

	.hinke-search-panel .hinke-search {
		transform: none;
	}

	.hinke-swatch:not(.is-unavailable):hover,
	.sellabees-wish-modal__opt:hover,
	.hinke-header__action:hover,
	.hinke-footer__social a:hover,
	.hinke-carousel__arrow:hover,
	.sellabees-wish-btn:hover,
	.hinke-tm__marker:hover .hinke-tm__stip,
	.hinke-cart__remove a.remove:hover,
	.hinke-card__link:hover .hinke-card__media img,
	.hinke-card__link:focus-visible .hinke-card__media img,
	.hinke-cats__card:hover img,
	.hinke-cats__card:focus-within img,
	.hinke-lookbook__item:hover img,
	.hinke-lookbook__item:focus-within img,
	.hinke-kaart__link:hover .hinke-kaart__beeld,
	.hinke-linkrij__card:hover img,
	.woocommerce .sellabees-shop__main ul.products li.product:hover a.woocommerce-loop-product__link img,
	.woocommerce .sellabees-shop__main ul.products li.product:focus-within a.woocommerce-loop-product__link img {
		transform: none;
	}

	.sellabees-wish-btn.is-active .sellabees-wish-btn__icon,
	.sellabees-wish-btn.is-on .sellabees-wish-btn__icon {
		animation: none;
	}

	/* De header schuift zonder overgang omhoog; hij blijft wél vastzitten. */
	.hinke-header {
		transition: none;
	}
}

/* -----------------------------------------------------------------------------
   7. De meeschuivende header

   De header staat vast bovenaan (layout.css). Zodra je voorbij de topbalk bent,
   zet hinke.js §9 `.is-stuck` en schuift die balk erboven weg, zodat alleen de
   witte balk met logo, menu en iconen overblijft — op een telefoon is dat het
   verschil tussen 150px en 110px die permanent van het scherm afgaat.

   Waarom een transform en geen inklappende hoogte: een sticky element houdt zijn
   plek in de pagina, dus zou het inklappen van de topbalk alle inhoud eronder 40px
   omhoog laten springen. Een transform verandert die hoogte niet.

   De hoogte van de topbalk komt uit een variabele die de JS opmeet: op smalle
   schermen wikkelt een lange USP en is die balk hoger dan de 40px uit het ontwerp.

   De schaduw doet het werk dat het ontwerp niet hoefde te regelen: zolang de
   header meescrollt ligt hij óp de inhoud, en wit-op-wit is dan geen grens.
   -------------------------------------------------------------------------- */

.hinke-header {
	transition: transform var(--hinke-dur-mid) var(--hinke-ease),
		box-shadow var(--hinke-dur-mid) var(--hinke-ease);
}

.hinke-header.is-stuck {
	transform: translateY(calc(-1 * var(--hinke-topbar-h, 40px)));
	box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}